/* ============================================================
   STATS.CSS
   Statistics banner — four numbers on a circuit-board photo
   with a 50% dark overlay, separated by gradient dividers.
   ============================================================ */


/* ------------------------------------------------------------
   1. SECTION SHELL
   ------------------------------------------------------------ */
.stats {
  position: relative;
  border-radius: 19px;          /* Figma: rounded-[18.75px] */
  overflow: hidden;
  padding: 44px 74px;           /* Figma: py-[44.25px] px-[74.25px] */
  margin-top: var(--sp-4);
}


/* ------------------------------------------------------------
   2. BACKGROUND  (circuit-board photo + 50% dark overlay)
   ------------------------------------------------------------ */
.stats__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stats__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stats__bg-dim {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.5);   /* Figma: bg-[rgba(17,17,17,0.5)] */
}


/* ------------------------------------------------------------
   3. STATS ROW
   ------------------------------------------------------------ */
.stats__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
}


/* ------------------------------------------------------------
   4. INDIVIDUAL STAT ITEM
   ------------------------------------------------------------ */
.stats__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                    /* Figma: gap-[11.881px] */
  text-align: center;
  min-width: 0;
}

/* Large number  e.g. "100+", "90%", "60+", "2M+" */
.stats__number {
  font-family: var(--font-display);     /* Sora */
  font-weight: var(--fw-semibold);      /* 600 */
  font-size: 72px;
  line-height: 52.8px;          /* Figma: leading-[52.805px] — intentionally tight */
  letter-spacing: -0.0183em;    /* Figma: tracking-[-1.3201px] at 72px */
  color: #ffffff;
  white-space: nowrap;
}

/* Two-line descriptor label */
.stats__label {
  font-family: var(--font-display);     /* Sora */
  font-weight: var(--fw-regular);       /* 400 */
  font-size: 21px;              /* Figma: 21.122px */
  line-height: 26.4px;          /* Figma: leading-[26.403px] */
  color: #ffffff;
}


/* ------------------------------------------------------------
   5. DIVIDER  (vertical gradient line between stat items)
   Figma: horizontal SVG line (transparent→white→transparent)
   rotated 90deg. Recreated as a CSS gradient column.
   Heights in Figma: 234.75 / 207.75 / 213.75px → use ~220px avg.
   ------------------------------------------------------------ */
.stats__divider {
  flex: 0 0 1px;
  width: 1px;
  height: 220px;
  background: linear-gradient(
    to bottom,
    transparent     0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent     100%
  );
  align-self: center;
}


/* ------------------------------------------------------------
   6. RESPONSIVE
   ------------------------------------------------------------ */

/* Tablet — tighten horizontal padding, scale numbers */
@media (max-width: 1024px) {
  .stats {
    padding: 40px 40px;
  }

  .stats__number {
    font-size: 56px;
    line-height: 44px;
  }

  .stats__label {
    font-size: 16px;
    line-height: 22px;
  }

  .stats__divider {
    height: 160px;
  }
}

/* Mobile — 2×2 grid, hide dividers */
@media (max-width: 767px) {
  .stats {
    padding: 36px 28px;
    border-radius: 16px;
  }

  .stats__row {
    flex-wrap: wrap;
    gap: 32px 0;
  }

  .stats__item {
    flex: 0 0 50%;
  }

  .stats__divider {
    display: none;
  }

  .stats__number {
    font-size: 48px;
    line-height: 40px;
  }

  .stats__label {
    font-size: 14px;
    line-height: 20px;
  }
}

/* Small mobile — single column */
@media (max-width: 480px) {
  .stats__item {
    flex: 0 0 100%;
  }
}