/* =============================================================
   layout.css — Containers, grid, sections
   ============================================================= */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.container--narrow{max-width:var(--container-narrow)}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:calc(var(--section-y) * .6)}
.section--dark{background:var(--bg-inverse)}
.section--muted{background:var(--color-mist-100)}
.section--surface{background:var(--bg-surface)}

.section-head{max-width:52ch;margin-bottom:var(--space-48)}
.section-head--center{margin-inline:auto;text-align:center}

/* Grid helpers */
.grid{display:grid;gap:var(--gap-grid)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* Split (image/text) */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--reverse .split__media{order:2}
.split__media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);aspect-ratio:16/11;object-fit:cover}

/* Stack utility */
.stack>*+*{margin-top:var(--space-16)}
.stack-lg>*+*{margin-top:var(--space-32)}

/* Flow of buttons */
.actions{display:flex;flex-wrap:wrap;gap:var(--space-16);margin-top:var(--space-32)}
.actions--center{justify-content:center}

/* Full-bleed helper */
.bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}