/* ══════════════════════════════════════════════════════════════════
   Adattamento agli schermi piccoli.

   Questo foglio si carica PER ULTIMO, dopo i blocchi <style> dentro
   alle pagine: è l'unico modo perché le sue regole abbiano l'ultima
   parola senza dover riempire tutto di !important.

   Le pagine erano nate per il desktop e diverse griglie restavano a
   due, tre o quattro colonne anche su un telefono, sfondando lo
   schermo di lato. Qui tutto torna a colonna singola.
   ══════════════════════════════════════════════════════════════════ */

/* ── Sotto i 1000px: le griglie larghe passano a due colonne ────── */
@media (max-width: 1000px) {
  .features-grid,
  .cards-grid-3,
  .shot-grid-3,
  .pricing-grid,
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .feature-card.span2 { grid-column: span 2; }

  .feature-row,
  .ai-inner,
  .vband-card,
  .mobile-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* l'inversione destra/sinistra non ha senso in colonna singola */
  .feature-row.reverse { direction: ltr; }
}

/* ── Sotto i 760px: tutto in colonna singola ────────────────────── */
@media (max-width: 760px) {

  /* Nessun elemento può essere più largo dello schermo */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

  /* Tutte le griglie a colonna unica, comprese quelle scritte
     direttamente nell'attributo style delle pagine */
  .features-grid,
  .cards-grid-3,
  .shot-grid-2,
  .shot-grid-3,
  .pricing-grid,
  .stats-grid,
  .contact-grid,
  .feature-row,
  .ai-inner,
  .vband-card,
  .mobile-wrap,
  .hints,
  .grid,
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .feature-card.span2 { grid-column: span 1; }

  /* ── Barra di navigazione ─────────────────────────────────────
     Il menu è già nascosto, ma logo e pulsante insieme superavano
     i 375px di un telefono comune. */
  .nav-inner { height: 60px; gap: 10px; }
  .nav-logo img { width: 26px; height: 26px; }
  .nav-logo-text { font-size: 16px; }
  .nav-logo-sub { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-cta .btn { padding: 9px 14px; font-size: 12.5px; white-space: nowrap; }

  /* ── Titoli ───────────────────────────────────────────────────
     Il serif molto grande spezzava le parole a metà schermo. */
  .hero-title { font-size: clamp(32px, 10vw, 46px); letter-spacing: -1px; }
  .section-title, .legal h1, .vh h1 { font-size: clamp(27px, 8vw, 38px); }
  .hero-sub, .section-sub { font-size: 15.5px; }
  h1, h2, h3 { overflow-wrap: break-word; }

  /* ── Spaziature ───────────────────────────────────────────────── */
  .container { padding: 0 18px; }
  .hero { min-height: auto; padding: 96px 0 48px; }
  .features-section, .ai-section, .stats-strip, .vband { padding: 56px 0; }

  /* ── Pulsanti a piena larghezza: bersagli più grandi al dito ─── */
  .hero-ctas, .cta-buttons, .vh-actions { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn, .cta-buttons .btn, .vh-actions .btn { justify-content: center; width: 100%; }

  /* ── Tabelle: scorrono da sole invece di allargare la pagina ── */
  .spec-table, .legal table { display: block; overflow-x: auto; white-space: nowrap; }
  .legal .tabella-scroll { -webkit-overflow-scrolling: touch; }

  /* ── Galleria a scorrimento continuo ───────────────────────────
     La pista è larga migliaia di pixel per costruzione: il
     contenitore deve tagliarla, non lasciarla sfondare. */
  .gallery-scroll-wrap { overflow: hidden; max-width: 100%; }

  /* ── Schede contatto e piani ──────────────────────────────────── */
  .contact-card { padding: 16px 16px; gap: 13px; }
  .contact-card-icon { width: 38px; height: 38px; }
  .contact-card-value { font-size: 14px; word-break: break-word; }
  .pricing-plan { padding: 28px 22px; }
  .demo-form-wrap { padding: 26px 20px; }
  .form-row { grid-template-columns: 1fr !important; }

  /* ── Piè di pagina ────────────────────────────────────────────── */
  .footer-grid { grid-template-columns: 1fr !important; gap: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .firma-odyne { margin-top: 4px; }
}

/* ── Schermi molto stretti (iPhone SE e simili) ─────────────────── */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .nav-logo-text { font-size: 15px; }
  .nav-cta .btn { padding: 8px 11px; font-size: 12px; }
  .hero-title { font-size: 30px; }
}