/* ==========================================================================
   layout.css — containers, grid, sections, full-bleed bands, measure utils.
   Asymmetric editorial grid (plan §3.3): 7/5, 8/4, 5/7 splits; equal card
   grids are avoided by design. Splits collapse to one column below 768px.
   ========================================================================== */

/* ---- Containers -------------------------------------------------------- */
.container,
.container-wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container {
  max-width: var(--container);
}

.container-wide {
  max-width: var(--container-wide);
}

/* ---- Vertical rhythm --------------------------------------------------- */
.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: var(--space-7);
}

/* Internal-page top rhythm (final pre-deploy §5): the breadcrumb bar hugs the
   header and the page hero drops ~30% of its top padding, so the headline
   enters the first viewport without an unexplained blank band. The home hero
   keeps the full-scale rhythm (it does not use these classes). */
.breadcrumb-bar {
  padding-block: var(--space-6) var(--space-2);
}

.section--page-hero {
  padding-block: calc(var(--space-section) * 0.7) calc(var(--space-section) * 0.85);
}

.stack > * + * {
  margin-block-start: var(--space-5);
}

.stack-6 > * + * {
  margin-block-start: var(--space-6);
}

/* ---- 12-column grid ---------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
}

/* Asymmetric editorial splits (desktop) */
.grid-7-5,
.grid-8-4,
.grid-5-7 {
  display: grid;
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: start;
}

@media (min-width: 768px) {
  .grid-7-5 {
    grid-template-columns: 7fr 5fr;
  }
  .grid-8-4 {
    grid-template-columns: 8fr 4fr;
  }
  .grid-5-7 {
    grid-template-columns: 5fr 7fr;
  }
}

/* Column span helpers (within .grid) */
@media (min-width: 768px) {
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-12 { grid-column: 1 / -1; }
}

/* ---- Full-bleed bands -------------------------------------------------- */
/* .band--moss: dark moss-950 section carrying paper-colored text (plan §3.3).
   Used for the Zümra design-review band and the final CTA band to break the
   cream monotony with a light -> dark -> light page rhythm. */
.band--moss {
  background-color: var(--moss-950);
  color: var(--paper);
}

.band--moss h1,
.band--moss h2,
.band--moss h3,
.band--moss h4 {
  color: var(--paper);
}

.band--moss a {
  color: var(--sand-200);
}

.band--raised {
  background-color: var(--paper-raised);
}

/* ---- Measure (reading width) ------------------------------------------ */
.measure {
  max-width: var(--measure);
}

.measure-narrow {
  max-width: var(--measure-narrow);
}

/* ---- Generic full-bleed helper ---------------------------------------- */
.full-bleed {
  width: 100%;
}