/* ==========================================================================
   LAYOUT PRIMITIVES
   Container · Section · Grid
   Backgrounds are full-bleed; content is contained. One container width
   page-wide (design-rules §2).
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTAINER
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + (var(--container-padding-inline) * 2));
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

/* --------------------------------------------------------------------------
   SECTION
   One shared padding utility across every section. Do not vary case by case.
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-padding-block);
  position: relative;
}

/* First section only — clears the fixed navigation. */
.section--top { padding-block-start: calc(var(--nav-height) + var(--section-padding-block)); }

/* Grounds. --color-surface-raised has ONE permitted use page-wide (footer). */
.section--raised { background-color: var(--color-surface-raised); }
.section__title   { display: flex; flex-direction: column; gap: var(--gap-title-group); }
.section__title + * { margin-block-start: var(--gap-heading-to-content); }
.section__title--center { align-items: center; text-align: center; }

/* --------------------------------------------------------------------------
   GRID
   Layouts express as full · halves · thirds · 7-5 · 5-7 · 4-8 only.
   All collapse to one column at ≤767px.
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: 1fr;
}

/* Reference grid, for alignment discipline where a bespoke span is needed. */
.grid--12 { grid-template-columns: repeat(1, 1fr); }

/* Row gap when a grid collapses should not inherit the wide column gap. */
@media (max-width: 767px) {
  .grid { row-gap: var(--space-lg); }
}

@media (min-width: 768px) {
  .grid--12     { grid-template-columns: repeat(12, 1fr); }
}

/* Column span helpers for .grid--12 */
@media (min-width: 768px) {
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
}