/* ============================================================
   EVENT DETAILS PAGE
   Every color, font, radius and shadow here reuses the variables
   already defined in style.css — nothing new is introduced, so this
   page can't visually drift from the rest of the site over time.
   ============================================================ */

#event-page{padding-top:0;min-height:100vh;}

/* ---------- loading / not-found states ---------- */
.event-status{
  min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:0 24px;
}
.event-status p{color:var(--muted);font-family:var(--serif);font-style:italic;font-size:17px;}
.event-spinner{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--line-strong);border-top-color:var(--gold);
  animation:event-spin 0.9s linear infinite;
}
@keyframes event-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .event-spinner{animation:none;} }

/* ---------- hero ----------
   The banner photo is shown in full (object-fit:contain inside a fixed-
   height frame) rather than cropped to fill — event photos come in all
   sorts of aspect ratios, and cropping was cutting off real content
   (faces, signage, dish shots). Any leftover space around a mismatched
   ratio just letterboxes against the frame's own charcoal backdrop.
   Title/date/time used to be overlaid on the photo itself; they now sit
   in their own centered block below the frame, so they're never
   competing with the image for legibility. */
.event-hero{position:relative;padding-top:88px;background:linear-gradient(160deg,var(--charcoal-3),var(--charcoal));}
.event-hero-frame{
  position:relative;height:460px;overflow:hidden;
  background-color:var(--charcoal);
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 22px),
    radial-gradient(ellipse at center, rgba(212,175,55,0.10), transparent 65%),
    linear-gradient(160deg,var(--charcoal-3),var(--charcoal));
  display:flex;align-items:center;justify-content:center;
}
.event-hero-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.event-hero-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;}
.event-hero-empty .icon-badge{width:64px;height:64px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3);}
.event-hero-empty .icon-placeholder{width:26px;height:26px;color:var(--muted-2);opacity:0.7;}
.event-hero-empty .label{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-2);}
.event-hero-top{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:16px 24px 40px;
  background:linear-gradient(180deg, rgba(5,1,3,0.55) 0%, transparent 100%);
}
.event-hero-top .badge{background:var(--gold);color:var(--black);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;padding:7px 14px;}
.event-hero-top .badge.live{background:var(--warm-white);}
.event-hero-actions{display:flex;gap:10px;}
.event-hero-actions button{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);
  background:rgba(10,3,6,0.55);color:var(--warm-white);display:flex;align-items:center;justify-content:center;
  transition:all .25s ease;
}
.event-hero-actions button svg{width:18px;height:18px;}
.event-hero-actions button:hover{background:var(--gold);color:var(--black);border-color:var(--gold);}
.event-hero-actions button.active{background:var(--gold);color:var(--black);border-color:var(--gold);}
.event-hero-info{
  padding:30px 24px 34px;max-width:1180px;margin:0 auto;width:100%;
  text-align:center;
}
.event-hero-info h1{
  font-family:var(--serif-display);font-weight:500;
  font-size:clamp(30px,5vw,52px);margin:0 0 16px;line-height:1.08;
}
.event-hero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;}
.event-hero-meta span{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gold-light);letter-spacing:0.02em;}
.event-hero-meta .icon-inline{width:16px;height:16px;flex-shrink:0;}

/* ---------- two-column layout ---------- */
.event-layout{
  max-width:1180px;margin:0 auto;padding:56px 24px 100px;
  display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start;
}
.event-main{min-width:0;display:flex;flex-direction:column;gap:64px;}

/* ---------- booking card ---------- */
.booking-card{
  position:sticky;top:100px;
  background:linear-gradient(160deg,var(--charcoal-2),var(--charcoal));
  border:1px solid var(--line-strong);border-radius:18px;
  padding:28px;box-shadow:0 30px 60px rgba(0,0,0,0.4);
}
.booking-card .bc-price-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;}
.booking-card .bc-price-label{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-2);}
.booking-card .bc-price{font-family:var(--serif-display);font-size:30px;color:var(--gold);margin-top:4px;}
.booking-card .bc-platform-tag{font-size:11px;letter-spacing:0.08em;color:var(--muted);text-transform:uppercase;background:rgba(0,0,0,0.3);border:1px solid var(--line);padding:5px 10px;}

.bc-availability{margin-bottom:20px;}
.bc-availability .row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:8px;}
.bc-availability .row b{color:var(--gold-light);}
.bc-progress{height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden;}
.bc-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));border-radius:3px;transition:width .6s ease;}

.bc-countdown{
  display:flex;justify-content:space-between;gap:8px;margin-bottom:22px;
  padding:14px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bc-countdown div{flex:1;text-align:center;}
.bc-countdown .n{font-family:var(--serif-display);font-size:22px;color:var(--gold);display:block;}
.bc-countdown .l{font-size:9px;letter-spacing:0.12em;color:var(--muted-2);text-transform:uppercase;}

.booking-card .bc-cta{width:100%;padding:15px;text-align:center;margin-bottom:12px;}
.booking-card .bc-secondary{display:flex;gap:10px;}
.booking-card .bc-secondary button, .booking-card .bc-secondary a{
  flex:1;background:none;border:1px solid var(--line-strong);color:var(--muted);
  padding:10px;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .25s ease;
}
.booking-card .bc-secondary button:hover, .booking-card .bc-secondary a:hover{border-color:var(--gold);color:var(--gold-light);}
.booking-card .bc-secondary svg{width:14px;height:14px;}
.bc-calendar-menu{position:relative;flex:1;}
.bc-calendar-options{
  position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:5;
  background:var(--charcoal-2);border:1px solid var(--line-strong);display:none;
}
.bc-calendar-options.show{display:block;}
.bc-calendar-options a{display:block;padding:10px 14px;font-size:12px;color:var(--muted);border:none;text-transform:none;letter-spacing:0.02em;}
.bc-calendar-options a:hover{background:var(--charcoal-3);color:var(--gold-light);}

/* ---------- generic section ---------- */
.event-section h2{font-family:var(--serif-display);font-size:24px;margin:0 0 18px;}
.event-section .ec-desc{-webkit-line-clamp:unset;}
.event-about p{font-size:15px;color:var(--muted);line-height:1.8;margin:0 0 14px;}
.event-about .read-more-btn{background:none;border:none;color:var(--gold-light);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;padding:0;border-bottom:1px solid var(--line-strong);}

/* ---------- highlights ---------- */
.highlights-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;}
.highlight-card{
  background:var(--charcoal);border:1px solid var(--line);padding:18px 14px;text-align:center;
  transition:border-color .3s ease, transform .3s ease;
}
.highlight-card:hover{border-color:var(--line-strong);transform:translateY(-3px);}
.highlight-card .icon-inline{width:22px;height:22px;color:var(--gold);margin:0 auto 10px;}
.highlight-card span{font-size:12px;color:var(--muted);letter-spacing:0.02em;}

/* ---------- gallery ---------- */
.event-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.event-gallery-grid .gtile{aspect-ratio:1/1;cursor:pointer;}
.lightbox{
  position:fixed;inset:0;z-index:900;background:rgba(5,1,3,0.94);
  display:none;align-items:center;justify-content:center;padding:40px;
}
.lightbox.show{display:flex;}
.lightbox img{max-width:100%;max-height:85vh;border:1px solid var(--line-strong);}
.lightbox-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(0,0,0,0.4);color:var(--warm-white);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;}

/* ---------- venue ---------- */
.venue-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.venue-details{display:flex;flex-direction:column;gap:16px;}

/* ---------- related events ---------- */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;}

/* ---------- sticky mobile CTA ---------- */
.event-mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:400;
  background:rgba(10,3,6,0.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-strong);
  padding:12px 16px;align-items:center;gap:12px;
}
.event-mobile-cta .price{flex:0 0 auto;}
.event-mobile-cta .price .n{font-family:var(--serif-display);color:var(--gold);font-size:18px;display:block;}
.event-mobile-cta .price .l{font-size:9px;color:var(--muted-2);letter-spacing:0.08em;text-transform:uppercase;}
.event-mobile-cta .cta-btn{flex:1;text-align:center;padding:13px;}
.event-mobile-cta .icon-btn{
  width:44px;height:44px;flex-shrink:0;border-radius:50%;border:1px solid var(--line-strong);
  background:transparent;color:var(--warm-white);display:flex;align-items:center;justify-content:center;
}
.event-mobile-cta .icon-btn svg{width:18px;height:18px;}

@media (max-width:980px){
  .event-layout{grid-template-columns:1fr;gap:40px;}
  .booking-card{position:static;}
  .venue-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .event-hero{padding-top:74px;}
  .event-hero-frame{height:300px;}
  .event-hero-info{padding:24px 20px 30px;}
  .event-layout{padding:36px 18px 110px;gap:44px;}
  .event-main{gap:44px;}
  .event-gallery-grid{grid-template-columns:repeat(2,1fr);}
  .booking-card{display:none;} /* replaced by the sticky mobile bar below */
  .event-mobile-cta{display:flex;}
}

/* ---------- timeline (schedule) ---------- */
.timeline{position:relative;padding-left:28px;}
.timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-strong);}
.timeline-item{position:relative;padding-bottom:22px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{position:absolute;left:-28px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--charcoal), 0 0 0 4px var(--line-strong);}
.timeline-time{font-size:12px;color:var(--gold-light);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px;}
.timeline-label{font-size:15px;color:var(--warm-white);}

/* ---------- FAQ accordion ---------- */
.faq-list{display:flex;flex-direction:column;gap:1px;background:var(--line);}
.faq-item{background:var(--charcoal);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;padding:18px 4px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--warm-white);font-family:var(--sans);
}
.faq-q .icon-inline{width:16px;height:16px;color:var(--muted-2);transition:transform .3s ease;flex-shrink:0;}
.faq-q.open .icon-inline{transform:rotate(180deg);color:var(--gold);}
.faq-a{max-height:0;overflow:hidden;font-size:14px;color:var(--muted);line-height:1.6;transition:max-height .35s ease, padding .35s ease;padding:0 4px;}
.faq-a.open{max-height:200px;padding:0 4px 18px;}

/* ---------- organizer ---------- */
.organizer-card{display:flex;align-items:center;gap:18px;background:var(--charcoal);border:1px solid var(--line);padding:20px;}
.organizer-logo{width:60px;height:auto;flex-shrink:0;}

/* ---------- shared small bits used only on this page ---------- */
.event-page-icon-badge{width:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--gold);}
#venue-section .info-row{display:flex;gap:14px;font-size:14px;color:var(--muted);align-items:flex-start;}
#venue-section .info-row span{width:20px;height:20px;flex-shrink:0;color:var(--gold);margin-top:2px;}
#venue-section .info-row span svg{width:20px;height:20px;}
#venue-section .info-row b{color:var(--warm-white);display:block;font-weight:500;margin-bottom:2px;}