/* ==========================================================================
   layout.css — the page grid and section rhythm.
   ========================================================================== */

/* Content rail. `min(100% - 2x gutter, rail)` centres the composition and
   keeps 1920px from stretching the editorial layouts. */
.container {
  width: min(100% - (2 * var(--gutter)), var(--rail));
  margin-inline: auto;
}

/* A wider rail for bands that the comp runs edge-to-edge (hero, footer). */
.container--wide {
  width: min(100% - (2 * clamp(1.25rem, 4vw, 4rem)), 90rem);
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - (2 * var(--gutter)), 64rem);
  margin-inline: auto;
}

/* --- Section rhythm ------------------------------------------------------ */

.section {
  position: relative;
  padding-block: var(--section-pad-y);
}

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

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

.section--light { background: var(--off-white); }
.section--pale  { background: var(--pale-blue); }
.section--navy  { background: var(--navy); color: var(--white); }

/* --- Split layouts -------------------------------------------------------
   The comp's editorial bands are 50/50 with a wide inner gutter. These
   collapse to a single column below the tablet breakpoint.
   ---------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}

.split--wide-left  { grid-template-columns: 1.15fr 0.85fr; }
.split--wide-right { grid-template-columns: 0.85fr 1.15fr; }

@media (max-width: 991px) {
  .split,
  .split--wide-left,
  .split--wide-right {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 3rem);
  }

  /* When stacked, the media should lead on bands where it was second. */
  .split--reverse-on-stack > *:first-child { order: 2; }
  .split--reverse-on-stack > *:last-child  { order: 1; }
}

/* --- Grid ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

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

@media (max-width: 991px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}