/* ══════════════════════════════════════════════════════════════════
   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; }
}

/* ══════════════════════════════════════════════════════════════════
   MENU PER TELEFONO
   Il pulsante a tre righe e il pannello che si apre. Sopra gli 860px
   non esistono: lì il menu normale ci sta comodamente.
   ══════════════════════════════════════════════════════════════════ */
/* Fuori dal telefono NON devono esistere. Il pannello era rimasto
   visibile su desktop perché gli davo un display solo dentro la media
   query: senza una regola di base, restava un normale blocco in pagina. */
.nav-toggle,
.nav-mobile { display: none; }

@media (max-width: 860px) {
  .nav-mobile { display: block; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--line2);
    cursor: pointer;
    padding: 0 11px;
    flex-shrink: 0;
  }
  .nav-toggle span {
    display: block; height: 1.5px; width: 100%;
    background: var(--ink);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s;
  }
  /* le tre righe diventano una croce */
  body.menu-aperto .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.menu-aperto .nav-toggle span:nth-child(2) { opacity: 0; }
  body.menu-aperto .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Il pulsante "Richiedi Demo" sparisce dalla barra: è già dentro
     al pannello, e in due non ci stavano. */
  .nav-cta { display: none; }

  .nav-mobile {
    position: fixed;
    top: 60px; left: 0; right: 0; bottom: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 22px 20px 40px;
    overflow-y: auto;
    z-index: 490;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .28s, transform .28s, visibility .28s;
  }
  body.menu-aperto .nav-mobile { opacity: 1; visibility: visible; transform: none; }

  .nav-mobile ul { list-style: none; margin-bottom: 26px; }
  .nav-mobile li { border-bottom: 1px solid var(--line); }
  .nav-mobile li a {
    display: block;
    padding: 17px 4px;
    font-family: var(--fh);
    font-size: 24px;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.3px;
  }
  .nav-mobile li a.attivo { color: var(--accent); }
  .nav-mobile li a:active { color: var(--accent); }

  .nav-mobile-cta { width: 100%; justify-content: center; margin-bottom: 24px; }

  .nav-mobile-legale { display: flex; gap: 20px; }
  .nav-mobile-legale a {
    font-size: 13px; color: var(--faint); text-decoration: none;
  }

  /* la barra resta compatta e sopra al pannello */
  nav { background: rgba(245,243,239,0.97); border-bottom: 1px solid var(--line); }
  body.menu-aperto nav { background: var(--paper); }
}