/**
 * Statistics Strip Styles
 *
 * Light purple-tinted accent band flowing naturally out of the About section.
 * Animated count-up numbers powered by stats-counter.js + GSAP.
 *
 * @package Foursees
 */

/* ================================================================
   STATISTICS STRIP — section wrapper
   ================================================================ */

.stats-strip {
  background: #f3eef8;                              /* soft purple-tinted white */
  border-top: 3px solid var(--primary-500, #a352a6); /* thin purple accent line */
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* Noise texture hidden on light backgrounds — div remains in DOM, no visual effect */
.stats-strip-noise {
  display: none;
}

/* Decorative arc — top-right, very subtle purple tint */
.stats-strip-arc {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: transparent;
  border: 65px solid rgba(163, 82, 166, 0.06);
  right: -100px;
  top: -120px;
  pointer-events: none;
}

/* Decorative arc — bottom-left, slightly smaller */
.stats-strip-arc-2 {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: transparent;
  border: 40px solid rgba(163, 82, 166, 0.06);
  left: -60px;
  bottom: -80px;
  pointer-events: none;
}

/* ── Grid ──────────────────────────────────────────────────────── */

/* 4-column equal-width grid */
.stats-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 2;
}

.stats-strip-item {
  text-align: center;
  padding: 0 32px;
  position: relative;
}

/* Vertical 1px divider between items — purple-tinted, subtle */
.stats-strip-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(163, 82, 166, 0.12);
}

/* ── Typography ────────────────────────────────────────────────── */

/* Large animated number — brand purple, strong against light bg */
.stats-strip-number {
  font-family: var(--font-heading);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 800;
  color: var(--primary-500, #a352a6);
  line-height: 1;
  margin-bottom: 8px;
}

/* Uppercase monospace label beneath the number */
.stats-strip-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--smoky-600, #555);
  font-family: var(--font-mono);
  line-height: 1.4;
}

/* ── Responsive ────────────────────────────────────────────────── */

/* Tablet (≤900px) — collapse to 2-column grid */
@media (max-width: 900px) {
  .stats-strip {
    padding: 50px 0;
  }
  .stats-strip-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  /* Hide vertical dividers on tablet — grid gap provides spacing */
  .stats-strip-item::after {
    display: none;
  }
}

/* Mobile (≤640px) — keep 2 columns, reduce type sizes */
@media (max-width: 640px) {
  .stats-strip-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .stats-strip-number {
    font-size: 36px;
  }
  .stats-strip-label {
    font-size: 11px;
  }
}