/* ==========================================================================
   Blocco BENEFITS — responsive

   PROVVISORIO come tutta questa cartella: il mockup mobile non esiste, questi
   sono riflussi miei. REGOLA INVIOLABILE: nessuna riga fuori da @media.
   A >= 1512 il blocco resta identico a Figma (immagine 600x320, testo fluido).
   ========================================================================== */

/* --- <= 1511 · l'immagine smette di essere 600 fissi ----------------------
   600 / 1432 = 41.9% del contenitore. Tenendola in percentuale, il rapporto
   fra immagine e testo resta quello del mockup mentre la pagina si stringe.
   L'altezza passa da 320 fissi al rapporto 600:320 (1.875:1), cosi non si
   deforma; il pannello di testo si adegua con `align-items: stretch`. */
@media (max-width: 1511px) {
  .benefit__media {
    flex: 0 0 41.9%;
    width: 41.9%;
    height: auto;
    aspect-ratio: 600 / 320;
  }
}

/* --- <= 1279 · il testo ha bisogno di piu spazio -------------------------
   A 1280 l'immagine al 41.9% e 500px e al pannello ne restano 700: il titolo
   a 28px ci sta, ma il corpo va su 5-6 righe e la card cresce oltre
   l'immagine. Riducendo l'immagine a un terzo il rapporto si riequilibra.
   MIO, non da Figma. */
@media (max-width: 1279px) {
  .benefit__media {
    flex: 0 0 34%;
    width: 34%;
  }
}

/* --- <= 1023 · immagine sopra, testo sotto -------------------------------
   Affiancare un'immagine e un paragrafo sotto i 1024 lascia al testo una
   colonna troppo stretta. La card diventa verticale, nell'ordine del DOM
   (immagine, poi testo) — e per questo l'alternanza usa `row-reverse` e non
   `order`: qui basta annullarla e l'ordine di lettura e gia giusto.
   L'immagine si allarga e si abbassa a 2:1: a piena larghezza il 1.875:1 del
   mockup diventa una fascia troppo alta. */
@media (max-width: 1023px) {
  .benefit,
  .benefit:nth-child(even) {
    flex-direction: column;
  }

  .benefit__media {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 2 / 1;
  }

  .benefit__testo {
    padding: var(--space-4);       /* 32 invece di 40 */
  }
}

/* --- <= 767 · mobile ------------------------------------------------------ */
@media (max-width: 767px) {
  .benefit__media {
    aspect-ratio: 3 / 2;           /* piu alta: su schermo stretto 2:1 e una fessura */
  }

  .benefits__cards {
    margin-top: 48px;              /* era 80 */
  }
}

/* --- < 480 · mobile stretto ---------------------------------------------- */
@media (max-width: 479px) {
  .benefit__testo {
    padding: 24px;                 /* stesso valore usato dalle altre card */
  }
}