/* ============================================================
   layout.css — Page-level containers and section spacing
   ============================================================ */

/* ── Container — Responsive widths with max-width ────────────── */
.container {
  width: 100%;
  max-width: var(--container-desktop);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

/* ── Section defaults ──────────────────────────────────────── */
.section {
  padding-block: var(--space-16);
}

.section--sm {
  padding-block: var(--space-8);
}

.section--lg {
  padding-block: var(--space-24);
}

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

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

.hero.section--flush-top {
  padding-top: 44px;
}

/* ── Generic divider ───────────────────────────────────────── */
.divider {
  border: none;
  border-top: var(--border-hairline);
  margin-block: 0;
}