/* ---------------------------------------------------------------------------
 * shared.css — patterns reused across home and interior pages.
 * ------------------------------------------------------------------------- */
.section-header {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(24px, 3vw, 32px);
}

.section-title {
  margin: 0;
  font-size: clamp(24px, 1.875vw, 36px); /* 36px */
  line-height: 1.222;
}

.section-copy > *:last-child {
  margin-bottom: 0;
}

/* A photographic section with a dark wash behind light text — used by the hero,
   the CTA band, and the service cards. Each user sets --overlay-layers to the
   exact Figma fill stack (topmost layer first, as in the CSS shorthand). */
.media-overlay {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  color: var(--white, #ffffff);
}

.media-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-layers, rgba(var(--black-rgb, 0, 0, 0), 0.2));
}

/* The stack shared by the CTA band and the service cards: a black-to-transparent
   gradient, a softer ink gradient at 24%, over a flat wash. */
.overlay-photo-dark {
  --overlay-layers:
    linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 1) 100%),
    linear-gradient(180deg, rgba(33, 37, 41, 0) 38%, rgba(33, 37, 41, 0.24) 98%),
    rgba(var(--black-rgb, 0, 0, 0), var(--overlay-wash, 0.2));
}

.media-overlay :is(h1, h2, h3, h4, p) {
  color: inherit;
}

/* ---------------------------------------------------------------------------
 * Swiper baseline — required when using slidesPerView: 'auto'
 * (logo marquees, brand strips, card carousels with intrinsic-width slides).
 * Without flex-shrink:0 on slides, the wrapper collapses to a vertical stack.
 * ------------------------------------------------------------------------- */
/* Swiper core CSS is not enqueued (only the CDN JS), so the container must
 * clip its own slides — without this, off-screen slides extend the page and
 * cause horizontal scroll on mobile. */
.swiper {
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
}

.swiper-slide {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * Stats band — the four-column figure row with the divider rules between the
 * columns. One component, used by Home, About, Concrete Recycling and Trucking
 * (client round 16: it lived twice, as `.home-stats` in home.css and
 * `.stats-band` in interior.css, byte-identical apart from the figure type).
 *
 *   .stats-band            brand background, 36px figures  (About, Trucking)
 *   .stats-band.is-large   64px figures                     (Home)
 *   .stats-band.is-light   white background, grey figures, no rules (Concrete)
 * ------------------------------------------------------------------------- */
.stats-band {
  padding-block: 125px;
  background: var(--brand, #008AF7);
  color: var(--white, #ffffff);
}

.stats-band dl {
  /* The rule between the columns is drawn inside the gap by .stat::before, so the
     gap and the band height are both variables the rule positions itself against. */
  --stats-gap: 67px;
  --stats-band-height: 261px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--stats-gap);
  min-height: var(--stats-band-height);
  margin: 0;
}

.stats-band .stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 21px;
  text-align: center;
}

/* Client round 22: the rule used to be a `border-left` on the column itself, pushed
   into the gap with `padding-left: 67px; margin-left: -33px`. That padding sits
   INSIDE the column, so the centred figure of every column but the first landed
   ~18px right of its own grid cell, the first gap read wider than the other two,
   and a figure wider than the shrunken content box (the 376px "Specification")
   spilled past the column edge. Drawn as a line in the middle of the gap instead,
   each column's content box equals its grid cell again. */
.stats-band .stat + .stat::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--stats-gap) / -2 - 1px);
  width: 2px;
  height: max(100%, var(--stats-band-height));
  transform: translateY(-50%);
  background: var(--white, #ffffff);
}

.stats-band dt {
  font-family: var(--display, system-ui, sans-serif);
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 700;
  line-height: 1.222;
}

.stats-band dd {
  /* Client round 19: the copy reads better in a narrow measure under the figure. */
  max-width: 272px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
}

.stats-band .source {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.75;
}

/* Home draws the same band with the Figma's oversized figures. */
.stats-band.is-large dt {
  font-size: clamp(34px, 3.33vw, 64px);
  line-height: 1.234;
}

/* Concrete Recycling inverts the palette only — white ground, grey figures. The
   column rules stay (client round 16: it is a colour variation of the blue band,
   not a different component), recoloured so they read on white. */
.stats-band.is-light {
  background: var(--bg, #ffffff);
  color: var(--ink, #212529);
}

.stats-band.is-light dt {
  color: var(--muted, #909091);
}

.stats-band.is-light .stat + .stat::before {
  background: var(--light, #E8E8E8);
}

/* The figures and their labels share two rows across the whole band instead of each
   column centring its own pair, so a one-line figure ("Regional") sits on the same
   line as the last line of a two-line one and every label starts at the same height.
   Four-column layout only — below 992px the band reflows and each cell stands alone. */
@media (min-width: 992px) {
  .stats-band dl {
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: 21px;
  }

  .stats-band .stat {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    justify-items: center;
  }

  /* A one-line figure is centred in the shared figure row, not dropped to its
     baseline: "Regional" reads as sitting between the two lines of its taller
     neighbours rather than hanging off the bottom of them. */
  .stats-band dt {
    grid-row: 1;
    align-self: center;
  }

  .stats-band dd {
    grid-row: 2;
    align-self: start;
  }
}

@media (max-width: 1399px) {
  .stats-band dl {
    --stats-gap: 40px;
  }
}

@media (max-width: 991px) {
  .stats-band {
    padding-block: 56px;
  }

  .stats-band dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    min-height: 0;
  }

  .stats-band .stat + .stat::before {
    display: none;
  }
}

@media (max-width: 575px) {
  .stats-band dl {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
 * Google Maps embed (template-parts/map-embed.php) — replaces the static map
 * screenshots on Home and Contact (client round 21). The band variant runs
 * full-bleed like a photo band; the Home one sits in its own grid cell.
 * ------------------------------------------------------------------------- */
.map-embed {
  display: block;
  width: 100%;
  border: 0;
}

.map-embed--band {
  aspect-ratio: 1920 / 620;
}

@media (max-width: 767px) {
  .map-embed--band {
    aspect-ratio: 4 / 3;
  }
}