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

@media (max-width: 860px) {

  /* il top border di #simulation è solo per desktop */
  #simulation { border-top: none !important; }

  /* ---- 1. blocco "purpose-built for…": casella più larga ---- */
  #overview { padding-left: 12px !important; padding-right: 12px !important; }
  #overview > div > .hb-reveal { margin-bottom: 26px !important; }
  #overview > div > .hb-reveal > p:last-child { max-width: 100% !important; }

  /* titolo "A robotic operations center…": casella più larga */
  #overview h2 { max-width: 100% !important; }

  /* ---- 2. card capability: 2 colonne ---- */
  #overview div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  #overview div[style*="grid-template-columns: repeat(3, 1fr)"] > * > div {
    padding: 14px 13px 16px !important; gap: 8px !important; border-radius: 12px !important;
  }
  #overview h3 { font-size: 14px !important; line-height: 1.25 !important; }
  /* numeretti 01./02./... delle card: arancione invece di grigio */
  #overview div[style*="grid-template-columns: repeat(3, 1fr)"] span[style*="tabular-nums"] { color: var(--hb-orange) !important; }
  /* decima card, solo mobile: "Custom module", senza numero */
  #overview [data-mobile-only-card] { display: flex !important; }

  /* ---- data management: l'immagine va dopo il testo (non sopra come le altre sezioni split) ---- */
  #data-management > div:has(> img) { order: 1 !important; }
  #overview div[style*="grid-template-columns: repeat(3, 1fr)"] p { font-size: 12.5px !important; line-height: 1.45 !important; }
  /* ---- network: un solo blocco di testo continuo, non due colonne ---- */
  #network div[style*="grid-template-columns: 1fr 1fr"] { display: block !important; }
  #network div[style*="grid-template-columns: 1fr 1fr"] > p { display: inline !important; }
  #network div[style*="grid-template-columns: 1fr 1fr"] > p:first-child::after { content: " "; }
  #network, #network h2, #network p { text-align: center !important; }

  /* ---- in the field (LongOps · DTT): card in colonna, testo dentro la card ---- */
  #field div[style*="grid-template-columns: 300px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 20px 18px 22px !important;
  }
  #field div[style*="grid-template-columns: 300px"] > div { min-width: 0 !important; }
  #field div[style*="grid-template-columns: 300px"] p { overflow-wrap: anywhere !important; }

  /* ---- range: card in colonna, immagini a piena larghezza ---- */
  #range div[style*="grid-template-columns: 220px"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    min-height: 0 !important;
    justify-items: center !important;
    text-align: center !important;
  }
  #range div[style*="grid-template-columns: 220px"] > img {
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    object-position: center !important;
  }

  #overview svg { width: 20px !important; height: 20px !important; }
  /* icona arancione fuori: numero e titolo hanno tutta la riga */
  #overview div[style*="grid-template-columns: repeat(3, 1fr)"] > * > div > div > span:first-child {
    display: none !important;
  }
  /* card "Custom module" (mobile-only, senza numero): l'icona matita resta visibile
     al posto del numero — più specifico della regola generale sopra */
  #overview div[style*="grid-template-columns: repeat(3, 1fr)"] > [data-mobile-only-card] > div > div > span:first-child {
    display: flex !important;
  }

  /* ---- 3. architecture: corpo testo unico, non su due colonne ---- */
  #network div[style*="column-count: 2"] {
    column-count: 1 !important; display: flex !important; flex-direction: column !important; gap: 14px !important;
  }
  #network div[style*="column-count: 2"] p { text-align: center !important; }

  /* ---- 3b. architecture: il diagramma deve stare tutto nella viewport,
         senza scroll orizzontale. Lo svg usa già un viewBox, quindi portarlo
         a width:100% lo fa scalare per intero nel contenitore (le etichette
         diventano piccole, ma tutto il diagramma resta visibile senza
         scroll). overflow-x resta come rete di sicurezza contro arrotondamenti
         di sub-pixel, non per uno scroll "di norma". ---- */
  #network div[style*="padding: clamp(8px, 2vw, 20px)"] {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    padding-bottom: 12px !important;
  }
  #network div[style*="padding: clamp(8px, 2vw, 20px)"] svg {
    width: 100% !important; max-width: 100% !important; height: auto !important; flex: none !important;
  }
  /* come su HR-GLX01: vector-effect:non-scaling-stroke tiene il tratto a 2px
     reali mentre l'SVG (viewBox 2320) scende a ~342px, cioè ~6.8 volte — qui
     l'icona finale è ~5px e il tratto ne occupa il 40%, per questo risulta
     ancora più impastata che su HR-GLX01. Disattivandolo il tratto torna
     proporzionato. Testi delle card lasciati invariati come richiesto. */
  #network svg [vector-effect] { vector-effect: none !important; }

  /* ---- 4/5. split verticali: foto sempre sopra il testo ---- */
  .sc-host > section[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important;
  }
  .sc-host > section[style*="grid-template-columns: 1fr 1fr"] > div:has(> img) {
    order: -1 !important; height: 230px !important; min-height: 0 !important; width: 100% !important;
  }
  .sc-host > section[style*="grid-template-columns: 1fr 1fr"] > div:has(> img) > img {
    object-position: center !important;
  }
  /* i gradienti laterali servono solo al layout affiancato */
  .sc-host > section[style*="grid-template-columns: 1fr 1fr"] > div:has(> img) > div[style*="linear-gradient"] {
    display: none !important;
  }

  /* ---- 5. proximity card: niente overflow ---- */
  #modules > div:first-child { padding: 28px 16px 34px !important; gap: 26px !important; }
  #modules > div:first-child > div:first-child { text-align: center !important; }
  #modules > div:first-child > div:first-child p { margin-left: auto !important; margin-right: auto !important; }
  #modules div[style*="max-width: 600px"] {
    max-width: 100% !important; padding: 18px 14px 22px !important; border-radius: 16px !important;
  }
  #modules div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important; gap: 12px !important;
  }
  #modules div[style*="grid-template-columns: repeat(4, 1fr)"] > *:nth-child(2),
  #modules div[style*="grid-template-columns: repeat(4, 1fr)"] > *:nth-child(4) {
    margin-left: 10px !important;
  }
  #proxbar + div span { font-size: 10.5px !important; }
  #modules span[style*="border-radius: 999px"][style*="padding: 9px 18px"] {
    padding: 6px 9px !important; font-size: 10px !important;
  }
  /* riga "measured distance d": più spazio, linea tratteggiata visibile */
  #modules div[style*="margin-bottom: 26px"] { gap: 6px !important; }
  #modules div[style*="margin-bottom: 26px"] > div[style*="flex: 1"] { justify-content: center !important; }
  #modules div[style*="margin-bottom: 26px"] > div[style*="flex: 1"] > span:last-child {
    font-size: 9.5px !important; padding: 0 6px !important; white-space: nowrap !important;
  }

  /* ---- 6. modulo 8 (sensing integration): testo centrato, grafico dx/sx invariato ---- */
  .sc-host > section:has(span[style*="hb-sense-ring"]) .hb-reveal { text-align: center !important; }
  .sc-host > section:has(span[style*="hb-sense-ring"]) p { text-align: center !important; }
  .sc-host > section:has(span[style*="hb-sense-ring"]) div[style*="grid-template-columns: auto 1fr auto"] {
    padding: 16px !important; gap: 8px !important;
  }

  /* ---- 7. loghi partner: più grandi, più visibili e più vicini
         (24px a opacità .45 di default risultava praticamente invisibile) ---- */
  .hb-logo-item { padding-left: 8px !important; padding-right: 8px !important; }
  /* niente max-width: con object-fit:contain il cap rimpiccioliva i loghi
     larghi sotto l'altezza dichiarata (UKAEA 10:1 finiva a ~10px effettivi) */
  .hb-logo-item img { height: 22px !important; max-width: none !important; width: auto !important; opacity: .75 !important; transform: none; }
  /* TEPCO è un wordmark largo e basso: alla stessa altezza degli altri
     (22px) risultava molto più grande visivamente — dimezzato */
  .hb-logo-item img[src*="tepco"],
  .hb-logo-item img[src*="enea"] { height: 12px !important; }

  /* ---- modulo 4 (haptic): titolo e testo centrati ---- */
  div[style*="clamp(62px, 14vw, 195px)"] {
    padding-left: clamp(24px, 6vw, 80px) !important; align-items: center !important; text-align: center !important;
  }
  div[style*="clamp(62px, 14vw, 195px)"] p,
  div[style*="clamp(62px, 14vw, 195px)"] h2,
  div[style*="clamp(62px, 14vw, 195px)"] > div {
    margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; text-align: center !important;
    align-items: center !important;
  }

  /* ---- modulo 5: card con testo centrato ---- */
  div[style*="margin: clamp(32px, 4vw, 48px) auto 0"][style*="grid-template-columns: repeat(3, 1fr)"] > div > div {
    align-items: center !important; text-align: center !important;
  }

  /* ---- modulo 5: pillole 2x2 ---- */
  div[style*="margin: clamp(26px, 3vw, 36px) auto 0"][style*="flex-wrap: wrap"] {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  div[style*="margin: clamp(26px, 3vw, 36px) auto 0"][style*="flex-wrap: wrap"] > span {
    justify-content: center !important; text-align: center !important; font-size: 11.5px !important;
    padding: 6px 8px !important; white-space: normal !important;
    height: 46px !important; box-sizing: border-box !important; line-height: 1.25 !important;
  }
  div[style*="margin: clamp(26px, 3vw, 36px) auto 0"][style*="flex-wrap: wrap"] > span > span:first-child {
    display: none !important;
  }

  /* ---- modulo 6 (safety/diagnostic): corpo testo centrato ---- */
  div[style*="align-items: start"] p { text-align: center !important; }

  /* ---- interoperability: meno alta ---- */
  #standards { padding-top: 40px !important; padding-bottom: 40px !important; }
  #standards div[style*="gap: clamp(28px, 3.4vw, 44px)"] { gap: 16px !important; }

  /* ---- discover herosuite: centrato ---- */
  #software a.hb-btn { align-self: center !important; margin-left: auto !important; margin-right: auto !important; }

  /* ---- 8. card finale (CTA): in colonna e centrata ---- */
  #contact { padding-left: 14px !important; padding-right: 14px !important; }
  /* stesso respiro sopra e sotto dentro la card (era 26px/30px) */
  #contact > .hb-reveal > div[style*="padding"] { padding: 28px 18px !important; }
  #contact div[style*="grid-template-columns: 1.15fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; text-align: center !important;
  }
  #contact h2, #contact p { max-width: 100% !important; text-align: center !important; }
  #contact form { width: 100% !important; }
  #contact .hb-input { width: 100% !important; box-sizing: border-box !important; }
}