/* HEROBOTS — HR-GLX01 Cell, layer mobile specifico (dopo hb-mobile-base.css) */

@media (max-width: 860px) {

  /* ---- sezioni split (grid sulla <section>): colonna singola ---- */
  .sc-host > section[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important;
  }

  /* ---- 1. hero: video più basso, meno spazio sotto ---- */
  .sc-host > section:first-of-type {
    min-height: 0 !important; padding-top: 148px !important; padding-bottom: 64px !important;
    padding-left: 12px !important; padding-right: 12px !important;
  }
  /* sottotitolo "Bonding where..." su 3 righe a 30px: riduci e allarga la
     casella (meno padding) cosi ognuna delle due frasi (a capo forzato) sta
     su una riga sola */
  .sc-host > section:first-of-type p[style*="font-size: 30px"] {
    font-size: 17px !important; line-height: 1.4 !important; max-width: 100% !important;
  }
  .sc-host > section:first-of-type div[style*="aspect-ratio"] { margin-bottom: 12px !important; }
  .sc-host > section:first-of-type > div:last-child { margin-top: 32px !important; }
  .sc-host > section:first-of-type div[style*="aspect-ratio"] {
    aspect-ratio: auto !important; height: 168px !important; border-radius: 14px !important;
  }
  .sc-host > section:first-of-type div[style*="aspect-ratio"] div[style*="width: 76px"] {
    width: 52px !important; height: 52px !important;
  }

  /* ---- 2. pillole iniziali larghe (come Roman) ---- */
  .sc-host > section:first-of-type div:has(> .hb-btn--lg + .hb-btn--lg) {
    width: 100% !important; align-self: stretch !important;
  }

  /* ---- 3. close look: intro più larga; 3 card su un rigo, icone e testi centrati ---- */
  #closelook { padding-left: 16px !important; padding-right: 16px !important; }
  #closelook .hb-secthead__body { max-width: 100% !important; }
  #closelook div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important;
  }
  #closelook div[style*="grid-template-columns: repeat(3, 1fr)"] > * { text-align: center !important; }
  #closelook div[style*="grid-template-columns: repeat(3, 1fr)"] > * > div {
    align-items: center !important; text-align: center !important;
    padding: 16px 8px 18px !important; gap: 8px !important;
  }
  #closelook div[style*="grid-template-columns: repeat(3, 1fr)"] > * > div > div {
    flex-direction: column !important; align-items: center !important; gap: 6px !important;
  }
  #closelook div[style*="grid-template-columns: repeat(3, 1fr)"] h3 { font-size: 13px !important; }
  #closelook div[style*="grid-template-columns: repeat(3, 1fr)"] p {
    font-size: 11px !important; line-height: 1.4 !important;
  }
  #closelook p span { white-space: nowrap !important; text-wrap-mode: nowrap !important; }

  /* ---- 4./6. immagini sempre sopra il testo nelle sezioni split ---- */
  #gluing > div:has(> img),
  #workspace > div:has(> img),
  #dispenser > div:has(> img),
  #vision > div:has(> img) {
    order: -1 !important; min-height: 0 !important; height: 240px !important;
  }
  #gluing > div:has(> img) > img,
  #vision > div:has(> img) > img {
    transform: none !important; padding: 0 !important;
  }
  /* le due foto prodotto sono verticali: contain, non cover */
  #workspace > div:has(> img) { height: 300px !important; background: #000 !important; }
  #dispenser > div:has(> img) { height: 300px !important; background: #fff !important; }
  .sc-host > section#workspace > div:has(> img) > img,
  .sc-host > section#dispenser > div:has(> img) > img {
    transform: none !important; padding: 0 !important; object-fit: contain !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  #gluing > div:has(> img) > div { display: none !important; }

  /* ---- 5. challenge: stile Roman ---- */
  #challenge h3 { font-size: 16px !important; font-weight: 700 !important; }
  #challenge, #challenge > div { text-align: center !important; }
  #challenge h2, #challenge p {
    margin-left: auto !important; margin-right: auto !important; max-width: 100% !important;
  }
  #challenge > div > div[style*="grid-template-columns: repeat(3, 1fr)"] {
    gap: 40px !important; text-align: center !important;
  }
  #challenge > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > * { text-align: center !important; }
  #challenge > div > div > .hb-reveal { align-items: center !important; gap: 20px !important; }
  #challenge > div > div > .hb-reveal > div:first-child { width: 100% !important; }
  #challenge > div > div > .hb-reveal > p { margin-top: -10px !important; }
  #challenge > div > div > .hb-reveal > div[style*="align-items: baseline"] {
    justify-content: center !important;
  }

  /* ---- 7. explore the process: intestazione e controlli centrati ---- */
  #sequence > div > div:first-child {
    flex-direction: column !important; align-items: center !important; gap: 22px !important;
  }
  #sequence > div > div:first-child > div { text-align: center !important; width: 100% !important; }
  #sequence > div > div:first-child p,
  #sequence > div > div:first-child h2 {
    text-align: center !important; margin-left: auto !important; margin-right: auto !important;
  }
  #sequence > div > div:first-child > div:last-child {
    justify-content: center !important; display: flex !important;
    align-items: center !important; gap: 14px !important;
  }
  /* 01/03 in mezzo alle due frecce */
  #sequence > div > div:first-child > div:last-child > div { display: contents !important; }
  #sequence > div > div:first-child > div:last-child > span { order: 2 !important; }
  #sequence > div > div:first-child > div:last-child > div > button:first-child { order: 1 !important; }
  #sequence > div > div:first-child > div:last-child > div > button:last-child { order: 3 !important; }

  /* card: icona a sx con numero e titolo a destra, corpo testo sotto l'icona ---- */
  #sequence p[style*="nowrap"] { white-space: normal !important; }
  #sequence div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #sequence div[style*="grid-template-columns: 104px 1fr"] {
    grid-template-columns: 84px minmax(0, 1fr) !important; gap: 14px !important;
    padding: 18px 20px !important; text-align: left !important; align-items: start !important;
  }
  #sequence div[style*="grid-template-columns: 104px 1fr"] > div:first-child {
    width: 84px !important; height: 66px !important; flex: none !important;
  }
  #sequence div[style*="grid-template-columns: 104px 1fr"] > div:last-child {
    display: contents !important;
  }
  #sequence div[style*="grid-template-columns: 104px 1fr"] > div:last-child > div:first-child {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 2px !important; margin-bottom: 0 !important;
  }
  #sequence div[style*="grid-template-columns: 104px 1fr"] h4 { font-size: 15px !important; }
  #sequence div[style*="grid-template-columns: 104px 1fr"] p {
    grid-column: 1 / -1 !important; margin: 6px 0 0 !important;
    max-width: 100% !important; text-align: left !important;
    font-size: 13px !important; line-height: 1.55 !important;
  }

  /* ---- 8. specifications: foto sopra ---- */
  #specs > div { grid-template-columns: minmax(0, 1fr) !important; }
  #specs > div > .hb-reveal:has(> img) { order: -1 !important; min-height: 0 !important; }
  #specs > div > .hb-reveal > img { max-height: 260px !important; margin: 0 auto !important; }
  /* nota tecnica su un unico rigo */
  #specs > div > .hb-reveal > p[style*="nowrap"] {
    white-space: nowrap !important; font-size: 11px !important; text-align: left !important;
  }

  /* ---- corpo testo centrato: gluing, t-bot, vision ---- */
  #gluing > .hb-reveal, #workspace > .hb-reveal, #vision > .hb-reveal {
    align-items: center !important; text-align: center !important;
  }
  #gluing > .hb-reveal > div, #workspace > .hb-reveal > div, #vision > .hb-reveal > div {
    align-items: center !important; text-align: center !important;
    max-width: 100% !important; width: 100% !important;
  }
  #gluing > .hb-reveal p, #workspace > .hb-reveal p, #vision > .hb-reveal p {
    text-align: center !important; max-width: 100% !important;
    margin-left: auto !important; margin-right: auto !important;
  }

  /* ---- t-bot ed end-effector: testo più in alto ---- */
  #workspace > .hb-reveal, #dispenser > .hb-reveal {
    justify-content: flex-start !important;
    padding-top: 26px !important; padding-bottom: 44px !important;
  }

  /* ---- end-effector: sfumatura bianca sul lato sinistro dell'immagine ---- */
  .sc-host > section#dispenser > div:has(> img) {
    position: relative !important; overflow: hidden !important;
  }
  .sc-host > section#dispenser > div:has(> img) > img {
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  .sc-host > section#dispenser > div:has(> img)::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 50%);
  }

  /* ---- award: logo Leonardo più piccolo ---- */
  #award img[alt="Leonardo"] { height: 22px !important; max-width: 160px !important; }

  /* ---- 9. HeroCam: tutto centrato ---- */
  #software > div { grid-template-columns: minmax(0, 1fr) !important; }
  #software > div > div:last-child { text-align: center !important; }
  #software > div > div:last-child h2,
  #software > div > div:last-child p {
    margin-left: auto !important; margin-right: auto !important; max-width: 100% !important;
  }
  #software > div > div:last-child > div[style*="display: flex"] { justify-content: center !important; }

  /* ---- 10. integrations: 2 colonne × 3 righe ---- */
  .sc-host > section:has(.hb-logo-card) div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
  }
  .sc-host > section:has(.hb-logo-card) h2 { white-space: normal !important; }

  /* ---- 11. card finale: tutto al centro (come Roman) ---- */
  #contact > div > div[style*="grid-template-columns: 1.15fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important;
    text-align: center !important;
  }
  #contact h2, #contact p {
    margin-left: auto !important; margin-right: auto !important; max-width: 100% !important;
  }
}

/* ═══ HeroCAM (sezione unita nella pagina GLX01) ═══ */
@media (max-width: 860px) {
  #herocam { padding-left: 16px !important; padding-right: 16px !important; }
  #herocam h2 { font-size: 34px !important; }
  #herocam > div:last-child { margin-top: 30px !important; }
  #herocam div[style*="aspect-ratio"] {
    aspect-ratio: auto !important; height: 168px !important; width: 100% !important;
  }
  #herocam div:has(> .hb-btn--lg + .hb-btn--lg) { width: 100% !important; align-self: stretch !important; }
  #herocam .hb-btn--lg { flex: 1 1 0 !important; }

  /* ---- bonding applications: intro larga, card 2×2 centrate ---- */
  #applications { padding-left: 16px !important; padding-right: 16px !important; }
  #applications .hb-secthead { max-width: 100% !important; }
  #applications .hb-secthead__body { max-width: 100% !important; }
  #applications div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
  }
  #applications div[style*="grid-template-columns: repeat(4, 1fr)"] > div {
    padding: 18px 14px !important; text-align: center !important;
  }
  #applications div[style*="grid-template-columns: repeat(4, 1fr)"] > div > div:first-child {
    height: 48px !important; justify-content: center !important; margin-bottom: 12px !important;
  }
  #applications div[style*="grid-template-columns: repeat(4, 1fr)"] img { height: 42px !important; }
  #applications h4 { font-size: 14px !important; }
  #applications p[style*="font-size: 13px"] { font-size: 12px !important; line-height: 1.5 !important; }

  /* ---- how it works: tab 2×2 e pannello in colonna ---- */
  #how { padding-left: 16px !important; padding-right: 16px !important; }
  #how .hb-secthead, #how .hb-secthead__body { max-width: 100% !important; }
  #how div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
    align-items: stretch !important;
  }
  #how div[style*="grid-template-columns: repeat(4, 1fr)"] > div {
    height: 100% !important; min-height: 108px !important; box-sizing: border-box !important;
    padding: 14px 14px !important;
  }
  #how div[style*="grid-template-columns: repeat(4, 1fr)"] > div > span:last-child {
    font-size: 13px !important; line-height: 1.3 !important;
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  #how div[style*="grid-template-columns: 1.25fr 0.85fr"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; padding: 24px 20px !important;
  }
  #how div[style*="border-left: 1px solid"] { display: none !important; }

  /* ---- system network: colonna singola, testo centrato; diagramma nascosto (illeggibile a 390px) ---- */
  #network > div > div {
    grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important;
  }
  #network .hb-secthead {
    align-items: center !important; text-align: center !important; max-width: 100% !important;
  }
  /* diagramma ridimensionato per entrare senza scorrimento orizzontale
     (stesso approccio della pag Control Room) invece di uno scroll-x su
     una larghezza fissa */
  #network div[style*="padding: clamp(8px, 2vw, 24px)"] {
    overflow-x: visible !important;
    padding-bottom: 12px !important;
  }
  #network div[style*="padding: clamp(8px, 2vw, 24px)"] svg {
    width: 100% !important; max-width: 100% !important; height: auto !important; flex: none !important;
  }
  /* le icone delle card usano vector-effect:non-scaling-stroke: lo spessore
     resta fisso a 2px REALI mentre l'SVG (viewBox 1960) viene ridotto a
     ~342px, cioè ~5.7 volte — il tratto diventa il 22% dell'icona e si
     impasta. Disattivandolo il tratto torna a scalare col disegno: lo
     stroke-width=2 originale rende ~0.7px, la proporzione giusta. */
  #network svg [vector-effect] { vector-effect: none !important; }
  /* testi dentro le card leggermente più piccoli */
  #network foreignObject div[style*="font-size: 34px"] { font-size: 29px !important; }
  #network foreignObject div[style*="font-size: 22px"] { font-size: 19px !important; }

  /* ---- operator panel: colonna singola, testo centrato ---- */
  #operator > div {
    grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; text-align: center !important;
  }
  #operator .hb-secthead { align-items: center !important; text-align: center !important; max-width: 100% !important; }
  #operator h2, #operator p { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }
  #operator div[style*="aspect-ratio: 4 / 3"] {
    width: 100% !important; max-width: 100% !important; height: auto !important;
  }
  /* icone: 3 colonne, testo su due righi */
  #operator div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px 10px !important;
  }
  #operator div[style*="grid-template-columns: repeat(3, 1fr)"] > div {
    align-items: center !important; text-align: center !important; gap: 8px !important;
  }
  #operator div[style*="grid-template-columns: repeat(3, 1fr)"] span[style*="font-size: 13px"] {
    font-size: 11.5px !important; line-height: 1.3 !important; min-height: 30px !important;
  }
}