/* =============================================================
   Vitarix Landing — layout.css
   Section spacing, container widths, responsive helpers.
   Filled out in later phases; skeleton for now.
   ============================================================= */

/* ─── Container widths ─────────────────────────────────────── */
.container-tight  { max-width: 64rem;  margin-inline: auto; }
.container-base   { max-width: 72rem;  margin-inline: auto; }
.container-wide   { max-width: 80rem;  margin-inline: auto; }
.container-full   { max-width: 100%;   margin-inline: auto; }

/* ─── Section vertical rhythm ──────────────────────────────── */
.section {
  padding-block: var(--space-section);
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
.section-sm { padding-block: 2.5rem; content-visibility: auto; contain-intrinsic-size: auto 300px; }
.section-lg { padding-block: var(--space-section-lg); content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* ─── Editorial grid (used in hero) ────────────────────────── */
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-editorial);
  align-items: center;
}
@media (min-width: 1024px) {
  .editorial-grid { grid-template-columns: 7fr 5fr; }
}

/* ─── Generic section header ───────────────────────────────── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--tracking-snug);
  color: var(--primary);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--on-surface-variant);
  max-width: 48rem;
}

/* ─── Spacing helpers ──────────────────────────────────────── */
.stack-2 > * + * { margin-top: 0.5rem; }
.stack-3 > * + * { margin-top: 0.75rem; }
.stack-4 > * + * { margin-top: 1rem; }
.stack-6 > * + * { margin-top: 1.5rem; }
.stack-8 > * + * { margin-top: 2rem; }