/* HEROBOTS — Contact page, layer mobile specifico (dopo hb-mobile-base.css) */

@media (max-width: 860px) {

  /* ---- niente scorrimenti orizzontali ---- */
  .sc-host, .sc-host > section { overflow-x: hidden !important; max-width: 100% !important; }
  .sc-host [style*="nowrap"]:not(nav):not(header):not(.hb-prodnav *) { white-space: normal !important; }
  .sc-host > section > div { min-width: 0 !important; max-width: 100% !important; }
  .sc-host > section { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---- striscia verticale arancione dell'hero: fuori ---- */
  .sc-host > section:first-of-type div[style*="width: 2px"][style*="position: absolute"] { display: none !important; }

  /* ---- hero ---- */
  .sc-host > section:first-of-type { padding-top: 148px !important; padding-bottom: 44px !important; }
  .sc-host > section:first-of-type h1 { font-size: 34px !important; }

  /* ---- form + canali diretti: colonna singola ---- */
  #form > div { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  #form h2 { font-size: 28px !important; }
  #form [data-contact-panel] { padding: 26px 20px !important; }

  /* ---- sedi ---- */
  #sedi .hb-label { text-align: left !important; }
  /* pill sedi: solo tag + nome in bold, niente indirizzo */
  #sedi #hb-loc-pills div[data-loc-pill] > span:nth-child(4) { display: none !important; }
  /* mappa: la regola globale ".sc-host img { max-width:100% }" (hb-mobile-base.css)
     scala anche i tile da 256px di Leaflet, spezzando la griglia della mappa
     (appare vuota/nera su mobile) — ripristina le dimensioni reali dei tile. */
  #hb-map img { max-width: none !important; }
  #hb-map .leaflet-tile { width: 256px !important; height: 256px !important; }

  /* ---- faq: colonna singola ---- */
  #faq > div { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  #faq h2 { font-size: 28px !important; }
}