/**
 * Hero Section Styles - Matching Original 10km Design
 * Consistent with support app hero section
 */

/* ============================================
   CSS CUSTOM PROPERTIES & VARIABLES
   ============================================ */
:root {
    --hero-primary: #0a2540;
    --hero-secondary: #007bff;
    --hero-accent: #ffc107;
    --hero-accent-secondary: #17a2b8;
    --hero-success: #28a745;
    --hero-danger: #dc3545;
    --hero-info: #17a2b8;
    --hero-dark: #212529;
    --hero-light: #f8f9fa;
    --hero-white: #ffffff;
    --hero-gray-50: #f8f9fa;
    --hero-gray-100: #e9ecef;
    --hero-gray-200: #dee2e6;
    --hero-gray-300: #ced4da;
    --hero-gray-400: #adb5bd;
    --hero-gray-500: #6c757d;
    --hero-gray-600: #495057;
    --hero-gray-700: #343a40;

    /* Beautiful Gradient System */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --gradient-secondary: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-warning: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-danger: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-info: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --gradient-ocean: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
    --gradient-sunset: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --gradient-forest: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
    --gradient-royal: linear-gradient(135deg, #141e30 0%, #243b55 100%);
    --gradient-fire: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    --gradient-ice: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);

    /* Hero shadows */
    --hero-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    --hero-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --hero-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Hero radius */
    --hero-radius: 0.75rem;
    --hero-radius-lg: 1rem;
    --hero-radius-xl: 1.5rem;
    --hero-radius-2xl: 2rem;

    /* Navbar height variables */
    --navbar-height: 80px;
    --navbar-height-mobile: 70px;

    /* Typography */
    --hero-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hero-title-size: clamp(2.8rem, 7vw, 4.5rem);
    --hero-subtitle-size: clamp(1.1rem, 3vw, 1.4rem);
    --hero-body-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

/* ============================================
   HERO SECTION BASE
   ============================================ */
.hero-section {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(-1 * var(--navbar-height, 80px));
    padding-top: var(--navbar-height, 80px);
    padding-bottom: 2rem;
    color: var(--hero-white);
    font-family: var(--hero-font-family);
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='waves' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,50 Q25,25 50,50 T100,50 V100 H0 Z' fill='%23ffffff' opacity='0.05'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23waves)'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Event List Hero Section
   ========================================================================== */

.event-list-hero {
    position: relative;
    min-height: 100vh;
    background-color: var(--bs-dark);
    color: var(--bs-light);
    overflow: hidden;
    margin-top: calc(-1 * var(--navbar-height, 80px)); /* Pull hero behind navbar */
    padding-top: var(--navbar-height, 80px); /* Add padding so content doesn't get hidden */
}

/* Background Elements
   ========================================================================== */

.event-list-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
    z-index: 1;
}

.event-list-hero__bg--animated {
    animation: gradientShift 15s ease infinite;
    background: linear-gradient(120deg, #232526 0%, #1a1a2e 40%, #283e51 70%, #6a11cb 100%);
    background-size: 400% 400%;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
}

/* Floating icons for hero background */
.event-list-hero__bg-icons {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
}
.event-list-hero__bg-icon {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0.12;
    color: #fff;
    animation: floatIcon 18s linear infinite;
}
@keyframes floatIcon {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.12; }
    50% { transform: translateY(-40px) scale(1.1) rotate(10deg); opacity: 0.18; }
    100% { transform: translateY(0) scale(1) rotate(-5deg); opacity: 0.12; }
}

.event-list-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Carousel
   ========================================================================== */

.event-list-hero__carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.event-list-hero__slide-img {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.7);
    transition: filter 0.3s ease;
}

.swiper-slide:hover .event-list-hero__slide-img {
    filter: brightness(0.9);
}

.event-list-hero__slide-content {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

/* Content Container
   ========================================================================== */

.event-list-hero__container {
    position: relative;
    z-index: 3;
    padding: 4rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.event-list-hero__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Badge
   ========================================================================== */

.event-list-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    transform: translateY(0);
    transition: all 0.3s ease;
}

.event-list-hero__badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.event-list-hero__badge-icon {
    font-size: 1.2em;
}

/* Typography
   ========================================================================== */

.event-list-hero__title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}

.event-list-hero__subtitle {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 1px 0 #222;
    font-size: 1.25rem;
    line-height: 1.6;
    opacity: 0.95;
    max-width: 800px;
    z-index: 4;
}

/* Stats Grid
   ========================================================================== */

.event-list-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.event-list-hero__stat-card {
    --stat-color: #4F46E5;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.event-list-hero__stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--stat-color) 0%,
        transparent 80%
    );
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

.event-list-hero__stat-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.event-list-hero__stat-card:hover::before {
    opacity: 0.15;
}

.event-list-hero__stat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.event-list-hero__stat-icon {
    font-size: 1.5rem;
    color: var(--stat-color);
    text-shadow: 0 0 15px rgba(var(--stat-color), 0.4);
}

.event-list-hero__stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
    margin: 0.25rem 0;
}

.event-list-hero__stat-label {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--stat-color);
}

.event-list-hero__stat-trend {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: auto;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.event-list-hero__stat-trend:hover {
    background: rgba(255, 255, 255, 0.15);
}

.event-list-hero__stat-trend-icon {
    font-size: 1.1em;
    color: var(--stat-color);
}

.event-list-hero__stat-trend--charity .event-list-hero__stat-trend-icon {
    color: #F43F5E;
}

/* Action Buttons
   ========================================================================== */

.event-list-hero__actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.event-list-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.event-list-hero__btn-icon {
    font-size: 1.2em;
}

.event-list-hero__btn.btn-primary {
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 25%, #8b5cf6 50%, #7c3aed 75%, #6366f1 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.event-list-hero__btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, #1e293b 0%, #2563eb 25%, #7c3aed 50%, #6d28d9 75%, #5b21b6 100%);
}

.event-list-hero__btn.btn-outline-light {
    /* REMOVE backdrop-filter - causes iOS rendering issues */
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.25) !important; /* Solid background - no blur */
    color: white !important;
    /* iOS Safari compatibility */
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
    text-rendering: optimizeLegibility;
    opacity: 1 !important;
}

.event-list-hero__btn.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    color: white !important;
}

/* iOS Safari specific fixes - remove blur completely */
@supports (-webkit-touch-callout: none) {
    .event-list-hero__btn.btn-outline-light {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 1) !important;
        color: #ffffff !important; /* Explicit white text */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        opacity: 1 !important;
    }
}

/* Scroll Indicator
   ========================================================================== */
.event-list-hero__scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 2rem;
    opacity: 0.7;
    transition: all 0.3s ease;
    animation: bounce 2s infinite;
}

.event-list-hero__scroll-indicator:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* ============================================
   BACKGROUND SYSTEM
   ============================================ */
.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* fixed causes white gaps in overflow:hidden containers */
}

.hero-gradient-animated {
    background: linear-gradient(135deg, #2563eb, #3b82f6, #10b981, #059669);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================
   OVERLAY & EFFECTS
   ============================================ */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, var(--hero-overlay-start), var(--hero-overlay-end));
    z-index: 1;
}

/* ============================================
   CAROUSEL SYSTEM - DARK THEME
   ============================================ */
.hero-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    height: 100%;
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: 5%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    margin: auto 20px;
    height: 50px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
}

.hero-carousel .carousel-indicators {
    bottom: 30px;
    z-index: 10;
}

.hero-carousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    margin: 0 5px;
    transition: all 0.3s ease;
}

.hero-carousel .carousel-indicators button.active {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.2);
}

/* ============================================
   HERO CONTENT - DARK THEME
   ============================================ */
.hero-container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0; /* Section-level padding handles navbar offset */
}

.hero-content {
    text-align: center;
    padding: 1rem 2rem 1rem 2rem;
    max-width: 900px;
    margin: 0.5rem auto 0 auto;
    width: 100%;
}

/* Enhanced Event Badge - Perfectly Centered and Spaced */
.event-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    color: white;
    margin: 0 auto 1.75rem auto; /* Reduced bottom margin */
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    max-width: fit-content; /* Changed to fit-content for perfect centering */
    text-align: center;
    line-height: 1.2;
    word-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    width: auto;
}

.event-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.event-badge i {
    font-size: 1.2em;
}

/* Enhanced Hero Title - Better spacing */
.hero-title {
    font-size: var(--hero-title-size);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 1.25rem 0; /* Reduced bottom margin */
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 5;
}

.hero-subtitle {
    font-size: var(--hero-subtitle-size);
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto 1.5rem auto; /* Reduced bottom margin */
    color: rgba(255, 255, 255, 0.9);
}

.event-datetime-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.25rem 1.5rem; /* Reduced vertical padding */
    margin: 1.5rem auto; /* Reduced top/bottom margin */
    max-width: 400px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.event-datetime-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: white;
}

.event-datetime-card i {
    color: rgba(255, 255, 255, 0.9);
    margin-right: 0.5rem;
    font-size: 1.1em;
}

.event-datetime-card span {
    color: inherit;
    font-weight: 500;
}

.event-datetime-card .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================
   STATS GRID - DARK THEME
   ============================================ */
.event-stats-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
    justify-content: center;
}

/* Adaptive grid: 1 card = centered wider, 2 = side by side, 3 = 3-col, 4 = 2x2 */
.event-stats-grid:has(.stat-card:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(200px, 280px));
}
.event-stats-grid:has(.stat-card:nth-child(3)):not(:has(.stat-card:nth-child(4))) {
    grid-template-columns: repeat(3, minmax(180px, 260px));
}
.event-stats-grid:has(.stat-card:nth-child(2)):not(:has(.stat-card:nth-child(3))) {
    grid-template-columns: repeat(2, minmax(200px, 300px));
}
.event-stats-grid:not(:has(.stat-card:nth-child(2))) {
    grid-template-columns: minmax(280px, 400px);
}

.stat-card {
    --stat-color: #4F46E5;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--stat-color) 0%,
        transparent 80%
    );
    opacity: 0.1;
    transition: opacity 0.3s ease;
    z-index: 0 !important; /* Behind content but above card background */
    pointer-events: none; /* Don't block interactions */
    transform: translateZ(0); /* Force GPU layer but behind content */
}

.stat-card:hover::before {
    opacity: 0.15;
}

.stat-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.stat-card > i {
    font-size: 1.25rem;
    color: var(--stat-color);
    align-self: center;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 50 !important;
    filter: none !important;
    transform: translateZ(0);
    isolation: isolate;
    /* Centered circle background */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* Base stat-number: white pill with dark text on hero dark background */
.stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.2;
    text-shadow: none;
    white-space: nowrap;
    background: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    z-index: 10;
    filter: none;
    transform: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    isolation: isolate;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    margin-top: 0.5rem;
    position: relative;
    z-index: 5;
    filter: none;
    isolation: isolate;
}

/* Stat color scheme via CSS custom properties */
.stat-card:nth-child(1) { --stat-color: #8B5CF6; }
.stat-card:nth-child(2) { --stat-color: #F59E0B; }
.stat-card:nth-child(3) { --stat-color: #EF4444; }
.stat-card:nth-child(4) { --stat-color: #10B981; }

/* Icon colors per stat type */
.stat-card:nth-child(1) i,
.stat-card[data-stat-id="registrations"] i,
.stat-card[data-stat-id="participants"] i { color: #8B5CF6; }

.stat-card:nth-child(2) i,
.stat-card[data-stat-id="pricing"] i { color: #F59E0B; }

.stat-card:nth-child(3) i,
.stat-card[data-stat-id="distance"] i,
.stat-card[data-stat-id="race_distances"] i { color: #EF4444; }

.stat-card:nth-child(4) i,
.stat-card[data-stat-id="elevation"] i { color: #10B981; }

.stat-card:hover > i {
    transform: scale(1.1);
}

/* Stat-number colors by data-stat-id */
.stat-card[data-stat-id="registrations"] .stat-number,
.stat-card[data-stat-id="participants"] .stat-number {
    color: #8B5CF6;
    border-color: rgba(139, 92, 246, 0.3);
}

.stat-card[data-stat-id="pricing"] .stat-number {
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.3);
}

.stat-card[data-stat-id="distance"] .stat-number,
.stat-card[data-stat-id="race_distances"] .stat-number {
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.stat-card[data-stat-id="elevation"] .stat-number {
    color: #10B981;
    border-color: rgba(16, 185, 129, 0.3);
}

/* ============================================
   HERO ACTIONS - DARK THEME
   ============================================ */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
    border: 2px solid transparent;
    font-size: 1.04rem;
}

/* Primary hero CTA — solid brand teal, squared, prominent (task-293). */
.btn-hero.btn-primary {
    background: #138577;
    color: #fff;
    box-shadow: 0 6px 20px rgba(19, 133, 119, 0.38);
}

.btn-hero.btn-primary:hover,
.btn-hero.btn-primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(19, 133, 119, 0.5);
    background: #0f6f63;
    color: #fff;
}

.btn-hero.btn-primary:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .btn-hero, .btn-hero.btn-primary:hover { transition: none; transform: none; }
}

.btn-hero.btn-outline-light {
    /* REMOVE backdrop-filter - causes iOS rendering issues */
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.25) !important; /* Solid background - no blur */
    /* iOS Safari compatibility */
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
    text-rendering: optimizeLegibility;
    opacity: 1 !important;
}

.btn-hero.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    color: white !important;
    transform: translateY(-2px);
}

/* iOS Safari specific fixes - remove blur completely */
@supports (-webkit-touch-callout: none) {
    .btn-hero.btn-outline-light {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 1) !important;
        color: #ffffff !important; /* Explicit white text */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        opacity: 1 !important;
    }
}

.btn-hero.btn-secondary {
    background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
}

/* ============================================
   SCROLL INDICATOR - DARK THEME
   ============================================ */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    animation: bounce 2s infinite;
    cursor: pointer;
    z-index: 10;
}

.scroll-indicator:hover {
    color: rgba(255, 255, 255, 1);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-10px) translateX(-50%);
    }
    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

/* ============================================
   COUNTDOWN TIMER - DARK THEME (Universal)
   ============================================ */
.hero-countdown {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: 1rem;
}

.countdown-title {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.countdown-section {
    margin-bottom: 40px;
}

.countdown-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Enhanced Countdown Timer - Mobile responsive */
.countdown-timer {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: nowrap; /* Prevent wrapping on mobile */
    margin: 2rem 0;
}

.countdown-item {
    text-align: center;
    min-width: 70px;
    flex: 1; /* Make items flexible to fit in one row */
    max-width: 100px; /* Limit maximum width */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 8px; /* Reduced horizontal padding */
    transition: all 0.3s ease;
    position: relative;
    overflow: visible; /* Changed from hidden to visible to prevent clipping labels */
}

.countdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.countdown-item:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.countdown-item:hover::before {
    opacity: 1;
}

.countdown-number,
.countdown-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.countdown-label,
.countdown-unit {
    font-size: 0.85rem !important; /* Larger font for better visibility */
    color: #ffffff !important; /* Pure white */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Strong shadow */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700 !important; /* Bolder */
    position: relative;
    z-index: 10 !important; /* Above pseudo-elements */
    display: block !important; /* Ensure visible */
    opacity: 1 !important; /* Full opacity */
}

/* Support for both old and new countdown structures */
.countdown-container .countdown-timer {
    gap: 1.2rem;
}

.countdown-container .countdown-item {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    min-width: 70px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.countdown-container .countdown-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.2rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.countdown-container .countdown-label {
    font-size: 0.8rem;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   RESPONSIVE DESIGN - DARK THEME
   ============================================ */

@media (max-width: 1200px) {
    .event-list-hero__title {
        font-size: 3rem;
    }
}

@media (max-width: 992px) {
    .event-list-hero__container {
        padding: 3rem 1.5rem;
    }
    
    .event-list-hero__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding-top: var(--navbar-height-mobile);
        /* Fix mobile background issues */
        min-height: 100vh;
        position: relative;
    }
    
    /* Fix background attachment for mobile */
    .hero-background {
        background-attachment: scroll !important; /* Fixed attachment causes issues on mobile */
        background-size: cover !important;
        background-position: center center !important;
        min-height: 100vh;
    }
    
    .hero-content {
        padding: 1.5rem 1rem 1rem 1rem;
        margin: 0.75rem auto 0 auto; /* Reduced top margin to move container up */
        text-align: center; /* Center all hero content including badge */
    }
    
    /* Make container wider on mobile */
    .hero-container {
        max-width: 100%;
        padding: 0 0.5rem; /* Minimal padding for edge-to-edge feel */
        padding-top: var(--navbar-height-mobile, 70px); /* Add padding at container level */
        align-items: flex-start; /* Changed from center */
    }
    
    /* Compact badge for tablet */
    .event-badge {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        margin: 0 auto 2rem auto; /* Increased spacing */
        max-width: fit-content;
        white-space: normal;
        word-wrap: break-word;
        text-align: center;
        line-height: 1.3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Tablet: stack stats to single column */
    .event-stats-grid,
    .event-stats-grid:has(.stat-card:nth-child(2)),
    .event-stats-grid:has(.stat-card:nth-child(3)),
    .event-stats-grid:has(.stat-card:nth-child(4)) {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin: 2rem -0.5rem 0 -0.5rem;
        padding: 0 0.5rem;
    }
    
    .stat-card {
        padding: 1.25rem 1.75rem; /* More horizontal padding on tablet */
    }
    
    .countdown-timer {
        gap: 0.5rem;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-hero {
        width: 100%;
        max-width: 280px;
    }
    
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next {
        width: 10%;
        margin: auto 10px;
    }
    
    .event-list-hero__title {
        font-size: 2.5rem;
    }
    
    .event-list-hero__stats {
        grid-template-columns: 1fr;
    }
    
    .event-list-hero__actions {
        flex-direction: column;
    }
    
    .event-list-hero__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* Clean mobile background - contained within hero */
    .hero-section {
        background-attachment: scroll !important;
        -webkit-background-size: cover !important;
        background-size: cover !important;
        background-position: center center !important;
        min-height: 100vh;
        position: relative;
        overflow: hidden; /* Contain background within hero section */
    }
    
    .hero-background {
        background-attachment: scroll !important;
        -webkit-background-size: cover !important;
        background-size: cover !important;
        background-position: center center !important;
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    
    /* Wider container for mobile cards */
    .hero-container {
        max-width: 100%; /* Allow full width */
        padding: 0 0.5rem; /* Safe padding to prevent overflow */
        padding-top: var(--navbar-height-mobile, 70px); /* Add padding at container level */
        width: 100%;
        align-items: flex-start; /* Changed from center */
    }
    
    .hero-content {
        padding: 1rem 0.5rem; /* Minimal side padding */
        margin: 0.5rem auto 0 auto; /* Reduced top margin to move container up */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Changed from center */
        width: 100%;
    }
    
    .event-badge {
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
        margin: 0 auto 1.5rem auto; /* Increased spacing */
        max-width: fit-content;
        text-align: center;
        word-wrap: break-word;
        line-height: 1.25;
        border-radius: 18px;
        white-space: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        /* Force perfect centering on mobile */
        position: relative;
        left: 0;
        right: 0;
        transform: none;
    }
    
    /* Wider datetime card */
    .event-datetime-card {
        padding: 1rem 1.25rem;
        margin: 1rem -0.25rem; /* Extend slightly beyond container */
        max-width: none;
        box-sizing: border-box;
        word-wrap: break-word;
    }
    
    /* Ensure date card text wraps properly */
    .event-datetime-card span {
        display: inline;
        white-space: normal;
        line-height: 1.4;
        word-break: break-word; /* Break long words if needed */
    }
    
    /* Mobile: full width stats stack */
    .event-stats-grid,
    .event-stats-grid:has(.stat-card:nth-child(2)),
    .event-stats-grid:has(.stat-card:nth-child(3)),
    .event-stats-grid:has(.stat-card:nth-child(4)) {
        gap: 0.75rem;
        grid-template-columns: 1fr !important;
        margin: 2rem -0.5rem;
        padding: 0 0.25rem;
        width: auto;
    }
    
    .stat-card {
        padding: 1.25rem 1.75rem; /* Generous padding for full-width cards */
        width: 100%;
        margin: 0;
        border-radius: 12px;
        min-height: auto;
        box-sizing: border-box;
        /* Enhanced visual impact for wider cards */
        font-size: 1.1rem;
        text-align: center;
    }
    
    /* Wider countdown timer */
    .countdown-timer {
        width: auto;
        margin: 1.5rem -0.25rem; /* Extend slightly beyond container */
        padding: 0.5rem;
        justify-content: space-between; /* Better distribution */
        gap: 0.25rem;
        max-width: none; /* Remove width constraint */
        box-sizing: border-box;
    }
    
    .countdown-item {
        min-width: 60px; /* Slightly wider for more space */
        max-width: 90px; /* Increased max width */
        padding: 12px 6px; /* Better padding */
        font-size: 0.9rem;
        flex: 1; /* Equal distribution of space */
    }
    
    .countdown-number {
        font-size: 1.25rem;
        margin-bottom: 1px;
    }
    
    .countdown-label {
        font-size: 0.6rem;
        letter-spacing: 0.2px;
    }
    
    /* Clean hero actions */
    .hero-actions {
        width: 100%;
        margin: 2rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .btn-hero {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
        font-weight: 600;
        border-radius: 25px;
        margin: 0;
    }
    
    .event-list-hero__container {
        padding: 2rem 1rem;
    }
    
    .event-list-hero__title {
        font-size: 2rem;
    }
    
    .event-list-hero__badge {
        font-size: 0.875rem;
    }
}

/* Mobile-specific countdown timer improvements */
@media (max-width: 768px) {
    .countdown-timer {
        gap: 0.5rem; /* Reduced gap on mobile */
        padding: 0 0.5rem; /* Add some padding */
    }
    
    .countdown-item {
        min-width: 60px; /* Smaller minimum width */
        max-width: 80px; /* Smaller maximum width */
        padding: 12px 6px; /* Reduced padding */
    }
    
    .countdown-number,
    .countdown-value {
        font-size: 1.5rem; /* Smaller font size on mobile */
        margin-bottom: 2px;
    }
    
    .countdown-label,
    .countdown-unit {
        font-size: 0.65rem; /* Smaller label font */
        letter-spacing: 0.3px;
    }
}

@media (max-width: 480px) {
    .countdown-timer {
        gap: 0.25rem; /* Even smaller gap on very small screens */
        padding: 0 0.25rem;
    }
    
    .countdown-item {
        min-width: 50px; /* Even smaller minimum width */
        max-width: 70px; /* Even smaller maximum width */
        padding: 10px 4px; /* Minimal padding */
    }
    
    .countdown-number,
    .countdown-value {
        font-size: 1.25rem; /* Even smaller font size */
        margin-bottom: 1px;
    }
    
    .countdown-label,
    .countdown-unit {
        font-size: 0.6rem; /* Even smaller label font */
        letter-spacing: 0.2px;
    }
}

/* iOS Safari specific fixes - remove backdrop-filter and ensure proper contrast */
@supports (-webkit-touch-callout: none) {
    /* Remove all blur effects on iOS */
    .stat-card,
    .countdown-item,
    .btn-outline-light,
    .cta-btn-secondary,
    .btn-hero.btn-outline-light,
    .event-list-hero__btn.btn-outline-light {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        /* Use solid backgrounds for better visibility */
        background: rgba(255, 255, 255, 0.25) !important;
    }
    
    /* Ensure stat numbers are visible on iOS */
    .stat-number {
        background: #ffffff !important;
        color: #1a1a2e !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    .stat-card[data-stat-id="participants"] .stat-number,
    .stat-card[data-stat-id="registrations"] .stat-number {
        color: #8B5CF6 !important;
    }

    .stat-card[data-stat-id="pricing"] .stat-number {
        color: #F59E0B !important;
    }
    
    /* Ensure countdown labels and numbers are visible on iOS */
    .countdown-label,
    .countdown-unit {
        color: #ffffff !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        opacity: 1 !important;
    }
    
    .countdown-number,
    .countdown-value {
        color: #ffffff !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
    
    /* Ensure buttons have proper colors on iOS */
    .btn-hero.btn-outline-light {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 1) !important;
        color: #ffffff !important;
    }
    
    .cta-btn-secondary {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.9) !important;
        color: #ffffff !important;
    }
}

/* iPhone specific fixes for consistent appearance */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .hero-background {
        background-attachment: scroll !important;
        -webkit-transform: translate3d(0, 0, 0); /* Hardware acceleration */
        transform: translate3d(0, 0, 0);
    }
    
    .hero-section {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .hero-background {
        background-attachment: scroll !important;
        position: absolute !important; /* Fixed positioning can cause issues on iOS */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0 !important; /* Ensure background stays behind content */
    }
    
    .hero-section {
        min-height: 100vh;
        min-height: -webkit-fill-available; /* iOS viewport height fix */
        position: relative;
        z-index: 1;
    }
    
    /* Ensure sections after hero have proper backgrounds */
    section.bg-light {
        background-color: var(--bg-light) !important;
        position: relative;
        z-index: 2;
    }
    
    /* Fix for panoramica section background bleeding */
    #overview {
        background-color: #f8f9fa !important;
        position: relative;
        z-index: 10;
        margin-top: 0;
        padding-top: 4rem;
    }
    
    /* Ensure all sections after hero have proper isolation */
    section:not(.hero-section) {
        position: relative;
        z-index: 5;
        isolation: isolate;
    }
}

/* iPhone 12 Pro specific fixes (390px width) - SAFE BOUNDS */
@media (max-width: 390px) {
    .event-datetime-card {
        font-size: 0.85rem !important;
        padding: 0.6rem 0.8rem !important;
        margin: 1rem auto !important; /* Center without overflow */
        width: 95% !important; /* Safe width within bounds */
        max-width: 350px !important;
        line-height: 1.2;
        box-sizing: border-box !important;
    }
    
    .countdown-timer {
        margin: 1.5rem auto !important; /* Center without overflow */
        width: 95% !important; /* Safe width within bounds */
        max-width: 350px !important;
        gap: 0.3rem !important; /* Tighter for small screen */
        box-sizing: border-box !important;
        justify-content: space-between !important;
    }
    
    .countdown-item {
        min-width: 55px !important; /* Smaller for safe fit */
        max-width: 65px !important; /* Prevent any overflow */
        padding: 0.5rem 0.2rem !important; /* Tighter padding */
        font-size: 0.75rem !important;
        flex: 1 !important; /* Equal distribution */
    }
    
    .countdown-number,
    .countdown-value {
        font-size: 1.3rem !important;
    }
    
    .countdown-label,
    .countdown-unit {
        font-size: 0.65rem !important;
    }
}

/* Ensure countdown stays in one row on all screen sizes */
@media (max-width: 320px) {
    .countdown-timer {
        gap: 0.2rem;
        padding: 0 0.1rem;
    }
    
    .countdown-item {
        min-width: 45px;
        max-width: 60px;
        padding: 8px 2px;
    }
    
    .countdown-number,
    .countdown-value {
        font-size: 1.1rem;
    }
    
    .countdown-label,
    .countdown-unit {
        font-size: 0.55rem;
    }
    
    /* Ultra-compact badge for very small screens */
    .event-badge {
        font-size: 0.65rem !important;
        padding: 0.35rem 0.6rem !important;
        max-width: fit-content !important;
        line-height: 1.15 !important;
        border-radius: 15px !important;
        gap: 0.3rem !important;
        margin: 0 auto 1.3rem auto !important; /* Increased spacing */
        /* Force perfect centering on ultra-small screens */
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: auto !important;
    }
    
    /* Compact but wide race cards for very small screens */
    .hero-race-card {
        padding: 1.25rem 1rem !important; /* Even more compact */
        min-height: 200px !important; /* Very compact height */
        margin-bottom: 0.75rem !important;
    }
    
    .hero-race-card .race-icon {
        width: 50px !important; /* Smaller icon */
        height: 50px !important;
        font-size: 1.3rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .race-distance {
        font-size: 1.5rem !important; /* Compact distance */
        margin-bottom: 0.4rem !important;
    }
    
    .race-price {
        font-size: 1.2rem !important; /* Compact price */
        margin-top: 0.75rem !important;
    }
    
    .race-features .feature {
        font-size: 0.7rem !important; /* Very compact features */
        padding: 0.3rem 0.5rem !important;
    }
    
    /* Maximum width usage for ultra-small screens */
    .hero-races-container {
        margin: 0 -1.5rem !important; /* Match mobile width extension */
    }
    
    .event-stats-grid {
        margin: 2rem -1.5rem 0 -1.5rem !important; /* Match mobile width extension */
        padding: 0 0.5rem !important;
    }
}

/* ============================================
   ACCESSIBILITY & MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-section,
    .hero-carousel,
    .hero-gradient-animated,
    .event-list-hero__bg--animated,
    .event-list-hero__stat-card,
    .event-list-hero__btn,
    .event-list-hero__scroll-indicator {
        animation: none;
        transition: none;
    }
    
    .hero-gradient-animated {
        animation: none;
        background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
    }
    
    .event-list-hero__bg--animated {
        animation: none;
        background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
    }
}

@media (prefers-contrast: high) {
    .hero-overlay {
        background: rgba(0, 0, 0, 0.8);
    }
    
    .event-badge,
    .stat-card,
    .event-datetime-card,
    .event-list-hero__stat-card {
        border: 2px solid rgba(255, 255, 255, 0.5);
        background: rgba(0, 0, 0, 0.7);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .hero-section {
        min-height: auto;
        background: white !important;
        color: black !important;
        padding: 2rem 0;
    }
    
    .hero-overlay,
    .hero-carousel,
    .scroll-indicator {
        display: none !important;
    }
    
    .btn-hero {
        display: none !important;
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .hero-title,
    .hero-subtitle {
        color: black !important;
    }
}

/* ============================================
   HERO RACE OPTIONS
   ============================================ */

.hero-race-options {
    margin: 1.25rem 0;
    max-width: 900px;
}

.race-options-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.race-options-title i {
    color: #F59E0B;
}

.race-options-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.race-options-title i {
    color: var(--hero-accent);
    font-size: 1.25rem;
}

.hero-races-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

/* 3 race tiers = 3 columns */
.hero-races-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 1 race tier = single centered column */
.hero-races-1 {
    grid-template-columns: minmax(280px, 400px);
    justify-content: center;
}

/* Individual Race Card - Override stat-card defaults for proper layout */
.hero-race-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--hero-radius-lg, 1rem);
    padding: 1.25rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* Override stat-card flex layout to ensure correct stacking */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
}

/* Ensure race-info stacks its children properly */
.hero-race-card .race-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.2rem;
    margin-bottom: 0;
}

/* Race description gets a subtle container */
.hero-race-card .race-description {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    margin-top: 0.35rem;
}

/* Race price always at bottom of info block */
.hero-race-card .race-price {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.hero-race-card .race-price i {
    opacity: 0.85;
}

.hero-race-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Enhanced clickable behavior */
.clickable-race-card {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.clickable-race-card::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.clickable-race-card::after {
    content: '→';
    color: white;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}

.clickable-race-card:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.clickable-race-card:active {
    transform: scale(0.98);
}

/* Add subtle pulse animation for better UX feedback */
@keyframes pulse-click {
    0% { transform: scale(1); }
    50% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.hero-race-card.competitive {
    border-left: 4px solid rgba(255, 107, 53, 0.8);
}

.hero-race-card.family {
    border-left: 4px solid rgba(76, 175, 80, 0.8);
}

.hero-race-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Race Icon */
.hero-race-card .race-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    font-size: 1.2rem;
    color: white;
    box-shadow: var(--hero-shadow);
}

.hero-race-card.competitive .race-icon {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

.hero-race-card.family .race-icon {
    background: linear-gradient(135deg, #4caf50, #8bc34a);
}

/* Race Info */
.race-info {
    text-align: center;
    margin-bottom: 1rem;
}

.race-distance {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 0.2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.race-type {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.4rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.race-description {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    line-height: 1.3;
}

/* Race Features */
.race-features {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: auto;
}

.race-features .feature {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
}

.race-features .feature i {
    width: 14px;
    color: white;
    flex-shrink: 0;
    opacity: 0.95;
    font-size: 0.75rem;
}

.hero-race-card.competitive .race-features .feature i {
    color: #ff6b35;
}

.hero-race-card.family .race-features .feature i {
    color: #4caf50;
}

/* Race Price Styling */
.race-price {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin-top: 0.5rem;
}

.race-price i {
    color: #F59E0B;
    margin-right: 0.25rem;
}

.race-price .early-bird-badge {
    display: inline-block;
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 0.5rem;
    text-transform: uppercase;
}

/* ============================================
   RESPONSIVE HERO RACE OPTIONS
   ============================================ */

@media (max-width: 768px) {
    .hero-race-options {
        margin: 2rem 0;
        padding: 0 1rem;
    }

    .race-options-title {
        font-size: 1.35rem;
        margin-bottom: 1.25rem;
        font-weight: 600;
    }

    .hero-races-container,
    .hero-races-2,
    .hero-races-3 {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .hero-race-card {
        padding: 2rem 1.75rem; /* Larger padding for tablets */
        min-height: 320px; /* Taller cards */
    }
    
    .hero-race-card .race-icon {
        width: 70px; /* Larger icons */
        height: 70px;
        font-size: 1.7rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
    
    .race-distance {
        font-size: 1.9rem; /* Larger distance text */
        font-weight: 800;
        margin-bottom: 0.5rem;
    }
    
    .race-subtitle {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }
    
    .race-price {
        font-size: 1.5rem; /* Larger price */
        margin-top: 1.25rem;
    }
    
    .race-type {
        font-size: 0.9rem;
    }
    
    .race-description {
        font-size: 0.8rem;
    }
    
    .race-features .feature {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .hero-race-options {
        margin: 1.5rem -0.25rem; /* Extend slightly beyond container */
        padding: 0.25rem; /* Small padding for edge safety */
    }
    
    .race-options-title {
        font-size: 1.2rem;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
        font-weight: 700;
    }
    
    .hero-race-card {
        padding: 1.5rem 1.5rem; /* Better horizontal padding for wider cards */
        min-height: 220px; /* Compact height */
        margin-bottom: 1rem; /* Reduced space between cards */
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box; /* Ensure proper sizing */
    }
    
    .hero-race-card .race-icon {
        width: 55px; /* Compact icon size */
        height: 55px;
        font-size: 1.4rem;
        margin-bottom: 1rem; /* Reduced margin */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }
    
    .race-distance {
        font-size: 1.7rem; /* Compact but readable */
        font-weight: 800;
        margin-bottom: 0.5rem;
        letter-spacing: -0.01em;
    }
    
    .race-subtitle {
        font-size: 0.9rem; /* Compact subtitle */
        margin-bottom: 1rem;
        font-weight: 500;
        opacity: 0.9;
    }
    
    .race-features {
        gap: 0.5rem; /* Compact gap */
        margin: 1rem 0;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .race-features .feature {
        font-size: 0.75rem; /* Compact features */
        padding: 0.4rem 0.7rem;
        border-radius: 20px;
        font-weight: 500;
        min-width: auto;
        flex: none;
    }
    
    .race-price {
        font-size: 1.4rem; /* Compact but prominent price */
        margin-top: 1rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
    }
    
    .race-price i {
        font-size: 1.2rem;
    }
    
    .early-bird {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
        font-weight: 600;
        margin-left: 0.4rem;
    }
    
    /* Wider race cards container */
    .hero-races-container {
        gap: 1rem;
        padding: 0; /* No padding to use full width */
        margin: 0 -0.25rem; /* Extend beyond parent padding */
    }
}

/* ============================
   Modular Race Cards (3+ tiers)
   ============================ */

.hero-races-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .hero-races-3 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero-races-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .hero-races-3 .hero-race-card {
        padding: 1.25rem;
    }
    .hero-races-3 .hero-race-card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

.hero-race-card[style*="--race-accent"] .race-distance {
    color: var(--race-accent, #ffffff);
}

/* Early Bird Banner in hero */
.hero-early-bird-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--hero-radius, 0.75rem);
    color: #fbbf24;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
}

.hero-early-bird-banner i {
    color: #f59e0b;
    animation: pulse 2s ease infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Hero pricing — subtle text link below race cards */
.hero-pricing-cta {
    margin-top: 0.9rem;
    text-align: center;
}

.hero-pricing-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}

.hero-pricing-link:hover,
.hero-pricing-link:focus {
    color: #fff;
    text-decoration: none;
}

/* ============================
   FOMO / Social Proof Bar
   ============================ */

.hero-fomo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.fomo-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
}

.fomo-social-proof {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.fomo-urgency {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: urgencyPulse 3s ease infinite;
}

@keyframes urgencyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.2); }
}

@media (max-width: 768px) {
    .hero-fomo-bar {
        gap: 0.75rem;
    }
    .fomo-item {
        font-size: 0.8rem;
        padding: 0.3rem 0.625rem;
    }
    .hero-early-bird-banner {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .hero-fomo-bar {
        gap: 0.5rem;
        flex-direction: column;
    }
    .fomo-item {
        font-size: 0.78rem;
        padding: 0.3rem 0.625rem;
    }
    .hero-early-bird-banner {
        font-size: 0.75rem;
    }
}

/* ============================================
   LARGE SCREENS - COMPACT LAYOUT
   ============================================ */
@media (min-width: 1200px) {
    .hero-content {
        max-width: 960px;
        padding: 0.5rem 2rem;
    }

    /* Wider for race options area */
    .hero-race-options {
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .event-badge {
        margin-bottom: 1.25rem;
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    .event-datetime-card {
        padding: 0.875rem 1.25rem;
        margin: 1rem auto;
    }

    .countdown-timer {
        gap: 1rem;
        margin: 1rem auto;
    }

    .countdown-item {
        min-width: 65px;
        padding: 0.5rem 0.75rem;
    }

    .countdown-number {
        font-size: 1.5rem;
    }

    .hero-race-options {
        margin-top: 1rem;
    }

    .race-options-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .hero-race-card {
        padding: 0.75rem 1rem;
    }

    .race-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .race-distance {
        font-size: 1.15rem;
    }

    .race-price {
        font-size: 0.85rem;
    }

    .event-stats-grid {
        margin-top: 1rem;
        gap: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .hero-actions {
        margin-top: 1rem;
        gap: 0.625rem;
    }

    .btn-hero {
        padding: 0.625rem 1.5rem;
        font-size: 0.9rem;
    }

    .hero-fomo-bar {
        margin-top: 0.75rem;
    }
}

@media (min-width: 1600px) {
    .hero-content {
        max-width: 800px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-container {
        align-items: center; /* vertically center on very large screens */
    }
}

/* =====================================================================
   TASK-284 — EVENT HERO, EDITORIAL REDESIGN (rr-kit aligned)
   ---------------------------------------------------------------------
   Single authoritative override layer for the public event hero. Appended
   last so it wins on source order. Replaces the legacy "AI website" look
   (glassmorphism cards, multicolour stat numbers, pill radii, gradient
   bars) with the brand-page language: ONE teal accent + a light-aqua
   wordmark, Space Grotesk display, squared 6px radii, hairline rules,
   restrained shadows. Tokens come from design-system/rr-kit.css (loaded
   site-wide). RR-specific lockup lives under .hero-content--rr.
   ===================================================================== */
.events-page .hero-section {
    --hero-aqua: #5fd6c9;                  /* light-blue/aqua wordmark, logo-consistent */
    --hero-line: rgba(255, 255, 255, .22); /* hairline on dark */
    --hero-card: rgba(8, 16, 14, .34);     /* squared glass-lite tile */
    font-family: var(--rr-text);
}

/* Brand dark backdrop when no photo is set (kills the rainbow animation) */
.events-page .hero-section .hero-gradient-animated {
    background:
        radial-gradient(125% 85% at 82% -10%, rgba(19, 133, 119, .42) 0%, rgba(11, 21, 19, 0) 55%),
        linear-gradient(158deg, #0e211c 0%, #0b1513 58%, #07100e 100%) !important;
    animation: none !important;
}

/* Content column — centered editorial stack */
.events-page .hero-section .hero-content {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Centered emblem */
.events-page .hero-section .hero-rr-lockup {
    display: block;
    height: clamp(74px, 11vw, 132px);
    width: auto;
    margin: 0 auto clamp(18px, 3vw, 30px);
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .45));
}

/* Optional badge (non-RR events keep it; RR drops it for a cleaner stack) */
.events-page .hero-section .event-badge {
    background: rgba(255, 255, 255, .12);
    border: 1px solid var(--hero-line);
    border-radius: var(--rr-radius-btn);
    box-shadow: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .72rem;
    padding: .5rem .9rem;
}
.events-page .hero-section .event-badge i { color: var(--rr-gold); }

/* Title — big squared display; RR splits white + light-aqua */
.events-page .hero-section .hero-title {
    font-family: var(--rr-display);
    font-weight: 700;
    font-size: clamp(2.8rem, 8vw, 6rem);
    line-height: .94;
    letter-spacing: -.03em;
    text-transform: none;
    color: #fff;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .42);
    margin: 0 0 .55rem;
}
.events-page .hero-section .hero-title::after { display: none; }   /* kill legacy underline */
.hero-title--lockup .ht-w { color: #fff; }
.hero-title--lockup .ht-a { color: var(--hero-aqua); }
.hero-title--lockup .ht-sep {
    font-family: var(--rr-text);
    font-weight: 400;
    font-size: .30em;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .8);
    margin: 0 .4em;
    vertical-align: middle;
    text-transform: lowercase;
}
.hero-title--lockup .ht-year {
    display: block;
    font-family: var(--rr-text);
    font-weight: 600;
    font-size: .19em;
    letter-spacing: .44em;
    color: var(--hero-aqua);
    margin: .65rem 0 0 .44em;
}

/* Subtitle / cause line */
.events-page .hero-section .hero-subtitle {
    font-family: var(--rr-text);
    font-weight: 400;
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, .92);
    max-width: 42ch;
    margin: 0 0 1.6rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

/* Date + location — quiet meta row, gold icon */
.events-page .hero-section .event-datetime-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(.95rem, 2vw, 1.05rem);
    margin: 0 0 clamp(22px, 3.5vw, 34px);
}
.events-page .hero-section .event-datetime-card i { color: var(--rr-gold); }

/* Countdown — one squared hairline strip */
.events-page .hero-section .countdown-timer {
    display: flex;
    gap: 0;
    background: var(--hero-card);
    border: 1px solid var(--hero-line);
    border-radius: var(--rr-radius-btn);
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin: 0 auto clamp(26px, 4vw, 40px);
}
.events-page .hero-section .countdown-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: inset 1px 0 0 var(--hero-line);
    padding: clamp(13px, 2vw, 20px) clamp(16px, 3.2vw, 32px);
    min-width: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.events-page .hero-section .countdown-item:first-child { box-shadow: none; }
.events-page .hero-section .countdown-item::before,
.events-page .hero-section .countdown-item::after { display: none !important; }
.events-page .hero-section .countdown-item:hover { transform: none; }
.events-page .hero-section .countdown-number {
    font-family: var(--rr-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
}
.events-page .hero-section .countdown-label {
    font-family: var(--rr-text);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* Registration-closed / status notice — was unstyled (rendered left-aligned and off-centre).
   Now a centred editorial badge that sits where the countdown would be. */
.events-page .hero-section .event-live-text {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 auto clamp(26px, 4vw, 40px);
    padding: .7rem 1.35rem;
    background: rgba(212, 162, 76, .14);
    border: 1px solid rgba(212, 162, 76, .45);
    border-radius: var(--rr-radius-btn);
    color: #f6edda;
    font-family: var(--rr-text);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    text-align: center;
}
.events-page .hero-section .event-live-text i { color: var(--rr-gold); }

/* Race selectors — uniform squared hairline tiles, one teal/gold accent */
.events-page .hero-section .hero-race-options {
    width: 100%;
    max-width: 780px;
    margin: 0 auto clamp(24px, 4vw, 38px);
}
.events-page .hero-section .race-options-title {
    font-family: var(--rr-text);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.events-page .hero-section .race-options-title i { color: var(--rr-gold); }
.events-page .hero-section .hero-races-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: 14px;
}
.events-page .hero-section .hero-race-card {
    background: var(--hero-card) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--hero-line) !important;
    border-radius: var(--rr-radius-btn) !important;
    box-shadow: none !important;
    padding: 18px;
    text-align: left;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.events-page .hero-section .hero-race-card::before,
.events-page .hero-section .hero-race-card::after { display: none !important; }
.events-page .hero-section .hero-race-card:hover {
    transform: translateY(-3px);
    border-color: var(--hero-aqua) !important;
    background: rgba(8, 16, 14, .52) !important;
}
.events-page .hero-section .hero-race-card .race-icon {
    background: rgba(255, 255, 255, .1) !important;
    color: var(--hero-aqua) !important;
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: var(--rr-radius-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.events-page .hero-section .race-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}
.events-page .hero-section .race-distance {
    font-family: var(--rr-display);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: -.01em;
    color: #fff !important;
}
.events-page .hero-section .race-type {
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}
.events-page .hero-section .race-description {
    font-size: .82rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .66);
}
.events-page .hero-section .race-price {
    font-size: .98rem;
    font-weight: 700;
    color: var(--rr-gold);
    margin-top: 4px;
}
.events-page .hero-section .race-price i { color: var(--rr-gold); }
.events-page .hero-section .early-bird-badge {
    display: inline-block;
    background: var(--rr-gold);
    color: var(--rr-ink-deep);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--rr-radius-btn);
    margin-left: 6px;
}
.events-page .hero-section .race-features { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.events-page .hero-section .race-features .feature {
    font-size: .76rem;
    color: rgba(255, 255, 255, .72);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.events-page .hero-section .race-features .feature i { color: var(--hero-aqua); }

/* Early-bird banner + pricing CTA */
.events-page .hero-section .hero-early-bird-banner {
    background: rgba(212, 162, 76, .16);
    border: 1px solid rgba(212, 162, 76, .4);
    border-radius: var(--rr-radius-btn);
    color: #f6edda;
    font-size: .88rem;
    padding: .6rem 1rem;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.events-page .hero-section .hero-early-bird-banner i { color: var(--rr-gold); }
.events-page .hero-section .hero-pricing-cta { margin-top: 14px; }
.events-page .hero-section .hero-pricing-link {
    color: var(--hero-aqua);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.events-page .hero-section .hero-pricing-link:hover,
.events-page .hero-section .hero-pricing-link:focus { color: #fff; }

/* FOMO bar — quiet hairline pills */
.events-page .hero-section .hero-fomo-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 0 clamp(18px, 3vw, 28px);
}
.events-page .hero-section .hero-fomo-bar .fomo-item {
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--hero-line);
    border-radius: var(--rr-radius-btn);
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
    padding: .45rem .85rem;
}
.events-page .hero-section .hero-fomo-bar .fomo-urgency { color: var(--rr-gold); border-color: rgba(212, 162, 76, .45); }

/* Stats grid (fallback) — squared hairline, single ink, no multicolour */
.events-page .hero-section .event-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto clamp(20px, 3vw, 32px);
}
.events-page .hero-section .stat-card {
    background: var(--hero-card) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid var(--hero-line) !important;
    border-radius: var(--rr-radius-btn) !important;
    box-shadow: none !important;
    padding: 22px 16px;
    text-align: center;
}
.events-page .hero-section .stat-card > i {
    color: var(--rr-gold) !important;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    font-size: 1.4rem !important;
    margin-bottom: .4rem;
}
.events-page .hero-section .stat-card .stat-number {
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--rr-display) !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    display: block !important;
}
.events-page .hero-section .stat-card .stat-number small {
    color: rgba(255, 255, 255, .7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .7) !important;
}
.events-page .hero-section .stat-card .stat-label {
    color: rgba(255, 255, 255, .72) !important;
    text-shadow: none !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Buttons — canonical squared rr-btn shapes */
.events-page .hero-section .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: clamp(8px, 2vw, 18px);
}
.events-page .hero-section .btn-hero {
    border-radius: var(--rr-radius-btn);
    font-family: var(--rr-text);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
    text-transform: none;
    padding: .95rem 1.8rem;
    border: 1.5px solid transparent;
    box-shadow: none;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.events-page .hero-section .btn-hero:hover { transform: translateY(-2px); }
.events-page .hero-section .btn-hero.btn-primary {
    background: var(--rr-accent);
    color: #fff;
    border-color: var(--rr-accent);
    box-shadow: var(--rr-btn-shadow);
}
.events-page .hero-section .btn-hero.btn-primary:hover {
    background: var(--rr-accent-deep);
    border-color: var(--rr-accent-deep);
    box-shadow: var(--rr-btn-shadow-hover);
}
.events-page .hero-section .btn-hero.btn-success {
    background: var(--rr-gold);
    color: var(--rr-ink-deep);
    border-color: var(--rr-gold);
}
.events-page .hero-section .btn-hero.btn-success:hover {
    background: var(--rr-gold-deep);
    border-color: var(--rr-gold-deep);
    color: var(--rr-ink-deep);
}
.events-page .hero-section .btn-hero.btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}
.events-page .hero-section .btn-hero.btn-outline-light:hover {
    background: #fff;
    color: var(--rr-ink);
    border-color: #fff;
}

@media (max-width: 560px) {
    /* Countdown — 4 equal cells that fill the row; labels no longer clip ("SECONDI"). */
    .events-page .hero-section .countdown-timer { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; margin-bottom: clamp(18px, 5vw, 26px); box-sizing: border-box; }
    .events-page .hero-section .countdown-item { min-width: 0; flex: 1 1 0; padding: 12px 1px 10px; gap: 2px; text-align: center; }
    .events-page .hero-section .countdown-number { font-size: clamp(1.5rem, 8vw, 1.95rem); }
    .events-page .hero-section .countdown-label { font-size: .47rem; letter-spacing: 0; white-space: nowrap; width: 100%; text-align: center; }
    .events-page .hero-section .hero-title--lockup .ht-year { letter-spacing: .3em; }
    .events-page .hero-section .btn-hero { width: 100%; justify-content: center; }

    /* Race selectors — compact one-per-row tiles; the distance + price are the focal point. */
    .events-page .hero-section .hero-races-container { grid-template-columns: 1fr !important; gap: 10px; }
    .events-page .hero-section .hero-race-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        text-align: left;
        padding: 12px 14px !important;
        gap: 13px;
    }
    .events-page .hero-section .hero-race-card .race-icon {
        width: 40px; height: 40px; min-width: 40px;
        font-size: 1.1rem;
        margin: 0 !important;
    }
    .events-page .hero-section .race-info { gap: 2px; flex: 1; }
    /* Category tag ("NUOVA") becomes a small gold eyebrow … */
    .events-page .hero-section .race-distance {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--rr-gold);
    }
    /* … so the actual distance/name and the price can dominate. */
    .events-page .hero-section .race-type { font-size: 1.02rem; font-weight: 700; color: #fff; }
    .events-page .hero-section .race-description { font-size: .78rem; }
    .events-page .hero-section .race-price { font-size: 1.18rem; margin-top: 2px; }
}

/* Tiny phones — keep the 4 cells uncramped, numbers still the focal point */
@media (max-width: 380px) {
    .events-page .hero-section .countdown-item { padding: 10px 1px 9px; }
    .events-page .hero-section .countdown-number { font-size: 1.45rem; }
    .events-page .hero-section .countdown-label { font-size: .46rem; letter-spacing: .02em; }
    .events-page .hero-section .hero-race-card .race-icon { width: 36px; height: 36px; min-width: 36px; font-size: 1rem; }
    .events-page .hero-section .race-type { font-size: .96rem; }
    .events-page .hero-section .race-price { font-size: 1.1rem; }
}
}