/* ============================================================
   Forchetta Anonima — mobile.css
   ------------------------------------------------------------
   Foglio di stile SEPARATO da style.css, solo per schermi
   piccoli (sotto 820px). Ogni regola qui dentro vive dentro
   un'unica @media: non può mai toccare la versione desktop,
   anche per errore. Caricato DOPO style.css in base.html, così
   su mobile vince lui quando le regole si sovrappongono.

   Obiettivo di questo file: testi leggibili senza dover
   zoomare, elementi che stanno dentro lo schermo senza sporgere
   (niente scroll orizzontale accidentale), animazioni più
   piccole e più rapide, aree touch comode col pollice.
   ============================================================ */

@media (max-width: 819px) {

  /* ---- rete di sicurezza anti-zoom ----
     Se anche un solo elemento sfora la larghezza dello schermo,
     il browser mostra tutta la pagina rimpicciolita ("zoomata
     fuori") per farcela stare. Questo blocca il sintomo alla
     radice, qualunque sia la causa.

     ECCEZIONE IMPORTANTE: Leaflet (la mappa) gestisce da solo le
     dimensioni esatte in pixel di tile e marker — se questa rete di
     sicurezza li tocca, li schiaccia e la mappa si rompe visivamente.
     Per questo tutto ciò che vive dentro .leaflet-container ne resta
     fuori. È il motivo esatto per cui la mappa era rotta solo su
     mobile: questa regola non esiste su desktop (style.css). */
  html, body { overflow-x: hidden; width: 100%; }
  *:not(.leaflet-container):not(.leaflet-container *) { max-width: 100%; }
  img:not(.leaflet-container img), svg:not(.leaflet-container svg) { max-width: 100%; height: auto; }

  .leaflet-container,
  .leaflet-container * {
    max-width: none !important;
  }

  /* ---- scroll "a schermate", come lo swipe di TikTok ---- */
  html {
    scroll-snap-type: y proximity; /* "proximity", non "mandatory": non intrappola lo scroll dentro un form */
  }
  .hero, .sezione {
    scroll-snap-align: start;
    scroll-margin-top: 3.4rem; /* compensa la nav sticky */
  }

  /* ---- ritmo verticale più compatto: meno scroll per vedere tutto ---- */
  .sezione { padding: 2.4rem 0; }
  .wrap { padding: 0 1.1rem; }

  /* ---- tipografia: leggibile a distanza normale, senza dover zoomare ---- */
  h1 { font-size: clamp(1.9rem, 8.5vw, 2.5rem); line-height: 1.1; }
  h2 { font-size: clamp(1.5rem, 6.5vw, 1.85rem); line-height: 1.15; }
  h3 { font-size: 1.1rem; }
  .hero-testo { font-size: 0.95rem; }
  .hero-motto { font-size: 1rem; }
  .eyebrow { font-size: 0.66rem; letter-spacing: 0.18em; }

  /* ---- nav: logo e link più compatti ---- */
  .nav-inner { padding-top: 0.55rem; padding-bottom: 0.55rem; gap: 0.6rem; }
  .nav-logo img { width: 32px; height: 32px; }
  .nav-logo span { font-size: 0.95rem; }
  .btn-sm { padding: 0.5rem 0.95rem; font-size: 0.8rem; }

  /* ---- hero: logo ridimensionato, animazione più contenuta ---- */
  .hero-grid { padding-top: 2rem; padding-bottom: 2.2rem; gap: 1.8rem; }
  .hero-logo img {
    width: min(48vw, 190px); /* prima era fino a 340px: troppo su schermi stretti */
  }
  @keyframes fluttuaMobile {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); } /* metà del movimento desktop */
  }
  .hero-logo img { animation: fluttuaMobile 6s ease-in-out infinite; }
  .hero-cta { margin-top: 1.6rem; gap: 0.6rem; }
  .hero-cta .btn { padding: 0.8rem 1.4rem; font-size: 0.9rem; }

  /* ---- ticker: testo e velocità adattati a schermo stretto ---- */
  .ticker span { font-size: 0.85rem; padding: 0 0.8rem; }
  .ticker-riga { animation-duration: 16s; } /* più corto = meno tempo per vedere ripetizioni inutili */

  /* ---- sezione "cos'è": una colonna, spaziatura più stretta ---- */
  .griglia-2 { gap: 1.6rem; }
  .negazioni li { font-size: 1.05rem; padding-left: 1.4rem; }

  /* ---- format: card più compatte, hover disattivato (non serve su touch) ---- */
  .cards-format { gap: 0.85rem; margin-top: 1.6rem; }
  .card { padding: 1.2rem; }
  .card:hover { transform: none; } /* l'hover "al passaggio mouse" non esiste su touch */
  .card:active { transform: scale(0.98); } /* feedback al tocco, più adatto al mobile */

  /* ---- ultimi posti: card e carousel a misura di pollice ---- */
  .intesta-posti { margin-bottom: 1.6rem; gap: 0.6rem; }
  .intesta-posti p { max-width: none; font-size: 0.85rem; }
  .cards-posti { gap: 1.1rem; }
  .posto:hover { transform: none; }
  .posto-corpo { padding: 1rem; gap: 0.7rem; }
  .timbro { font-size: 1rem; padding: 0.12rem 0.5rem; }
  .verdetto { font-size: 0.88rem; }
  .pro-contro { font-size: 0.8rem; }
  /* Frecce del carousel sempre visibili su mobile (niente hover da aspettare) */
  .carosello-freccia { opacity: 0.85; width: 32px; height: 32px; font-size: 1.15rem; }
  .puntino { width: 7px; height: 7px; } /* leggermente più grandi, più facili da vedere sul dito */

  /* ---- segnala: form a piena larghezza, campi più comodi al tocco ---- */
  .griglia-segnala { grid-template-columns: 1fr; gap: 1.8rem; }
  .pannello { padding: 1.25rem; }
  .riga-2 { grid-template-columns: 1fr; }
  input, select, textarea { font-size: 16px; padding: 0.7rem 0.9rem; } /* 16px: evita lo zoom automatico di iOS al focus */
  .scelta-anonimo { gap: 0.5rem; }
  .btn-largo { width: 100%; padding: 1rem; }

  /* ---- radar: schermo animato più piccolo e centrato ---- */
  .radar-grid { gap: 2rem; }
  .radar-titolo { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .radar-visual { width: min(58vw, 230px); }
  .radar-chips { gap: 0.45rem; margin-top: 1.6rem; }
  .chip { font-size: 0.78rem; padding: 0.4rem 0.85rem; }

  /* ---- footer: colonna singola, meno spazio sprecato ---- */
  .footer { padding: 2.2rem 0 1.6rem; }
  .footer-grid { gap: 1.6rem; }

  /* ---- grana di sfondo: più leggera, pesa meno su schermi piccoli ---- */
  body::after { opacity: 0.035; }

  /* ---- pannello admin (nuovo post / modifica) su mobile ---- */
  .anteprime-foto { gap: 0.45rem; }
  .anteprima-foto-mini { width: 60px; height: 60px; }

  /* ---- mappa: più compatta, lista sotto invece che a fianco ---- */
  #mappa-contenitore { height: 280px; }
  .mappa-lista { max-height: 260px; }

  /* ---- scheda mobile al tocco di un pin: sostituisce il popup di Leaflet.
     Fissa in fondo allo schermo, non muove mai la mappa — vedi mappa.js. ---- */
  .mappa-scheda-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: var(--fumo); border-top: 1px solid var(--cenere);
    border-radius: 1.1rem 1.1rem 0 0;
    padding: 1.2rem 1.3rem 1.5rem;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.45);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mappa-scheda-mobile.visibile { transform: translateY(0); }
  .mappa-scheda-chiudi {
    position: absolute; top: 0.7rem; right: 0.9rem;
    background: none; border: none; color: var(--sabbia);
    font-size: 1.15rem; line-height: 1; cursor: pointer;
    padding: 0.4rem; /* area di tocco comoda, non solo la ✕ visiva */
  }
  .mappa-scheda-corpo { display: flex; gap: 0.9rem; align-items: flex-start; padding-right: 1.6rem; }
  .mappa-scheda-foto { width: 72px; height: 72px; border-radius: 0.75rem; object-fit: cover; flex-shrink: 0; }
  .mappa-scheda-testo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
  .mappa-scheda-nome { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; }
  .mappa-scheda-verdetto { font-size: 0.92rem; color: var(--sabbia); line-height: 1.45; margin: 0.15rem 0; }
}

@media (max-width: 819px) and (prefers-reduced-motion: reduce) {
  .mappa-scheda-mobile { transition: none; }
}

/* Schermi molto piccoli (iPhone SE e simili, sotto 380px):
   un'ulteriore stretta ai titoli, che altrimenti vanno su 3 righe. */
@media (max-width: 379px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  .hero-logo img { width: 42vw; }
  .radar-visual { width: 54vw; }
}