/* Stats Grid component styles */
.stats-grid {
  padding: 0 0 48px 0;
}

@media (min-width: 768px) {
  .stats-grid {
    padding: 64px 0; /* md:py-16 */
  }
}

.stats-grid__header {
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .stats-grid__header {
    margin-bottom: 3rem;
  }
}

/* Responsive grid - always 2 columns minimum */
.stats-grid__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 0;
}

/* 3 columns at 840px+ */
@media (min-width: 840px) {
  .stats-grid__items {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 0;
  }
}

.stats-grid__item {
  position: relative;
  text-align: center;
  padding: 1rem 0.75rem;
}

@media (min-width: 560px) {
  .stats-grid__item {
    padding: 1rem 0.5rem;
  }
}

@media (min-width: 768px) {
  .stats-grid__item {
    padding: 1.5rem 1rem;
  }
}

@media (min-width: 1024px) {
  .stats-grid__item {
    padding: 1rem 0.5rem;
  }
}

/* Gradient divider - between columns */
.stats-grid__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--color-light) 0%,
    #00029E 35%,
    #0037FF 65%,
    var(--color-light) 100%
  );
}

/* 2-column layout: show divider on 2nd column (even items) */
.stats-grid__item:nth-child(2n + 1)::before {
  display: none;
}

/* 3-column layout: show divider on 2nd and 3rd columns */
@media (min-width: 840px) {
  .stats-grid__item:nth-child(2n + 1)::before {
    display: block;
  }
  .stats-grid__item:nth-child(3n + 1)::before {
    display: none;
  }
}

/* Number styling - Figma 50px @ 1920 → 37.5px @ 1440 */
.stats-grid__number {
  font-size: clamp(1.75rem, 6vw, 2.35rem);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .stats-grid__number {
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 1024px) {
  .stats-grid__number {
    margin-bottom: 0.75rem;
  }
}

/* Label styling - Figma 24px @ 1920 → 18px @ 1440 */
.stats-grid__label {
  font-size: clamp(0.875rem, 3vw, 1.025rem);
  font-weight: 900;
  color: var(--color-text-muted);
  line-height: 1.2;
  text-transform: capitalize;
}