/* ==========================================================================
   Stats — student outcomes band (pink cards on dark gray, sparkle ribbons)
   ========================================================================== */

.stats {
  position: relative;
  overflow: hidden;
  background: #161616;
  padding-top: clamp(47px, calc(50px - 3 * (100vw - 390px) / 1290), 50px);
  /* cap-trim compensation: Figma 49/50 is measured from footnote cap-bottom; -5px for descent+half-leading */
  padding-bottom: clamp(44px, calc(45px - 1 * (100vw - 390px) / 1290), 45px);
  padding-inline: clamp(18px, calc(18px + 222 * (100vw - 390px) / 1290), 240px);
}

.stats__inner {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
}

.stats__ribbon {
  position: absolute;
  pointer-events: none;
  /* exported PNGs contain baked opaque-black particles that Figma does not render;
     backdrop is uniform #161616 and all real sparkles are lighter, so lighten hides
     the black junk while leaving bright sparkles unchanged */
  mix-blend-mode: lighten;
}
.stats__ribbon--mobile {
  top: -299px;
  left: 50%;
  transform: translateX(-50%);
  width: 264px;
  height: 1302px;
}
.stats__ribbon--desktop { display: none; }

.stats__cards {
  display: grid;
  gap: 28px;
}

.stats__card {
  height: clamp(162px, calc(162px + 30 * (100vw - 390px) / 1290), 192px);
  padding-inline: 33px;
  padding-top: clamp(22px, calc(22px + 13 * (100vw - 390px) / 1290), 35px);
  background: var(--c-pink-deep);
  border-radius: 7px;
  box-shadow: 0 4px 29.2px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.stats__value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 78px;
  line-height: 88px;
  text-transform: uppercase;
}

.stats__digits {
  background: url('/wp-content/themes/ogle/assets/img/glitter-texture.webp') center / cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stats__pct {
  font-size: 47px;
  line-height: 1; /* keep the 47px run from expanding the 88px value line box */
  color: var(--c-white);
}

.stats__label {
  margin-top: clamp(17px, calc(17px + 7 * (100vw - 390px) / 1290), 24px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--c-white);
}

.stats__footnote {
  /* cap-trim compensation: Figma gap 27/39 is cap-to-cap; line box adds ~5px above cap */
  margin-top: clamp(22px, calc(22px + 12 * (100vw - 390px) / 1290), 34px);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22.8px;
  color: var(--c-white);
  text-align: center;
}

@media (min-width: 900px) {
  .stats__cards { grid-template-columns: repeat(3, 1fr); }
  .stats__ribbon--mobile { display: none; }
  .stats__ribbon--desktop {
    display: block;
    /* unitless multipliers: length*length inside calc() is invalid and drops the declaration */
    top: calc(64 * min(100vw, 1680px) / 1680);
    left: 50%;
    margin-left: calc(64 * min(100vw, 1680px) / 1680);
    transform: translateX(-50%);
    width: calc(1302 * min(100vw, 1680px) / 1680);
    height: auto;
  }
}