/* ==========================================================================
   Blocco condiviso — SCHEDE FOTO
   MRF `Usa Cases` 85:5488 · 1512 x 2122

   ⚠️ RIFATTO IL 7 SET 2026 sul mockup aggiornato (frame `Cards` 323:8416).
   Richiesta di Andrea: «Sezione Use Cases — rivedere il layout come da
   Figma». Prima erano due colonne di riquadri 708x600 col testo dentro la
   foto; adesso sono cinque RIGHE affiancate foto + testo, che si scambiano
   di lato a ogni riga.

   Verifica altezza: 160 + 58 (titolo) + 80 + 1664 (righe) + 160 = 2122 ✔
     righe = 5 x 320 + 4 x 16 = 1664 ✔
     riga  = 600 (foto) + 16 + 816 (testo) = 1432 ✔
     testo = padding orizzontale 40 -> colonna di 736 ✔

   Il testo e centrato in verticale nei 320: nel mockup il blocco titolo +
   paragrafo e alto 88 (due righe di corpo) oppure 107 (tre), e in tutti e
   due i casi lo spazio sopra e sotto e uguale.
   ========================================================================== */

/* ⚠️ Il gap va sul `.container`, non sulla sezione: la sezione ha un figlio
   solo (il container appunto) e li un gap non separa niente. */
.schede > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);                  /* 80 fra titolo e righe */
}

.schede__titolo {
  width: 100%;
  color: var(--text-on-dark);
  text-align: center;
}

.schede__griglia {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);                 /* 16 fra una riga e l'altra */
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- La riga: foto e testo affiancati ------------------------------------ */
.scheda {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--grid-gap);                 /* 16 */
  width: 100%;
  height: 320px;
}

/* ⚠️ LO SCAMBIO DI LATO E QUI, non nel markup. Nelle righe pari la foto va a
   destra. Si usa `order` e non due varianti di marcatura: l'ordine di lettura
   resta sempre foto-poi-testo per chi usa un lettore di schermo, e chi
   aggiunge una riga non deve ricontrollare i lati di tutte le altre. */
.scheda:nth-child(even) .scheda__media {
  order: 2;
}

/* Foto 600 x 320. Larghezza FISSA perche e il testo a doversi adattare: se
   fossero due flessibili, un testo lungo si mangerebbe la foto. */
.scheda__media {
  flex: 0 0 600px;
  max-width: 600px;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.scheda__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Testo 816 x 320 — quel che resta della riga. Fondo Color/Tertiaty/400. */
.scheda__testo {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--color-tertiary-400);   /* #29384d */
  padding-inline: var(--space-5);          /* 40 -> colonna di testo 736 */
  display: flex;
  flex-direction: column;
  justify-content: center;                 /* centrato in verticale */
  align-items: flex-start;
  gap: var(--space-3);                     /* 16 fra titolo e paragrafo */
}

.scheda__titolo,
.scheda__corpo {
  width: 100%;
}

/* Nel mockup il titolo e su una riga sola, dichiarato `nowrap`. Lo lascio
   andare a capo: con testi piu lunghi dell'ACF — e in italiano, che e piu
   lungo dell'inglese — un nowrap sborderebbe dalla card. */
.scheda__titolo { color: var(--text-on-dark); }
.scheda__corpo  { color: var(--text-on-dark-muted); }