/* ==========================================================================
   utilities.css — Reusable layout primitives
   Composable, single-responsibility helpers shared across every section.
   ========================================================================== */

/* --- Container: centered, max-width, responsive gutter --------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --- Section: consistent vertical rhythm ---------------------------------- */
.section {
  padding-block: var(--section-padding-y);
}

.section--tight {
  padding-block: var(--section-padding-y-sm);
}

/* Surface variants for the white / soft-gray alternating rhythm. */
.section--surface {
  background: var(--color-surface);
}

.section--alt {
  background: var(--color-surface-alt);
}

.section--dark {
  position: relative;
  background: var(--gradient-dark);
  color: var(--color-on-dark);
  overflow: hidden;
}

.section--brand {
  position: relative;
  background: var(--gradient-band);
  color: #fff;
  overflow: hidden;
}

/* --- Grid helpers --------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Text width helper ---------------------------------------------------- */
.measure {
  max-width: var(--measure);
}

/* --- Stack: vertical flow with configurable gap --------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Split: two-column content layout shared by interior pages ------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Media-led variant: image column slightly narrower than the text column. */
.split--media {
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-10);
}

/* Text-led variant: text column on the left, media on the right. */
.split--media-flip {
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--space-10);
}