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

@media (max-width: 860px) {

  /* ---- header → hero: meno aria sopra il kicker arancione ---- */
  .sc-host > div[style*="height: 96px"] { display: none !important; }
  .sc-host > section:first-of-type { padding-top: 128px !important; }

  /* ---- carosello loghi partner: altezza contenuta, proporzioni intatte ---- */
  .sc-host div[style*="hb-marquee"] { align-items: center !important; }
  .sc-host div[style*="hb-marquee"] > img[style*="width: auto"][style*="opacity"][style*="display"] {
    height: 34px !important; width: auto !important;
    max-width: none !important; object-fit: contain !important;
    margin-right: 28px !important;
  }

  /* ---- riga loghi partner statica (#partners .hb-reveal): la regola generica
         ".hb-reveal > img { width: 100% }" di hb-mobile-base.css li mette uno
         sotto l'altro, qui vanno piccoli e in riga come da desktop. Selettore
         discendente (non solo "> img") perché diversi loghi sono avvolti in
         <a> (link al sito del partner): con "> img" restavano fuori e
         mantenevano l'altezza desktop (fino a 56px), risultando sproporzionati
         rispetto agli altri loghi nella stessa riga su mobile. ---- */
  /* la regola generica "foto sempre sopra il testo" di hb-mobile-base.css
     converte QUALSIASI div flex-row che contiene immagini annidate (es. i
     loghi avvolti in <a>) in flex-direction:column — pensata per i blocchi
     foto+testo affiancati, ma finiva per impilare anche questa riga di
     loghi uno sotto l'altro invece di lasciarli in riga con wrap. */
  #partners .hb-reveal {
    flex-direction: row !important;
    /* il gap desktop (fino a 64px) lasciava passare un solo logo per riga a
       390px: con 18px ne entrano 2-3 per riga su tutte le pagine progetto */
    gap: 18px !important;
  }
  /* un logo NON avvolto in <a> (es. TEPCO, che non ha link) è figlio diretto
     di .hb-reveal, e quindi finisce per matchare ANCHE la regola generica
     ".sc-host > section:not(#hero) > div:has(> img) > img { height:100% }"
     di hb-mobile-base.css (pensata per foto di sfondo a piena altezza) — la
     sua catena di selettori di tipo le dà specificità (1,1,4), più alta di
     un semplice "#partners img" = (1,0,1), quindi vince lei nonostante
     l'ID. "img[src*='/logos/']" aggiunge un selettore d'attributo (portando
     la specificità a (1,2,1), che batte (1,1,4) sul secondo livello) e resta
     un selettore discendente (non solo "> img") per continuare a matchare
     anche i loghi avvolti in <a>. */
  /* "max-height: none" serve perché ogni logo porta un max-height inline
     tarato sul desktop (24px ENEA, 28px RFX, 56px Regione Campania...): un
     max-height inline batte sempre l'height qui sotto, quindi le altezze
     restavano disallineate (24/26/28) nonostante la regola comune. */
  /* niente "max-width: 100px": i wordmark larghi (CNR 9:1, Consorzio RFX
     7:1) venivano tagliati ai lati invece di rimpicciolirsi (un
     object-fit:cover ereditato dalle regole generiche li croppava).
     22px di altezza uniforme è il compromesso che tiene il logo più larzo
     (CNR → ~199px) abbastanza stretto da starci in riga con altri entro i
     ~342px di contenuto disponibili: chi non entra va a capo (flex-wrap). */
  #partners .hb-reveal img[src*="/logos/"] {
    height: 22px !important;
    max-height: none !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  #partners .hb-reveal > img,
  #partners .hb-reveal > a {
    flex: none !important;
  }
  /* stesso problema del carosello: l'<a> dei loghi con link è inline, quindi
     l'immagine appoggia sulla baseline e resta qualche px più in alto dei
     loghi non linkati (TEPCO sembrava "più in basso"). Con display:flex
     spariscono baseline e descender e tutti tornano centrati. */
  #partners .hb-reveal a { display: flex !important; align-items: center !important; }

  /* LONG-OPS (l'unica riga #partners che contiene UKAEA): i tre loghi vanno
     su un rigo solo nell'ordine RACE → UKAEA → TEPCO. A 19px di altezza
     RACE ~30px + UKAEA ~191px + TEPCO ~59px = 280px, che con 2 gap da 12px
     sta nei ~342px disponibili. */
  #partners .hb-reveal:has(img[src*="ukaea"]) {
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  #partners .hb-reveal:has(img[src*="ukaea"]) img { height: 19px !important; }
  #partners .hb-reveal:has(img[src*="ukaea"]) img[src*="tepco"] { height: 13px !important; }
  #partners .hb-reveal:has(img[src*="ukaea"]) > *:has(img[src*="race"]) { order: 1 !important; }
  #partners .hb-reveal:has(img[src*="ukaea"]) > *:has(img[src*="ukaea"]) { order: 2 !important; }
  #partners .hb-reveal:has(img[src*="ukaea"]) > img[src*="tepco"] { order: 3 !important; }

  /* nessuna eccezione per UKAEA: i 22px della regola base sono già quelli
     che gli servono (a 10:1 diventa ~221px di larghezza, che sta in riga).

     TEPCO invece resta più basso: il suo wordmark è molto bold e senza
     margini interni nel viewBox, quindi alla stessa altezza degli altri
     pesa visivamente molto di più (era la segnalazione "tepco grande"). */
  #partners .hb-reveal img[src*="tepco"] {
    height: 15px !important;
  }
  /* nessuna eccezione per RFX qui: i 34px venivano dal carosello
     .hb-logo-item di hb-technologies-mobile.css, dove il logo sta da solo in
     una riga scorrevole. In questa riga di loghi statica (DTT, Nefertari) va
     alla stessa altezza degli altri, altrimenti spicca più alto di tutti. */

  /* PIPEON: il logo "partner" qui non è una singola immagine ma un'unica
     striscia larghissima (32768px) con ~15 loghi ripetuta 4 volte in un
     marquee che scorre in loop — la regola generica sopra (max-width:100px)
     la schiacciava, rendendo ogni logo un'illeggibile scheggia. Nessun
     max-width per lei: solo l'altezza conta, la larghezza scorre libera. */
  #partners div[style*="hb-marquee"] img {
    height: 44px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* strisce loghi partner a 5 colonne → 2 colonne */
  .sc-host div[style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 26px !important;
  }

  /* coppia asimmetrica partner/programma (Reshape) → colonna singola */
  .sc-host div[style*="grid-template-columns: 1.6fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* timeline verticale Regional funding: numero sopra il titolo */
  .sc-host div[style*="grid-template-columns: auto minmax"] {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 8px !important;
    text-align: center !important;
  }
  .sc-host div[style*="grid-template-columns: auto minmax"] > span {
    font-size: 30px !important;
  }
  .sc-host div[style*="grid-template-columns: auto minmax"] div[style*="flex-wrap: wrap"] {
    justify-content: center !important;
  }

  /* citazione UKAEA (Long-Ops) */
  .sc-host figure[style*="grid-template-columns: auto minmax"] {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 0 !important;
    text-align: center !important;
  }
  .sc-host figure > span[aria-hidden="true"] {
    font-size: 64px !important;
    line-height: .8 !important;
  }
  .sc-host figure > div { padding-top: 0 !important; }
  .sc-host blockquote {
    font-size: 20px !important;
    line-height: 1.32 !important;
  }
  .sc-host figcaption { font-size: 12.5px !important; }

  /* griglie a due colonne dei blocchi 1-5 → colonna singola */
  .sc-host div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* riga dei numeri: mai più di due colonne, valori leggibili */
  .sc-host #numbers div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ---- project in numbers: tutto centrato ---- */
  .sc-host #numbers > div > p,
  .sc-host #numbers .hb-stat,
  .sc-host #numbers .hb-stat__value,
  .sc-host #numbers .hb-stat__sub,
  .sc-host #numbers div[style*="grid-template-columns"] > * {
    text-align: center !important;
  }
  .sc-host #numbers .hb-stat {
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .sc-host #numbers .hb-stat__sub { font-size: 13px !important; }

  /* ---- testi dentro le card: corpo 13px, titolo 14px ---- */
  .sc-host div[style*="border-radius"][style*="border: 1px solid"] h3,
  .sc-host div[style*="border-radius"][style*="border: 1px solid"] h4,
  .sc-host .hb-pcard h3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  .sc-host div[style*="border-radius"][style*="border: 1px solid"] p,
  .sc-host .hb-pcard p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .sc-host div[style*="border-radius"][style*="border: 1px solid"] p[style*="text-transform: uppercase"],
  .sc-host .hb-pcard p[style*="text-transform: uppercase"] {
    font-size: 11px !important;
  }

  /* ---- card finale (CTA + form): una colonna, niente testo fuori ---- */
  .sc-host div[style*="grid-template-columns: 1.15fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 28px 20px !important;
    text-align: center !important;
  }
  .sc-host div[style*="grid-template-columns: 1.15fr"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .sc-host div[style*="grid-template-columns: 1.15fr"] h2 {
    font-size: 20px !important;
    line-height: 1.22 !important;
  }
  .sc-host div[style*="grid-template-columns: 1.15fr"] h2 br { display: none !important; }
  .sc-host div[style*="grid-template-columns: 1.15fr"] p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sc-host div[style*="grid-template-columns: 1.15fr"] form { width: 100% !important; }
  .sc-host div[style*="grid-template-columns: 1.15fr"] .hb-input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---- HeroGrip platform (Reshape): the two cards' outer grid never
         collapsed to 1 column on mobile (its exact inline-style string,
         "repeat(2, minmax(0, 1fr))", doesn't match the sitewide 2-col
         collapse rules elsewhere, which target "repeat(2, 1fr)"), so each
         card kept half the viewport width — squeezing every pill below via
         flex-shrink regardless of the fixed width set on them further down.
         Collapse it here so the cards (and their pill rows) get full width. */
  .sc-host div[style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ---- HeroGrip platform (Reshape): spec pills same width, text on one line ----
         base .hb-tag is 12px / height 26px / padding 0 12px / radius 999px
         (design-system components.css); mobile: 1px smaller (12px → 11px) and
         a shared fixed width sized to the longest label ("Custom stiffness"
         ≈ 109px of text incl. letter-spacing + the existing 24px of 12px/side
         padding ≈ 133px minimum fit), plus ~17px of extra breathing room
         → 150px, applied to every pill so they all match. flex-shrink:0 keeps
         that width from being squeezed once the grid above is single-column. ---- */
  .sc-host div[style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] .hb-tag--neutral {
    font-size: 11px !important;
    width: 150px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  /* ---- HeroGrip Close Look (#reshape-feats, Reshape): mobile stacking order
         image → 2×2 pill grid → text card, text card matching image width.
         Desktop is a 2-col grid (pills+desc | image); on mobile it collapses
         to a single column and `order` puts the image first, then the
         pills+desc column, whose own display becomes a 2-col grid for the
         4 pills with the desc card spanning both columns underneath
         (grid-column: 1 / -1), giving it the same full width as the image
         column above it. ---- */
  #reshape-feats {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  #reshape-feats > div:nth-child(2) {
    order: 1 !important;
  }
  #reshape-feats > div:nth-child(1) {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #reshape-feats > div:nth-child(1) > div {
    grid-column: 1 / -1 !important;
  }
}