/* ==========================================================================
   layout.css — container, section rhythm, grid primitives
   ========================================================================== */

/* --- Container ----------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* --- Section rhythm ------------------------------------------------------ */

.section {
  padding-block: var(--section-y);
}

.section--tight { padding-block: calc(var(--section-y) * 0.6); }

.section--sunken { background-color: var(--surface-sunken); }

.section--ink {
  background-color: var(--ink);
  color: var(--text-on-ink);
}

.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: var(--text-on-ink); }

.section--ink .eyebrow    { color: var(--accent-on-ink); }
.section--ink .text-muted { color: var(--text-muted-on-ink); }
.section--ink a           { color: var(--accent-on-ink); }
.section--ink a:hover     { color: var(--text-on-ink); }

.section--ink :focus-visible { outline-color: var(--focus-on-ink); }

/* A hairline between adjacent light sections, so the rhythm reads without
   needing a fill change every time. */
.section--ruled { border-block-start: var(--border-w) solid var(--border); }

/* --- Section header ------------------------------------------------------
   Offset, not centred. DESIGN.md §5 — this asymmetry is what keeps the page
   from reading as a template.                                              */

.section-header {
  max-width: 34rem;
  margin-block-end: var(--space-10);
}

.section-header > * + * { margin-block-start: var(--space-4); }

.section-header--end {
  margin-inline-start: auto;
  text-align: end;
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
}

/* font-family is stated explicitly because .eyebrow is applied to headings as
   well as spans, and h1-h2 carry the display face from base.css. Without this
   an eyebrow on an <h2> silently renders in Playfair. */
.eyebrow {
  display: block;

  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.lead {
  max-width: var(--measure-narrow);

  color: var(--text-secondary);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.text-muted { color: var(--text-muted); }

.fine-print {
  color: var(--text-muted);
  font-size: var(--fs-3xs);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-button);
}

/* --- Stack: vertical rhythm without margin hacks ------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.stack--sm { gap: var(--space-3); }
.stack--lg { gap: var(--space-8); }

/* --- Cluster: horizontal group that wraps -------------------------------- */

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.cluster--between { justify-content: space-between; }

/* --- Intrinsic grid ------------------------------------------------------
   auto-fit + minmax, so column count follows available width rather than a
   stack of breakpoints. DESIGN.md §5.                                      */

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

.grid--narrow {
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

/* Sized so three cards fit one row inside --container: (1152 − 2×32) / 3 =
   362px of track, so the 20rem floor clears. --grid--wide's 24rem floor
   only fits 2, which left a stranded third card. */
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* --- Split: the offset two-column band -----------------------------------
   Asymmetric on purpose — 5/7, not 6/6.                                    */

.split {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 64rem) {
  .split {
    gap: var(--space-12);
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }

  .split--reverse { grid-template-columns: 7fr 5fr; }

  /* Renders the first child on the RIGHT without moving it in the DOM.
     Needed so a section's <h2> always precedes the <h3>s it heads — a
     visual swap must never reorder the heading outline. Below this
     breakpoint the grid collapses and DOM order wins, which is correct. */
  .split--flip {
    grid-template-columns: 7fr 5fr;
  }

  .split--flip > :first-child {
    grid-column: 2;
    grid-row: 1;
  }

  .split--flip > :nth-child(2) {
    grid-column: 1;
    grid-row: 1;
  }

  .split--sticky > :first-child {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-8));
  }

  /* Three children: [heading] [media] [body].
     The heading takes row 1 on its own; the media and the body share row 2,
     so the body's first line starts exactly level with the top edge of the
     image. Done with rows rather than a margin, so it stays aligned however
     many lines the heading wraps to. */
  .split--media-offset {
    grid-template-columns: 5fr 7fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-12);
    row-gap: var(--space-6);
  }

  .split--media-offset > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .split--media-offset > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .split--media-offset > :nth-child(3) { grid-column: 2; grid-row: 2; }
}

/* A `.bleed` (100vw + negative margin) primitive was written and then removed:
   nothing on the site used it, and 100vw ignores the scrollbar, which causes
   horizontal overflow on desktop. If a full-bleed band is ever needed, use
   `margin-inline: calc(50% - 50cqw)` inside a container query instead. */

/* --- Flow: prose spacing ------------------------------------------------- */

.flow > * + *    { margin-block-start: var(--space-4); }
.flow > * + h2,
.flow > * + h3   { margin-block-start: var(--space-8); }
.flow > h2 + *,
.flow > h3 + *   { margin-block-start: var(--space-3); }

/* --- Utilities -----------------------------------------------------------
   Deliberately few. Anything used more than a handful of times belongs in a
   component instead.                                                       */

.list-plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.text-center   { text-align: center; }
.measure-none  { max-width: none; }
.flush-end     { margin-block-end: 0; }
.push-lg       { margin-block-start: var(--space-10); }

/* --- Rule ---------------------------------------------------------------- */

.rule {
  height: var(--border-w);
  border: 0;
  background-color: var(--border);
}

.rule--strong { background-color: var(--rule); }