/*
  Stats (statsBlock, MB-8; contract umbraco/blocks/statsBlock.md). Mobile first: intro tile, stat tiles, photo, one per
  row. 768–1279: intro and stats side by side (stats in 2 columns), the photo full width below (2 : 1). From 1280:
  intro | photo | stats (2 columns, two rows), the photo filling its column. Each tile is a band (css/shared/themes.css), so its text colours follow its own colour. Site hooks:
  --stats-gap, --stats-tile-pad, --stats-stat-pad, --stats-stat-pad-wide, --stats-tile-radius, --stats-row-min,
  --stats-stat-min, --stats-figure-fs, --stats-figure-fs-wide.
*/
.stats { padding: var(--section-space) var(--page-gutter); }
.stats__inner {
  display: grid;
  gap: var(--stats-gap, var(--space-3));
  max-width: var(--container-max);
  margin: 0 auto;
  grid-template-areas: "intro" "list" "media";
}
.stats__intro { grid-area: intro; }
.stats__list { grid-area: list; }
.stats__media { grid-area: media; margin: 0; min-width: 0; }

.stats__tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--stats-tile-pad, var(--space-8));
  border-radius: var(--stats-tile-radius, var(--radius-card));
  overflow-wrap: break-word;
}
/* A tile with the same colour as the band behind it keeps a visible edge. */
.stats__tile--edge { box-shadow: inset 0 0 0 var(--border-width) var(--color-hairline); }

.stats__eyebrow { align-self: flex-start; }
.stats__heading { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); overflow-wrap: break-word; }
.stats__eyebrow + .stats__heading { margin-top: var(--space-3); }
.stats__intro-text p { margin: var(--space-5) 0 0; line-height: var(--lh-body); }

.stats__list {
  display: grid;
  gap: var(--stats-gap, var(--space-3));
  margin: 0;
  padding: 0;
  list-style: none;
}
.stats__stat { min-height: var(--stats-stat-min, 12rem); }
.stats__figure {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--stats-figure-fs, var(--fs-h3));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  hyphens: auto;
}
.stats__text { margin: auto 0 0; padding-top: var(--space-8); line-height: var(--lh-body); }

.stats__media img,
.stats__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--stats-tile-radius, var(--radius-card)); }

@media (min-width: 768px) {
  .stats__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "intro list" "media media"; }
  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .stats__stat { padding: var(--stats-stat-pad, var(--space-6)); }
  .stats--count-2 .stats__stat,
  .stats--count-3 .stats__stat:last-child { grid-column: 1 / -1; }
  .stats__media img,
  .stats__img { aspect-ratio: 2 / 1; }
}

@media (min-width: 1280px) {
  .stats__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "intro media list"; }
  .stats--no-photo .stats__inner { grid-template-areas: "intro list list"; }
  .stats__list { grid-template-rows: repeat(2, minmax(var(--stats-row-min, 18rem), auto)); grid-auto-rows: auto; }
  /* Stat tiles are a sixth of the content width here: smaller padding and figure (sites tune both). */
  .stats__stat { min-height: 0; padding: var(--stats-stat-pad-wide, var(--space-5)); }
  .stats__stat .stats__figure { font-size: var(--stats-figure-fs-wide, var(--fs-h4)); }
  .stats__media { position: relative; }
  .stats__media img,
  .stats__img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* ---- MB-127 Layouts "Row of numbers" and "Big number" (from FuelChief; statsBlock-row/-big.cshtml) ----
  Breakpoints, wrapping and alignment are the original's (a figure wider than its column runs past it, as there): Row one line from 1400 px; below it each number is half the row
  wide with the marks between, so 768-1399 wraps as the original (first number and mark, then two numbers with the second
  mark hidden, then the rest); under 768 one centred column with every mark. Big number: two columns from 1200 px, one
  centred column below; stats in 2 columns from 576 px. Text sizes change at the original's widths (576, 768, 992).
  Sizes come from tokens; a site sets its own through these hooks (FuelChief's values: qa/blocks/build/MB-127.md).
  Row: --stats-row-pad-block, --stats-row-pad-inline, --stats-row-max, --stats-row-shift (wide screens), --stats-row-gap
  (phones), --stats-row-row-gap, --stats-row-mark, --stats-row-mark-w, --stats-row-mark-h, --stats-row-mark-space,
  --stats-row-figure-fs(-mid, -phone), --stats-row-figure-fw, --stats-row-figure-lh, --stats-row-figure-ls, --stats-row-label-fs,
  --stats-row-label-space, --stats-row-text-fs(-phone), --stats-row-text-lh, --stats-row-text-space, --stats-row-text-colour.
  Big number: --stats-big-pad-block (or -pad-top, -pad-bottom), --stats-big-max, --stats-big-gap-x(-wide), --stats-big-gap-y, --stats-big-gap-stack,
  --stats-big-list-before, --stats-big-heading-fs(-mid, -phone), --stats-big-heading-fw, --stats-big-heading-lh, --stats-big-heading-ls,
  --stats-big-text-space, --stats-big-para-space, --stats-big-para-lh, --stats-big-figure-fs(-mid, -phone), --stats-big-figure-lh,
  --stats-big-figure-ls, --stats-big-rule, --stats-big-rule-space, --stats-big-stat-fs(-mid, -phone), --stats-big-stat-lh, --stats-big-stat-gap(-mid),
  --stats-big-list-gap(-mid, -phone), --stats-big-card-w, --stats-big-card-h, --stats-big-card-pad(-phone),
  --stats-big-card-after-mid, --stats-big-card-label-fs, --stats-big-card-text-fs(-mid, -phone), --stats-big-card-text-lh, --stats-big-card-text-ls,
  --stats-big-shade, --stats-big-shade-hover.
*/
.stats__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Row of numbers */
/* overflow-x: clip: the wide-screen shift (as the original) never makes the page scroll sideways. */
.stats--row { padding: var(--stats-row-pad-block, var(--section-space)) var(--stats-row-pad-inline, var(--page-gutter)); overflow-x: clip; text-align: center; }
.stats__row-inner { max-width: var(--stats-row-max, var(--container-max)); margin: 0 auto; }
.stats__row-list { display: flex; flex-direction: column; align-items: center; gap: var(--stats-row-gap, var(--space-8)); }
.stats__row-item { width: calc(50% - var(--stats-row-mark-space, var(--space-6))); min-width: 0; }
.stats__row-mark {
  flex: none;
  align-self: center;
  width: var(--stats-row-mark-w, var(--space-6));
  height: var(--stats-row-mark-h, var(--space-8));
  background: var(--stats-row-mark, linear-gradient(var(--color-link), var(--color-link)) center / var(--border-width-heavy) 100% no-repeat);
}
.stats__row-figure {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--stats-row-figure-fs-phone, var(--stats-row-figure-fs, var(--fs-h1)));
  font-weight: var(--stats-row-figure-fw, var(--fw-bold));
  line-height: var(--stats-row-figure-lh, var(--lh-display));
  letter-spacing: var(--stats-row-figure-ls, normal);
}
.stats__row-label { margin: var(--stats-row-label-space, var(--space-4)) 0 0; color: var(--color-heading); font-size: var(--stats-row-label-fs, var(--fs-body)); font-weight: var(--fw-medium); line-height: var(--stats-row-text-lh, var(--lh-heading)); }
.stats__row-text { margin: var(--stats-row-text-space, var(--space-5)) 0 0; color: var(--stats-row-text-colour, var(--color-text)); font-size: var(--stats-row-text-fs-phone, var(--stats-row-text-fs, var(--fs-body-sm))); line-height: var(--stats-row-text-lh, var(--lh-heading)); }

@media (min-width: 576px) {
  .stats__row-figure { font-size: var(--stats-row-figure-fs-mid, var(--stats-row-figure-fs, var(--fs-h1))); }
  .stats__row-text { font-size: var(--stats-row-text-fs, var(--fs-body-sm)); }
}
@media (min-width: 768px) {
  .stats__row-list { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--stats-row-row-gap, var(--space-12)) 0; }
  .stats__row-mark { margin-inline: var(--stats-row-mark-space, var(--space-6)); }
  .stats__row-mark:nth-of-type(2) { display: none; }
}
@media (min-width: 992px) {
  .stats__row-figure { font-size: var(--stats-row-figure-fs, var(--fs-h1)); }
}
@media (min-width: 1400px) {
  .stats__row-list { position: relative; inset-inline-start: var(--stats-row-shift, 0px); flex-wrap: nowrap; }
  .stats__row-item { width: calc(25% - var(--stats-row-mark-w, var(--space-6)) - 2 * var(--stats-row-mark-space, var(--space-6))); }
  .stats__row-mark:nth-of-type(2) { display: block; }
}

/* Big number */
.stats--big {
  padding: var(--stats-big-pad-top, var(--stats-big-pad-block, var(--section-space))) var(--page-gutter) var(--stats-big-pad-bottom, var(--stats-big-pad-block, var(--section-space)));
  overflow-x: clip;
}
.stats__big-inner { display: flex; flex-direction: column; gap: var(--stats-big-gap-stack, var(--space-12)); max-width: var(--stats-big-max, var(--container-max)); margin: 0 auto; text-align: center; }
.stats__big-heading {
  margin: 0;
  font-size: var(--stats-big-heading-fs-phone, var(--stats-big-heading-fs, var(--fs-h3)));
  font-weight: var(--stats-big-heading-fw, var(--fw-medium));
  line-height: var(--stats-big-heading-lh, var(--lh-heading));
  letter-spacing: var(--stats-big-heading-ls, normal);
  overflow-wrap: break-word;
}
.stats--big .stats__eyebrow + .stats__big-heading { margin-top: var(--space-3); }
.stats__big-intro-text { margin-top: var(--stats-big-text-space, var(--space-8)); }
.stats__big-intro-text p { margin: var(--stats-big-para-space, var(--space-5)) 0 0; line-height: var(--stats-big-para-lh, var(--lh-body)); }
.stats__big-intro-text p:first-child { margin-top: 0; }
.stats__big-number { width: 100%; margin-inline: auto; }
.stats__big-figure {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--stats-big-figure-fs-phone, calc(var(--fs-display) * 1.75));
  font-weight: var(--fw-bold);
  line-height: var(--stats-big-figure-lh, 0.93);
  letter-spacing: var(--stats-big-figure-ls, normal);
  white-space: nowrap;
}
.stats__big-figure-text,
.stats__big-stat { border-bottom: var(--border-width) solid var(--stats-big-rule, var(--color-link)); }
.stats__big-figure-text { margin: 0; padding-block: var(--stats-big-rule-space, var(--space-8)); line-height: var(--stats-big-para-lh, var(--lh-heading)); }
.stats__big-list { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--stats-big-list-gap-phone, var(--space-8)); margin: var(--stats-big-list-before, 0) 0 0; padding: 0; list-style: none; }
.stats__big-stat { display: flex; flex-direction: column; gap: var(--stats-big-stat-gap-mid, var(--space-5)); min-width: 0; padding-bottom: var(--stats-big-rule-space, var(--space-8)); }
.stats__big-stat-figure {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--stats-big-stat-fs-phone, var(--stats-big-stat-fs, var(--fs-display)));
  font-weight: var(--fw-bold);
  line-height: var(--stats-big-stat-lh, var(--lh-heading));
  letter-spacing: var(--stats-big-figure-ls, normal);
}
.stats__big-stat-text { margin: 0; line-height: var(--stats-big-para-lh, var(--lh-heading)); }

.stats__big-card { position: relative; display: flex; width: 100%; min-height: var(--stats-big-card-h, 16rem); margin-inline: auto; overflow: hidden; }
.stats__big-card picture,
.stats__big-card-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* The shade over the photo, as the original: darker and blurred while the pointer is on a linked card (0.3 s linear). */
.stats__big-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--stats-big-shade, color-mix(in srgb, var(--band-bg) 35%, transparent));
  transition: all 0.3s linear;
}
.stats__big-card:has(.stats__big-card-link):hover::before {
  background-color: var(--stats-big-shade-hover, color-mix(in srgb, var(--band-bg) 80%, transparent));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.stats__big-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--stats-big-card-pad-phone, var(--stats-big-card-pad, var(--space-8)));
}
.stats__big-card-label { margin: 0; color: var(--color-heading); font-size: var(--stats-big-card-label-fs, var(--fs-label)); font-weight: var(--fw-bold); line-height: 1; text-transform: uppercase; }
.stats__big-card-text {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--stats-big-card-text-fs-phone, var(--stats-big-card-text-fs, var(--fs-h3)));
  font-weight: var(--fw-bold);
  line-height: var(--stats-big-card-text-lh, var(--lh-heading));
  letter-spacing: var(--stats-big-card-text-ls, normal);
  overflow-wrap: break-word;
}
/* The link covers the whole card (one link, read once); its focus ring is drawn inside the card's edge. */
.stats__big-card-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.stats__big-card-link:focus-visible { outline: none; }
.stats__big-card-link:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: -3px; }

@media (min-width: 576px) {
  .stats__big-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__big-heading { font-size: var(--stats-big-heading-fs-mid, var(--stats-big-heading-fs, var(--fs-h3))); }
  .stats__big-stat-figure { font-size: var(--stats-big-stat-fs-mid, var(--stats-big-stat-fs, var(--fs-display))); }
  .stats__big-card-text { font-size: var(--stats-big-card-text-fs-mid, var(--stats-big-card-text-fs, var(--fs-h3))); }
}
@media (min-width: 768px) {
  .stats__big-list { gap: var(--stats-big-list-gap-mid, var(--space-6) var(--space-16)); }
  .stats__big-figure { font-size: var(--stats-big-figure-fs-mid, calc(var(--fs-display) * 2)); }
  .stats__big-card { width: var(--stats-big-card-w, 100%); max-width: 100%; }
  .stats__big-card-body { padding: var(--stats-big-card-pad, var(--space-8)); }
}
@media (max-width: 991.98px) {
  .stats__big-card { margin-bottom: var(--stats-big-card-after-mid, 0); }
}
@media (min-width: 992px) {
  .stats__big-number { width: 75%; }
  .stats__big-list { gap: var(--stats-big-list-gap, var(--space-12)); }
  .stats__big-stat { gap: var(--stats-big-stat-gap, var(--space-1)); }
  .stats__big-heading { font-size: var(--stats-big-heading-fs, var(--fs-h3)); }
  .stats__big-figure { font-size: var(--stats-big-figure-fs, calc(var(--fs-display) * 2.5)); }
  .stats__big-stat-figure { font-size: var(--stats-big-stat-fs, var(--fs-display)); }
  .stats__big-card-text { font-size: var(--stats-big-card-text-fs, var(--fs-h3)); }
}
@media (min-width: 1200px) {
  .stats__big-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "intro number" "card list";
    gap: var(--stats-big-gap-y, var(--space-12)) var(--stats-big-gap-x, var(--space-16));
    align-items: start;
    text-align: start;
  }
  .stats__big-intro { grid-area: intro; }
  .stats__big-number { grid-area: number; width: 100%; }
  .stats__big-list { grid-area: list; margin-top: 0; }
  /* As the original: a card wider than its column runs into the gap beside it. */
  .stats__big-card { grid-area: card; max-width: none; margin-inline: 0; }
  .stats__big-card-body { align-items: flex-start; }
}
@media (min-width: 1400px) {
  .stats__big-inner { column-gap: var(--stats-big-gap-x-wide, var(--stats-big-gap-x, var(--space-16))); }
}