/* ═══════════════════════════════════════════════════════════════════════
   layout.css — the LAYOUT SYSTEM (structure only; icon.css is the skin).

   Deliberately not a framework. The block system already owns semantics, so
   a CSS framework would re-express the same ideas in a second vocabulary and
   pull markup toward its own conventions. What was actually missing here was
   a small set of layout primitives and a fluid scale — about a hundred lines
   of modern CSS, no dependency, no build step, and portable to any surface
   the blocks render on.

   Three faults this replaces:
     1. fixed padding everywhere (5rem bands on a 360px phone)
     2. a flex-basis pseudo-grid, so the last row of 18 cards stretched
     3. one breakpoint in 230 lines
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the reset ──────────────────────────────────────────────────────────
   Without this, `width: 100%` PLUS padding overflows its parent: every
   container, header, footer and card is wider than the viewport, the page
   scrolls sideways on a phone, and content looks shifted. seaside and
   plushexplorer each hit this and fixed it locally; it lives in the system
   now so no site rediscovers it. */
*, *::before, *::after { box-sizing: border-box; }

/* the page root: nothing above a band may constrain or inset it */
html, body { width: 100%; margin: 0; padding: 0; }
#qx-app    { width: 100%; margin: 0; padding: 0; }

:root {
  /* fluid space — one scale, viewport-aware, no breakpoints needed */
  --sp-3xs: .25rem;  --sp-2xs: .5rem;   --sp-xs: .75rem;
  --sp-s:  1rem;     --sp-m: 1.5rem;    --sp-l: 2rem;
  --sp-xl: clamp(2rem, 5vw, 3.5rem);
  --sp-band: clamp(2.75rem, 7vw, 5rem);      /* section rhythm */
  --sp-gutter: clamp(1rem, 4vw, 1.5rem);     /* page edge */

  /* fluid type — scales with the viewport, so no per-size media queries */
  --t-display: clamp(2rem, 1.2rem + 3.6vw, 3.5rem);
  --t-h2:      clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  --t-lead:    clamp(1.02rem, .98rem + .4vw, 1.2rem);
  --t-body:    1rem;
  --t-small:   .85rem;
  --t-micro:   .75rem;

  /* surface */
  --r-card: 1rem;  --r-pill: 2rem;  --r-sm: .6rem;
  --sh-card: 0 1px 3px rgba(60,50,30,.06);
  --sh-card-raised: 0 2px 10px rgba(60,50,30,.08);

  --measure: 62ch;              /* readable line length */
  --w-page: 1080px;
  --w-narrow: 46rem;
}

/* ── bands: full-bleed strips with vertical rhythm ────────────────────── */
.l-band { width: 100%; padding-block: var(--sp-band); }
.l-band--tight { padding-block: calc(var(--sp-band) * .55); }

/* ── container: the single place page width and gutters are decided ───── */
.l-container { width: 100%; max-width: var(--w-page); margin-inline: auto;
                padding-inline: var(--sp-gutter); }
.l-container--narrow { max-width: var(--w-narrow); }

/* ── stack: vertical rhythm without margin collapse guesswork ─────────── */
.l-stack { display: flex; flex-direction: column; gap: var(--sp-s); }
.l-stack--l { gap: var(--sp-l); }

/* NB a `repeater` emits its own inline flex, so .l-grid / .ik-grid CANNOT make
   one a grid — inline style beats the stylesheet. On a repeater, set
   display:grid through the block's `style` prop instead. Left as flex-column-
   wrap, a long list wraps into COLUMNS off to the right and widens the page. */

/* ── grid: auto-fill so a short last row does NOT stretch ─────────────
   auto-FILL, not auto-fit: with 18 cards, auto-fit would blow the final
   two up to full width. This is the fault that made the cast page look
   broken, and it is a one-word difference. */
.l-grid { display: grid; gap: var(--sp-m);
          grid-template-columns: repeat(auto-fill, minmax(min(var(--col, 14rem), 100%), 1fr)); }
.l-grid--wide { --col: 20rem; }
.l-grid--tight { --col: 10rem; gap: var(--sp-s); }

/* ── cluster: things that sit in a row and wrap kindly (chips, nav) ───── */
.l-cluster { display: flex; flex-wrap: wrap; gap: var(--sp-2xs) var(--sp-s);
             align-items: center; }
.l-cluster--center { justify-content: center; }

/* ── split: sidebar + main that becomes one column when it must ───────── */
.l-split { display: grid; gap: var(--sp-xl);
           grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }

/* ── prose: readable measure, centred blocks stay centred ─────────────── */
.l-prose { max-width: var(--measure); }
.l-prose--center { margin-inline: auto; }

/* ── card: adapts to its COLUMN, not the viewport ─────────────────────── */
.l-card { container-type: inline-size; background: #fff;
          border: 1px solid var(--ik-rule, rgba(42,36,24,.10));
          border-radius: 1rem; padding: var(--sp-m); }
@container (max-width: 12rem) {
  .l-card { padding: var(--sp-s); }
}

/* ── touch targets: anything tappable clears 44px on a phone ──────────── */
@media (pointer: coarse) {
  .l-tap, .ik-chip, .ik-navlink, .ik-btn { min-height: 2.75rem; display: inline-flex;
    align-items: center; }
}