/*
 * Correzioni solo per telefono e tablet stretti (sotto gli 800 px).
 * Si carica dopo tutti gli altri fogli di stile e non tocca il desktop.
 *
 * Due problemi, stessa origine: diverse sezioni dichiarano un padding del tipo
 * "80px 0" che, oltre allo spazio sopra e sotto, azzera anche il margine
 * laterale del contenitore .shell. Su desktop non si nota, su telefono il
 * testo tocca il bordo. In più alcuni blocchi erano più larghi dello schermo
 * e facevano scorrere la pagina a destra e a sinistra.
 */

@media (max-width: 800px) {

  /* Margine laterale: un po' più d'aria dei 20 px di prima. */
  html[data-style] { --pad-x: 22px; }

  /* Rete di sicurezza: niente scorrimento orizzontale, mai.
     "clip" e non "hidden", così la barra in alto resta fissa. */
  html,
  body { overflow-x: clip; }

  /* Ogni contenitore ritrova il suo margine laterale… */
  html[data-style] .shell,
  html[data-style] .nav-row {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }

  /* …tranne il blocco acufene della home, che il margine lo prende già
     dalla sezione che lo contiene. */
  html[data-style] .acu .shell {
    padding-left: 0;
    padding-right: 0;
  }

  /* I figli di griglie e flex possono restringersi sotto la larghezza del
     loro contenuto: è questo che li teneva più larghi dello schermo. */
  html[data-style] main *,
  html[data-style] .foot-grid > * { min-width: 0; }

  /* --- Barra in alto ------------------------------------------------- */
  html[data-style] .nav-row { gap: 12px; }
  html[data-style] .brand { min-width: 0; flex: 0 1 auto; }
  html[data-style] .brand-logo {
    width: auto;
    height: auto;
    max-width: min(168px, 48vw);
  }
  html[data-style] .nav-burger { flex: 0 0 auto; }

  /* --- Titoli -------------------------------------------------------- */
  /* Una parola lunga ("Multidisciplinare.") non deve uscire dallo schermo. */
  html[data-style] h1,
  html[data-style] h2,
  html[data-style] h3 {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  html[data-style] .simple-hero h1 { font-size: clamp(34px, 10vw, 48px); }

  /* --- Contatti ------------------------------------------------------ */
  html[data-style] .c-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-style] .c-form { width: 100%; max-width: 100%; box-sizing: border-box; }
  html[data-style] .c-form .field-row { grid-template-columns: minmax(0, 1fr); }
  html[data-style] .c-form input:not([type="radio"]):not([type="checkbox"]),
  html[data-style] .c-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
  /* I pallini delle scelte sono nascosti ma ereditavano la larghezza piena
     dei campi e sporgevano di qualche pixel a destra. */
  html[data-style] .chips input { width: 1px; height: 1px; }
  /* L'indirizzo email nella colonna dei recapiti è la parola più lunga
     della pagina: un corpo un po' più piccolo e, se serve, va a capo. */
  html[data-style] .c-aside .big { font-size: clamp(17px, 5.2vw, 22px); overflow-wrap: anywhere; }

  /* --- Team ---------------------------------------------------------- */
  html[data-style] .ethos-grid { grid-template-columns: minmax(0, 1fr); }

  /* --- Tabelle e testi lunghi nelle pagine scritte con l'editor ------- */
  html[data-style] .simple-content a { overflow-wrap: anywhere; }
  /* La tabella dei cookie resta larga e scorre dentro il suo riquadro. */
  html[data-style] .ots-cookie-table { min-width: 560px; }

  /* --- Piè di pagina ------------------------------------------------- */
  /* Logo e contatti su tutta la larghezza, Studio e Servizi affiancati. */
  html[data-style] .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html[data-style] .foot-grid > div:first-child,
  html[data-style] .foot-grid > div:last-child { grid-column: 1 / -1; }
  html[data-style] .foot a { overflow-wrap: anywhere; }
  html[data-style] .foot-meta { gap: 10px; }
}