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

@media (max-width: 860px) {

  /* ---- intro: stacco dall'header, pillole a larghezza piena ---- */
  .sc-host > section:first-of-type {
    padding-top: 148px !important; padding-bottom: 48px !important;
  }
  .sc-host > section:first-of-type > div:last-child > div:last-child { gap: 8px !important; }
  .sc-host > section:first-of-type a[href^="#"] { flex: 1 1 0 !important; justify-content: center !important; }

  /* ---- sezioni robot: colonna singola ---- */
  #A-Bot, #T-Bot, #G-Bot { padding-left: 16px !important; padding-right: 16px !important; }
  #A-Bot > div > .hb-reveal[style*="grid-template-columns: 1fr 1fr"],
  #T-Bot > div > .hb-reveal[style*="grid-template-columns: 1fr 1fr"],
  #G-Bot > div > .hb-reveal[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important;
  }
  /* feature card 2×2 con testo centrato */
  #A-Bot div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 14px"],
  #T-Bot div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 14px"],
  #G-Bot div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 14px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
  }
  #A-Bot div[style*="gap: 14px"] > div,
  #T-Bot div[style*="gap: 14px"] > div,
  #G-Bot div[style*="gap: 14px"] > div {
    padding: 16px 14px !important; text-align: center !important; align-items: center !important;
  }
  #A-Bot div[style*="gap: 14px"] h3,
  #T-Bot div[style*="gap: 14px"] h3,
  #G-Bot div[style*="gap: 14px"] h3 { font-size: 14px !important; }
  #A-Bot div[style*="gap: 14px"] p,
  #T-Bot div[style*="gap: 14px"] p,
  #G-Bot div[style*="gap: 14px"] p { font-size: 12.5px !important; line-height: 1.5 !important; }

  /* ---- "three tested sizes": colonna singola, card Custom centrata ---- */
  div[style*="grid-template-columns: 1.15fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important;
  }
  div[style*="grid-template-columns: 1.15fr 1fr"] > .hb-reveal:first-child {
    max-width: 100% !important; text-align: center !important;
  }
  div[style*="grid-template-columns: 1.15fr 1fr"] > .hb-reveal:last-child {
    justify-self: stretch !important; max-width: 100% !important;
    align-items: center !important; text-align: center !important;
  }

  /* ---- schede quote: disegno sopra, tabella sotto ---- */
  #gbot-size-card,
  .hb-reveal[style*="grid-template-columns: 1fr 340px"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important;
    padding: 22px 18px !important; justify-items: center !important;
  }
  #gbot-size-card > div:first-child,
  .hb-reveal[style*="grid-template-columns: 1fr 340px"] > div:first-child {
    align-items: center !important; width: 100% !important; overflow: hidden !important;
  }
  #gbot-size-card svg,
  .hb-reveal[style*="grid-template-columns: 1fr 340px"] svg { max-width: 100% !important; }
  #gbot-size-card span[style*="font-size: 15px"],
  .hb-reveal[style*="grid-template-columns: 1fr 340px"] span[style*="font-size: 15px"] {
    font-size: 12.5px !important;
  }
  #gbot-size-card span[style*="font-size: 20px"],
  .hb-reveal[style*="grid-template-columns: 1fr 340px"] span[style*="font-size: 20px"] {
    font-size: 16px !important;
  }

  /* ---- video e immagini a fascia: più bassi ---- */
  .hb-reveal[style*="aspect-ratio: 21 / 9"] {
    aspect-ratio: auto !important; height: 210px !important; border-radius: 14px !important;
  }

  /* ---- "in the field": testo su più righi, tutto centrato ---- */
  #A-Bot p[style*="nowrap"], #T-Bot p[style*="nowrap"], #G-Bot p[style*="nowrap"] {
    white-space: normal !important;
  }

  /* ---- testi robot: tutto centrato ---- */
  #A-Bot .hb-reveal > div, #T-Bot .hb-reveal > div, #G-Bot .hb-reveal > div {
    text-align: center !important;
  }
  #A-Bot h2, #A-Bot > div > .hb-reveal > div > p,
  #T-Bot h2, #T-Bot > div > .hb-reveal > div > p,
  #G-Bot h2, #G-Bot > div > .hb-reveal > div > p {
    text-align: center !important; max-width: 100% !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  /* robot name (A-Bot/T-Bot/G-Bot): titolo di sezione, non un h2 qualsiasi */
  #A-Bot h2, #T-Bot h2, #G-Bot h2 { font-size: 34px !important; line-height: 1.1 !important; }
  #A-Bot > div > div:first-child, #T-Bot > div > div:first-child, #G-Bot > div > div:first-child {
    align-items: center !important; text-align: center !important;
  }
  #A-Bot > div > div:first-child > *, #T-Bot > div > div:first-child > *, #G-Bot > div > div:first-child > * {
    margin-left: auto !important; margin-right: auto !important;
  }

  /* ---- pillole: griglia 3 colonne (2 righe) ---- */
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"],
  #T-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"],
  #G-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span,
  #T-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span,
  #G-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span {
    justify-content: center !important; text-align: center !important;
    box-sizing: border-box !important; line-height: 1.25 !important;
  }
  /* software in the loop: 3 sul primo rigo, 2 sul secondo a larghezza piena */
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span {
    grid-column: span 2 !important;
    padding: 10px 8px !important; font-size: 11.5px !important; min-height: 48px !important;
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    text-align: center !important; gap: 0 !important;
  }
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(4),
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(5) {
    grid-column: span 3 !important;
  }

  /* tools & sensors: cerchio con icona, etichetta sotto */
  #T-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span,
  #G-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span {
    flex-direction: column !important; align-items: center !important;
    padding: 0 !important; gap: 10px !important;
    font-size: 11.5px !important; border: 0 !important; background: none !important;
    border-radius: 0 !important;
  }
  #T-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span > span[style*="background-image"],
  #G-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span > span[style*="background-image"] {
    width: 72px !important; height: 72px !important; flex: none !important;
    border-radius: 999px !important; border: 1px solid rgba(255,255,255,.34) !important;
    background-color: rgba(255,255,255,.03) !important;
    background-size: 42% !important;
  }

  /* tools & sensors (T-Bot/G-Bot, 5 cerchi): griglia a 6 colonne per ottenere
     3 sul primo rigo e 2 sul secondo, centrati sui vuoti tra i cerchi sopra
     (piramide). Sovrascrive il repeat(3,...) generico definito sopra. */
  #T-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"],
  #G-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  #T-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span,
  #G-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span {
    grid-column: span 2 !important;
  }
  #T-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(4),
  #G-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(4) {
    grid-column: 2 / 4 !important;
  }
  #T-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(5),
  #G-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(5) {
    grid-column: 4 / 6 !important;
  }

  /* ---- a-bot: etichette abbreviate su mobile ---- */
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(7),
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(8) {
    font-size: 0 !important;
  }
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(7)::after { content: "Sensing"; }
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(8)::after { content: "Haptic"; }
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(7)::after,
  #A-Bot div[style*="gap: 10px"][style*="flex-wrap: wrap"] > span:nth-child(8)::after {
    font-size: 11.5px !important; color: inherit !important;
  }

  /* ---- a-bot "in the field": bottone Roman per ultimo ---- */
  #A-Bot div:has(> a[href*="/roman"]) { display: flex !important; }
  #A-Bot a[href*="/roman"] { order: 3 !important; }

  /* ---- a-bot: card "Custom" centrata come quelle sotto ---- */
  #A-Bot div:has(> div > h3) > div[style*="dashed"],
  #A-Bot div[style*="dashed"] {
    align-items: center !important; text-align: center !important;
    flex: 1 1 100% !important; padding: 20px 16px !important;
  }
  #A-Bot div[style*="dashed"] h3 { font-size: 16px !important; }
  #A-Bot div[style*="dashed"] p { font-size: 12.5px !important; line-height: 1.5 !important; }

  /* ---- g-bot: stesso elenco a righe di T-Bot (cerchietto | taglia | descrizione),
         niente card 2×2 ---- */

  /* ---- g-bot: nascondi il disegno dei cerchi, resta la tabella HRG con effetto ---- */
  #gbot-size-card > div:first-child { display: none !important; }
  #gbot-size-card { grid-template-columns: minmax(0, 1fr) !important; }

  /* ---- intellectual property: colonna singola, testo centrato ---- */
  .hb-reveal[style*="grid-template-columns: 1.1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; text-align: center !important;
  }
  .hb-reveal[style*="grid-template-columns: 1.1fr 1fr"] h2,
  .hb-reveal[style*="grid-template-columns: 1.1fr 1fr"] > div:first-child p {
    max-width: 100% !important; margin-left: auto !important; margin-right: auto !important;
  }
  .hb-reveal[style*="grid-template-columns: 1.1fr 1fr"] a[href*="filter=patent"] { text-align: left !important; }

  /* ---- loghi partner: più piccoli e più vicini ---- */
  .hb-logo-item { padding-left: 8px !important; padding-right: 8px !important; }
  /* niente max-width e niente eccezioni per singolo logo: con object-fit
     contain il cap rimpiccioliva i loghi larghi sotto l'altezza dichiarata
     (UKAEA a 60px/128px rendeva ~13px effettivi) e le altezze per-logo
     rendevano il carosello disomogeneo (UKAEA 60, RFX 34, Leonardo 18). */
  .hb-logo-item img { height: 24px !important; max-width: none !important; width: auto !important; }
  .hb-logo-item img[src*="tepco"],
  .hb-logo-item img[src*="enea"] { height: 12px !important; }

  /* ---- card finale: tutto al centro ---- */
  #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 br { display: none !important; }
  #contact p { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }

  /* ---- niente scorrimenti orizzontali ---- */
  .sc-host [style*="nowrap"]:not(nav):not(header):not(.hb-prodnav *) { white-space: normal !important; }
  .sc-host svg[style*="mm"] {
    width: 100% !important; height: auto !important; max-width: 100% !important;
    overflow: visible !important;
  }
  .sc-host section > div, .sc-host section { min-width: 0 !important; max-width: 100% !important; }

  /* ---- numeri/statistiche patent (G-Bot): 2 colonne × 2 righe ---- */
  #G-Bot div[style*="repeat(4"],
  #T-Bot div[style*="repeat(4"],
  .sc-host div[style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
  .sc-host div[style*="grid-template-columns:repeat(4,minmax(0,1fr))"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 14px !important; text-align: center !important;
  }
  #G-Bot div[style*="repeat(4"] > div,
  .sc-host div[style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] > div {
    text-align: center !important; min-width: 0 !important;
  }
  #G-Bot div[style*="repeat(4"] div[style*="font-size: 44px"],
  .sc-host div[style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] div[style*="font-size: 44px"] {
    font-size: 24px !important;
  }
  #G-Bot div[style*="repeat(4"] p,
  .sc-host div[style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] p {
    font-size: 11.5px !important; line-height: 1.45 !important; margin-top: 8px !important;
  }

  /* ---- corpo testo e paragrafi grandi: misura mobile ---- */
  .sc-host p[style*="font-size: 18px"] { font-size: 14px !important; line-height: 1.6 !important; }
  .sc-host p[style*="font-size: 16px"] { font-size: 13.5px !important; }
  .sc-host section p[style*="text-align: left"],
  .sc-host section div[style*="text-align: left"] { text-align: center !important; }

  /* ---- schede taglie: tabella a piena larghezza, valori leggibili ---- */
  .sc-host .hb-reveal[style*="340px"] > div:last-child { width: 100% !important; }

  /* ---- CTA e footer in colonna ---- */
  #contact div[style*="grid-template-columns: 1.15fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; text-align: center !important;
    padding: 28px 20px !important;
  }
  .sc-host footer > div[style*="grid-template-columns: 1.5fr repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 18px !important;
  }
}