/* ═══════════════════════════════════════════════════════════════════════════
   04 - LAYOUT
   Containers, the section rhythm, grids, and the two-column editorial shapes.
   Nothing here paints; it only positions.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer layout {

  /* ── Page frame ─────────────────────────────────────────────────────── */

  .page {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  main { flex: 1 0 auto; }

  /* ── Container ──────────────────────────────────────────────────────── */

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

  .container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
  .container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
  .container--flush { padding-inline: 0; }

  /* ── Section ────────────────────────────────────────────────────────── */

  .section {
    position: relative;
    padding-block: var(--section-y);
    background: var(--surface);
    /* The ghost words and parallax layers are absolutely positioned inside. */
    isolation: isolate;
    overflow: clip;
  }

  /* Two adjacent sections never share a ground (§15.3). Templates alternate
     these explicitly rather than relying on :nth-child, which breaks the
     moment a section is toggled off in the admin. */
  .section--alt { background: var(--surface-alt); }
  .section--raised { background: var(--surface-raised); }
  .section--sunken { background: var(--surface-sunken); }

  .section--tight { padding-block: clamp(48px, 6vw, 96px); }
  .section--flush-top { padding-block-start: 0; }
  .section--flush-bottom { padding-block-end: 0; }

  /* A hairline that reads as a seam rather than a border. */
  .section--seam { border-top: 1px solid var(--hairline); }

  .section__body { position: relative; z-index: 1; }

  /* ── Section header row: heading left, a link right ─────────────────── */

  .section-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-7);
  }

  .section-bar .section-head { margin-bottom: 0; }

  /* ── Grids ──────────────────────────────────────────────────────────── */

  .grid {
    display: grid;
    gap: var(--sp-6);
  }

  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  .grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

  .grid--gap-sm { gap: var(--sp-4); }
  .grid--gap-lg { gap: var(--sp-8); }

  /* ── Editorial split: 7/5 and 5/7 ───────────────────────────────────── */

  .split {
    display: grid;
    gap: clamp(var(--sp-7), 6vw, var(--sp-10));
    align-items: start;
  }

  @media (min-width: 900px) {
    .split { grid-template-columns: 7fr 5fr; }
    .split--5-7 { grid-template-columns: 5fr 7fr; }
    .split--half { grid-template-columns: 1fr 1fr; }
    .split--6-4 { grid-template-columns: 6fr 4fr; }
    .split--4-6 { grid-template-columns: 4fr 6fr; }
  }

  /* A column that stays put while its neighbour scrolls (§9.1). */
  @media (min-width: 900px) {
    .sticky-col {
      position: sticky;
      top: calc(var(--header-h-shrunk) + var(--sp-6));
    }
  }

  /* ── Stack and cluster ──────────────────────────────────────────────── */

  /* Children stretch by default. `justify-items: start` would size every child
     to its content, which quietly collapses any grid inside a stack to one
     column and caps paragraphs well short of their measure. */
  .stack { display: grid; gap: var(--sp-5); }
  .stack--sm { gap: var(--sp-3); }
  .stack--lg { gap: var(--sp-7); }
  .stack--start { justify-items: start; }
  .stack--center { justify-items: center; text-align: center; }

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

  .cluster--sm { gap: var(--sp-2); }
  .cluster--lg { gap: var(--sp-5); }
  .cluster--between { justify-content: space-between; }
  .cluster--center { justify-content: center; }

  /* ── Full-bleed inside a container ──────────────────────────────────── */

  .bleed {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  /* ── Horizontal scroller (collaborator rail, thumbnail strips) ──────── */

  .rail {
    display: flex;
    gap: var(--sp-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block: var(--sp-2);
  }

  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; flex: none; }

  /* ── Aspect helpers ─────────────────────────────────────────────────── */

  .ar-square  { aspect-ratio: 1 / 1; }
  .ar-4-3     { aspect-ratio: 4 / 3; }
  .ar-3-4     { aspect-ratio: 3 / 4; }
  .ar-16-9    { aspect-ratio: 16 / 9; }
  .ar-3-2     { aspect-ratio: 3 / 2; }
  .ar-portrait { aspect-ratio: 4 / 5; }

  /* ── Ghost-word placement helpers ───────────────────────────────────── */

  .ghost-slot {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
  }

  .ghost-word--tl { top: -.12em; left: calc(var(--gutter) * -.4); }
  .ghost-word--tr { top: -.1em; right: calc(var(--gutter) * -.4); }
  .ghost-word--bl { bottom: -.28em; left: calc(var(--gutter) * -.4); }
  .ghost-word--br { bottom: -.28em; right: calc(var(--gutter) * -.4); }
  .ghost-word--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* ── Empty states ───────────────────────────────────────────────────── */

  .empty {
    display: grid;
    gap: var(--sp-5);
    justify-items: center;
    text-align: center;
    padding: clamp(var(--sp-7), 7vw, var(--sp-9)) var(--gutter);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--ink-800) 60%, transparent);
  }

  .empty__mark {
    width: 34px;
    height: 34px;
    border: 1px solid var(--hairline-hot);
    transform: rotate(45deg);
    opacity: .6;
  }

  .empty p {
    max-width: 42ch;
    color: var(--ivory-300);
  }

  /* ── Print ──────────────────────────────────────────────────────────── */

  @media print {
    .section {
      padding-block: 18pt;
      overflow: visible;
      break-inside: avoid;
    }
    .ghost-slot,
    .ghost-word { display: none; }
    .split { display: block; }
    .sticky-col { position: static; }
  }
}