/**
 * Event Detail Page Styles
 * 
 * @author: Senior Software Engineer
 * @version: 2.0.0
 * @description: Comprehensive styles for individual event detail pages
 */

/* ============================================
   EVENT DETAIL PAGE CONTAINER
   ============================================ */
.event-detail-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.event-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ============================================
   PAGE NAVIGATION
   ============================================ */
.event-detail-nav {
    position: sticky;
    top: 80px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.event-nav-menu {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.event-nav-item {
    position: relative;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #6c757d;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.event-nav-item:hover {
    color: #3498db;
    background: rgba(52, 152, 219, 0.1);
    border-color: rgba(52, 152, 219, 0.2);
}

.event-nav-item.active {
    color: #3498db;
    background: rgba(52, 152, 219, 0.1);
    border-color: #3498db;
}

.event-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3498db;
    border-radius: 2px;
}

/* ============================================
   SECTION CONTAINERS
   ============================================ */
.event-section {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow: hidden;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.event-section.visible {
    opacity: 1;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.event-section-header {
    padding: 2rem 2rem 1rem;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.event-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.event-section-title i {
    color: #3498db;
    font-size: 1.5rem;
}

.event-section-subtitle {
    color: #6c757d;
    font-size: 1.1rem;
    margin: 0;
}

.event-section-content {
    padding: 2rem;
}

/* ============================================
   CONTENT LAYOUTS
   ============================================ */
.event-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

.event-content-main {
    /* Main content area */
}

.event-content-sidebar {
    position: sticky;
    top: 200px;
}

.event-info-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e9ecef;
}

.event-info-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.event-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.event-info-item:last-child {
    border-bottom: none;
}

.event-info-icon {
    color: #3498db;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.event-info-text {
    flex: 1;
    color: #495057;
}

.event-info-value {
    font-weight: 600;
    color: #2c3e50;
}

/* ============================================
   CONTENT BLOCKS
   ============================================ */
.event-content-block {
    margin-bottom: 2rem;
}

.event-content-block:last-child {
    margin-bottom: 0;
}

.event-text-content {
    line-height: 1.8;
    color: #495057;
    font-size: 1.1rem;
}

.event-text-content p {
    margin-bottom: 1.5rem;
}

.event-text-content h3 {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
}

.event-text-content h4 {
    color: #495057;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem 0;
}

.event-text-content ul,
.event-text-content ol {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

.event-text-content li {
    margin-bottom: 0.5rem;
}

.event-text-content blockquote {
    border-left: 4px solid #3498db;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #6c757d;
}

/* ============================================
   MEDIA GALLERY
   ============================================ */
.event-media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.event-media-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.event-media-item:hover {
    transform: translateY(-2px);
}

.event-media-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.event-media-item:hover img {
    transform: scale(1.05);
}

/* ============================================
   STATISTICS & METRICS
   ============================================ */
.event-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.event-stat-card {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    transition: transform 0.3s ease;
}

.event-stat-card:hover {
    transform: translateY(-5px);
}

.event-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

.event-stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-stat-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

/* ============================================
   INTERACTIVE ELEMENTS
   ============================================ */
.event-interactive-map {
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.event-countdown-display {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.countdown-unit {
    text-align: center;
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    min-width: 100px;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.countdown-number {
    font-size: 2rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
}

.countdown-label {
    font-size: 0.9rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   CALL-TO-ACTION SECTIONS
   ============================================ */
.event-cta-section {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    padding: 3rem 2rem;
    text-align: center;
    margin: 2rem 0;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(52, 152, 219, 0.4);
}

.event-cta-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.event-cta-text {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.event-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.event-cta-btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.event-cta-btn-primary {
    background: white;
    color: #3498db;
}

.event-cta-btn-primary:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
}

.event-cta-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.event-cta-btn-secondary:hover {
    background: white;
    color: #3498db;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 992px) {
    .event-content-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .event-content-sidebar {
        position: static;
        order: -1;
    }
    
    .event-detail-nav {
        top: 70px;
    }
    
    .event-nav-menu {
        gap: 1rem;
    }
    
    .event-nav-item {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .event-detail-container {
        padding: 0 0.5rem;
    }
    
    .event-section-header {
        padding: 1.5rem 1rem 0.5rem;
    }
    
    .event-section-content {
        padding: 1.5rem 1rem;
    }
    
    .event-section-title {
        font-size: 1.5rem;
    }
    
    .event-nav-menu {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .event-nav-item {
        width: 100%;
        text-align: center;
    }
    
    .event-stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .event-countdown-display {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .countdown-unit {
        min-width: 80px;
        padding: 1rem;
    }
    
    .countdown-number {
        font-size: 1.5rem;
    }
    
    .event-cta-section {
        padding: 2rem 1rem;
    }
    
    .event-cta-title {
        font-size: 1.5rem;
    }
    
    .event-cta-text {
        font-size: 1rem;
    }
    
    .event-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .event-cta-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .event-stats-container {
        grid-template-columns: 1fr;
    }
    
    .event-stat-card {
        padding: 1rem;
    }
    
    .event-stat-number {
        font-size: 2rem;
    }
    
    .event-media-gallery {
        grid-template-columns: 1fr;
    }
    
    .event-info-card {
        padding: 1rem;
    }
    
    .event-text-content {
        font-size: 1rem;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .event-section,
    .event-media-item,
    .event-stat-card,
    .event-cta-btn {
        animation: none;
        transition: none;
    }
    
    .event-media-item:hover,
    .event-stat-card:hover,
    .event-cta-btn:hover {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .event-section {
        border: 2px solid #000;
    }
    
    .event-nav-item {
        border-color: #000;
    }
    
    .event-nav-item.active {
        background: #000;
        color: #fff;
    }
    
    .event-cta-btn-primary {
        background: #000;
        color: #fff;
    }
    
    .event-cta-btn-secondary {
        border-color: #000;
        color: #000;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .event-detail-nav,
    .event-cta-section {
        display: none;
    }
    
    .event-section {
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }
    
    .event-content-grid {
        grid-template-columns: 1fr;
    }
    
    .event-media-item {
        break-inside: avoid;
    }
    
    .event-interactive-map {
        height: 200px;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
    }
    
    .event-interactive-map::after {
        content: "Map available online";
    }
} 
/* ============================================
   OVERVIEW SECTION — PILLARS + COMPACT DESC
   ============================================ */

/* Experience Pillars */
.event-pillars {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    margin: 0 0 2rem;
}

.pillar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    min-width: 70px;
    text-align: center;
}

.pillar-item span {
    font-size: .75rem;
    font-weight: 600;
    color: #4b5563;
    letter-spacing: .01em;
}

.pillar-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: #f3f4f6;
    color: #6b7280;
    flex-shrink: 0;
}
.pillar-icon.pillar-red  { background: #fef2f2; color: #dc2626; }
.pillar-icon.pillar-green{ background: #f0fdf4; color: #16a34a; }
.pillar-icon.pillar-gold { background: #fffbeb; color: #d97706; }
.pillar-icon.pillar-blue { background: #eff6ff; color: #2563eb; }
.pillar-icon.pillar-purple{ background: #f5f3ff; color: #7c3aed; }

/* Compact description with read-more */
.event-description-compact {
    position: relative;
    margin: 0 0 1.5rem;
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.5rem 0;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

.description-clamped {
    position: relative;
    max-height: 7em;       /* ~4 lines at 1.75 line-height */
    overflow: hidden;
    font-size: .95rem;
    line-height: 1.75;
    color: #374151;
    transition: max-height .4s ease;
}

.description-clamped::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
    transition: opacity .3s;
}

.description-clamped.expanded {
    max-height: 2000px;
}

.description-clamped.expanded::after {
    opacity: 0;
    pointer-events: none;
}

.btn-read-more {
    display: block;
    width: 100%;
    padding: .6rem 1rem;
    border: none;
    background: none;
    color: #2563eb;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #f3f4f6;
    margin-top: .25rem;
}
.btn-read-more:hover { background: #eff6ff; border-radius: 0 0 14px 14px; }

/* Non-duplicate stats row */
.overview-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin: 0 0 1.75rem;
}

.ov-stat-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border-radius: 12px;
    padding: .85rem 1.25rem;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 280px;
}

.ov-stat-icon {
    font-size: 1.5rem;
    color: #6b7280;
    flex-shrink: 0;
}
.ov-stat-icon.ov-stat-gold   { color: #d97706; }
.ov-stat-icon.ov-stat-blue   { color: #2563eb; }
.ov-stat-icon.ov-stat-green  { color: #16a34a; }

.ov-stat-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.ov-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.ov-stat-label {
    font-size: .75rem;
    color: #6b7280;
    font-weight: 500;
}

/* Quick stats row (tournament) */
.event-quick-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    margin-bottom: 1.5rem;
}

.quick-stat-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: .6rem 1rem;
    box-shadow: 0 1px 5px rgba(0,0,0,.06);
    min-width: 80px;
    text-align: center;
}
.quick-stat-mini .qsm-value { font-size: 1.1rem; font-weight: 700; color: #1f2937; }
.quick-stat-mini .qsm-label { font-size: .7rem; color: #6b7280; font-weight: 500; }


/* ============================================
   PROGRAM SECTION — COLLAPSIBLE TIMELINE
   ============================================ */

.program-controls {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-bottom: 1rem;
}

.btn-prog-toggle {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: .35rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: background .15s;
}
.btn-prog-toggle:hover { background: #f3f4f6; }

/* Collapsible toggle button inside program item */
.program-toggle-btn {
    width: 100%;
    background: none;
    border: none;
    padding: .75rem 0 .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    gap: .5rem;
}

.program-toggle-btn .program-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 1;
}

.program-toggle-btn:focus { outline: 2px solid #93c5fd; outline-offset: 2px; }

.program-chevron {
    font-size: .9rem;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform .25s ease;
}
.program-toggle-btn:not(.collapsed) .program-chevron {
    transform: rotate(180deg);
}

.program-body {
    padding-bottom: .75rem;
}

@media (max-width: 768px) {
    .program-controls { justify-content: flex-start; }
}


/* ============================================
   POI ACCORDION
   ============================================ */

/* POI: stesso linguaggio tipografico delle altre sezioni (section_header) */
.poi-section-heading-wrap {
    margin: 0 auto 1.35rem;
    max-width: 760px;
    text-align: center;
}

.poi-section-heading-wrap .event-section-head {
    margin-bottom: 0.5rem !important;
}

.poi-after-route {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.event-subsection-lede--poi-meta {
    margin-top: 0.35rem !important;
    margin-bottom: 0 !important;
    font-size: clamp(0.9rem, 1.4vw, 0.98rem) !important;
}

/* ── POI Clean Table ───────────────────────────────────────────────── */
.poi-table-card {
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.poi-table-head {
    display: grid;
    grid-template-columns: 52px 44px 1fr;
    align-items: center;
    padding: .55rem 1rem;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.poi-tr {
    display: grid;
    grid-template-columns: 52px 44px 1fr;
    align-items: center;
    padding: .7rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background .12s;
    gap: 0;
}
.poi-tr:last-child { border-bottom: none; }
.poi-tr--expandable { cursor: pointer; }
.poi-tr--expandable:hover { background: #f8fafc; }
.poi-tr--expandable:focus { outline: 2px solid #3b82f6; outline-offset: -2px; }
.poi-tr.poi-tr--open { background: #f0f7ff; }

.poi-td-km { display: flex; align-items: center; }
.poi-km-pill {
    background: #eef2ff;
    color: #4338ca;
    border-radius: 20px;
    padding: .2rem .55rem;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: .02em;
}

.poi-td-icon { display: flex; align-items: center; }
.poi-icon-dot {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
    color: #fff;
    background: #94a3b8;
}
/* Category icon colors */
.poi-cat-turnaround    .poi-icon-dot { background: #7c3aed; }
.poi-cat-water_station .poi-icon-dot { background: #0891b2; }
.poi-cat-route_info    .poi-icon-dot { background: #2563eb; }
.poi-cat-incrocio      .poi-icon-dot { background: #d97706; }
.poi-cat-medical       .poi-icon-dot { background: #dc2626; }
.poi-cat-sign          .poi-icon-dot { background: #374151; }
.poi-cat-volunteer_post .poi-icon-dot { background: #6366f1; }
.poi-cat-gallery       .poi-icon-dot { background: #475569; }
.poi-cat-tbc           .poi-icon-dot { background: #94a3b8; }

.poi-td-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-left: .6rem;
    min-width: 0;
}
.poi-name-text {
    font-size: .875rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.poi-expand-chevron {
    color: #94a3b8;
    font-size: .75rem;
    flex-shrink: 0;
    transition: transform .2s ease;
}
.poi-tr--open .poi-expand-chevron { transform: rotate(180deg); }

.poi-desc-panel {
    display: none;
    padding: .65rem 1rem .65rem calc(52px + 44px + .6rem);
    background: #f0f7ff;
    border-bottom: 1px solid #dbeafe;
    font-size: .85rem;
    color: #334155;
    line-height: 1.55;
}
.poi-desc-panel.poi-desc--open { display: block; }
.poi-desc-text { margin: 0; }


/* ============================================
   REGISTRATION INFO BAR
   ============================================ */

.reg-info-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    padding: .6rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.25rem;
    font-size: .82rem;
    color: #475569;
}

.reg-info-item {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-weight: 500;
}

.reg-info-item i { color: #64748b; }

.reg-info-sep {
    color: #cbd5e1;
    font-weight: 300;
}

.reg-info-deadline { color: #b45309; font-weight: 600; }
.reg-info-deadline i { color: #b45309; }

@media (max-width: 480px) {
    .reg-info-sep { display: none; }
    .reg-info-bar { flex-direction: column; align-items: flex-start; gap: .4rem; }
}


/* ============================================
   MOBILE FLOATING CTA
   ============================================ */

@media (max-width: 768px) {
    .mobile-float-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 990;
        padding: .75rem 1rem;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid #e5e7eb;
        display: flex;
        gap: .5rem;
        box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    }
    .mobile-float-cta .btn { flex: 1; font-size: .9rem; padding: .65rem; }

    /* Add bottom padding to page so floating bar doesn't cover content */
    .events-page { padding-bottom: 80px; }

    /* Pillar items slightly smaller on mobile */
    .pillar-icon { width: 44px; height: 44px; font-size: 1.1rem; }
    .pillar-item span { font-size: .7rem; }
    .event-pillars { gap: .5rem 1rem; }
}


/* ============================================
   OVERVIEW CARD + DESCRIPTION (v2 classes)
   ============================================ */

.ov-main-card {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 2px 20px rgba(0,0,0,.07);
    border: 1px solid #e9ecef;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.ov-event-brief {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ov-event-brief__intro {
    margin: 0;
    color: #1f2937;
    font-size: 1rem;
    line-height: 1.65;
}

.ov-facts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.ov-fact {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #f9fafb;
}

.ov-fact i {
    color: #374151;
    font-size: 1rem;
    line-height: 1.35;
}

.ov-fact span,
.ov-route-card__top span {
    display: block;
    margin-bottom: .15rem;
    color: #6b7280;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ov-fact strong {
    display: block;
    color: #111827;
    font-size: .9rem;
    line-height: 1.25;
}

.ov-route-summary {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: #ffffff;
}

.ov-route-summary__head {
    margin-bottom: .85rem;
}

.ov-route-summary__head h3 {
    margin: 0 0 .2rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.ov-route-summary__head p {
    margin: 0;
    color: #6b7280;
    font-size: .88rem;
    line-height: 1.45;
}

.ov-route-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.ov-route-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    padding: .9rem;
    border: 1px solid #e5e7eb;
    border-radius: .8rem;
    background: #f9fafb;
}

.ov-route-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.ov-route-card h4 {
    margin: 0;
    color: #111827;
    font-size: .98rem;
    line-height: 1.2;
}

.ov-route-card__price {
    flex: 0 0 auto;
    color: #111827;
    font-size: 1rem;
}

.ov-route-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ov-route-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .45rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-size: .78rem;
    font-weight: 600;
}

.ov-route-card__details,
.ov-description-details {
    border-top: 1px solid #e5e7eb;
    padding-top: .65rem;
}

.ov-route-card__details summary,
.ov-description-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: #111827;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 800;
    list-style: none;
}

.ov-route-card__details summary::-webkit-details-marker,
.ov-description-details summary::-webkit-details-marker {
    display: none;
}

.ov-route-card__details p {
    margin: .55rem 0 0;
    color: #4b5563;
    font-size: .84rem;
    line-height: 1.5;
}

.ov-description-details {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: #ffffff;
}

.ov-description-details summary i {
    transition: transform .18s ease;
}

.ov-description-details[open] summary i {
    transform: rotate(180deg);
}

.ov-description-details[open] .ov-desc-body {
    max-height: none;
    overflow: visible;
    padding-top: .9rem;
}

.ov-description-details .ov-desc-body::after {
    display: none;
}

.ov-description-details .ov-desc-body h2,
.ov-description-details .ov-desc-body h3 {
    margin: 1rem 0 .45rem;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.25;
}

.ov-description-details .ov-desc-body p,
.ov-description-details .ov-desc-body li {
    color: #374151;
    font-size: .95rem;
    line-height: 1.65;
}

.ov-description-details .ov-desc-body p:last-child {
    margin-bottom: 0;
}

.ov-desc-container {
    position: relative;
    margin: 0 0 1.5rem;
}

.ov-desc-body {
    position: relative;
    max-height: 7em;
    overflow: hidden;
    font-size: .95rem;
    line-height: 1.75;
    color: #374151;
    transition: max-height .4s ease;
}

.ov-desc-body::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 52px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
    transition: opacity .3s;
}

.ov-desc-body.expanded {
    max-height: 2000px;
}

.ov-desc-body.expanded::after {
    opacity: 0;
}

.ov-read-more-btn {
    display: block;
    width: 100%;
    margin-top: .25rem;
    padding: .55rem 1rem;
    background: none;
    border: none;
    border-top: 1px solid #f1f5f9;
    color: #2563eb;
    font-size: .84rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}
.ov-read-more-btn:hover { background: #eff6ff; border-radius: 0 0 .5rem .5rem; }

/* Info strip (participants + medal + charity) */
.ov-info-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.ov-info-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: #f8f9fb;
    border-radius: 10px;
    padding: .7rem 1rem;
    flex: 1 1 150px;
    min-width: 130px;
    max-width: 260px;
}

.ov-info-item > i {
    font-size: 1.3rem;
    color: #6b7280;
    flex-shrink: 0;
}

.ov-info-item > div {
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.ov-info-item strong {
    font-size: .95rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.ov-info-item small {
    font-size: .72rem;
    color: #6b7280;
    font-weight: 500;
}

.ov-icon-gold { color: #d97706 !important; }
.ov-icon-red  { color: #dc2626 !important; }
.ov-icon-blue { color: #2563eb !important; }

@media (max-width: 768px) {
    .ov-main-card { padding: 1.25rem 1rem; }
    .ov-info-item { flex: 1 1 100%; max-width: 100%; }
}


/* ============================================
   PROGRAM SECTION — COLLAPSE TRIGGER (v2)
   ============================================ */

.prog-collapse-trigger {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    padding: .6rem 0 .3rem;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

/* Override program.css defaults — no margin/border when collapsed */
.prog-collapse-trigger .program-header {
    flex: 1;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

/* Show divider only when expanded */
.prog-collapse-trigger:not(.collapsed) .program-header {
    padding-bottom: .5rem !important;
    border-bottom: 1px solid #e9ecef !important;
    margin-bottom: .2rem !important;
}

.prog-chev {
    font-size: .85rem;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform .25s ease;
    margin-top: .35rem;
}

.prog-collapse-trigger:not(.collapsed) .prog-chev {
    transform: rotate(180deg);
}

.prog-collapse-trigger:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
    border-radius: 4px;
}

.prog-body {
    padding: .5rem 0 .75rem;
}


/* ============================================
   SECTION PREVIEW WRAP — COMPRESS + EXPAND
   Applies to program timeline and POI list.
   ============================================ */

.sec-preview-wrap {
    position: relative;
    max-height: var(--sec-preview-h, 320px);
    overflow: hidden;
    transition: max-height .5s ease;
}

.sec-preview-wrap.sec-open {
    /* max-height is set by JS (scrollHeight) — just clear overflow so nothing clips */
    overflow: visible;
}

/* Gradient fade at bottom when collapsed */
.sec-preview-wrap:not(.sec-open)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 88px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}

/* Pill expand / collapse button centred below the wrap */
.sec-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: .65rem auto 0;
    padding: .5rem 1.5rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 99px;
    font-size: .82rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    font-family: inherit;
}

.sec-expand-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.sec-expand-btn .sec-chev {
    font-size: .9rem;
    transition: transform .3s ease;
}

.sec-expand-btn.sec-open .sec-chev {
    transform: rotate(180deg);
}


/* ============================================
   PROGRAM TABLE VIEW
   ============================================ */

.prog-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,.07);
}

.prog-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: .9rem;
}

.prog-table thead th {
    background: #1e293b;
    color: #f1f5f9;
    padding: .7rem 1rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: none;
    white-space: nowrap;
}

.prog-table thead th.col-time  { width: 72px; }
.prog-table thead th.col-title { min-width: 180px; }
.prog-table thead th.col-cat   { width: 120px; }
.prog-table thead th.col-loc   { width: 160px; }

.prog-tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background .12s;
}
.prog-tr:last-child { border-bottom: none; }
.prog-tr:hover { background: #f8faff; }

.prog-tr--featured {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
}
.prog-tr--featured:hover { background: #fef3c7; }

.prog-table td {
    padding: .75rem 1rem;
    vertical-align: middle;
    color: #374151;
}

.prog-time-pill {
    display: inline-block;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 20px;
    padding: .2rem .65rem;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    font-family: monospace;
}

.prog-tr--featured .prog-time-pill {
    background: #fde68a;
    color: #92400e;
}

.prog-td-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    text-align: center;
    line-height: 26px;
    font-size: .8rem;
    margin-right: .5rem;
    flex-shrink: 0;
    vertical-align: middle;
}

.prog-tr--featured .prog-td-icon {
    background: #fef3c7;
    color: #d97706;
}

.prog-td-name {
    font-weight: 600;
    color: #1f2937;
    vertical-align: middle;
}

.prog-td-desc {
    display: block;
    font-size: .75rem;
    color: #6b7280;
    margin-top: .15rem;
    font-weight: 400;
}

.prog-td-loc {
    font-size: .82rem;
    color: #6b7280;
}

/* POI timeline responsive fix */
@media (max-width: 768px) {
    .modern-timeline.poi-timeline::before { left: 24px; transform: none; }
    .modern-timeline.poi-timeline .modern-timeline-item { flex-direction: row !important; text-align: left !important; }
    .modern-timeline.poi-timeline .modern-timeline-item:nth-child(even) { flex-direction: row !important; text-align: left !important; }
    .modern-timeline.poi-timeline .modern-timeline-dot { width: 48px; height: 48px; font-size: 1.1rem; margin: 0 1rem 0 0; }
    .modern-timeline.poi-timeline .modern-timeline-content { max-width: 100%; }
    .modern-timeline.poi-timeline .modern-timeline-content::before { display: none; }
    .modern-timeline.poi-timeline .timeline-header { flex-direction: column; gap: .35rem; }
    .modern-timeline.poi-timeline .modern-timeline-item:nth-child(even) .timeline-header { flex-direction: column; }
}

/* ── Overview: modular events — single source for prices/routes (#registration) ── */
.ov-modular-hint {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
}

.ov-modular-hint i {
    color: #64748b;
    margin-right: 0.35rem;
    vertical-align: -0.08em;
}

.ov-modular-hint a {
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.ov-modular-hint a:hover {
    color: #1e3a8a;
}

.event-pillars--modular {
    margin-top: 0.15rem;
    gap: 0.65rem 1.15rem;
    justify-content: center;
}

.event-pillars--modular .pillar-item span {
    max-width: 8.5rem;
    line-height: 1.2;
}

@media (max-width: 520px) {
    .event-pillars--modular {
        gap: 0.5rem 0.75rem;
    }
    .event-pillars--modular .pillar-icon {
        width: 46px;
        height: 46px;
        font-size: 1.15rem;
    }
    .event-pillars--modular .pillar-item span {
        font-size: 0.68rem;
        max-width: 5.5rem;
    }
}

.event-pillars--compact {
    margin-top: 0.15rem;
}

.ov-event-brief__intro--lede {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.ov-description-details .ov-desc-body--rich ul,
.ov-description-details .ov-desc-body--rich ol {
    margin: 0.65rem 0 0.5rem;
    padding-left: 1.35rem;
}

.ov-description-details .ov-desc-body--rich li {
    margin-bottom: 0.4rem;
}

.ov-description-details .ov-desc-body--rich li:last-child {
    margin-bottom: 0;
}

.ov-description-details .ov-desc-body--rich a {
    color: #1d4ed8;
    word-break: break-word;
}

.ov-description-details .ov-desc-body--rich blockquote {
    margin: 0.75rem 0;
    padding: 0.5rem 0.85rem;
    border-left: 3px solid #cbd5e1;
    background: #f9fafb;
    color: #475569;
    font-size: 0.92em;
}

/* ── Overview description: suppress redundant title/date already in hero ── */
.ov-desc-body > h2:first-child { display: none; }
.ov-desc-body > h2:first-child + p { display: none; }

/* ── FOMO bar: always-visible capacity display ──────────────────────────── */
.hero-fomo-bar:empty { display: none; }
.hero-fomo-bar .fomo-item.fomo-social-proof {
    opacity: 0.9;
}

/* ── Mobile: reduce inline padding-top:4rem on section header containers ── */
@media (max-width: 768px) {
    .ov-facts-grid,
    .ov-route-grid {
        grid-template-columns: 1fr;
    }

    .ov-route-card {
        padding: .85rem;
    }

    /* Route section header container uses inline style="padding-top:4rem" */
    .route-section-fullbleed > .container:first-child {
        padding-top: 2rem !important;
        padding-bottom: 1rem !important;
    }
    /* Registration section header */
    #registration.registration-section > .container:first-child {
        padding-top: 2rem !important;
    }
    /* Tighten program container spacing */
    .program-container {
        margin-top: 0;
    }
    .program-timeline {
        padding: 20px 0;
    }
    /* Route distance tabs: prevent horizontal overflow on small screens */
    #routeDistanceTabs {
        gap: 2px !important;
    }
    #routeDistanceTabs .nav-link {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.5rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .route-section-fullbleed > .container:first-child {
        padding-top: 1.5rem !important;
        padding-bottom: 0.75rem !important;
    }
    #registration.registration-section > .container:first-child {
        padding-top: 1.5rem !important;
    }
}

/* ============================================
   EVENT DETAIL DESIGN SYSTEM OVERRIDES
   Shared language for all public event sections.
   ============================================ */

.events-page {
    --event-bg: #f7f8fa;
    --event-surface: #ffffff;
    --event-surface-soft: #f3f5f7;
    --event-border: #e3e7ec;
    --event-border-strong: #cfd6df;
    --event-text: #111827;
    --event-muted: #5f6b7a;
    --event-subtle: #8a95a3;
    /* Blu istituzionale (allineato a mappa / CTA) — evita il teal che sembrava “tema verde” isolato */
    --event-accent: #1d4ed8;
    --event-accent-hover: #1e40af;
    --event-accent-soft: #eff6ff;
    --event-radius: 8px;
    --event-radius-lg: 10px;
    --event-shadow: 0 12px 34px rgba(15, 23, 42, .08);
    --event-shadow-soft: 0 8px 20px rgba(15, 23, 42, .06);
    background: var(--event-bg);
    color: var(--event-text);
}

.events-page :where(#overview, #program, #kit, #route, #registration, #rules, #safety-plan, #gallery, #sponsors, #event-donate, .event-carousel-section, .simple-gallery-section) {
    background: var(--event-bg) !important;
    color: var(--event-text);
}

.events-page :where(.section-padding, .registration-section, .compact-donation-section, .simple-gallery-section, .event-carousel-section) {
    padding: clamp(2.75rem, 6vw, 5rem) 0 !important;
}

.events-page .route-section-fullbleed > .container:first-child {
    padding-top: clamp(2.75rem, 6vw, 5rem) !important;
    padding-bottom: 1rem !important;
}

.event-section-head,
.events-page .section-header {
    max-width: 760px;
    margin: 0 auto clamp(1.25rem, 3vw, 2rem) !important;
    padding: 0 !important;
    text-align: left;
}

.event-section-head--center,
.events-page .section-header.text-center {
    text-align: center;
}

.event-section-head--center .event-section-head__main,
.events-page .section-header.text-center .event-section-head__main {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.event-section-head--center .event-section-head__main > div,
.events-page .section-header.text-center .event-section-head__main > div {
    width: 100%;
}

.event-section-head--center .event-section-eyebrow,
.events-page .section-header.text-center .event-section-eyebrow {
    justify-content: center;
}

.event-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .45rem;
    color: var(--event-accent);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.event-section-head__main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.event-section-heading,
.events-page .section-title,
.compact-donation-section .section-header h2 {
    margin: 0 !important;
    color: var(--event-text) !important;
    font-size: clamp(1.55rem, 3vw, 2.15rem) !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

.events-page .section-title i {
    display: none;
}

.event-section-lede,
.events-page .section-subtitle {
    max-width: 620px;
    margin: .5rem auto 0 !important;
    color: var(--event-muted) !important;
    font-size: clamp(.95rem, 1.6vw, 1.04rem) !important;
    line-height: 1.55 !important;
    font-weight: 450 !important;
}

.event-subsection-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 .35rem;
    color: var(--event-text);
    font-size: 1.15rem;
    font-weight: 850;
    line-height: 1.2;
}

.event-subsection-heading i {
    color: var(--event-accent);
}

.event-subsection-lede {
    max-width: 560px;
    margin: 0 auto 1rem;
    color: var(--event-muted);
    font-size: .92rem;
    line-height: 1.5;
    text-align: center;
}

.event-section-head:not(.event-section-head--center) .event-section-lede {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.event-section-action,
.events-page :where(.btn-primary, .btn-register, .btn-download, .btn-paypal-compact, .donate-submit-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 42px;
    padding: .65rem 1rem;
    border: 1px solid var(--event-accent) !important;
    border-radius: var(--event-radius) !important;
    background: var(--event-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.event-section-action:hover,
.events-page :where(.btn-primary, .btn-register, .btn-download, .btn-paypal-compact, .donate-submit-btn):hover {
    background: var(--event-accent-hover) !important;
    border-color: var(--event-accent-hover) !important;
    transform: translateY(-1px);
}

.events-page :where(.btn-outline-primary, .btn-view, .btn-outline-secondary, .ov-read-more-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 40px;
    padding: .6rem .95rem;
    border: 1px solid var(--event-border-strong) !important;
    border-radius: var(--event-radius) !important;
    background: #fff !important;
    color: var(--event-text) !important;
    box-shadow: none !important;
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none !important;
}

.events-page :where(.btn-outline-primary, .btn-view, .btn-outline-secondary, .ov-read-more-btn):hover {
    border-color: var(--event-accent) !important;
    background: var(--event-accent-soft) !important;
    color: var(--event-accent-hover) !important;
}

.events-page :where(.ov-main-card, .program-container, .registration-card, .rules-container, .kit-content, .quick-donation-form, .donation-progress-compact, .sponsor-tier, .sponsors-logo-grid, .simple-gallery-grid, .poi-table-card, .route-description-section, .prizes-stats, .prizes-list-wrapper) {
    border: 1px solid var(--event-border) !important;
    border-radius: var(--event-radius-lg) !important;
    background: var(--event-surface) !important;
    box-shadow: var(--event-shadow-soft) !important;
}

.events-page :where(.ov-main-card, .program-container, .registration-card, .rules-container, .kit-content, .sponsor-tier) {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

/* Prizes layout: match registration inner column width */
.events-page .prizes-section .prizes-stats,
.events-page .prizes-section .prizes-list-wrapper {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.events-page :where(.ov-route-card, .ov-fact, .price-card, .pc-card, .kit-item-card, .feature-card, .collection-card, .rule-item, .rules-document-card, .safety-card, .sponsor-item, .amount-btn, .payment-option, .prog-tr, .program-content, .program-item .program-content, .prizes-stat-card, .prize-card) {
    border: 1px solid var(--event-border) !important;
    border-radius: var(--event-radius) !important;
    background: var(--event-surface) !important;
    box-shadow: none !important;
}

.events-page :where(.ov-route-card, .pc-card, .kit-item-card, .rule-item, .sponsor-item, .amount-btn, .payment-option) {
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.events-page :where(.ov-route-card, .pc-card, .kit-item-card, .rule-item, .sponsor-item, .amount-btn, .payment-option):hover {
    border-color: var(--event-border-strong) !important;
    transform: translateY(-1px);
}

/* #kit .kit-item-icon: excluded — kit uses per-item gradients (kit-tone-*), not event accent pills */
.events-page :where(.ov-fact i, .document-icon, .notice-icon, .reg-header-icon, .feature-icon, .accordion-icon, .rules-accordion-button .accordion-icon, .prizes-stat-icon, .prize-rank, .referral-cta-icon) {
    background: var(--event-accent-soft) !important;
    color: var(--event-accent) !important;
    border-radius: var(--event-radius) !important;
}

.events-page .pillar-icon {
    border-radius: 999px !important;
}

.events-page .pillar-icon.pillar-red {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.events-page .pillar-icon.pillar-green {
    background: #ecfdf5 !important;
    color: #047857 !important;
}

.events-page .pillar-icon.pillar-gold {
    background: #fffbeb !important;
    color: #b45309 !important;
}

.events-page .pillar-icon.pillar-blue {
    background: #eef6ff !important;
    color: #1d4ed8 !important;
}

.events-page .pillar-icon.pillar-purple {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
}

.events-page :where(.program-category, .highlight-badge, .popular-badge, .status-badge, .pricing-status, .route-tab-distance, .price-label, .rules-count) {
    border-radius: 999px !important;
    background: var(--event-surface-soft) !important;
    color: var(--event-muted) !important;
    border: 1px solid var(--event-border) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
}

.events-page :where(.rules-accordion-button, .prog-collapse-trigger, .pc-card__details summary, .ov-description-details summary, .ov-route-card__details summary) {
    min-height: 44px;
    color: var(--event-text) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

.events-page :where(.rules-accordion-item, .ov-description-details, .ov-route-card__details, .pc-card__details, .race-detail-accordion, .kit-detail-accordion) {
    border-color: var(--event-border) !important;
    border-radius: var(--event-radius) !important;
}

.events-page :where(.rules-header, .registration-header, .document-header, .progress-header) {
    border-bottom: 1px solid var(--event-border) !important;
    background: transparent !important;
}

.events-page :where(.early-bird-notice, .race-selection-note, .rules-notice, .price-comparison, .public-discount-rules-alert, .reg-info-bar, .prizes-info-banner) {
    border: 1px solid var(--event-border) !important;
    border-radius: var(--event-radius) !important;
    background: var(--event-surface-soft) !important;
    color: var(--event-muted) !important;
}

/*
 * Rules callout: rules.css styles this block for a blue gradient with white type.
 * On .events-page we restyle the box to a light surface; keep title/body readable.
 */
.events-page .rules-notice .notice-title {
    color: var(--event-text) !important;
}

.events-page .rules-notice .notice-text {
    color: var(--event-muted);
    min-width: 0;
}

.events-page :where(.amount-btn.popular, .payment-option.active, .route-distance-tabs .nav-link.active, .pricing-tab.is-active) {
    border-color: var(--event-accent) !important;
    background: var(--event-accent-soft) !important;
    color: var(--event-accent-hover) !important;
}

.events-page :where(.progress-bar, .route-distance-tabs .nav-link.active::after) {
    background: var(--event-accent) !important;
}

.events-page :where(.price-amount, .ov-route-card__price, .pc-card__price, .raised, .goal, .amount) {
    color: var(--event-text) !important;
}

.events-page :where(.description-text, .program-description, .item-description, .rule-text, .notice-description, .sponsor-description, .ov-desc-body, .ov-event-brief__intro, .prize-desc, .prizes-subtitle) {
    color: var(--event-muted) !important;
}

.events-page :where(.section-header::before, #overview::before, .overview-card::before, .detail-card::before, .kit-cta-button::before) {
    display: none !important;
}

.events-page :where(.kit-cta-button, .event-cta-section, .price-card-header, .rules-title, .document-title, .header-title) {
    background-image: none !important;
    text-shadow: none !important;
}

.events-page .kit-cta-button {
    background: var(--event-text) !important;
    border-radius: var(--event-radius) !important;
}

.events-page .mobile-float-cta {
    background: rgba(255, 255, 255, .96) !important;
    border-top: 1px solid var(--event-border) !important;
    box-shadow: 0 -10px 28px rgba(15, 23, 42, .10) !important;
}

@media (max-width: 768px) {
    .event-section-head__main {
        align-items: stretch;
        flex-direction: column;
        gap: .85rem;
    }

    .event-section-action {
        width: 100%;
    }

    .event-section-head,
    .events-page .section-header {
        margin-bottom: 1.15rem !important;
    }

    .events-page :where(.section-padding, .registration-section, .compact-donation-section, .simple-gallery-section, .event-carousel-section) {
        padding: 2.5rem 0 !important;
    }
}