/* ==========================================================================
   layout.css — Container, grid, section padding utilities.
   Source of truth: design/DESIGN.md §3.3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container — max 1200, fluid gutter
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Edge-to-edge container that retains a max width but lets the background bleed.
   Use as `<section class="bleed surface-ink"><div class="container">...</div></section>`. */
.bleed {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Section spacing
   --sp-7 (mobile) → --sp-9 (desktop)
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--sp-7);
}

@media (min-width: 768px) {
  .section { padding-block: var(--sp-8); }
}

@media (min-width: 1024px) {
  .section { padding-block: var(--sp-9); }
}

.section--tight { padding-block: var(--sp-6); }
.section--loose { padding-block: var(--sp-9); }

@media (min-width: 1024px) {
  .section--loose { padding-block: var(--sp-10); }
}

/* --------------------------------------------------------------------------
   Grid utilities
   12-col at ≥ 1024px, 6-col at 640–1023px, single-col below.
   `--grid-gap` overridable per consumer.
   -------------------------------------------------------------------------- */
.grid {
  --grid-gap: var(--sp-5);
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Span helpers for the 12-col grid. Below 1024 they collapse to spanning all. */
.col-12 { grid-column: 1 / -1; }

@media (min-width: 640px) {
  .col-md-3 { grid-column: span 3; }
  .col-md-4 { grid-column: span 4; }
  .col-md-6 { grid-column: span 6; }
}

@media (min-width: 1024px) {
  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-5  { grid-column: span 5; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-7  { grid-column: span 7; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-12 { grid-column: span 12; }
}

/* --------------------------------------------------------------------------
   Flow utility — vertical stack with consistent rhythm.
   -------------------------------------------------------------------------- */
.flow > * + * {
  margin-block-start: var(--flow-gap, var(--sp-4));
}

/* Surface modifiers — set background and matching ink color.
   Used for sectioning, e.g. `<section class="surface-ink">…</section>` */
.surface-paper { background-color: var(--c-paper); color: var(--c-ink-2); }
.surface-cream { background-color: var(--c-cream); color: var(--c-ink-2); }
.surface-ink   { background-color: var(--c-ink);   color: var(--c-on-ink); }

.surface-ink h1,
.surface-ink h2,
.surface-ink h3,
.surface-ink h4 {
  color: var(--c-on-ink);
}

/* Inline links on dark surfaces inherit the surface ink colour. We
   exclude .btn so button modifiers (.btn--gold, .btn--primary) keep
   their own foreground colour  the previous rule was more specific
   than .btn--gold and silently overrode navy-on-gold to white-on-gold,
   which fails WCAG 2.2 AA contrast (2.83:1 vs required 4.5:1). */
.surface-ink a:not(.btn) {
  color: var(--c-on-ink);
}

.surface-ink a:not(.btn):hover {
  color: var(--c-gold);
}