/* ==========================================================================
   Maintenance — `Hero` 55:347 · responsive
   PROVVISORIO. Nessuna riga fuori da @media.
   ========================================================================== */

/* --- <= 1511 · l'immagine perde l'altezza fissa --------------------------- */
@media (max-width: 1511px) {
  .mnt-hero__media {
    height: auto;
    aspect-ratio: 676 / 800;
  }
}

/* --- <= 1279 · il titolo smette di essere `nowrap` ------------------------
   I tre a-capo del mockup sono espliciti nel testo, ma "Know when to act."
   a 64px e larga 476px: sotto i 1280 la colonna non ce la fa piu e il
   `nowrap` produrrebbe scroll orizzontale. Il testo torna a fluire e gli
   a-capo restano dove capita — accettabile su tre frasi cosi corte. */
@media (max-width: 1279px) {
  .mnt-hero__titolo { white-space: normal; }
}

/* --- <= 1023 · una colonna -----------------------------------------------
   Immagine sopra, testo sotto: su schermo stretto l'immagine e il gancio,
   e il titolo a 64px accanto a un'immagine larga meno di 400px non funziona.
   Il padding-top scende perche 171 servivano a scavalcare l'header
   sovrapposto, che resta alto 91 ma sopra un contenuto molto piu corto. */
@media (max-width: 1023px) {
  .mnt-hero__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }

  .mnt-hero__col {
    align-self: auto;
    gap: var(--space-5);
  }

  .mnt-hero__media {
    order: -1;
    aspect-ratio: 3 / 2;
  }

  .mnt-hero { padding-top: 131px; }
}

@media (max-width: 767px) {
  .mnt-hero { padding-top: 115px; padding-bottom: 48px; }
  .mnt-hero__descrizione { gap: var(--space-4); }
}