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

@media (max-width: 860px) {

  /* ---- niente scorrimenti orizzontali ---- */
  .sc-host, .sc-host > section { overflow-x: hidden !important; max-width: 100% !important; }
  .sc-host [style*="nowrap"]:not(nav):not(header):not(.hb-prodnav *) { white-space: normal !important; }
  .sc-host > section > div { min-width: 0 !important; max-width: 100% !important; }
  .sc-host > section { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---- striscia verticale arancione dell'hero: fuori ---- */
  .sc-host > section:first-of-type div[style*="width: 2px"][style*="position: absolute"] { display: none !important; }

  /* ---- hero ---- */
  .sc-host > section:first-of-type { padding-top: 148px !important; padding-bottom: 44px !important; }
  .sc-host > section:first-of-type h1 { font-size: 34px !important; }

  /* ---- our history: colonna singola, testo centrato ---- */
  #history > div {
    grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important;
  }
  /* card fondazione/sedi/team/ISO: 2 colonne x 3 righe, non 1 colonna x 6 righe
     (la regola generica "repeat(3, 1fr) -> 1 colonna" di hb-mobile-base.css
     va bene per le griglie a 3, qui invece sono 6 card) */
  #history div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #history div[style*="grid-template-columns: repeat(3, 1fr)"] > * { text-align: center !important; }
  #history p {
    font-size: 13px !important; line-height: 1.65 !important;
    text-align: center !important; text-align-last: center !important;
    hyphens: none !important;
  }
  #history h2 { text-align: center !important; }
  #history span.hb-label, #history .hb-label { text-align: center !important; display: block !important; }

  /* ---- data log: colonna singola ---- */
  #datalog > div { max-width: 100% !important; }
  #datalog div[style*="grid-template-columns: 380px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important;
    margin-top: 22px !important;
  }
  /* pillole EVENTS / SPAN: staccate dalla card sotto */
  #datalog div[style*="margin-bottom: 8px"] { margin-bottom: 20px !important; }
  #datalog div[style*="grid-template-columns"] > * { min-width: 0 !important; }
  /* sfera: centrata sotto la card, dentro il frame */
  #datalog div[style*="aspect-ratio"] {
    transform: scale(1) !important; transform-origin: 50% 0 !important;
    max-width: 100% !important; width: 100% !important;
    justify-self: center !important; margin: 0 auto -11% !important;
  }
  #datalog div[style*="aspect-ratio"] > svg { overflow: hidden !important; }
  #datalog div[style*="grid-template-columns"] { overflow: hidden !important; }

  /* frecce prev/next della card evento: ingrandite per un tap più comodo */
  #datalog [data-dl-prev], #datalog [data-dl-next] {
    width: 40px !important; height: 40px !important; font-size: 14px !important;
  }

  /* ---- card: corpo testo 13px ---- */
  .sc-host div[style*="border-radius: 12px"] p,
  .sc-host div[style*="border-radius: 14px"] p,
  .sc-host div[style*="border-radius: 16px"] p,
  .sc-host div[style*="border-radius: 18px"] p,
  .sc-host div[style*="border-radius: 20px"] p { font-size: 13px !important; line-height: 1.55 !important; }

  /* ---- team: griglia in due colonne compatte ---- */
  #team div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important;
  }
  #team h3 { font-size: 14px !important; }
  #team p { font-size: 12px !important; }
  #team .hb-team-name { font-size: 13px !important; }
  #team .hb-team-name + div { font-size: 12px !important; }
  /* footer card: altezza uguale per tutte, freccia sempre in alto a destra */
  #team a.hb-team-card > div:last-child {
    min-height: 82px !important; align-items: flex-start !important;
    padding: 12px 12px 14px !important;
  }
  /* foto team: una regola generica in hb-mobile-base.css (per le immagini di
     contenuto) forza "height: auto" su qualunque img dentro un div senza
     "height" nello style — questo intercetta anche le foto team (il loro
     div usa aspect-ratio, non height) e rompe il crop position:absolute+
     object-fit:cover, facendo scalare la foto secondo il suo aspect-ratio
     naturale. Per foto più alte che larghe (es. Mario Selvaggio, Tiziana
     Brancati) il risultato tracima verso il basso e taglia il viso in alto.
     Ripristina qui, con specificità più alta, il crop corretto uguale per
     tutte le foto a prescindere dal loro aspect-ratio originale. */
  #team a.hb-team-card > div > img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }

  /* ---- sedi ---- */
  #sedi div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important;
  }
  #sedi .hb-label { text-align: center !important; }
  /* pill sedi: solo tag + nome in bold, niente indirizzo */
  #sedi #hb-loc-pills div[data-loc-pill] > span:nth-child(4) { display: none !important; }
  /* mappa: la regola globale ".sc-host img { max-width:100% }" (hb-mobile-base.css)
     scala anche i tile da 256px di Leaflet, spezzando la griglia della mappa
     (appare vuota/nera su mobile) — ripristina le dimensioni reali dei tile. */
  #hb-map img { max-width: none !important; }
  #hb-map .leaflet-tile { width: 256px !important; height: 256px !important; }

  /* ---- join us: card in colonna ---- */
  #contact > div > div[style*="grid-template-columns"],
  #contact div[style*="grid-template-columns: 1.15fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important;
    text-align: center !important; padding: 26px 18px !important;
  }
  #contact h2 br { display: none !important; }
  #contact p { font-size: 13px !important; margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }
  /* colonna CTA: centrata invece che allineata a destra */
  #contact div[style*="align-items: flex-end"] {
    align-items: center !important; text-align: center !important; justify-self: center !important;
  }
  #contact > div { max-width: 100% !important; }

  /* ---- loghi partner ---- */
  .hb-logo-item { padding-left: 8px !important; padding-right: 8px !important; }
  /* pill "Laboratory" in Locations: via il nome della sede (CeSMA,
     Università Federico II), restano tag e indirizzo */
  [data-loc-pill="1"] [data-i18n="locLabName"] { display: none !important; }

  /* niente max-width: con object-fit:contain un cap di 100px rimpiccioliva
     i loghi larghi ben sotto l'altezza dichiarata (UKAEA 10:1 finiva a ~10px
     effettivi, "minuscolo"). In un carosello che scorre la larghezza non è un
     vincolo, quindi tutti i loghi rendono esattamente alla stessa altezza. */
  .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; max-width: none !important; }
}