/*
layouts.css — the 8-layout grid system (hero 7/5, three-up, etc.)

Column splits below are taken directly from the guide's own live grid
specimens in "Spacing and layout" (inspected via each specimen's actual
grid-column values), not inferred from the layout names:

  Hero 7/5          12-col grid, 7 + 5
  Three-up          12-col grid, 4 + 4 + 4
  Ragged 9/3         12-col grid, 9 + 3 (content leads, aside trails)
  Full bleed        12-col grid, one item spanning all 12
  Sidebar 3/9       12-col grid, 3 + 9 (sidebar leads, content trails)
  Pinterest board   viewport-driven column count, no shared row height
  Featured content  7fr lead tile (spans 2 rows) + 5fr column of 2 tiles
  Four-up           repeat(4, 1fr) — outside the 12-column grid entirely

Each layout is a self-contained grid (like Hero 7/5 already was) rather
than a shared subgrid, so nesting one inside a flow container (e.g.
body-narrative.php's .narrative__content) needs no special integration —
it just establishes its own tracks wherever it's placed.
*/

/*
Hero 7/5: a 12-column grid where the content takes the left 7 columns and,
when a hero has a stat-block slot, the aside takes the right 5. Heroes
without a stat-block just don't use the aside — .hero__content still holds
to 7 columns so headline measure stays consistent across every hero variant.
*/
.hero__grid.layout-hero-7-5 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: center;
}

.layout-hero-7-5 > .hero__content {
  grid-column: span 7;
}

/* grid-row: 1 is explicit, not incidental: .hero__bg-pattern below also
   explicitly claims row 1 in these same columns (8/-1), and without this,
   CSS Grid's auto-placement treats that as already-occupied and pushes
   .hero__aside into an implicit row 2 instead of overlapping it there —
   a real bug found 2026-10-08 building What We Do (aside rendered far
   below the content column instead of beside it), confirmed to affect
   every hero that pairs background="grid" with aside content (Who We Are
   had it too, just uncaught; Home's hero.php output has it as well, even
   though preview/home-preview.html's hand-authored markup happened to omit
   the .hero__bg-pattern div and so never showed the symptom). */
.layout-hero-7-5 > .hero__aside {
  grid-column: 8 / span 5;
  grid-row: 1;
}

/* The grid-background pattern always lives in the same right-hand columns
   the stat-block aside would use, and stretches the full row height —
   this is what keeps it out from under the text column. */
.layout-hero-7-5 > .hero__bg-pattern {
  grid-column: 8 / -1;
  grid-row: 1;
  align-self: stretch;
}

/* The 7-column rule above is correct whenever there's SOMETHING in the
   remaining 5 columns — a stat-block aside, or the .hero__bg-pattern
   texture on background="grid" heroes — so .hero__content holding a
   steady measure doesn't read as a mistake. Added 2026-10-30 building
   Our Story's launch cleanup: a background="solid" hero with no aside
   has neither, so the same 7-column rule left a genuinely blank right
   half. This lets content span the full width only in that specific
   case, leaving every grid-background or has-an-aside hero untouched. */
.hero__grid.layout-hero-7-5:not(:has(.hero__aside)):not(:has(.hero__bg-pattern)) > .hero__content {
  grid-column: 1 / -1;
}

/* Below a comfortable two-column width, stack instead of splitting 7/5.
   Selector must match the base rule's compound specificity
   (.hero__grid.layout-hero-7-5, not just .layout-hero-7-5) — a lower-
   specificity override here loses to the base rule regardless of the
   media query matching, which is a real bug this fixed 2026-10-05: with
   no override actually winning, the grid stayed at repeat(12, 1fr) at
   every viewport width, and a long enough headline blew out past the
   right edge on mobile instead of wrapping within a full-width column. */
@media (max-width: 780px) {
  .hero__grid.layout-hero-7-5 {
    grid-template-columns: 1fr;
  }

  .layout-hero-7-5 > .hero__content,
  .layout-hero-7-5 > .hero__aside {
    grid-column: 1 / -1;
  }

  /* The base rule pins .hero__aside to grid-row: 1 so it can overlap
     .hero__bg-pattern at desktop width (see the comment above). That
     explicit row never got reset here, so once the grid drops to a
     single column, .hero__aside's "row 1" claim pushed .hero__content
     (row: auto, so it took the next free row) into row 2 behind it —
     every hero with an aside rendered the photo/video ABOVE the text on
     a narrow viewport instead of below it, reversing the intended
     reading order. Found 2026-10-08 building Our Story, confirmed
     already present (unnoticed) on every other hero with an aside.
     Resetting to auto restores normal source-order stacking: content,
     then aside. */
  .layout-hero-7-5 > .hero__aside {
    grid-row: auto;
  }

  /* Once it stacks to one column there's no empty column left to mask
     the grid pattern into, so it's dropped rather than shown under text */
  .layout-hero-7-5 > .hero__bg-pattern {
    display: none;
  }
}

/* Three-up: three equal columns, 4 of 12 each */
.layout-three-up {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.layout-three-up > * {
  grid-column: span 4;
}

@media (max-width: 780px) {
  .layout-three-up {
    grid-template-columns: 1fr;
  }

  .layout-three-up > * {
    grid-column: 1 / -1;
  }
}

/* Ragged 9/3: main content leads at 9 columns, a narrow aside trails at 3 */
.layout-ragged-9-3 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.layout-ragged-9-3 > .layout__main {
  grid-column: span 9;
}

.layout-ragged-9-3 > .layout__aside {
  grid-column: span 3;
}

@media (max-width: 780px) {
  .layout-ragged-9-3 {
    grid-template-columns: 1fr;
  }

  .layout-ragged-9-3 > .layout__main,
  .layout-ragged-9-3 > .layout__aside {
    grid-column: 1 / -1;
  }
}

/* Full bleed: one item, spans the full 12-column grid — not edge-to-edge
   of the viewport, just full width of whatever content grid it's in */
.layout-full-bleed {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

.layout-full-bleed > * {
  grid-column: 1 / -1;
}

/* Sidebar 3/9: a narrow sidebar leads at 3 columns, main content trails at 9 */
.layout-sidebar-3-9 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.layout-sidebar-3-9 > .layout__sidebar {
  grid-column: span 3;
}

.layout-sidebar-3-9 > .layout__main {
  grid-column: span 9;
}

@media (max-width: 780px) {
  .layout-sidebar-3-9 {
    grid-template-columns: 1fr;
  }

  .layout-sidebar-3-9 > .layout__sidebar,
  .layout-sidebar-3-9 > .layout__main {
    grid-column: 1 / -1;
  }
}

/* Pinterest board: a scanning grid of many like items, no lead element,
   card height set by its own content rather than a shared row height.
   CSS multi-column is the standard no-JS way to get that — content flows
   down each column before wrapping to the next, so column count follows
   viewport width same as the reference. Per the guide: never for fewer
   than eight items, where it reads as unfinished rather than abundant. */
.layout-pinterest-board {
  columns: 4;
  column-gap: var(--grid-gutter);
}

.layout-pinterest-board > * {
  break-inside: avoid;
  margin-bottom: var(--grid-gutter);
}

@media (max-width: 1024px) {
  .layout-pinterest-board {
    columns: 3;
  }
}

@media (max-width: 700px) {
  .layout-pinterest-board {
    columns: 2;
  }
}

@media (max-width: 460px) {
  .layout-pinterest-board {
    columns: 1;
  }
}

/* Featured content: one large lead tile (spans every row, the wider 7fr
   column) plus a grid of smaller tiles (the narrower 5fr column, stacked).
   Row count is tailored to how many smaller tiles the page actually has,
   not a generic reusable count — update both rules together if that
   changes. Never more than one lead tile per view — that's a content
   discipline, not something the grid enforces. */
.layout-featured-content {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--grid-gutter);
}

.layout-featured-content > .layout__lead {
  grid-row: 1 / span 2;
}

@media (max-width: 780px) {
  .layout-featured-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .layout-featured-content > .layout__lead {
    grid-row: auto;
  }
}

/* Four-up: last resort, not a default — reach for it only when content
   genuinely won't resolve into three-up. Equal flexible columns outside
   the 12-column grid, for a wider or denser web surface only. */
.layout-four-up {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}

@media (max-width: 1024px) {
  .layout-four-up {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .layout-four-up {
    grid-template-columns: 1fr;
  }
}

/* People grid: a dense photo roster (built for Leadership's 18-person
   grid). Same 3-step responsive shape as .layout-four-up (just starting
   from 3 columns instead of 4) rather than reusing .layout-three-up —
   a photo-heavy roster benefits from an intermediate 2-column tablet
   step that .layout-three-up's blunter 3-to-1 collapse skips. */
.layout-people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7) var(--grid-gutter);
}

@media (max-width: 1024px) {
  .layout-people-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .layout-people-grid {
    grid-template-columns: 1fr;
  }
}