/* styles.css */
/* ===========================
   THEME TOKENS
=========================== */
:root{
  --bg:#1b1b1b; --panel:#222222; --elev:#1F2020; --text:#ffffff; --muted:#B3B4B4; --outline:#2a2a2a;
  --brand:#e62228; --accent:#ff474c; --alt-accent:#8c181b;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --header-h:72px; --logo-h:clamp(40px,6vw,44px);

  /* HB Hero */
  --hb-hero-aspect:16/9;   /* set to your image ratio */
  --hb-slide-time:5s;      /* per-slide duration */
  --hb-slides:4;
  --hb-cycle:calc(var(--hb-slide-time) * var(--hb-slides));
}

/* ===========================
   BASE
=========================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg); color:var(--text); line-height:1.5;
  padding-top:var(--header-h); /* keep content below fixed header */
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1100px,92%); margin-inline:auto}

/* Avoid horizontal scrollbar for edge-to-edge hero */
html,body{overflow-x:clip}

/* Accessibility helpers */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:static; width:auto; height:auto; padding:.5rem 1rem; background:#000}
:where(a,button,input,select):focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ===========================
   HEADER & NAV
=========================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:linear-gradient(180deg, rgba(10,10,10,.9), rgba(10,10,10,.4) 60%, transparent);
  backdrop-filter:saturate(120%) blur(6px);
  transition:box-shadow .2s ease, background .2s ease;
}
.site-header.is-scrolled{box-shadow:var(--shadow); background:rgba(10,10,10,.9)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}

.logo{display:flex; align-items:center; flex:0 0 auto}
.logo img{height:var(--logo-h); width:auto; object-fit:contain}

.nav{display:flex; align-items:center; gap:1rem}
.nav-list{list-style:none; display:flex; gap:1rem; margin:0; padding:0}
.nav-cta{margin-left:.5rem}

.nav-toggle{
  display:none; width:40px; height:40px; background:transparent; border:1px solid var(--outline); border-radius:12px;
  align-items:center; justify-content:center; gap:3px; cursor:pointer;
}
.nav-toggle .bar{display:block; width:18px; height:2px; background:var(--text)}

@media (max-width:900px){
  .header-inner{display:grid; grid-template-columns:auto 1fr auto; align-items:center}
  .nav-toggle{
    display:flex !important; padding:.45rem .75rem; background:rgba(10,10,10,.55);
    -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%);
    border:1px solid var(--outline); border-radius:12px; gap:.4rem; justify-self:end
  }
  .nav-toggle .bar{display:none !important}
  .nav-toggle-label{color:var(--text); font-weight:600; font-size:.95rem; line-height:1; letter-spacing:.02em; white-space:nowrap}

  /* Drop panel */
  .nav{
    position:fixed; inset:calc(var(--header-h) - 1px) 0 auto 0;
    pointer-events:none; opacity:0; background:rgba(10,10,10,.9);
    -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%);
    padding:.75rem 1rem; display:flex; flex-direction:column; gap:.25rem;
    overflow:hidden; translate:0 -10px; clip-path:inset(-1px 0 100% 0);
    transition:clip-path .34s cubic-bezier(.22,.61,.36,1), translate .34s cubic-bezier(.22,.61,.36,1), opacity .22s ease, box-shadow .2s ease;
  }
  .nav::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--outline)}
  .nav.is-open{pointer-events:auto; opacity:1; translate:0 0; clip-path:inset(-1px 0 0 0); box-shadow:0 12px 30px rgba(0,0,0,.35)}
  .nav-list{flex-direction:column; align-items:flex-start; gap:.25rem; width:100%; margin:0; padding:0}
  .nav-list a{display:block; width:100%; padding:.6rem .25rem; text-align:left}
  .nav-cta{margin-top:.5rem; align-self:flex-start; width:auto; text-align:left; font-size:.95rem; padding:.55rem .9rem}

  @media (prefers-reduced-motion:reduce){
    .nav{transition:opacity .2s ease; translate:0 0; clip-path:none}
  }
}

/* ===========================
   BUTTONS
=========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid var(--outline); border-radius:999px; padding:.7rem 1.1rem; font-weight:600;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brand); color:#fff; border:none}
.btn-primary:hover{background:var(--accent)}
.btn-primary:active{background:var(--alt-accent)}
.btn-ghost{border:1px solid var(--brand); color:var(--brand); background:transparent}
.btn-ghost:hover{background:var(--brand); color:#fff}
.btn-lg{padding:.9rem 1.25rem; font-size:1.05rem}

/* ===========================
   FULL-BLEED HB HERO (CSS-only, no crop)
=========================== */
.hb-hero{
  position:relative;
  inline-size:100dvw;                          /* edge-to-edge */
  margin-inline:calc(50% - 50dvw);             /* break out of .container */
  aspect-ratio:var(--hb-hero-aspect);          /* preserve 16:9 frame */
  background:#000;
  overflow:hidden;
}
@supports not (width:100dvw){
  .hb-hero{ width:100vw; margin-left:50%; transform:translateX(-50%) }
}

.hb-hero__stage{ position:absolute; inset:0; isolation:isolate; }
.hb-hero__slide{
  position:absolute; inset:0; opacity:0; will-change:opacity;
  animation:hbFade var(--hb-cycle) linear infinite;
}
/* Make sure something is visible even before animation kicks in */
.hb-hero__slide:first-child,
.hb-hero__slide.is-active{ opacity:1; }

.hb-hero__slide:nth-child(1){ animation-delay:calc(var(--hb-slide-time) * 0) }
.hb-hero__slide:nth-child(2){ animation-delay:calc(var(--hb-slide-time) * 1) }
.hb-hero__slide:nth-child(3){ animation-delay:calc(var(--hb-slide-time) * 2) }
.hb-hero__slide:nth-child(4){ animation-delay:calc(var(--hb-slide-time) * 3) }

.hb-hero__slide img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; background:#000;
  pointer-events:none; user-select:none; transform:none; animation:none;
}

/* Crossfade timeline (each slide owns 25% of cycle) */
@keyframes hbFade{
  0%{opacity:0} 5%{opacity:1} 25%{opacity:1} 30%{opacity:0} 100%{opacity:0}
}

/* Top gradient so header reads over imagery */
.hb-hero__sheen{
  position:absolute; inset:0 0 auto 0; height:20svh;
  background:linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0));
  pointer-events:none; z-index:2;
}

@media (prefers-reduced-motion:reduce){
  .hb-hero__slide{animation:none; opacity:0}
  .hb-hero__slide:first-child{opacity:1}
}

/* ===========================
   SECTIONS / FILTERS
=========================== */
.section{padding:clamp(2rem,6vw,5rem) 0}
.section-alt{background:linear-gradient(180deg, var(--panel), transparent)}
.section-header{display:flex; flex-direction:column; align-items:flex-start; gap:.5rem}
.filters select{background:var(--elev); color:var(--text); border:1px solid var(--outline); padding:.6rem .8rem; border-radius:12px; font-size:.8rem}
.filters label{margin-right:1rem; font-weight:600}
.section-header p{margin-top:-1.6rem}

/* ===========================
   SHOW CARDS
=========================== */
.cards{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--elev); border:1px solid var(--outline); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); min-width:260px;
}
.card-media{aspect-ratio:16/9; object-fit:cover}
.card-body{padding:1rem}
.card-title{margin:.25rem 0 .25rem; font-size:1.25rem}
.card-copy{color:var(--muted); margin:0 0 .75rem}
.card-meta{display:flex; gap:.5rem; margin-bottom:.8rem}
.badge{display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .55rem; border-radius:999px; font-weight:600; font-size:.8rem; background:var(--brand); color:#fff}
.badge-outline{background:transparent; color:var(--text); border:1px solid var(--outline)}
.card-actions{display:flex; gap:.5rem; flex-wrap:wrap}

@media (max-width:1100px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:750px){
  .section-header{flex-direction:column; align-items:flex-start}
  .cards{display:flex; overflow:auto; gap:1rem; padding-bottom:.25rem}
  .cards.is-scroll-snap{scroll-snap-type:x mandatory}
  .card{scroll-snap-align:center; flex:0 0 85%}
}

/* ===========================
   SCHEDULE
=========================== */
.schedule{display:grid; gap:1rem}
.date-list{display:flex; gap:.5rem; list-style:none; padding:0; margin:0; overflow:auto}
.date{background:var(--elev); border:1px solid var(--outline); color:var(--text); padding:.6rem .8rem; border-radius:12px; cursor:pointer}
.date[aria-pressed="true"], .date:is(:hover,:focus){outline:none; box-shadow:inset 0 0 0 2px var(--brand)}
.times{min-height:3rem; display:grid; align-items:center; padding:.5rem 0}
.showtime{display:inline-flex; margin:.3rem .3rem 0 0; padding:.5rem .7rem; border:1px solid var(--outline); border-radius:999px; cursor:pointer}
.tiny-note{color:var(--muted); margin-top:.5rem}

/* ===========================
   VISIT / MAP
=========================== */
.map-embed{
  position:relative; height:320px; border-radius:var(--radius); border:1px solid var(--outline);
  overflow:hidden; background:var(--panel);
}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ===========================
   ABOUT / STATS
=========================== */
.about{display:grid; gap:1rem}
.stats{display:flex; gap:1.5rem; flex-wrap:wrap}
.stats div{background:var(--elev); border:1px solid var(--outline); border-radius:12px; padding:.8rem 1rem; text-align:center}
.stats strong{font-size:1.35rem; display:block}

/* ===========================
   NEWSLETTER
=========================== */
.newsletter{display:grid; gap:.75rem; justify-items:start}
.newsletter-form{display:flex; gap:.5rem; width:100%}
.newsletter-form input{flex:1; min-width:0; background:var(--elev); color:var(--text); border:1px solid var(--outline); padding:.7rem .8rem; border-radius:12px}

/* ===========================
   FOOTER
=========================== */
.site-footer{padding:2rem 0; border-top:1px solid var(--outline); background:#090a0b}
.footer-grid{display:grid; gap:1rem; align-items:center; grid-template-columns:1fr auto auto}
.footer-links{display:flex; gap:1rem; list-style:none; padding:0; margin:0}
.footer-social{display:flex; gap:.8rem}
.footer-social a{display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--outline); border-radius:10px}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr} }

/* ====== Lightbox (kept) ====== */
.video-modal{position:fixed; inset:0; display:none; z-index:200}
.video-modal.is-open{display:block}
.video-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.7); -webkit-backdrop-filter:blur(6px) saturate(120%); backdrop-filter:blur(6px) saturate(120%)}
.video-dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(960px,92vw); aspect-ratio:16/9; background:#000; border:1px solid var(--outline);
  border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
}
.video-frame{position:absolute; inset:0}
.video-frame iframe,.video-frame video{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.video-close{position:absolute; top:8px; right:8px; width:40px; height:40px; border-radius:12px; border:1px solid var(--outline); background:rgba(20,20,20,.7); color:#fff; font-size:22px; line-height:1; display:grid; place-items:center; cursor:pointer; z-index:2}
@media (max-width:520px){
  .video-dialog{width:94vw; aspect-ratio:16/9}
  .video-close{width:36px; height:36px; font-size:20px}
}

/* ===========================
   SHOW CARDS → video lightbox
=========================== */
.card-media-link{display:block; position:relative}
.card-media-link::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,.25));
  opacity:0; transition:opacity .25s ease; pointer-events:none; border-radius:0;
}
.card-media-link:hover::after{opacity:.8}
.card-media-link:active::after{opacity:1}

/* ——— Mobile “Menu” pill ——— */
@media (max-width:900px){
  /* keep header above the hero */
  .site-header{ z-index:9999; }
  .hb-hero, .hb-hero__stage, .hb-hero__sheen{ z-index:0; }

  /* drop panel starts exactly under header */
  .nav{ inset: var(--header-h) 0 auto 0 !important; border-top:0; }
  .nav::before{ display:none; }

  /* the pill */
  .nav-toggle{
    display:flex !important;
    align-items:center; justify-content:center;
    height:44px; padding:0 18px;
    background: rgba(18,18,18,.72) !important;   /* glassy dark */
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:24px;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset,
                0 10px 24px rgba(0,0,0,.28);
    color:#fff; cursor:pointer;
    width:auto !important;                       /* avoid stretched box */
  }
  /* hide any old hamburger bars */
  .nav-toggle .bar{ display:none !important; }

  .nav-toggle-label{
    color:#fff; font-weight:700; font-size:1.05rem; letter-spacing:.01em; line-height:1;
  }

  /* hover/active/open states */
  .nav-toggle:hover{ background: rgba(18,18,18,.85) !important; }
  .nav-toggle:active{ transform: translateY(0); }
  .nav-toggle[aria-expanded="true"]{
    background: rgba(10,10,10,.92) !important;
    border-color: rgba(255,255,255,.24) !important;
  }

  .nav-toggle:focus-visible{
    outline:2px solid var(--accent); outline-offset:3px; border-radius:10px;
  }
}