/* ============================================================
   The gallery lightbox.

   Lifted out of event-detail.css so a page that is not on the
   TrendsLive public layout — the venue page is on eventmie's —
   can load the overlay without pulling in the whole event sheet.
   The rules are unchanged; only their address is.

   Loaded by trendslive.partials.lightbox, which is the only
   thing that renders this markup.
   ============================================================ */

/* ===== lightbox ===== */
.lb{position:fixed;inset:0;z-index:90;background:rgba(8,9,12,.92);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:32px}
.lb.show{display:flex}
.lb-stage{position:relative;max-width:960px;width:100%;display:flex;align-items:center;justify-content:center}
/* The one rule the design sheet did not carry: it drew .lb-img / .lb-vid as
   direct children of .lb-stage, but the stage also holds the close button, the
   two arrows and the counter, so the swapped-in media needs its own child to
   live in. Nothing else about the lightbox changed. */
.lb-body{width:100%;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:100%;max-height:82vh;border-radius:var(--tl-r-md);border:1px solid var(--tl-border-strong);box-shadow:var(--tl-shadow-md)}
.lb-vid{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--tl-r-md);overflow:hidden;border:1px solid var(--tl-border-strong);background-size:cover;background-position:center;display:grid;place-items:center}
.lb-vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.5))}
.lbv-play{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;background:var(--tl-yellow);color:#161920;display:grid;place-items:center;box-shadow:var(--tl-glow-yellow)}
.lbv-play svg{margin-left:3px}
.lbv-note{position:absolute;bottom:16px;left:0;right:0;z-index:2;text-align:center;font-family:var(--tl-font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.lb-close{position:absolute;top:-46px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--tl-border-strong);background:var(--tl-surface-2);color:#fff;display:grid;place-items:center;transition:.15s}
.lb-close:hover{border-color:var(--tl-border-yellow);color:var(--tl-yellow-ink)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--tl-border-strong);background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;transition:.15s}
.lb-nav:hover{background:var(--tl-yellow);color:#161920;border-color:var(--tl-yellow)}
.lb-prev{left:-64px}.lb-next{right:-64px}
.lb-count{position:absolute;bottom:-38px;left:0;right:0;text-align:center;font-family:var(--tl-font-mono);font-size:10px;letter-spacing:.14em;color:var(--tl-fg-3)}
@media(max-width:820px){.lb-prev{left:8px}.lb-next{right:8px}.lb-nav{background:rgba(0,0,0,.65)}.lb-close{top:-44px}}