/* =====================================================================
   About Stats — Figma "D - About Stats" 9377:30873
   Horizontal bar of 4 stats, centred, locked to the 1240 content area.
   Light/white band. Desktop: 4-up row (40px gaps, equal 210px columns).
   Mobile (<=767.98px): wraps to 2x2.
   Component-local custom props only; shared tokens otherwise. No edits to
   tokens.css. New component, so no impact on other pages.
   ===================================================================== */

.about-stats {
  --as-pad-y: 40px;       /* vertical band padding (Figma py-40) */
  --as-col-gap: 40px;     /* gap between stats in the row */
  --as-item-gap: 15px;    /* gap between icon / value / label (Figma) */
  --as-item-w: 210px;     /* fixed stat column width */
  --as-icon-h: 30px;      /* icon height; width auto keeps logo aspect */
  --as-bg: #071f39;       /* Figma dark navy band */

  background: var(--as-bg);           /* dark band (Figma) */
  padding-block: var(--as-pad-y);
}

.about-stats__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--as-col-gap);
  /* Keep the .container max-width but let it center in the viewport
     (a bare `margin:0` here was overriding .container's margin-inline:auto,
     pinning the row flush-left). */
  margin-block: 0;
  margin-inline: auto;
  list-style: none;
}

.about-stats__item {
  flex: 0 0 var(--as-item-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--as-item-gap);
  text-align: center;
}

.about-stats__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--as-icon-h);
}

.about-stats__icon img {
  display: block;
  height: var(--as-icon-h);
  width: auto;
}

.about-stats__value {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);            /* 24 */
  line-height: var(--lh-36);          /* 36 */
  color: var(--gray-0);               /* white on dark band */
}

.about-stats__label {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);            /* 16 */
  line-height: var(--lh-25);          /* 25 */
  color: var(--soft-blue);            /* light blue on dark band (Figma) */
}

/* --- Tablet: 2×2 wrap (768–1023) --- */
@media (max-width: 1023.98px) {
  .about-stats__row {
    flex-wrap: wrap;
    gap: var(--as-item-gap) var(--as-col-gap);
    row-gap: var(--as-pad-y);
  }

  .about-stats__item {
    flex: 0 0 calc(50% - (var(--as-col-gap) / 2));
  }
}

/* --- Mobile: 2x2 wrap --- */
@media (max-width: 767.98px) {
  .about-stats__row {
    flex-wrap: wrap;
    gap: var(--as-item-gap) var(--as-col-gap);
    row-gap: var(--as-pad-y);
  }

  .about-stats__item {
    flex: 0 0 calc(50% - (var(--as-col-gap) / 2));
  }
}