/* ==========================================================================
   live-counter.css — reusable metric card: big number + sub-label + icon
   Markup: <div class="live-card">
            <div class="text">
              <div class="big">2,300+</div>
              <div class="sub">sessions booked this month · 14 cities</div>
            </div>
            <div class="icon"><i data-lucide="activity"></i></div>
   Used in:
     • hero-aside (single live counter — see hero-aside.css for positioning)
     • trainer-cta (2x2 grid of 4 cards — see trainer-cta.css for grid)
   Self-contained dark-glass surface; drop it into any dark-bg context.
   ========================================================================== */

.live-card {
  position: relative;
  z-index: 1;
  padding: var(--space-20) var(--space-22);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  background: rgba(var(--bg-dark-rgb), .62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(var(--white-rgb), .16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

.live-card .text { flex: 1; min-width: 0; }
.live-card .big {
  font-family: var(--font-display);
  font-size: var(--fs-metric-cta);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: white;
}
.live-card .sub {
  font-size: var(--fs-footer-label);
  color: rgba(var(--white-rgb), .7);
  margin-top: var(--space-6);
  font-weight: var(--fw-medium);
}

/* Icon tile (right side) */
.live-card .icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: rgba(var(--white-rgb), .1);
  border: 1px solid rgba(var(--white-rgb), .18);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: white;
}
.live-card .icon svg.lucide,
.live-card .icon [data-lucide] { width: 20px; height: 20px; }