/**
 * @file
 * The layout contract: breakpoints, container and gutter. FND-4 / DONI-705.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * 🔴 EVERY HORIZONTAL PAGE NUMBER IN dtc_nxt COMES FROM HERE.
 *
 * A component that writes its own `padding-inline: 120px` or
 * `max-width: 1200px` has opted out of the only thing keeping the page
 * aligned, and it will drift. The ISI shipped 96px out exactly that way, with
 * green CI and ten passing tests, and was caught by a human looking at the
 * page.
 *
 * Enforced by:  python3 project/scripts/layout/check-alignment.py --url <site>
 * ─────────────────────────────────────────────────────────────────────────
 *
 * ## The contract: two elements, and the gutter is on the OUTER one
 *
 *     <div class="l-band">            full-bleed. Owns background and gutter.
 *       <div class="l-container">     capped at the content width, centred.
 *                                     NEVER has inline padding of its own.
 *
 * This mirrors how the design is actually built. Canonical Figma
 * `PMOumVEsuQEHJFYkbGBD84`, `2.0 WHY DANZERA - D` (`24410:65661`):
 *
 *     Section    x=0    width=1440    ← full bleed
 *       Container  x=120  width=1200  ← inset, capped
 *
 * 🔴 NEVER PUT THE GUTTER ON THE CAPPED BOX:
 *
 *     .thing { max-width: 1200px; padding-inline: 120px; }   ✗ WRONG
 *
 * That subtracts the gutter FROM the content column — 1200 becomes 960 — and
 * is what shipped cards at 460 instead of 580.
 *
 * ## Verified values
 *
 * | Width | Gutter | Content | Evidence |
 * |-------|--------|---------|----------|
 * | 1440  | 120    | 1200    | `24581:18636` Container x=120 w=1200; card row 120→1320 |
 * | 375   | 24     | 327     | `1.0 ABOUT HAE - M` `24410:65704` — six blocks, all x=24 w=327 |
 *
 * Both measured from the CANONICAL file on 2026-08-05. The mobile figure was
 * sampled across six independent blocks in one frame rather than taken from
 * one, because the superseded file disagrees with the canonical one about
 * mobile insets and had already misled this project once.
 *
 * ## What this file deliberately does NOT define
 *
 * Each of these was proposed and rejected, so nobody re-adds them casually:
 *
 * - ⛔ A 1024px breakpoint. The design supplies 1440 and 375 and NOTHING
 *   between. FND-4's AC names 1024, but that came from the retired
 *   `chrome.md`. The container below is CONTINUOUS — it needs no breakpoint
 *   at all. The width at which the desktop NAV must become a menu is a real
 *   question, and it belongs to CHR-1/CHR-2, measured when that nav exists.
 *
 * - ⛔ Header `clamp()` values for nav gap, nav label and logo width. Those
 *   are one component compensating for its own overflow. A layout foundation
 *   that absorbs them becomes "the CSS that makes the current nav work".
 *
 * - ⛔ A footer gutter token. If the footer really uses 16, it overrides
 *   `--layout-gutter` on itself (see "Local overrides" below) — it does not
 *   earn a global token. Two exceptions is a pattern; three is a failed
 *   foundation.
 *
 * - ⛔ Vertical spacing. Not this ticket. Do not freestyle it either.
 *
 * ## Local overrides
 *
 * A component with a genuinely different, MEASURED inset re-declares the
 * custom property on itself and keeps using `.l-band` / `.l-container`:
 *
 *     .some-band { --layout-content: 293px; }  |* Figma <node id>; not global *|
 *
 * It must cite the node id and say the value is intentional. It stays in the
 * alignment check that way, rather than escaping the system.
 *
 * ## ⚠️ TOKEN NAMES ARE PROVISIONAL
 *
 * FND-2 (tokens, DONI-701) and FND-3 (typography, DONI-704) are IN PROGRESS
 * with Caroline Casals in this same theme. The `--layout-*` prefix here is
 * chosen to be absorbable, not to compete. If FND-2 lands a different naming
 * convention, these are renamed to match — there must not end up being two
 * vocabularies for one number.
 */

:root {
  /* The content column at its widest. Figma `24581:18636`, 1440 artboard.
     Aliased to FND-2's `--content-width` (ruled by Caroline Casals) so one
     declaration owns the number — this file's header required exactly that once
     FND-2 landed a naming convention. Both names resolve; neither drifts. */
  --layout-content: var(--content-width, 1200px);

  /* The inset from the viewport edge to the content column.
     Desktop 120 (`24581:18636`), mobile 24 (`24410:65704`, six blocks). */
  --layout-gutter: 24px;
}

/* The only breakpoint in this file, and it exists solely to switch the gutter
   between the two values the design actually draws.

   768 is OURS, not the design's — the artboards are 1440 and 375 with nothing
   between, so some width had to be chosen and this one is annotated as a
   decision rather than presented as a measurement. It is NOT a "desktop
   starts here" breakpoint and no component should treat it as one. */
@media (min-width: 768px) {
  :root {
    /* DECISION: no artboard exists between 375 and 1440. */
    --layout-gutter: 120px;
  }
}

/**
 * The band. Full-bleed, owns the background and the gutter.
 */
.l-band {
  inline-size: 100%;
  padding-inline: var(--layout-gutter);
}

/**
 * The content column. Capped and centred, and never padded.
 *
 * `min()` rather than `max-inline-size` alone so the column is continuous:
 * it is exactly `--layout-content` when the viewport allows and shrinks with
 * the viewport otherwise, with no width at which it jumps.
 */
.l-container {
  inline-size: min(100%, var(--layout-content));
  margin-inline: auto;
}

/**
 * Convenience for the common case of a band whose only child is the column.
 * Same geometry, one element. Use it when there is no background to own and
 * no sibling to align against — otherwise prefer the two-element form, which
 * is what the design is built from.
 */
.l-band--single {
  padding-inline: var(--layout-gutter);
}

.l-band--single > * {
  inline-size: min(100%, var(--layout-content));
  margin-inline: auto;
}