/* HEROBOTS — layer mobile minimo (pagine senza hb-responsive.css) */

@media (max-width: 860px) {

  /* sub-nav di sezione: via da mobile */
  .hb-prodnav { display: none !important; }

  /* paragrafi dentro colonne flex centrate (hero e non solo): con
     align-items:center (non stretch) un <p> con un max-width inline si
     dimensiona sul contenuto invece che sullo spazio disponibile, sforando
     lo schermo invece di andare a capo — vale anche per i "figli di figli"
     (griglie di card) generati con lo stesso pattern. */
  .sc-host div[style*="align-items: center"] > p { max-width: 100% !important; width: 100% !important; }

  /* titoli/didascalie forzate su un rigo su desktop: su mobile devono andare a capo */
  #standards h2, #range h2, #field figcaption { white-space: normal !important; }

  /* con la sub-nav nascosta serve spazio sotto l'header fisso */
  .hb-prodnav + section { padding-top: 148px !important; }
  .sc-host > section:first-of-type { padding-top: 148px !important; }

  /* hairline sotto l'header */
  .sc-host > header { border-bottom: 1px solid rgba(255,255,255,.14) !important; }

  /* ---- nav: rail desktop + mega-menu off, hamburger on ---- */
  .sc-host > header > nav { display: none !important; }
  .hb-mega { display: none !important; }
  .hb-burger { display: flex !important; }
  .sc-host > header { padding-left: 18px !important; padding-right: 18px !important; gap: 10px !important; }

  /* pillola Contatti fuori dall'header: vive nel burger menu */
  .sc-host > header > div:not(.hb-mnav) a.hb-btn { display: none !important; }

  /* IT/EN: cerchio, non ovale */
  .sc-host > header > div > button:not(.hb-burger) {
    width: 44px !important; height: 44px !important; padding: 0 !important;
    border-radius: 999px !important; display: flex !important;
    align-items: center; justify-content: center; flex: none !important;
  }

  /* ---- scrollbar nascosta (i telefoni non la mostrano) ---- */
  html, body { scrollbar-width: none !important; -ms-overflow-style: none !important; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
  .sc-host *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
  .sc-host * { scrollbar-width: none !important; }

  /* coppia di CTA su un solo rigo, pillole di pari larghezza */
  .sc-host div:has(> .hb-btn--lg + .hb-btn--lg) {
    display: flex !important; flex-wrap: nowrap !important; gap: 10px !important;
  }
  .sc-host div:has(> .hb-btn--lg + .hb-btn--lg) > .hb-btn--lg {
    flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
    padding: 0 12px !important; height: 46px !important; font-size: 13px !important;
    white-space: nowrap !important; justify-content: center !important; text-align: center !important;
  }

  /* niente scroll orizzontale: caroselli e righe scorrevoli diventano colonne */
  .hb-scroller,
  .sc-host div[style*="overflow-x: auto"],
  .sc-host div[style*="grid-auto-flow: column"] {
    display: flex !important; flex-direction: column !important;
    overflow-x: visible !important; overflow: visible !important;
    scroll-snap-type: none !important;
    align-items: stretch !important; justify-content: flex-start !important;
    gap: 14px !important;
  }
  /* ---- foto sempre sopra il testo ---- */
  .sc-host section > div[style*="display: flex"]:not([style*="flex-direction: column"]):has(> * > img) { flex-direction: column !important; }
  .sc-host section > div[style*="grid-template-columns"] > *:has(> img),
  .sc-host section > div[style*="display: flex"]:not([style*="flex-direction: column"]) > *:has(> img),
  .sc-host section > div[style*="grid-template-columns"] > img,
  .sc-host section > div[style*="display: flex"]:not([style*="flex-direction: column"]) > img { order: -1 !important; }

  /* ---- immagini: mai oltre la colonna ---- */
  .sc-host img { max-width: 100% !important; }
  .sc-host div:not([style*="height"]) > img[style*="width:"]:not([src*="assets/logos/"]),
  .sc-host .hb-reveal > img { width: 100% !important; height: auto !important; object-fit: contain !important; }
  .sc-host > section:not(#hero) > div:has(> img) > img,
  .sc-host div[style*="height: 240px"] > img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

  /* ==== pattern generali (come su Roman) ==== */

  /* sezioni: contenuti centrati */
  .sc-host > section > div > .hb-reveal > h2,
  .sc-host > section > div > .hb-reveal > h3,
  .sc-host > section > div > .hb-reveal > p,
  .sc-host > section > div > h2,
  .sc-host > section > div > p {
    text-align: center !important; margin-left: auto !important; margin-right: auto !important;
    max-width: 100% !important;
  }

  /* griglie di card: 3 col in colonna, 4 col in 2×2 */
  .sc-host div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  .sc-host div[style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  .sc-host div[style*="grid-template-columns: repeat(4, 1fr)"] > *,
  .sc-host div[style*="grid-template-columns: repeat(3, 1fr)"] > * { text-align: left !important; }

  /* immagini decorative di fondo: fascia a filo sopra il contenuto */
  .sc-host > section > div[style*="position: absolute"]:has(> img) {
    position: static !important; order: -1 !important; height: auto !important;
    margin: 0 -24px 26px -24px !important; width: calc(100% + 48px) !important; flex: none !important;
  }
  .sc-host > section:has(> div[style*="position: absolute"] > img) {
    display: flex !important; flex-direction: column !important; padding-top: 0 !important;
  }
  .sc-host > section > div[style*="position: absolute"] > img {
    position: static !important; width: 100% !important; height: 180px !important;
    object-fit: cover !important; margin: 0 !important; transform: none !important;
  }
  .sc-host > section > div[style*="position: absolute"] > div { display: none !important; }

  /* footer: descrizione sotto il logo */
  .sc-host > footer > div > div:first-child p { font-size: 12px !important; }
  /* descrizione footer: più vicina al logo (mobile) */
  .sc-host > footer > div > div:first-child a > img { margin-bottom: 8px !important; }

  .sc-host > footer > div { grid-template-columns: minmax(0, 1fr) max-content !important; }
  .sc-host > footer > div:not(.hb-footer-bottom) > div:nth-child(2n) {
    justify-self: start !important; text-align: left !important; margin-left: 42px !important;
  }

  /* ---- intestazioni colonne footer in bianco ---- */
  .sc-host > footer .hb-label { color: #fff !important; }

  /* ---- niente parole orfane a fine paragrafo ---- */
  .sc-host h1, .sc-host h2, .sc-host h3, .sc-host h4 { text-wrap: balance !important; }
  .sc-host p, .sc-host li, .sc-host span, .sc-host a { text-wrap: pretty !important; }

  /* ---- nessun testo oltre 20px (solo h1 a 50) ---- */
  .sc-host h2 { font-size: 20px !important; line-height: 1.2 !important; }
  .sc-host h3, .sc-host h4, .sc-host h5, .sc-host h6 { font-size: 16px !important; line-height: 1.3 !important; }
  .sc-host .hb-stat__value, .sc-host .hb-stat__value span { font-size: 20px !important; line-height: 1.3 !important; }
  .sc-host div[style*="font-size: clamp(2"], .sc-host div[style*="font-size: clamp(3"],
  .sc-host div[style*="font-size: clamp(4"], .sc-host div[style*="font-size: clamp(5"],
  .sc-host span[style*="font-size: clamp(2"], .sc-host span[style*="font-size: clamp(3"],
  .sc-host span[style*="font-size: clamp(4"], .sc-host span[style*="font-size: clamp(5"],
  .sc-host p[style*="font-size: clamp(2"], .sc-host p[style*="font-size: clamp(3"],
  .sc-host span[style*="font-size: 2"], .sc-host span[style*="font-size: 3"],
  .sc-host span[style*="font-size: 4"], .sc-host span[style*="font-size: 5"],
  .sc-host div[style*="font-size: 2"], .sc-host div[style*="font-size: 3"],
  .sc-host div[style*="font-size: 4"], .sc-host div[style*="font-size: 5"] {
    font-size: 20px !important; line-height: 1.25 !important;
  }

  /* ---- scala tipografica mobile ---- */
  .sc-host h1 { font-size: 50px !important; line-height: 1 !important; }
  .sc-host p, .sc-host li { font-size: 15px !important; line-height: 1.6 !important; }
  .sc-host p[style*="text-transform: uppercase"] { font-size: 13px !important; }
  .hb-prodnav + section p[style*="text-transform: uppercase"]:first-child,
  .sc-host > section:first-of-type p[style*="text-transform: uppercase"] { font-size: 11px !important; }
  .sc-host p[style*="clamp(20px"] { font-size: 20px !important; line-height: 1.32 !important; }
  .sc-host span[style*="tabular-nums"] { font-size: 15px !important; font-weight: 700 !important; }

  /* caroselli impilati: annulla dim/scale del carosello JS */
  .hb-scroller > * { opacity: 1 !important; transform: none !important; transition: none !important; }

  .hb-scroller > *,
  .sc-host div[style*="overflow-x: auto"] > *,
  .sc-host div[style*="grid-auto-flow: column"] > * {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; flex: none !important;
    scroll-snap-align: none !important;
  }

  /* griglie a due colonne: colonna singola, figli comprimibili */
  .sc-host section > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .sc-host section > div[style*="grid-template-columns"] > * { min-width: 0 !important; }

  /* ---- dimensione bottoni uniforme su tutto il sito mobile
         (via di mezzo tra la pillola piccola e il CTA grande dei form) ---- */
  .sc-host .hb-btn,
  .sc-host .hb-btn--lg,
  .sc-host .hb-btn--sm,
  .sc-host div:has(> .hb-btn--lg + .hb-btn--lg) > .hb-btn--lg,
  .sc-host .wpcf7-form-control.wpcf7-submit {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* ---- CTA contatti: il <p> del bottone invio deve occupare tutta la
         larghezza della card (restava ~146px di suo, essendo il bottone
         inline-flex a larghezza naturale). text-align:center sul <p> non
         basta a centrarlo (resta storto, verificato via CDP) — così come
         succedeva "per caso" già su HeroEye grazie a un'altra regola
         (#contact input {width:100%}), il bottone stesso va reso largo
         quanto la card, che lo centra semplicemente riempiendola. */
  [data-contact-panel] .wpcf7-form p:has(.wpcf7-submit) {
    width: 100% !important;
  }
  [data-contact-panel] .wpcf7-form-control.wpcf7-submit {
    width: 100% !important;
    padding: 0 60px !important;
  }

  /* ---- CTA contatti: lo spinner di CF7 e' visibility:hidden ma conserva il
         suo box 24x24 e sta nello stesso <p> del submit. Col <p> e il bottone
         a width:100% (regole qui sopra) va a capo e lascia ~30px di vuoto
         invisibile sotto il bottone, dentro la card: sopra il primo elemento
         restavano 28px, sotto il bottone ~58px. Fuori flusso non occupa
         altezza e durante l'invio resta visibile sul bordo destro della
         pillola. !important anche su position: la regola di CF7
         (.wpcf7 .wpcf7-spinner{position:relative}) ha la stessa specificita'
         di questa, quindi senza vincerebbe chi viene stampato dopo. ---- */
  [data-contact-panel] .wpcf7-form p:has(.wpcf7-submit) { position: relative !important; }
  [data-contact-panel] .wpcf7-spinner {
    position: absolute !important;
    right: 16px; top: 50%; transform: translateY(-50%);
    margin: 0 !important;
  }

  /* ---- CTA contatti: titolo leggermente più grande di 3px rispetto alla
         regola globale .sc-host h2 (20px), solo per questa card ---- */
  #contact h2 { font-size: 23px !important; }

  /* ---- CTA contatti: la fascia #contact di queste pagine ha
         clamp(56px,7vw,100px) sopra e clamp(72px,9vw,130px) sotto — su
         mobile 56px contro 72px. Essendo la sezione delimitata da bordo
         sopra e sotto, la card ci finiva dentro visibilmente spostata
         verso l'alto. Il selettore intercetta solo le sezioni asimmetriche
         (via padding-top inline): dove sopra/sotto sono già uguali
         (64/64 in home, about, ip, news; 72/72 su Roman, Control Room,
         Robotic Cells, GLX01) non tocca nulla. ---- */
  #contact[style*="clamp(56px, 7vw, 100px)"] {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
}