/* ==========================================================================
   layout.css — grid, spacing, and the §4.3 signature layout moves
   Depends on tokens.css. Load THIRD.
   ========================================================================== */

/* --- Content container (max 1440px, side margins per §4.1) ---------------- */
.container {
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--margin);
}

/* --- 12/8/4-column grid (§4.1) -------------------------------------------- */
.grid {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:var(--gutter);
  row-gap:var(--gutter);
}
@media (max-width:1024px) {
  .grid { grid-template-columns:repeat(8, minmax(0, 1fr)); }
}
@media (max-width:640px) {
  .grid {
    grid-template-columns:repeat(4, minmax(0, 1fr));
    column-gap:16px; row-gap:16px;
  }
}

/* Column-span helpers (desktop 12-col). Collapse to full width on mobile. */
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
@media (max-width:1024px) {
  [class*="col-"] { grid-column:span 8; }   /* default to full 8-col on tablet */
}
@media (max-width:640px) {
  [class*="col-"] { grid-column:span 4; }   /* full 4-col on mobile */
}

/* The faint visible column rules (§4.1) were removed — no vertical rules. */

/* --- Section vertical rhythm (§4.2) --------------------------------------- */
.section { padding-block:clamp(96px, 12vh, 192px); }
.section--tight { padding-block:clamp(48px, 8vh, 96px); }

/* Spacing-scale flow helpers (4/8/12/16/24/32/48/64/96/128/192). */
.stack > * + * { margin-top:24px; }
.stack-8  > * + * { margin-top:8px; }
.stack-16 > * + * { margin-top:16px; }
.stack-32 > * + * { margin-top:32px; }
.stack-48 > * + * { margin-top:48px; }
.stack-64 > * + * { margin-top:64px; }

/* --- §4.3.1 The framed canvas --------------------------------------------- */
/* Inset panel (--surface, 1px --line) inset ~12–24px from the viewport edge.
   Used for the home hero; the frame device also wraps select full-bleed
   media on detail pages. */
.canvas-frame {
  margin:var(--frame-inset);
  background:var(--surface);
  border-radius:var(--radius);
}
.canvas-frame--fill {
  min-height:calc(100vh - 2 * var(--frame-inset));
  min-height:calc(100svh - 2 * var(--frame-inset));
}
/* Same frame device applied around an image on detail pages. */
.frame-media {
  padding:var(--frame-inset);
  background:var(--surface);
  border-radius:var(--radius);
}

/* --- §4.3.4 Editorial split (text cols 1–5 / media 6–12, or mirrored) ----- */
.editorial-split {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:var(--gutter);
  align-items:center;
}
.editorial-split > .split-text  { grid-column:1 / 6; }   /* never past col 7 */
.editorial-split > .split-media { grid-column:6 / 13; }
.editorial-split--mirror > .split-text  { grid-column:8 / 13; order:2; }
.editorial-split--mirror > .split-media { grid-column:1 / 8;  order:1; }
/* Top-aligned instead of centered. Centering is right when the two columns are
   comparable in height (a paragraph beside a big stat); it reads as an accident
   when the media is much taller, which leaves the text floating halfway down a
   tall image with a gap above it. Used by every §Solution, where the section
   headline sits directly above: heading, first line of body and top of the
   image then share one edge and the section opens as a single block. */
.editorial-split--top { align-items:start; }
@media (max-width:1024px) {
  .editorial-split { grid-template-columns:1fr; row-gap:48px; }
  .editorial-split > .split-text,
  .editorial-split > .split-media,
  .editorial-split--mirror > .split-text,
  .editorial-split--mirror > .split-media { grid-column:1 / -1; order:initial; }
}

/* --- Full-bleed + dark band (§1.3 / §07) ---------------------------------- */
/* Breaks out of a centered container to span the full viewport width. */
.full-bleed {
  width:100vw;
  margin-inline:calc(50% - 50vw);
}
/* 100vw is the VIEWPORT, which includes the vertical scrollbar; the layout width
   does not. On any page tall enough to scroll, a .full-bleed band is therefore
   ~7.5px wider than the page on each side — enough to push a horizontal
   scrollbar onto the window and reveal a strip of --paper past the band's right
   edge. Clipping the overflow is the remedy that belongs with the cause, so it
   lives here rather than being restated by each page.

   `clip`, never `hidden`: hidden would turn html/body into a scroll container,
   which silently kills every `position:sticky` descendant — the nav bar and the
   detail pages' section rail — and traps the .pd-process scroll-snap strip.
   `clip` only clips. It also leaves overflow-y alone (a `clip`/`visible` pair is
   a legal computed combination, unlike `hidden`/`visible`), so vertical
   scrolling stays on the document where it belongs. */
html, body { overflow-x:clip; }
.band-dark {
  background:var(--dark);
  color:var(--paper-on-dark);
}
.band-dark .type-caption { color:color-mix(in srgb, var(--paper-on-dark) 66%, transparent); }

/* --- §4.3.3 Right-edge rail ----------------------------------------------- */
/* Thin vertical strip pinned to the right edge (home hero + detail pages).
   Carries featured-project index (home) or section numbers (detail). */
.rail {
  position:fixed;
  right:calc(var(--frame-inset) + 8px);
  top:50%;
  transform:translateY(-50%);
  z-index:40;
  display:flex; flex-direction:column; gap:16px;
  align-items:flex-end;
}
.rail a, .rail button { display:block; }
@media (max-width:1024px) { .rail { display:none; } }   /* hidden ≤ tablet (§1.1) */

/* --- Aspect-ratio media boxes (kill CLS, §5 responsive) ------------------- */
.ratio { position:relative; overflow:hidden; background:var(--surface-2); }
.ratio > img, .ratio > video, .ratio > iframe,
.ratio > .img-ph { position:absolute; inset:0; width:100%; height:100%; }
.ratio > img, .ratio > video { object-fit:cover; }
.ratio-16x9 { aspect-ratio:16 / 9; }
.ratio-3x2  { aspect-ratio:3 / 2; }
.ratio-4x5  { aspect-ratio:4 / 5; }
.ratio-21x9 { aspect-ratio:21 / 9; }
.ratio-1x1  { aspect-ratio:1 / 1; }
.ratio-4x3  { aspect-ratio:4 / 3; }

/* --- Corner-anchor scaffold (§4.3.2, used by home hero) ------------------- */
.corner-anchor {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto 1fr auto;
  gap:24px;
}
.anchor-tl { grid-area:1 / 1; justify-self:start;  align-self:start; }
.anchor-tr { grid-area:1 / 2; justify-self:end;    align-self:start; }
.anchor-bl { grid-area:3 / 1; justify-self:start;  align-self:end; }
.anchor-br { grid-area:3 / 2; justify-self:end;    align-self:end; text-align:right; }
.anchor-center {
  grid-area:2 / 1 / 3 / 3;
  place-self:center;
}
@media (max-width:640px) {
  /* Corners collapse to a single vertical stack on mobile (§1.1). */
  .corner-anchor {
    grid-template-columns:1fr;
    grid-template-rows:none;
    text-align:left;
  }
  .anchor-tl, .anchor-tr, .anchor-bl, .anchor-br, .anchor-center {
    grid-area:auto; justify-self:start; align-self:auto; text-align:left;
  }
}