/* ==========================================================================
   MR. CHICHI — RESPONSIVE
   Mobile-first overrides layered on top of style.css defaults (desktop/laptop).
   ========================================================================== */

/* ---------------------------- Ultrawide (>=1921px): cap density, let imagery breathe ---------------------------- */
@media (min-width: 1921px) {
  .hero__title { max-width: 22ch; }
  .gallery-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---------------------------- Tablet / small laptop (<=1024px) ---------------------------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .video-feature { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__top { flex-direction: column; gap: var(--space-5); }
  .footer__cols { gap: var(--space-5); }
}

/* ---------------------------- Mobile (<=640px) ---------------------------- */
@media (max-width: 640px) {
  :root { --side-margin: 1.25rem; }

  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav { top: var(--space-1); width: calc(100% - var(--space-3)); }

  .section { padding-block: var(--space-7); }
  .section__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item--wide { grid-column: span 2; }

  .hero { min-height: 92vh; }
  .hero__content { padding-bottom: var(--space-6); }
  .hero__meta { gap: var(--space-3); }
  .hero__scroll-cue { display: none; }

  .track-row { grid-template-columns: 24px 44px 1fr auto; }
  .track-row__genre { display: none; }

  .video-feature { grid-template-columns: 1fr; }

  .newsletter { flex-direction: column; align-items: flex-start; }
  .newsletter__field { min-width: 0; width: 100%; }

  .footer__top { flex-direction: column; }
  .footer__cols { flex-wrap: wrap; gap: var(--space-4); }
  .footer__bottom { flex-direction: column; gap: var(--space-3); align-items: flex-start; }

  .player {
    width: calc(100% - var(--space-3));
    bottom: var(--space-2);
    padding: var(--space-2);
  }
  .player__volume { display: none; }
  .player__time { display: none; }

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

  .event-row { grid-template-columns: 72px 1fr; row-gap: var(--space-2); }
  .event-row .btn { grid-column: 1 / -1; }

  .lightbox__prev, .lightbox__next { width: 40px; height: 40px; }
  .lightbox__frame img { max-width: 92vw; max-height: 70vh; }

  .signal-line { display: none; } /* signature element is a desktop-scroll flourish; mobile keeps chrome minimal */
}

/* ---------------------------- Small mobile (<=380px) ---------------------------- */
@media (max-width: 380px) {
  .hero__meta { flex-direction: column; gap: var(--space-2); }
  .quote__text { font-size: 1.5rem; }
}