/* ============================================================
   layout.css — container, grid, sections, utilities
   ============================================================ */
.container{ width:100%; max-width:var(--container-xl); margin-inline:auto; padding-inline:var(--gutter); }
.container--lg{ max-width:var(--container-lg); }
.container--md{ max-width:var(--container-md); }
.container--sm{ max-width:var(--container-sm); }

.section{ padding-block:var(--space-16); }
@media (min-width:1024px){ .section{ padding-block:var(--space-24); } }
.section--tight{ padding-block:var(--space-12); }
.section--flush-top{ padding-top:0; }

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--space-6); }
@media (max-width:767px){ .grid{ gap:var(--space-4); } }

/* common spans (mobile = full width, desktop applies) */
.col-4,.col-6,.col-8,.col-12{ grid-column:1 / -1; }
@media (min-width:768px){
  .col-6{ grid-column:span 6; }
  .col-4{ grid-column:span 6; }
}
@media (min-width:1024px){
  .col-4{ grid-column:span 4; }
  .col-8{ grid-column:span 8; }
}

.stack{ display:flex; flex-direction:column; }
.stack > * + *{ margin-top:var(--space-4); }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.center{ text-align:center; }
.measure{ max-width:62ch; }

.section-head{ max-width:var(--container-md); margin-bottom:var(--space-12); }
.section-head .overline{ margin-bottom:var(--space-3); }
.section-head.center{ margin-inline:auto; }

/* alternating section surfaces */
.surface-bg{ background:var(--bg); }
.surface-card{ background:var(--surface); }
.surface-sand{ background:linear-gradient(180deg,var(--bg),#EBE8F2); }
.surface-dark{ background:#1A1815; color:var(--bg); }