/* ==================================================================
   314 VBC — TRIVIA NIGHT
   Loaded by trivia.html (the event page) and by the two pages that
   carry the event banner (index.html, social.html). Namespaced `tv-`
   / `event-banner` so it cannot collide with site.css.
   Same rule as social.css: .phero / .sec--navy force white text on
   every descendant, so every light-background component here states
   its own colour.
   ================================================================== */

/* ---------- Event banner (homepage + Social) ---------- */
.event-banner{background:var(--navy-700);color:#fff;border-bottom:5px solid var(--red);padding:7rem 0 1.25rem}
.event-banner[hidden]{display:none}
.tryout-banner:not([hidden])~.event-banner,.tryout-reopen:not([hidden])~.event-banner{padding-top:1.25rem}
.event-banner:not([hidden])~.hero,.event-banner:not([hidden])~.phero{padding-top:3rem}
.event-banner-in{display:flex;align-items:center;gap:1rem 1.75rem;flex-wrap:wrap}
.event-banner-txt{flex:1 1 22rem;min-width:0}
.event-banner-label{margin:0 0 .35rem;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.event-banner h2{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.1;color:#fff}
.event-banner-sub{margin:.4rem 0 0;font-size:.95rem;color:#fff}
.event-banner-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.event-banner-close{display:flex;align-items:center;gap:.6rem;white-space:nowrap;min-height:44px;padding:.5rem .8rem;font:inherit;color:#fff;background:transparent;border:1px solid #ffffff70;border-radius:4px;cursor:pointer}
.event-banner-close span{font-size:1.5rem;line-height:1}
.event-banner-close:hover{background:#ffffff18}
.event-banner-close:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:760px){.event-banner{padding:6.5rem 0 1.1rem}.tryout-banner:not([hidden])~.event-banner,.tryout-reopen:not([hidden])~.event-banner{padding-top:1.1rem}.event-banner-close{font-size:.8rem}}

/* ---------- Trivia page ---------- */
.tv-when{font-family:var(--font-display);font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.15;text-transform:uppercase;margin:1.4rem 0 0;color:#fff}
.tv-when span{color:var(--red-hot)}

.tv-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media(min-width:900px){.tv-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}

.tv-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.tv-fact{background:#fff;color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--navy-900);padding:1.1rem 1.2rem 1.2rem}
.tv-fact--red{border-top-color:var(--red)}
.tv-fact-k{display:block;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red-ink);margin-bottom:.4rem}
.tv-fact-v{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1.1;text-transform:uppercase;color:var(--navy-900)}
.tv-fact-d{display:block;margin-top:.45rem;font-size:.93rem;color:var(--muted)}
.tv-fact a{color:var(--navy-700);text-decoration:underline;text-underline-offset:3px}

.tv-extras{margin:1.4rem 0 0;padding:1.1rem 1.2rem;background:var(--navy-900);color:#fff}
.tv-extras h3{margin:0 0 .6rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.tv-extras ul{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.tv-extras li{padding:.35rem .8rem;border:1px solid #ffffff55;font-weight:600;font-size:.92rem;color:#fff}

.tv-flyer{display:block;background:#fff;border:1px solid var(--line);padding:.6rem;box-shadow:0 24px 46px -24px rgba(7,14,32,.4);color:var(--ink)}
.tv-flyer img{width:100%;height:auto}
.tv-flyer-cap{display:block;margin-top:.6rem;font-size:.85rem;font-weight:600;color:var(--navy-700);text-decoration:underline;text-underline-offset:3px;text-align:center}

.tv-signup{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(min-width:820px){.tv-signup{grid-template-columns:minmax(0,1fr) auto}}
.tv-signup h2{font-size:clamp(2.2rem,5.2vw,4rem);margin:.6rem 0 0;color:#fff}
.tv-signup p{color:rgba(255,255,255,.86);max-width:52ch}
.tv-qr{background:#fff;color:var(--ink);padding:1rem;text-align:center;justify-self:start}
.tv-qr img{width:clamp(170px,22vw,230px);height:auto;margin-inline:auto}
.tv-qr small{display:block;margin-top:.5rem;font-size:.8rem;font-weight:600;color:var(--muted)}

.tv-check{margin-top:clamp(2rem,4vw,3rem);background:#fff;color:var(--ink);border:1px solid var(--line);border-left:6px solid var(--red);padding:clamp(1.2rem,3vw,2rem)}
.tv-check h3{margin:0 0 .5rem;font-family:var(--font-display);font-weight:400;font-size:1.5rem;text-transform:uppercase;color:var(--navy-900)}
.tv-check p{margin:0 0 .8rem;max-width:68ch;color:var(--ink)}
.tv-steps{margin:0;padding-left:1.3rem;display:grid;gap:.4rem;max-width:68ch}
.tv-steps strong{color:var(--navy-900)}
.tv-q{margin-top:1.1rem;font-size:.95rem;color:var(--muted)}
.tv-q a{color:var(--navy-700);text-decoration:underline;text-underline-offset:3px}