/* =========================================================================
 * Grid system — responsive 12 / 8 / 4 column grid with an 8px baseline.
 *
 *   Desktop  (>=1024px): 12 columns · 120px margins · 32px gutters
 *   Tablet   (768–1023): 8 columns  · 80px margins  · 24px gutters
 *   Mobile   (<768px):   4 columns  · 16–32px margins · 16px gutters
 *
 * Layout intent (matches the editorial reference):
 *   - Header + hero span all columns (full-bleed).
 *   - Everything below the hero sits in the centred reading column
 *     (≈ centre 6 of 12 columns ≈ var(--measure)).
 *   - The TOC rail lives in the outer columns (1–3 left / 10–12 right);
 *     its offset is derived from the same tokens (see toc-rail.css).
 *
 * Spacing is an 8px base (the "nudge amount"): use the --space-* tokens
 * or multiples of 8px so vertical rhythm stays consistent.
 * ====================================================================== */

:root {
  /* Column model (desktop default) */
  --grid-columns: 12;
  --grid-margin: 120px;          /* page side margin */
  --grid-gutter: 32px;           /* space between columns */
  --grid-max: 1440px;            /* design canvas width */

  /* 8px baseline / nudge scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-15: 120px;

  /* Usable content width inside the page margins */
  --grid-content: min(calc(var(--grid-max) - 2 * var(--grid-margin)), calc(100vw - 2 * var(--grid-margin)));
  /* One column + one gutter (handy for placing things on the grid) */
  --grid-col: calc((var(--grid-content) - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns));
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --grid-columns: 8;
    --grid-margin: 80px;
    --grid-gutter: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --grid-columns: 4;
    --grid-margin: clamp(16px, 6vw, 32px);
    --grid-gutter: 16px;
  }
}

/* -------------------------------------------------------------------------
 * Full-bleed band — header + hero span the whole viewport (all columns).
 * ---------------------------------------------------------------------- */
.full-bleed {
  width: 100%;
  margin-inline: 0;
}

/* -------------------------------------------------------------------------
 * Centred reading column — everything below the hero.
 * Width tracks the readable measure (≈ centre 6 columns), capped so it
 * never exceeds the page margins on small screens.
 * ---------------------------------------------------------------------- */
.page-content {
  width: 100%;
  max-width: var(--measure, 38em);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Side margins kick in only once the measure would touch the edges,
 * giving the spec'd 16–32px mobile margins without shrinking the
 * desktop reading column. */
@media (max-width: 680px) {
  .page-content {
    padding-inline: clamp(16px, 5vw, 32px);
  }
}

/* -------------------------------------------------------------------------
 * Optional explicit 12-column grid utility (for sections that want to
 * place children on specific columns rather than the centred measure).
 *   <div class="site-grid"><div style="grid-column: 4 / 10">…</div></div>
 * ---------------------------------------------------------------------- */
.site-grid {
  display: grid;
  width: 100%;
  max-width: var(--grid-content);
  margin-inline: auto;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
}

/* Named placements for the editorial layout */
.col-content { grid-column: 4 / 10; }   /* centre 6 cols */
.col-toc-left { grid-column: 1 / 4; }    /* cols 1–3 */
.col-toc-right { grid-column: 10 / 13; } /* cols 10–12 */

@media (max-width: 1023px) {
  .col-content { grid-column: 1 / -1; }
  .col-toc-left, .col-toc-right { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
 * Dev overlay — append ?grid to the URL to visualise the columns.
 * ---------------------------------------------------------------------- */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  max-width: var(--grid-content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
}

.grid-overlay span {
  background: rgba(190, 52, 85, 0.08);
  border-inline: 1px solid rgba(190, 52, 85, 0.15);
}