/* Multimedia page styles (lean, using base variables and utilities) */

/* Responsive media wrapper */
.responsive-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.responsive-media iframe, .responsive-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Gallery grid tweaks */
.gallery-grid .figure img { width: 100%; height: auto; }

/* Audio list layout */
.audio-list { display: grid; gap: var(--space-24); margin-top: var(--space-24); }
.audio-list .h5 { font-size: var(--font-size-300); }

/* Demos */
.demo-sea { position: relative; height: 220px; background: var(--color-surface-2); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-md) inset; overflow: hidden; }
.ship { position: absolute; left: 10px; top: 10px; font-size: 28px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); transition: transform var(--duration-100) var(--ease); }
.demo-puzzle input[type=range] { width: 100%; }

/* Interactive map */
.map-container { position: relative; }
.map-image { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.map-marker { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 18px; height: 18px; background: var(--color-primary); border-radius: 50%; border: 2px solid rgba(0,0,0,0.35); box-shadow: var(--shadow-md); cursor: pointer; }
.map-marker:focus-visible { outline: 3px solid rgba(212,175,55,0.6); outline-offset: 2px; }
.map-popover { position: absolute; left: calc(var(--x)); top: calc(var(--y) - 0.5rem); transform: translate(-10%, -105%); max-width: 260px; z-index: 2; }

/* Minor spacing helpers for this page */
.h5 { font-size: var(--font-size-300); }

@media (max-width: 900px) {
  .media-grid { grid-template-columns: 1fr !important; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .map-popover { transform: translate(-50%, -110%); }
}

@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr !important; }
}