/* Media page specific styles (kept lean; complements base.css) */

.toc { margin-top: var(--space-4); }
.toc-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.toc-list a { display: inline-block; padding: 0.35rem 0.6rem; border: 1px solid rgba(50,50,50,0.12); border-radius: var(--radius-round); background: var(--color-surface); }
.toc-list a:hover { text-decoration: none; background: #fff; }

.gallery-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); align-items: start; }
.video-grid { grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 56rem) { .video-grid { grid-template-columns: 1fr 1fr; } }

.history-grid { grid-template-columns: 1fr; }

.demo-grid { grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 48rem) { .demo-grid { grid-template-columns: 1fr 1fr; } }

.demo-panel .badge { font-weight: 700; letter-spacing: 0.02em; }

/* Lightbox dialog */
#lightbox { width: min(92vw, 980px); border: 1px solid rgba(30,30,30,0.15); border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-lg); background: var(--color-surface); }
#lightbox::backdrop { background: rgba(0,0,0,0.5); }
.lightbox-inner { padding: var(--space-4); }
.lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
#lightbox img { width: 100%; height: auto; border-radius: var(--radius-md); }
#lightbox figcaption { margin-top: var(--space-2); color: var(--gray-700); }

/* Minor figure tweaks */
figure.card img { border-radius: var(--radius-md); }

/* Timeline list */
.timeline { margin: 0; padding-left: 0; list-style: none; display: grid; gap: var(--space-3); }
.timeline .badge { margin-right: var(--space-2); }