/* ---------------------------------------------------------------------------
 * theme-stats — the four-column figure row with the divider rules between the
 * columns. Moved out of shared.css so the block carries its own stylesheet
 * (see inc/block-assets.php).
 *
 * 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)
 *
 * Home and About render it as the ACF block; templates/concrete-recycling.php
 * and templates/trucking-e-delivery.php hardcode the same markup. The loader
 * therefore also enqueues this file on those two templates — moving it here
 * without that fallback would have unstyled both static pages.
 * ------------------------------------------------------------------------- */

.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;
  }
}

/* --- Responsive ---------------------------------------------------------- */

@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;
  }
}

/* --- Editor mirrors ------------------------------------------------------ *
 * See blocks/theme/hero/theme-hero.css for why these exist. Inert on the front
 * end; the `crush-block` container is declared only in assets/css/editor.css.
 *
 * This block is the clearest case for them: four columns forced into an ~840px
 * preview pane made "High-Volume", "Specification" and "Regional" overlap,
 * because @media saw the 1536px browser window and kept the desktop layout.
 * ------------------------------------------------------------------------- */

@container crush-block (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;
  }

  .stats-band dt {
    grid-row: 1;
    align-self: center;
  }

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

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

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

  .stats-band dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    min-height: 0;
    /* Undoes the shared-rows `@media (min-width: 992px)` block above. A
       container query cannot un-match a media query, and that one keeps firing
       in the editor because the browser window is wider than 992px even when
       the preview pane is not — so the two-column pane was still running the
       four-column subgrid, which wants four rows from a two-row track. */
    grid-template-rows: none;
    align-content: normal;
  }

  .stats-band .stat {
    display: flex;
    grid-row: auto;
  }

  .stats-band dt,
  .stats-band dd {
    grid-row: auto;
    align-self: auto;
  }

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

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