/* =====================================================================
   HP Stats Bar — Figma UK desktop 10125:20611 / mobile 10125:20966
   Deep-blue band, centred row of headline figures. Tokens only.
   ===================================================================== */

.hp-stats {
  background: var(--breakout-grad-dark); /* #071f39 Secondary/Deep Blue */
  padding-block: var(--home-bar-pad-y);  /* 20px */
}

.hp-stats__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-stats-gap);              /* 75px */
}

.hp-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-stats-item-gap);         /* 5px */
  text-align: center;
}

.hp-stats__value {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-stats-item-gap);         /* 5px (number <-> star) */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);               /* 32 */
  line-height: var(--lh-45);             /* 45 */
  color: var(--gray-0);
  white-space: nowrap;
}

.hp-stats__suffix {
  color: var(--og-blue);                 /* #0080F3 */
}

.hp-stats__star {
  width: var(--hp-stats-star-size);      /* 26px */
  height: var(--hp-stats-star-size);
  flex-shrink: 0;
}

.hp-stats__label {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);               /* 18 */
  line-height: var(--lh-25);             /* 25 */
  color: var(--light-blue);              /* #F2F4F8 */
  white-space: nowrap;
}

/* --- Tablet — 4-up row → 2×2 grid, no overflow --- */
@media (max-width: 1023.98px) {
  .hp-stats__row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--home-stack-gap); /* 20px */
  }

  .hp-stats__item {
    flex: 0 0 calc(50% - (var(--home-stack-gap) / 2));
  }
}

/* --- Mobile (UK mobile node 10125:20966) — 2x2 wrap, 20px gutters --- */
@media (max-width: 767.98px) {
  .hp-stats {
    padding-block: var(--ba-pad-y);      /* 40px */
  }

  .hp-stats__row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--home-stack-gap);          /* 20px */
  }

  .hp-stats__item {
    flex: 0 0 calc(50% - (var(--home-stack-gap) / 2));
  }

  .hp-stats__value {
    font-size: var(--hp-stats-value-fs-mobile);  /* 36 */
    line-height: var(--hp-stats-value-lh-mobile); /* 40 */
  }

  .hp-stats__label {
    white-space: normal;
    max-width: var(--hp-stats-label-max-mobile);  /* 150px */
  }
}