/* event/event.css */

/* HERO */
.event-hero {
    position: relative; min-height: 60vh; width: 100%;
    display: flex; align-items: flex-end; padding: 0 5% 60px; overflow: hidden;
}
.hero-bg-image { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; transform: scale(1.1); filter: brightness(.55) saturate(.9); }
.hero-vignette { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, var(--bg-void) 0%, rgba(1,3,7,.6) 45%, rgba(1,3,7,.2) 100%); }
.archive-ribbon {
    position: absolute; top: 80px; left: 0; z-index: 5;
    background: rgba(1,3,7,.9); border-right: 3px solid var(--text-muted);
    color: rgba(255,255,255,.6); padding: 8px 20px;
    font-family: var(--font-ui); font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
}
.hero-content { position: relative; z-index: 3; max-width: 1000px; width: 100%; padding-top: 80px; }
.hero-badge { display: inline-block; background: rgba(0,255,255,.06); border: 1px solid rgba(0,255,255,.3); color: var(--accent); padding: 6px 14px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 14px; transform: translateY(110%); }
.hero-title { font-family: var(--font-display); font-size: clamp(40px, 7vw, 96px); line-height: .95; letter-spacing: 1px; margin: 0 0 12px; }
.title-line { display: block; transform: translateY(100%); }
.hero-location { font-size: 15px; color: var(--text-body); font-family: var(--font-ui); letter-spacing: 3px; text-transform: uppercase; transform: translateY(100%); margin: 0; }
.hero-location::before { content: '◆  '; color: var(--accent); }
.probes-container { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; transform: translateY(100%); }
.probe-badge { background: rgba(1,3,7,.5); border: 1px solid var(--border-strong); color: var(--text-heading); padding: 4px 12px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; backdrop-filter: blur(4px); }

/* LAYOUT */
.event-container { display: flex; gap: 40px; max-width: 1600px; margin: 0 auto; padding: 36px 5% 100px; }
.event-sidebar { width: 300px; flex-shrink: 0; }
.event-main { flex: 1; min-width: 0; }

/* SIDEBAR */
.sticky-sidebar { position: sticky; top: 90px; padding: 26px; }
.stats-box { display: flex; flex-direction: column; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--border-subtle); }
.stat-label { color: var(--accent); font-family: var(--font-ui); font-size: 11px; letter-spacing: 5px; }
.stat-number { font-family: var(--font-display); font-size: 64px; line-height: 1; margin: 8px 0; color: var(--text-heading); text-shadow: var(--glow-soft); }
.stat-foot { color: var(--text-muted); font-size: 12px; font-family: var(--font-ui); letter-spacing: 2px; text-transform: uppercase; }
.sidebar-note { color: var(--text-muted); font-size: 11px; text-align: center; margin-top: 12px; font-family: var(--font-ui); letter-spacing: 1px; text-transform: uppercase; line-height: 1.5; }

.desc-section { margin-bottom: 36px; }
.event-desc-text { font-size: 15px; line-height: 1.7; color: var(--text-body); white-space: pre-wrap; }

/* TABS */
.event-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0; }
.event-tab {
    background: transparent; border: none; border-bottom: 3px solid transparent;
    color: var(--text-muted); padding: 10px 18px; font-family: var(--font-ui); font-size: 13px;
    font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
    transition: color .2s, border-color .2s; margin-bottom: -1px;
}
.event-tab:hover { color: var(--text-heading); }
.event-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* SHOWROOM */
.showroom-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.section-title { font-family: var(--font-display); font-size: clamp(30px, 4vw, 50px); letter-spacing: 1px; margin: 0; }
.search-input { max-width: 240px; flex: 1; }
.cars-slider { padding-bottom: 50px; overflow: visible; }
.swiper-pagination-bullet { background: var(--text-muted); opacity: .5; }
.swiper-pagination-bullet-active { background: var(--accent); opacity: 1; }

/* SHOWROOM CARD */
.showroom-card { background: var(--bg-card); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; min-height: 420px; position: relative; clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.showroom-card::after { content:'';position:absolute;top:0;right:0;width:22px;height:22px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);opacity:0;transition:opacity .3s; }
.showroom-card:hover::after { opacity:1; }
.card-top { padding: 16px 20px 12px; }
.card-top h3 { font-size: clamp(18px, 2.5vw, 22px); letter-spacing: 1px; margin-bottom: 3px; }
.card-top span { font-family: var(--font-ui); font-size: 12px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
.card-img-wrap { position: relative; height: 200px; overflow: hidden; cursor: pointer; }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.showroom-card:hover .card-img { transform: scale(1.05); }
.gallery-pill { position: absolute; bottom: 10px; right: 10px; background: rgba(1,3,7,.8); border: 1px solid var(--accent); color: var(--accent); padding: 3px 10px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 2px; }
.card-bottom { padding: 14px 20px 18px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.card-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.showroom-stat-item { background: rgba(255,255,255,.04); border: 1px solid var(--border-subtle); padding: 4px 10px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 1px; color: var(--text-body); }
.vote-section { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--border-subtle); margin-top: auto; }
.vote-badge { font-family: var(--font-display); font-size: 18px; color: var(--accent); letter-spacing: 2px; }
.btn-vote-premium { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); padding: 8px 16px; font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; font-weight: 700; transition: .2s; }
.btn-vote-premium:hover:not(:disabled) { background: var(--accent); color: #000; box-shadow: var(--glow); }
.btn-vote-premium:disabled { border-color: var(--border-subtle); color: var(--text-muted); cursor: default; }

/* PROBE LEADERBOARD */
.probe-tabs-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.probe-tab-btn { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted); padding: 8px 16px; font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: .2s; }
.probe-tab-btn:hover { border-color: var(--accent); color: var(--accent); }
.probe-tab-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(0,255,255,.06); }
.probe-tab-btn small { color: var(--text-muted); margin-left: 4px; text-transform: lowercase; }

.leaderboard-list { border: 1px solid var(--border-subtle); }
.lb-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); transition: background .2s; }
.lb-row:last-child { border-bottom: none; }
.lb-row.lb-top { background: rgba(0,255,255,.03); }
.lb-rank { font-size: 24px; min-width: 40px; text-align: center; }
.lb-info { flex: 1; }
.lb-info strong { display: block; font-family: var(--font-display); font-size: 20px; color: var(--text-heading); }
.lb-info span { font-family: var(--font-ui); font-size: 12px; color: var(--text-muted); letter-spacing: 1px; }
.lb-score { font-family: var(--font-display); font-size: 24px; color: var(--accent); text-shadow: var(--glow-soft); text-align: right; white-space: nowrap; }
.lb-score b { font-weight: normal; }
.lb-score small { font-size: 14px; color: var(--text-muted); margin-left: 4px; }

/* LIGHTBOX */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(1,3,7,.97); backdrop-filter: blur(8px); z-index: 9999; display: none; justify-content: center; align-items: center; flex-direction: column; padding: 16px; }
.lightbox-overlay.open { display: flex; }
.lb-image { max-width: 90%; max-height: 78vh; object-fit: contain; border: 1px solid var(--accent); box-shadow: var(--glow); }
.lb-close { position: absolute; top: 16px; right: 20px; color: var(--accent); font-size: 42px; cursor: pointer; background: transparent; border: none; line-height: 1; }
.lb-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(8,18,38,.9); border: 1px solid var(--accent); color: var(--accent); width: 48px; height: 48px; font-size: 18px; cursor: pointer; }
#lb-prev { left: 12px; } #lb-next { right: 12px; }
.lb-nav-btn:hover { background: var(--accent); color: #000; }
.lb-counter { margin-top: 16px; color: var(--accent); font-family: var(--font-ui); font-size: 13px; letter-spacing: 3px; }

/* ═══ MOBILE ═══ */
@media (max-width: 900px) {
    .event-container { flex-direction: column; padding: 24px 4% 60px; gap: 24px; }
    .event-sidebar { width: 100%; }
    .sticky-sidebar { position: static; }
    .event-hero { min-height: 55vh; padding: 0 4% 40px; }
    .showroom-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .search-input { max-width: 100%; width: 100%; }
    .lb-nav-btn { width: 40px; height: 40px; }
    #lb-prev { left: 4px; } #lb-next { right: 4px; }
    .lb-image { max-width: 95%; max-height: 70vh; }
    .probe-tabs-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .lb-row { padding: 12px 14px; }
    .lb-score { font-size: 20px; }
}
@media (max-width: 480px) {
    .hero-title { font-size: clamp(34px, 10vw, 60px); }
    .event-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .event-tab { white-space: nowrap; font-size: 12px; padding: 8px 14px; }
}

/* CREW TAG */
.crew-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(0,255,255,.1); border: 1px solid rgba(0,255,255,.4);
    color: var(--accent); padding: 2px 8px;
    font-family: var(--font-ui); font-size: 10px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    vertical-align: middle;
}

/* ── COUNTDOWN TIMER ── */
#countdown-box {
    display: none; margin-top: 20px;
}
.cd-label {
    display: block; font-family: var(--font-ui); font-size: 11px; letter-spacing: 5px;
    color: var(--accent); text-transform: uppercase; margin-bottom: 12px;
}
.cd-units {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cd-unit { text-align: center; }
.cd-num {
    display: block; font-family: var(--font-display); font-size: clamp(32px, 5vw, 52px);
    color: #fff; line-height: 1;
    background: rgba(0,255,255,.08); border: 1px solid rgba(0,255,255,.2);
    padding: 6px 14px; min-width: 64px; text-shadow: 0 0 20px rgba(0,255,255,.3);
}
.cd-sub {
    display: block; font-family: var(--font-ui); font-size: 9px; letter-spacing: 3px;
    color: var(--text-muted); text-transform: uppercase; margin-top: 6px;
}
.cd-sep { font-family: var(--font-display); font-size: 36px; color: var(--accent); line-height: 1; padding-bottom: 18px; }

/* ── SHARE BUTTON ── */
.btn-share {
    width: 100%; background: transparent;
    border: 1px solid var(--border-subtle); color: var(--text-muted);
    padding: 8px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px;
    text-transform: uppercase; cursor: pointer; transition: .2s;
    margin-top: 8px;
}
.btn-share:hover { border-color: var(--accent); color: var(--accent); }

/* ── VOTED BUTTON STATE ── */
.btn-vote-premium.voted {
    border-color: var(--success); color: var(--success); cursor: default;
}

/* ── GALLERY LINK ── */
.gallery-event-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: 12px; letter-spacing: 3px;
    color: var(--text-muted); text-decoration: none; text-transform: uppercase;
    border: 1px solid var(--border-subtle); padding: 8px 16px; margin-top: 10px;
    transition: .2s;
}
.gallery-event-link:hover { border-color: var(--accent); color: var(--accent); }

/* MOBILE countdown */
@media (max-width: 600px) {
    .cd-num { font-size: 28px; padding: 5px 10px; min-width: 52px; }
    .cd-sep { font-size: 26px; }
    .cd-units { gap: 5px; }
}