/* ===== EV MOBILE FIX — creato il 03/10/2026 =====
   Corregge: scorrimento laterale, icone sovradimensionate, testi piccoli,
   pulsanti troppo bassi. Solo su schermi fino a 820px: il desktop non cambia. */
@media (max-width: 820px) {

  /* 1) niente scorrimento laterale */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  body * { max-width: 100% !important; }
  img, video, iframe, table { max-width: 100% !important; height: auto !important; }

  /* 2) le righe di schede vanno a capo invece di uscire dallo schermo */
  [class*="row"], [class*="grid"], [class*="cards"], [class*="flex"],
  [class*="servizi"], [class*="features"] {
    flex-wrap: wrap !important;
    display: flex !important;
  }
  [class*="col"], [class*="card"], [class*="box"], [class*="item"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* 3) icone a misura di telefono */
  i[class*="fa-"], .fas, .far, .fab {
    font-size: 2rem !important;
    width: auto !important;
    max-width: 64px !important;
  }

  /* 4) testi leggibili senza zoom */
  body, p, li, span, td, label { font-size: 16px !important; line-height: 1.55 !important; }
  small, .small, figcaption { font-size: 14px !important; }
  h1 { font-size: 1.9rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.5rem !important; line-height: 1.25 !important; }
  h3 { font-size: 1.2rem !important; }

  /* 5) pulsanti e link toccabili col dito (minimo 44px, standard Apple) */
  a.btn, button, .button, input[type="submit"], .cta, [class*="btn"] {
    min-height: 44px !important;
    padding: 12px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  nav a, .menu a, header a { min-height: 44px !important; display: flex !important; align-items: center !important; }

  /* 6) spazi piu' compatti: la pagina era lunga 86 schermate */
  section { padding-top: 28px !important; padding-bottom: 28px !important; }

  /* 7) tabelle e blocchi larghi scorrono dentro il loro riquadro */
  table, pre, .table-responsive { display: block !important; overflow-x: auto !important; }
}

/* ===== AGGIUNTA 03/10/2026: blocchi con stile scritto nella pagina =====
   Le schede che sforavano non hanno classi: hanno lo stile scritto dentro il tag.
   Queste regole le intercettano comunque. */
@media (max-width: 820px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap !important; }
  [style*="min-width"] { min-width: 0 !important; }
  [style*="width:"]:not(img):not(svg) { max-width: 100% !important; }
  [style*="flex:"], [style*="flex :"] { flex: 1 1 100% !important; }
  body > *, section > *, div > div { max-width: 100% !important; }
}