/* ═══════════════════════════════════════════
   HELIOS — COUNTERS SECTION
   counters.css
   ═══════════════════════════════════════════ */

/* ── SECTION WRAPPER ── */
.counters {
  background: transparent;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 5%;
  position: relative;
  overflow: hidden;
  display: block; /* override any old grid */
}

/* Solar glow backdrop */
.counters::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 130%, rgba(255,182,39,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 8%  50%, rgba(200,169,81,0.04) 0%, transparent 45%),
    radial-gradient(ellipse at 92% 50%, rgba(200,169,81,0.04) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* Gold accent line across the top */
.counters::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.5;
}

/* ── INNER GRID ── */
.counters > .counter-item,
.counters .counter-item {
  position: relative;
  z-index: 1;
}

/* Reset old styles.css grid on .counters —
   we control layout via max-width inner wrapper */
.counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 100%;
}

/* ── INDIVIDUAL ITEM ── */
.counter-item {
  padding: 1.25rem 2rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  transition: background 0.35s;
}

.counter-item:hover {
  background: rgba(255,182,39,0.03);
}

/* Vertical separator between items */
.counter-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 15%; bottom: 15%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity: 0.25;
}

/* ── ICON BADGE ── */
.counter-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(200,169,81,0.25);
  background: rgba(255,182,39,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1.2rem;
  position: relative;
  box-shadow: 0 0 18px rgba(255,182,39,0.08);
  transition: box-shadow 0.4s, border-color 0.4s, background 0.4s;
}

/* Spinning dashed ring */
.counter-icon::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(200,169,81,0.28);
  animation: counter-icon-spin 14s linear infinite;
}

@keyframes counter-icon-spin {
  to { transform: rotate(360deg); }
}

.counter-item:hover .counter-icon {
  background: rgba(255,182,39,0.1);
  border-color: rgba(200,169,81,0.5);
  box-shadow: 0 0 28px rgba(255,182,39,0.2);
}

/* ── NUMBER ── */
.counter-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 3.2vw, 3.6rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  text-shadow: 0 0 22px rgba(255,182,39,0.18);
  transition: text-shadow 0.4s;
}

.counter-num .suffix {
  font-size: 1.6rem;
  color: var(--rose-gold);
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}

.counter-item:hover .counter-num {
  text-shadow: 0 0 32px rgba(255,182,39,0.42), 0 0 56px rgba(255,182,39,0.18);
}

/* Glow flash during count-up animation */
.counter-num.is-counting {
  animation: counter-glow-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes counter-glow-pulse {
  from { text-shadow: 0 0 18px rgba(255,182,39,0.25); }
  to   { text-shadow: 0 0 40px rgba(255,182,39,0.55), 0 0 70px rgba(255,182,39,0.22); }
}

/* ── DECORATIVE RULE UNDER NUMBER ── */
.counter-rule {
  width: 32px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 0.75rem auto 0.75rem;
  opacity: 0.5;
  transition: width 0.4s, opacity 0.4s;
}

.counter-item:hover .counter-rule {
  width: 52px;
  opacity: 0.85;
}

/* ── LABEL ── */
.counter-label {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: 0;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

/* Tablet: 2×2 grid */
@media (max-width: 1023px) {
  .counters {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem 5%;
  }

  /* Remove right separator from even items (they're now on the right edge) */
  .counter-item:nth-child(2n)::after { display: none; }

  /* Add bottom border to top row */
  .counter-item:nth-child(1),
  .counter-item:nth-child(2) {
    border-bottom: 1px solid rgba(200,169,81,0.12);
  }

  .counter-item {
    padding: 1rem 1.5rem;
  }
}

/* Large phones: stay 2×2 */
@media (max-width: 767px) {
  .counters { padding: 1.5rem 4%; }
  .counter-num { font-size: 2.4rem; }
  .counter-icon { width: 50px; height: 50px; font-size: 1.15rem; }
}

/* Small phones: single column */
@media (max-width: 479px) {
  .counters { grid-template-columns: 1fr 1fr; }

  .counter-item:nth-child(1),
  .counter-item:nth-child(2) {
    border-bottom: 1px solid rgba(200,169,81,0.12);
  }
  .counter-item:nth-child(2n)::after { display: none; }
  .counter-item:nth-child(2n-1)::after { display: block; }

  .counter-num { font-size: 2rem; }
  .counter-item { padding: 0.9rem 1rem; }
  .counter-label { font-size: 0.62rem; letter-spacing: 0.12em; }
}