/* HEROBOTS — Robotic Cells, layer mobile (dopo hb-mobile-base.css) */

@media (max-width: 860px) {

  #approach { padding: 148px 16px 80px !important; }
  #approach h1 { font-size: 36px !important; }
  #approach p { max-width: 100% !important; }
  /* CTA a larghezza contenuto, come le altre pagine */
  #approach div:has(> .hb-btn--lg + .hb-btn--lg) { width: auto !important; }
  #approach .hb-btn--lg { flex: 0 0 auto !important; }
  /* "How we start": fuori su mobile, resta solo la CTA principale */
  #approach a.hb-btn--secondary { display: none !important; }

  #cell { padding-left: 16px !important; padding-right: 16px !important; }
  /* texture a griglia decorativa: quadrati -30% */
  #cell > div:first-child { background-size: 34px 34px !important; }
  #cell .hb-secthead, #cell .hb-secthead__body { max-width: 100% !important; }
  #cell .hb-secthead__body { color: #fff !important; }
  #cell > div > div:last-child {
    grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important;
  }
  /* disegno cella: -30% */
  #cell img[src*="cell-outline"] { max-width: 70% !important; max-height: 392px !important; }
  /* "what we can integrate": label centrata, pillole compatte su pochi righi */
  #cell .hb-label { text-align: center !important; }
  #cell .hb-pill {
    font-size: 12px !important; min-height: 40px !important;
    padding: 7px 13px !important; gap: 6px !important; letter-spacing: 0 !important;
  }
  #cell div:has(> .hb-pill) { gap: 6px !important; }
  /* "robot brands" dentro configurable: nascosto su mobile (resta la sezione Integrations) */
  #cell div:has(> img[src*="/logos/"]) { display: none !important; }
  #cell div:has(> div > img[src*="/logos/"]) { display: none !important; }
  #cell div[style*="grid-template-columns: repeat(3, 1fr)"] { gap: 22px 16px !important; }
  #cell div:has(> .hb-pill) { justify-content: center !important; }

  #process { padding-left: 16px !important; padding-right: 16px !important; }
  #process .hb-secthead, #process .hb-secthead__body { max-width: 100% !important; }
  #process div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important;
  }
  #process div[style*="grid-template-columns: repeat(3, 1fr)"] > div {
    padding: 24px 20px !important; text-align: center !important; align-items: center !important;
  }

  #leonardo { grid-template-columns: minmax(0, 1fr) !important; }
  #leonardo > div:first-child { min-height: 240px !important; }
  #leonardo > div:first-child > div { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 85%, #000 100%) !important; }
  #leonardo > div:last-child { padding: 0 16px 44px !important; max-width: 100% !important; align-items: center !important; text-align: center !important; }
  #leonardo h2 { font-size: 20px !important; line-height: 1.2 !important; }
  #leonardo h2 br, #leonardo p br { display: none !important; }
  #leonardo .hb-btn--lg { width: auto !important; }
  #leonardo > div:last-child img,
  #leonardo > div:last-child > img[src*="leonardo"] {
    height: 14px !important; max-height: 14px !important; width: auto !important;
    max-width: 140px !important; object-fit: contain !important;
  }

  /* robot brands: titolo centrato, 2 righi da 3 colonne, loghi più piccoli */
  #integrations { padding-left: 16px !important; padding-right: 16px !important; }
  #integrations .hb-secthead { text-align: center !important; align-items: center !important; }
  #integrations .hb-secthead__title { white-space: normal !important; font-size: 26px !important; }
  #integrations > div > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important;
    margin-top: 28px !important;
  }
  #integrations > div > div:last-child > div { padding: 16px 8px !important; min-height: 64px !important; }
  #integrations > div > div:last-child img { height: 15px !important; max-width: 100% !important; }
  .hb-logo-item { padding-left: 8px !important; padding-right: 8px !important; }
  /* opacità .45 di default + 24px risultava praticamente invisibile sul nero */
  /* niente max-width (col cap i loghi larghi rendevano sotto l'altezza
     dichiarata) e niente altezza dedicata per UKAEA: stessa altezza di tutti */
  .hb-logo-item img { height: 24px !important; max-width: none !important; width: auto !important; opacity: .75 !important; }
  .hb-logo-item img[src*="enea.svg"],
  .hb-logo-item img[src*="tepco.svg"] { height: 12px !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;
  }

  #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; }
}