/* Purpose: Structural layout primitives only — containers, section padding, grid
   helpers. No visual/component styling here. */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--space-section-x);
}
.container--wide   { max-width: var(--max-wide); }
.container--narrow { max-width: var(--max-narrow); }

/* Inner content wrapper used by every section template (mirrors reference .section-i).
   Caps content to --max-content (1280px) and centres it. WITHOUT this base rule,
   sections that don't set their own .section-i width stretch full-bleed — cards render
   too wide and the layout breaks on large desktops. Component rules (e.g.
   .founder-spread .section-i) are more specific and still override where needed. */
.section-i {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  position: relative;
}
.section-i.wide   { max-width: var(--max-wide); }
.section-i.narrow { max-width: var(--max-narrow); }

/* Section vertical rhythm. Mobile-first: base = mobile padding, expand at md.
   Add .is-dark for emerald ABAB alternates. */
.section {
  padding: var(--space-section-y-sm) var(--space-section-x);
}
@media (min-width: 768px) {  /* md · iPad+ */
  .section { padding: var(--space-section-y) var(--space-section-x); }
}

.section--flush { padding-block: 0; }

/* ── Generic responsive grid helpers — MOBILE-FIRST ──
   Base = 1 column (mobile). Columns increase as the viewport widens.
   Breakpoints: md 768 (iPad) · lg 1024 (small desktop) · xl 1280 (desktop). */
.grid { display: grid; gap: var(--gap-md); grid-template-columns: 1fr; }

/* 2-up: 1 col mobile → 2 col from iPad */
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* 3-up: 1 col mobile → 2 col iPad → 3 col small-desktop */
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* 4-up: 1 col mobile → 2 col iPad → 4 col desktop */
@media (min-width: 768px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Reveal-on-scroll base state — JS (animations.js) clears it. */
.reveal { will-change: transform, opacity; }