/* ===== STATS / شريط الأرقام =====
   Full-width band, RTL. Desktop @1280 matches Figma node 2144:164 exactly.
   Uses global tokens from css/style.css :root (do NOT redefine here). */

.stats {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 245px;
  padding-inline: 24px;
  box-sizing: border-box;
  background: #f7f7fb; /* Figma "باكجراوند" — section background */
  font-family: var(--font);
}

/* inner centered row (Figma: 1152px) */
.stats__row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1152px;
  max-width: 100%;
  direction: ltr;          /* Figma order: +10 left → +12 right (also fixes +10 bidi) */
}

/* one stat column */
.stats__item {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* circular icon chip */
.stats__chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: var(--tint); /* #EEEDF6 */
}

.stats__icon {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--primary); /* #2A1E59 — drives SVG currentColor stroke */
}

/* number + label */
.stats__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.stats__num {
  margin: 0;
  font-weight: 700; /* Tajawal Bold */
  font-size: 52px;
  line-height: 1;
  color: var(--primary); /* #2A1E59 */
  white-space: nowrap;
}

.stats__label {
  margin: 0;
  font-weight: 500; /* Tajawal Medium */
  font-size: 16px;
  line-height: 1;
  color: var(--border); /* #6B6790 */
  white-space: nowrap;
}

/* vertical accent divider */
.stats__sep {
  flex-shrink: 0;
  width: 1px;
  height: 96px;
  background: var(--accent); /* #ACD91A */
}

/* ===== Responsive reflow ===== */

/* Tablet: 2 x 2 grid, hide vertical dividers */
@media (max-width: 900px) {
  .stats {
    min-height: 0;
    padding-block: 48px;
  }
  .stats__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 24px;
    width: 560px;
  }
  .stats__item {
    flex: initial;
  }
  .stats__sep {
    display: none;
  }
}

/* Phone: tighter, smaller numbers */
@media (max-width: 560px) {
  .stats {
    padding-block: 40px;
    padding-inline: 20px;
  }
  .stats__row {
    width: 100%;
    max-width: 360px;
    gap: 36px 16px;
  }
  .stats__num {
    font-size: 40px;
  }
  .stats__label {
    font-size: 15px;
  }
}