/* =====================================================
   John Pacific Band — Mobile Fixes
   Incluso in tutte le pagine via <link>
   ===================================================== */

/* Base: mai scroll orizzontale */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Marquee: non causa overflow (index.html) ─────── */
.marquee {
  /* Il container esterno taglia già con overflow:hidden nella section */
}
section:has(.marquee) {
  overflow: hidden;
}

/* ── Logo marquee (about.html) ────────────────────── */
.logo-marquee,
.logo-track {
  max-width: 100%;
}

/* ── Contact: email lunghe vanno a capo ───────────── */
@media (max-width: 767px) {
  .contact-row {
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
  }
  .contact-key {
    min-width: unset;
    font-size: 9px;
  }
  .contact-val {
    font-size: 13px;
    word-break: break-all;
  }

  /* About: hero paragraph più piccolo */
  .max-w-\[1100px\] p {
    font-size: 22px !important;
  }

  /* Spettacoli: view toggle su due righe */
  .flex.items-center.justify-between.mb-16 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Section padding ridotto */
  .section-pad {
    padding: 80px 20px !important;
  }

  /* News grid */
  .grid.grid-cols-12 {
    display: flex;
    flex-direction: column;
  }

  /* Shows slider: card più strette */
  .show-card {
    width: 80vw !important;
  }

  /* Footer grid */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
  }

  /* Manifesto h2: no fixed height/width */
  #manifesto h2 {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 24px !important;
  }

  /* Timeline sticky: altezza auto su mobile */
  .timeline-sticky {
    position: relative !important;
    height: auto !important;
    padding: 60px 20px !important;
  }
  .timeline-wrap {
    height: auto !important;
  }
  .timeline-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .timeline-right { display: none !important; }
  .polaroid {
    width: 80vw !important;
  }

  /* Hero title più piccolo */
  #hero-title {
    font-size: 36px !important;
  }

  /* About hero paragraph */
  .min-h-screen > .max-w-\[1100px\] p {
    font-size: 24px !important;
  }

  /* Contact h1 */
  .text-\[52px\] {
    font-size: 36px !important;
  }

  /* Contact grid a colonna singola */
  .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Contact form grid */
  .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Stats numbers */
  [style*="font-size: clamp(72px"] {
    font-size: clamp(48px, 14vw, 72px) !important;
  }

  /* Header padding ridotto */
  header {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* ── Mobile menu fullscreen: forza sempre 100vw/vh ── */
#jpm-screen {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  /* il menu è già position:fixed, inset:0 via JS */
}