/* ==========================================================================
   Blocco condiviso — HERO DELLE PAGINE INTERNE (`hero2`) · responsive
   Maintenance 55:347 · Compliance 113:1143 · MRF · Monitoring · Contact Us ·
   Become a Partner

   ⚠️ RISCRITTO IL 2 SET 2026, E IL FILE SI CHIAMAVA `26-maintenance-hero.css`.
   Conteneva ancora le regole della PRIMA versione della sezione, quando era
   solo di Maintenance e le classi erano `.mnt-hero__*`. Quando l'hero e
   diventato il blocco condiviso `hero2` nessuno ha aggiornato questo file:
   il risultato e che le sei pagine interne erano rimaste SENZA UN SOLO
   riflusso. Non si vedeva perche a 1512 e giusto, ma sotto:
     · `.hero2__titolo` e `white-space: nowrap` e i tre a-capo sono espliciti
       nel testo, quindi «Know when to act.» restava larga 476px e la riga
       piu lunga di Maintenance 923px: a 360px il titolo usciva dallo schermo
       (misurato: contenuto 923 dentro un box da 328);
     · le due colonne restavano affiancate a ogni larghezza, cioe 124px di
       testo accanto a un'immagine, su un telefono.

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui e una mia scelta
   di riflusso. Nessuna riga fuori da @media.

   A >= 1512 l'hero resta identico al mockup: 1051 di altezza (171 + 800 +
   80), due colonne da 676 con gap 80, immagine al 205,48% ancorata a
   sinistra, quattro quadrati ruotati centrati a `50% + 428.65px`.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1511 · L'immagine perde l'altezza fissa
   676x800 diventa una proporzione, cosi la colonna si stringe senza che il
   riquadro resti alto 800 su una larghezza di 400.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .hero2__media {
    height: auto;
    aspect-ratio: 676 / 800;
  }
}


/* --------------------------------------------------------------------------
   <= 1359 · Il titolo smette di essere `nowrap`

   I tre a-capo del mockup sono espliciti nel testo, ma le righe sono lunghe:
   «From chasing compliance to to traceable,» a 64px chiede 923px e la
   colonna, a meta di 1432, ne offre 676. Il conto torna solo sopra i ~1360.
   Sotto, il testo torna a fluire: gli a-capo del mockup restano come punti di
   interruzione preferiti, ma le righe possono spezzarsi ancora.
   -------------------------------------------------------------------------- */
@media (max-width: 1359px) {
  .hero2__titolo { white-space: normal; }
}


/* --------------------------------------------------------------------------
   <= 1023 · Una colonna

   Immagine sopra, testo sotto. A 1023 la colonna vale 432px: un H1 da 64px e
   un paragrafo da 24 accanto a un'immagine larga altrettanto non sono due
   colonne, sono due strisce.

   Il padding-top scende: i 171 servivano a scavalcare l'header sovrapposto
   (91 + 80 di respiro). L'header resta alto 91, il respiro cede.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero2__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);              /* 80 -> 40 */
  }

  .hero2__col {
    align-self: auto;
    justify-content: flex-start;      /* niente space-between: non c'e piu
                                         un'altezza da riempire */
    gap: var(--space-5);
  }

  /* ⚠️ 7 set 2026 — L'IMMAGINE NON SI VEDEVA PROPRIO, ed e questo il difetto
     che Andrea ha segnalato come «manca l'immagine dopo la cta» su tutte e
     quattro le pagine interne. Non era una questione di ordine: era alta
     ZERO. `.hero2__media` e `flex: 1 1 0`, e in una colonna il `flex-basis`
     governa l'ALTEZZA: base 0, e siccome la riga non ha piu un'altezza da
     distribuire, il grow non ha niente da far crescere. L'`aspect-ratio` non
     entrava mai in gioco perche serve una delle due misure per calcolare
     l'altra, e qui non c'era.
     Con `flex: 0 0 auto` l'altezza torna a essere quella dell'aspect-ratio
     sulla larghezza piena della colonna. Misurato: da 0 a 260px a 390.
     ⚠️ L'`order: -1` che portava l'immagine in cima e stato tolto solo sotto
     i 768 (vedi il blocco mobile): da 768 a 1023 la colonna e larga
     abbastanza perche l'immagine in cima faccia da gancio. */
  .hero2__media {
    flex: 0 0 auto;
    order: -1;
    aspect-ratio: 3 / 2;
  }

  .hero2 { padding-top: 131px; }      /* 91 + 40 */

  /* I quadrati sono tarati su una sezione alta 1051: il centro sta a
     `50% + 428.65px`. Su una sezione molto piu corta quel centro finisce
     sotto il bordo inferiore e resta visibile solo uno spigolo. */
  .hero2 { --hero2-pattern-scala: .62; --hero2-pattern-y: 34%; }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero2 {
    padding-top: 123px;               /* 91 + 32 */
    padding-bottom: 48px;
    --hero2-pattern-scala: .42;
    --hero2-pattern-y: 30%;
  }

  .hero2__descrizione { gap: var(--space-4); }

  /* 24/29 su una colonna da 327px sono righe di ~28 caratteri: si legge, ma
     il blocco diventa altissimo. 20/26 e il compromesso. */
  .hero2__testo { font-size: 20px; line-height: 26px; }
  .hero2__paragrafi { gap: 26px; }    /* resta «una riga vuota» */

  /* ⚠️ IL PULSANTE A PIENA LARGHEZZA, richiesta di Andrea. Su una colonna da
     327px un pulsante che hugga la propria etichetta e piccolo e fuori
     asse; a piena larghezza e il primo bersaglio della pagina.
     ⚠️ Resta a 767 e NON sale al tablet: li la colonna e larga 688 e un
     pulsante largo altrettanto sembrerebbe una fascia, non un pulsante.
     Andrea per il tablet ha chiesto di centrarlo, non di allargarlo. */
  .hero2__descrizione .btn {
    width: 100%;
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · L'IMMAGINE SOTTO IL TESTO, E IL TESTO CENTRATO

   ⚠️ 7 set 2026, poi esteso al tablet l'8. Segnalato da Andrea prima sul
   telefono («manca l'immagine dopo la cta») e il giorno dopo per la fascia
   768-1024 («spostare l'immagine sotto la CTA», «centrare titolo, paragrafo
   e CTA»), su tutte le pagine tranne la Home.

   L'immagine non mancava: l'`order: -1` del blocco 1023 qui sopra la portava
   IN CIMA, sopra il titolo. Chi scorre la incontra prima di sapere di che
   pagina si tratta, e dopo il pulsante non trova piu niente — quindi sembra
   sparita. Era una mia scelta di riflusso, non del mockup: l'ordine giusto e
   quello del mockup, titolo → testo → pulsante → immagine.

   `align-items` oltre a `text-align` perche i figli sono flex item: senza,
   il pulsante resterebbe incollato a sinistra mentre il testo si centra.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero2__media {
    order: 0;
  }

  .hero2__col,
  .hero2__descrizione {
    align-items: center;
    text-align: center;
  }
}


/* Il rapporto 4/3 vale solo sul telefono: su tablet la colonna e larga il
   doppio e il 3/2 del blocco 1023 e gia giusto. */
@media (max-width: 767px) {
  .hero2__media { aspect-ratio: 4 / 3; }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .hero2 {
    padding-top: 115px;               /* 91 + 24 */
    --hero2-pattern-scala: .34;
  }

  /* ⚠️ 7 set 2026 — ERA `width: auto`, con la nota «a piena larghezza
     sembrerebbe una barra». Andrea ha chiesto il contrario, ed e la stessa
     scelta gia fatta per il pulsante dell'Hero della Home: sul telefono la
     CTA e a piena larghezza. La regola dei 767 qui sopra vale anche qui, e
     questa riga non serve piu. */
}