/* Stats banner, Canvas component version.
   ⭐ Type sizes are the ones MEASURED against her comp on 20 Aug: the number is
   30px at weight 400, ⛔ not 48px at 600, and the label is 12px uppercase.
   ⛔ Do not put a clamp on the number — a value that scales with the viewport
   fights the label under it, which does not scale. */
.ff-stats {
  /* Bootstrap's column padding insets this by 12px on each side, so the band
     sat 24px narrower than the container it lives in. Cancelling the gutter
     makes it run the full container width, like her comp. */
  inline-size: calc(100% + 1.5rem);
  margin-inline: -0.75rem;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem 1.5rem;
  text-align: center;
  background: #edf6fc;
  padding: 2.5rem 1.5rem;
  margin-block: 1rem;

  /* FULL-BLEED BAND, CONTAINED NUMBERS — her ask, 2026-08-24:
     "her number bar goes all the way across the screen (but still keeps the
     info boxed at that width we have everything at)... emulate the header with
     it then square."

     ⭐⭐ THIS IS THE HEADER'S OWN PATTERN. `.header` paints edge to edge while
     `.navbar .container` holds its content in. Measured: header 64→1636,
     container 202→1498. The band now reads as the page's second full-width
     strip rather than a card that outgrew its column.

     ⭐ HOW: the box-shadow paints the same colour outwards past the element, so
     the BAND is full width while the element itself stays at container width —
     which is what keeps the numbers lined up with everything else. The
     clip-path trims that paint to the horizontal axis only, so it does not
     bleed above or below.

     ⭐⭐ WHY NOT `inline-size: 100vw` + a negative margin, the usual trick:
     ⛔ `100vw` INCLUDES the scrollbar, so it adds a few px of horizontal
     scroll and then needs an `overflow` patch somewhere else to hide it. This
     version changes no layout at all, so there is nothing to overflow.
     ⛔ And `padding-inline: calc(50vw - 50%)` does NOT work once the element is
     already 100vw — the 50% resolves against 100vw and comes out 0.

     ⛔ NO BORDER-RADIUS. A radius only reads when page colour is visible around
     the corner; edge to edge there is none, so it would sit off-screen or leave
     a sliver. Full bleed and rounded are a choice, ⛔ not a combination.

     ⚠️ This means the band can only ever be a FLAT COLOUR. A gradient or image
     background would stop at the element and the shadow would not match it. */
  box-shadow: 0 0 0 100vmax #edf6fc;
  clip-path: inset(0 -100vmax);
}

.ff-stats__value {
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.05;
  color: #080D17;
}

.ff-stats__label {
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #4D6EAA;
}

@media (max-width: 991.98px) {
  .ff-stats { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; }
}

@media (max-width: 575.98px) {
  .ff-stats { grid-template-columns: 1fr; gap: 1.25rem; }
}