/* ===== classes.php — v7 live-classes listing (page-specific rules only) =====
   Tokens, chrome, .container, .page-hero, .breadcrumb, .card-grid, .course-card,
   .section-* and buttons all live in v7-shared.css. Only NEW rules here. */

/* --- Hero: warmer "live" gradient over the shared .page-hero --- */
.lc-hero {
  padding: 56px 0 40px;
  background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(232,123,44,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 70%, rgba(232,92,74,0.10) 0%, transparent 60%),
    var(--bg);
}

/* Live pulse badge */
.live-pulse { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; background: var(--coral); color: #fff; border-radius: var(--r-full); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; box-shadow: 0 6px 16px -4px rgba(232,92,74,0.4); }
.live-pulse .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

/* Hero quick-facts strip */
.lc-hero-quick { display: flex; flex-wrap: wrap; gap: 32px 40px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.lc-hero-quick div { display: flex; flex-direction: column; gap: 3px; }
.lc-hero-quick strong { font-family: 'Inter Tight', sans-serif; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.lc-hero-quick span { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* Results count line above the grid */
.lc-count { margin-bottom: 26px; color: var(--muted); font-weight: 600; font-size: 14px; }
.lc-count strong { color: var(--ink); font-weight: 800; }

/* In-page CTA band */
.classes-cta { margin-top: 64px; background: var(--g-lantern); border-radius: var(--r-2xl); padding: 48px; text-align: center; color: #fff; box-shadow: 0 24px 60px -20px rgba(31,6,23,0.4); }
.classes-cta h2 { font-family: 'Inter Tight', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 10px; }
.classes-cta p { font-size: 15px; opacity: 0.95; max-width: 560px; margin: 0 auto 24px; line-height: 1.6; }
.classes-cta .cta-btn { display: inline-block; background: #fff; color: var(--plum); font-weight: 800; font-size: 15px; padding: 14px 28px; border-radius: var(--r-sm); box-shadow: var(--shadow-md); transition: transform 0.15s; }
.classes-cta .cta-btn:hover { transform: translateY(-2px); }

/* Empty state */
.lc-empty { text-align: center; padding: 40px 0 8px; }
.lc-empty h2 { font-family: 'Inter Tight', sans-serif; font-size: 28px; font-weight: 800; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.015em; }
.lc-empty p { color: var(--muted); max-width: 520px; margin: 0 auto; line-height: 1.6; }

@media (max-width: 640px) {
  .lc-hero-quick { gap: 20px 32px; }
  .lc-hero-quick strong { font-size: 19px; }
  .classes-cta { padding: 32px 24px; }
  .classes-cta h2 { font-size: 25px; }
}