/* ==========================================================================
   Blocco SCHEDE FOTO — responsive
   PROVVISORIO. Il mockup mobile non esiste. Nessuna riga fuori da @media.

   ⚠️ RIFATTO IL 7 SET 2026 insieme al blocco: prima erano due colonne di
   riquadri 708x600 col testo dentro la foto, adesso sono righe con foto e
   card di testo affiancate (vedi blocchi/schede-foto.css). Il vecchio velo
   sulla fotografia non esiste piu, e con lui la regola che lo scuriva.

   A 1512 la riga resta quella del mockup: 600 di foto + 16 + 816 di testo,
   alta 320.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1279 · Laptop
   La riga si stringe e il testo cresce: 320px fissi taglierebbero il
   paragrafo. L'altezza diventa un minimo e la decide il contenuto, mentre la
   foto smette di essere larga 600 fissi e prende una quota della riga.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .scheda {
    height: auto;
    min-height: 280px;
  }

  /* 600 / 1432 = 41.9% — la stessa proporzione del mockup, senza il valore
     fisso che a 1024 lascerebbe al testo meno di 400px. */
  .scheda__media {
    flex: 0 0 41.9%;
    max-width: 41.9%;
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .schede > .container { gap: var(--space-5); }   /* 80 -> 40 */
  .scheda { min-height: 240px; }
  .scheda__testo { padding-inline: var(--space-4); }  /* 40 -> 32 */
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile — foto sopra, testo sotto
   Affiancati non stanno: a 390px la foto sarebbe larga 140 e la colonna di
   testo 180. Si impilano, e con loro cade anche lo scambio di lato — su una
   colonna sola «destra» e «sinistra» non vogliono dire niente, e lasciare
   l'`order` farebbe apparire il testo prima della foto a righe alterne.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .scheda {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .scheda:nth-child(even) .scheda__media {
    order: 0;
  }

  /* La foto tiene la proporzione del mockup (600x320) invece di un'altezza
     fissa: cosi il taglio e lo stesso a ogni larghezza. */
  .scheda__media {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 600 / 320;
  }

  .scheda__testo {
    padding: var(--space-4);                     /* anche sopra e sotto */
  }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .scheda__testo { padding: 24px; }
}