/* =========================================================
   ANTAHEEN — RESPONSIVE AUDIT PASS
   Loaded globally, after base.css, on every page.
   Targets the breakpoints called out in the spec:
   Desktop 1920/1440/1366/1280 · Tablet 1024/768 · Mobile 430/390/375/360
   ========================================================= */

/* --- Global overflow guard --- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, video, svg, table {
  max-width: 100%;
  height: auto;
}

/* --- Touch target sizing (WCAG: 44x44 minimum) --- */
.nav-toggle,
.btn,
.form-submit,
.player-play,
.lightbox-close,
.gallery-filter,
.member-filter,
.year-filter {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gallery-filter, .member-filter, .year-filter { min-width: auto; }

/* Range inputs need a taller hit area on touch even though the visible
   track stays thin. */
.player-seek {
  min-height: 44px;
  padding-block: 20px;
  margin-block: -20px;
}

/* =========================================================
   TABLET — 1024px and below
   ========================================================= */
@media (max-width: 1024px) {
  .container { padding-inline: 1.5rem; }
  .member-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.75rem; }
  .event-grid { gap: 1.75rem; }
}

/* =========================================================
   TABLET — 768px and below
   ========================================================= */
@media (max-width: 768px) {
  :root { --space-section: 3rem; }

  .site-header { padding: 0.9rem 1.25rem; }
  .hero-screen { padding-top: 5rem; }

  .chapter { min-height: auto; }
  .chapter-grid.with-media { grid-template-columns: 1fr; }
  .chapter-media { order: -1; aspect-ratio: 16/10; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }

  .song-list .song-card { padding-block: 1.75rem; }
}

/* =========================================================
   MOBILE — 430px and below (covers 430/390/375/360)
   ========================================================= */
@media (max-width: 430px) {
  .container { padding-inline: 1.1rem; }

  .brand { font-size: 0.95rem; }
  .nav-toggle { padding: 0.5rem 0.75rem; font-size: 0.7rem; }

  .hero-screen { gap: 1.1rem; padding: 4.5rem 1rem 3.5rem; }
  .hero-meta { font-size: 0.7rem; }

  .year-marker { gap: 0.75rem; flex-wrap: wrap; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .site-footer { padding-block: 2.5rem 1.5rem; }

  .member-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.25rem; }
  .event-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }

  .audio-player { max-width: 100%; padding: 0.6rem 0.75rem; gap: 0.6rem; }
  .player-time { font-size: 0.65rem; }

  .form-submit { width: 100%; }
}

/* =========================================================
   VERY NARROW — 360px (smallest target device)
   ========================================================= */
@media (max-width: 360px) {
  .hero-title { letter-spacing: 0; }
  .event-grid { grid-template-columns: 1fr; }
  .memory-grid { grid-template-columns: 1fr; }
}

/* --- Landscape phones: hero shouldn't force excessive scroll --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-screen { min-height: auto; padding-block: 5rem 3rem; }
  .scroll-cue { display: none; }
}