/* =============================================================
   Layout utilities — section rhythm, grid, stack
   v2: differentiated section padding + contrast band
   ============================================================= */

/* ── Section rhythm (varied — not uniform) ──────────────── */
.section { padding-block: var(--space-16); }
@media (min-width: 768px) { .section { padding-block: var(--space-20); } }

.section--lg { padding-block: var(--space-20); }
@media (min-width: 768px) { .section--lg { padding-block: var(--space-32); } }

.section--sm { padding-block: var(--space-12); }
.section--xs { padding-block: var(--space-8); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--muted { background: var(--color-surface); }

/* Contrast band: dark editorial section for tonal break */
.section--contrast {
  background: var(--color-contrast-bg);
  color: var(--color-contrast-text);
}
.section--contrast .section-title,
.section--contrast .section-lead,
.section--contrast .eyebrow,
.section--contrast h1,
.section--contrast h2,
.section--contrast h3 {
  color: var(--color-contrast-text);
}
.section--contrast .section-lead { color: var(--color-contrast-muted); }
.section--contrast .eyebrow { color: var(--color-contrast-muted); }

/* ── Grid ────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-6); }
.grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-8  { gap: var(--space-8); }
.grid--gap-12 { gap: var(--space-12); }

@media (max-width: 767px) {
  .grid--cols-2, .grid--cols-3, .grid--cols-4 { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Two-column split ────────────────────────────────────── */
.split { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 1fr; gap: var(--space-12); align-items: center; }
  .split--reverse > *:first-child { order: 2; }
  .split--40-60 { grid-template-columns: 4fr 6fr; align-items: start; }
}

/* ── Stack & cluster ─────────────────────────────────────── */
.stack > * + * { margin-top: var(--space-4); }
.stack--2 > * + * { margin-top: var(--space-2); }
.stack--6 > * + * { margin-top: var(--space-6); }
.stack--8 > * + * { margin-top: var(--space-8); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster--8 { gap: var(--space-8); }

/* ── Reveal on scroll ────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}