/* variant-c · layout · generous whitespace + Swiss grid */

.site { display: flex; flex-direction: column; min-height: 100svh; }
.site-main { flex: 1 1 auto; }

.container       { width: 100%; max-width: var(--max);       margin-inline: auto; padding-inline: var(--pad-x); }
.container-wide  { width: 100%; max-width: var(--max-wide);  margin-inline: auto; padding-inline: var(--pad-x); }
.container-read  { width: 100%; max-width: var(--max-read);  margin-inline: auto; padding-inline: var(--pad-x); }

/* Sections — wide vertical rhythm, hairline-framed */
.section         { padding-block: var(--sec); }
.section--tight  { padding-block: var(--sec-tight); }
.section--tall   { padding-block: clamp(6rem, 12vw, 10rem); }

.section--alt    { background: var(--bg-alt); }
.section--sand   { background: var(--bg-sand); }
.section--tint   { background: var(--bg-accent-tint); }
.section--invert { background: var(--bg-invert); color: var(--text-invert); }
.section--invert :is(h1, h2, h3, h4, h5) { color: var(--text-invert); }
.section--invert .lead { color: var(--ink-200); }

.section--bordered {
  border-top: 1px solid var(--hairline);
}

/* Section header — signature hairline + accent stub */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sec-gap);
  align-items: end;
  padding-bottom: var(--s-10);
  margin-bottom: var(--s-16);
  position: relative;
}
.sec-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hairline);
}
.sec-head::before {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 48px;
  background: var(--accent);
  z-index: 1;
}
@media (max-width: 820px) {
  .sec-head { grid-template-columns: 1fr; gap: var(--s-6); }
}

.sec-head__title {
  font-size: var(--step-display);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-display);
  max-width: 18ch;
}

.sec-head__meta {
  color: var(--text-soft);
  font-size: var(--step-body-lg);
  max-width: 46ch;
  line-height: 1.5;
}

.sec-head__meta .link-arrow { margin-top: var(--s-4); display: inline-flex; }

/* Grids */
.grid          { display: grid; gap: var(--card-gap); }
.grid--2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4       { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

@media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Stacks */
.stack      { display: flex; flex-direction: column; }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-8 > * + * { margin-top: var(--s-8); }
.stack-12 > * + * { margin-top: var(--s-12); }
.stack-16 > * + * { margin-top: var(--s-16); }

.row         { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.row--tight  { gap: var(--s-2); }
.row--between{ justify-content: space-between; }
.row--center { justify-content: center; }

/* Split (editorial two-col) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sec-gap);
  align-items: start;
}
.split--reverse > :first-child { order: 2; }
.split--offset  { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.split--editor  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 940px) {
  .split, .split--offset, .split--editor { grid-template-columns: 1fr; gap: var(--s-8); }
  .split--reverse > :first-child { order: 0; }
}

/* Prose (for course-detail long-form) */
.prose { max-width: 76ch; color: var(--text); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font-size: var(--step-h2); margin-top: var(--s-16); font-weight: 700; letter-spacing: var(--tr-tight); }
.prose h3 { font-size: var(--step-h3); margin-top: var(--s-10); font-weight: 600; }
.prose p  { font-size: var(--step-body-lg); line-height: var(--lh-body); }
.prose ul, .prose ol { padding-left: 1.2em; list-style: disc; }
.prose li { font-size: var(--step-body-lg); line-height: 1.55; padding-left: 0.2em; margin-top: var(--s-2); }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 600; color: var(--text-strong); }
.prose a { color: var(--accent-hover); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-deep); }