/* Media page specific styles (kept minimal; extends base.css) */
.hero { padding-block: var(--space-16) var(--space-12); background: radial-gradient(800px 400px at 20% 0%, rgb(18 26 45 / 0.55), transparent 60%) , linear-gradient(180deg, rgb(10 13 20 / 0.0), rgb(10 13 20 / 0.6)); }
.hero__inner { display: grid; gap: var(--space-5); }
.hero__actions { display: inline-flex; gap: var(--space-4); flex-wrap: wrap; }

.section { padding-block: var(--space-14); }
.section__header { margin-bottom: var(--space-6); }
.section__header p { margin: 0; }
.section__copy { margin-top: var(--space-3); }

.section-subnav { position: sticky; top: 0; z-index: 10; background: linear-gradient(180deg, rgb(18 26 45 / 0.85), rgb(18 26 45 / 0.65)); backdrop-filter: blur(6px); border-block: 1px solid var(--gray-700); }
.section-subnav .subnav__list { display: grid; grid-auto-flow: column; gap: var(--space-4); overflow-x: auto; padding: var(--space-3) var(--space-6); white-space: nowrap; }
.section-subnav a { color: var(--gray-200); }
.section-subnav a:hover { color: var(--gray-50); }

.video-frame { overflow: hidden; }
.video-frame video { width: 100%; height: auto; display: block; }

.gallery figure { transition: transform var(--transition-normal) ease; }
.gallery figure:hover { transform: translateY(-2px); }
.gallery figcaption { margin-top: var(--space-3); color: var(--color-text-muted); }

.audio-list { display: grid; gap: var(--space-4); }
.audio-row { display: grid; gap: var(--space-2); }
.audio-row audio { width: 100%; }

.events-list { display: grid; gap: var(--space-5); }

/* Lightbox */
.lightbox[hidden] { display: none !important; }
.lightbox { position: fixed; inset: 0; background: rgb(0 0 0 / 0.78); display: grid; place-items: center; padding: var(--space-6); }
.lightbox__inner { width: min(100%, 960px); background: var(--color-surface-3); border: 1px solid var(--gray-700); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); }
.lightbox__close { float: right; margin-bottom: var(--space-3); }
.lightbox img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.lightbox figcaption { margin-top: var(--space-3); color: var(--color-text-muted); }

@media (max-width: 640px) {
  .hero { padding-block: var(--space-12) var(--space-10); }
  .section { padding-block: var(--space-12); }
}