/* ---- Stat showcase ----
   Generic, reusable "centred header + media flanked by two stat columns"
   section (first used on Runabout's "Anchored in experience", Figma node
   18568:5468, but named for its structure, not that page/product — see
   memory: generic-reusable-naming).

   Structure:
     .stat-showcase > .stat-showcase__inner
       > .stat-showcase__header    (eyebrow / heading / intro copy, centred)
       > .stat-showcase__body      (column | media | column)
           > .stat-showcase__column (one per side, two stat blocks + divider)
               > .stat-showcase__stat (value + label)
               > .stat-showcase__divider
           > .stat-showcase__media  (single image, fixed to the Figma crop) */

.stat-showcase {
  width: 100%;
  padding-top: var(--space-section-s); /* 96px, gap from the preceding hero */
  padding-bottom: var(--space-section-l); /* 144px, matches Figma's bottom spacing */
  background: var(--colour-white);
  box-sizing: border-box;
}

.stat-showcase__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6xl); /* 64px, header to body */
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---- Header ---- */

.stat-showcase__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl); /* 24px */
  width: 100%;
}

.stat-showcase__intro-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Typography/padding/radius come from .eyebrow (css/style.css) — this
   section sits on a white background, so it needs the grey-101 chip
   instead of .eyebrow's white default (same reasoning as
   .split-content__eyebrow / .card-grid__eyebrow). */
.stat-showcase__eyebrow {
  background: var(--colour-grey-101);
}

/* Typography comes from .text-h2 (css/typography.css). */
.stat-showcase__heading {
  text-align: center;
}

.stat-showcase__heading-accent {
  color: var(--colour-brand-teal);
}

.stat-showcase__heading-dark {
  color: var(--colour-header-grey);
}

/* Typography comes from .text-body-xxl (css/typography.css). */
.stat-showcase__intro {
  margin: 0;
  max-width: 100%;
  color: var(--colour-body-grey);
  text-align: center;
}

/* ---- Body ---- */
/* Exact Figma widths (302px columns / 629px media) rather than fractional
   grid tracks — the 1280px container itself is what stays fluid-ready
   (see the responsive rules below for how this collapses). */
/* Figma's exact widths (302px columns / 629px media) as the MAXIMUM of
   each track rather than a fixed size: 302 + 629 + 302 + two 24px gaps is
   1281px, so as fixed tracks they overflowed any container narrower than
   that — including every viewport between the tablet breakpoint and
   1280px, which pushed the whole page into horizontal scroll. minmax()
   resolves to the exact Figma widths at the container's own 1280px and
   lets the three tracks share the space proportionally below it. */
.stat-showcase__body {
  display: grid;
  grid-template-columns: minmax(0, 302px) minmax(0, 629px) minmax(0, 302px);
  justify-content: center;
  align-items: center;
  gap: var(--space-2xl); /* 24px */
  width: 100%;
}

.stat-showcase__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl); /* 32px */
  align-items: stretch;
  width: 100%;
}

.stat-showcase__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 8px, value to label */
  align-items: center;
  padding: var(--space-2xl); /* 24px */
  text-align: center;
  box-sizing: border-box;
}

/* Typography comes from .text-h2 (css/typography.css). */
.stat-showcase__value {
  margin: 0;
  color: var(--colour-brand-teal);
}

/* Typography comes from .text-h6 (css/typography.css). */
.stat-showcase__label {
  margin: 0;
  color: var(--colour-body-grey);
}

.stat-showcase__divider {
  height: 1px;
  width: 100%;
  background: var(--colour-grey-200);
}

.stat-showcase__media {
  width: 100%;
  height: 438px;
  border-radius: 12px;
  overflow: hidden;
}

.stat-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Responsive ----
   Down to tablet landscape the three-track composition (stats | media |
   stats) still holds — the tracks simply share less space, via the
   minmax() sizing above. At tablet portrait and below the side columns
   would be too narrow for a 48px stat value, so the composition
   reorganises: the image moves to the top at its own aspect ratio, and
   each stat column becomes a row of two stats separated by a vertical
   rule. */
@media (max-width: 1023px) {
  .stat-showcase {
    padding-bottom: var(--space-section-s); /* 96px, down from 144px */
  }

  .stat-showcase__inner {
    gap: var(--space-5xl); /* 42px */
  }

  .stat-showcase__body {
    grid-template-columns: 1fr;
    gap: var(--space-3xl); /* 32px between the media and each stat row */
  }

  .stat-showcase__media {
    order: -1;
    height: auto;
    aspect-ratio: 629 / 438;
  }

  .stat-showcase__column {
    flex-direction: row;
  }

  /* min-width: 0 lets the two stats in a row actually share the width —
     without it each keeps its own min-content width and the pair
     overflows the viewport on small phones. */
  .stat-showcase__stat {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-l) var(--space-s);
  }

  .stat-showcase__divider {
    width: 1px;
    height: auto;
    align-self: stretch;
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  .stat-showcase {
    padding-bottom: var(--space-section-xxs); /* 64px */
  }

  .stat-showcase__inner {
    gap: var(--space-3xl); /* 32px */
  }
}