/* ==========================================================================
   Blocco condiviso — BENEFITS
   Maintenance `The Difference` 55:875 · 1512 x 1897
   Ricompare (con altro titolo e altre card) su Compliance, MRF e Monitoring,
   dove il layer Figma si chiama `Benefits`.

   Struttura: titolo centrato + N card a piena larghezza in cui immagine e
   testo si ALTERNANO destra/sinistra. L'alternanza e :nth-child(even), non
   una variante per card: aggiungerne o toglierne una non richiede modifiche.

   Verifica altezza (Maintenance, 4 card):
     160 (padding) + 169 (testo) + 80 (gap) + 1328 (card) + 160 = 1897 ✔
     card = 4 x 320 + 3 x 16 = 1328 ✔
   ========================================================================== */

.benefits__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);            /* 16 */
  text-align: center;
  width: 100%;
}

.benefits__titolo {
  color: var(--text-on-dark);
}

.benefits__testo {
  color: var(--text-on-dark-muted);
}

/* --- L'elenco delle card -------------------------------------------------- */
.benefits__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);            /* 16 */
  width: 100%;
  margin-top: var(--space-6);     /* 80 — il gap fra Text e Cards in Figma */
}

/* --- La singola card ------------------------------------------------------
   Riga di due blocchi: immagine 600x320 fissa + testo che si prende il resto.
   `align-items: stretch` fa si che il pannello di testo sia alto quanto
   l'immagine, come in Figma (`h-full` + `justify-center`).
-------------------------------------------------------------------------- */
.benefit {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);            /* 16 */
  width: 100%;
}

/* Le card pari invertono l'ordine: immagine a destra.
   Con `row-reverse` l'ordine del DOM resta immagine -> testo su tutte,
   quindi da tastiera e da screen reader la lettura e sempre la stessa. */
.benefit:nth-child(even) {
  flex-direction: row-reverse;
}

.benefit__media {
  flex: 0 0 600px;
  width: 600px;
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.benefit__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.benefit__testo {
  flex: 1 1 0;
  min-width: 0;                   /* senza, il testo lungo sfonda la riga */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);            /* 16 */
  padding: var(--space-5);        /* 40 */
  border-radius: var(--radius-lg);
  background: var(--color-tertiary-400);
}

.benefit__titolo {
  color: var(--text-on-dark);
}

.benefit__corpo {
  color: var(--text-on-dark-muted);
}

/* ⚠️ In Figma SOLO il pannello di testo della prima card ha una
   `drop-shadow(0 0 5px rgba(0,0,0,.25))`. Le altre tre no. E quasi
   certamente una svista del mockup — un'ombra su una card sola, per giunta
   invisibile su fondo scuro — quindi non la riproduco. Se il cliente la
   vuole davvero su tutte, basta togliere il commento qui sotto.

.benefit__testo { filter: drop-shadow(0 0 5px rgb(0 0 0 / .25)); }
*/