/* ==========================================================================
   Outcome — 32:1384 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, NON una misura di Figma. Quando arriveranno i frame
   mobile questo file si sostituisce in blocco.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la sezione
   resta identica al mockup (1512 x 1054: head 1432x116, cards 1432x458,
   scaletta 458/378/298 + quarta card stretch top-anchored).

   ---------------------------------------------------------------------------
   IL PUNTO DELICATO: LA SCALETTA

   A desktop le prime tre card hanno altezza fissa calante (458 / 378 / 298)
   e testo ancorato in basso (justify-content: flex-end): le tre basi
   disegnano una diagonale che sale da sinistra a destra, e i tre border-right
   la accompagnano perche corrono per tutta l'altezza della card. La quarta
   card fa il contrario — stretch a 458 e testo ancorato in ALTO, senza bordo —
   e chiude la diagonale risalendo di colpo in cima.

   Quella diagonale esiste solo perche le quattro colonne sono adiacenti e
   lette in orizzontale. Appena la riga si spezza (2 colonne, poi 1) non c'e
   piu nessuna diagonale da leggere: restano solo altezze fisse arbitrarie che
   (a) aprono buchi vuoti sopra i testi ancorati in basso e (b) tagliano il
   testo quando la card si stringe e il contenuto supera l'altezza imposta.

   SCELTA MIA: sotto i 1280 la scaletta si scioglie completamente.
   Le altezze fisse vengono rilasciate (height: auto) e TUTTE e quattro le
   card passano a testo ancorato in alto — cioe adottano il comportamento
   della quarta card, l'unica gia top-anchored a desktop. Cosi le card
   tornano omogenee fra loro invece di essere tre-contro-una, i titoli si
   allineano sul filo superiore di ogni riga (l'unico allineamento che ha
   senso quando le card si impilano) e ogni card e alta quanto il suo
   contenuto, a qualsiasi larghezza.
   Fra 1280 e 1511 la riga e ancora a 4 colonne adiacenti: li la scaletta si
   conserva, ma le altezze diventano min-height cosi il testo puo crescere
   oltre i 458/378/298 senza traboccare.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1511 · Desktop compresso — la sezione diventa fluida
   Le due larghezze fisse da 1432 (head e riga card) e i 346 del paragrafo
   laterale erano quote della griglia di Figma: diventano percentuali.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .outcome__head,
  .outcome__cards {
    width: 100%;                 /* era var(--container-width) = 1432 */
  }

  /* 346 / 1432 = 24.16%: il rapporto titolo/paragrafo di Figma si conserva
     a qualsiasi larghezza invece di restare inchiodato a 346px. */
  .outcome__lead {
    width: 24.16%;
    min-width: 0;
  }

  /* Le tre altezze della scaletta da fisse a MINIME: la diagonale resta
     (il contenuto a queste larghezze e ancora piu basso dei box Figma) ma
     se una card cresce si allunga invece di far tracimare il testo fuori
     dal proprio box. */
  .outcome-card--h458,
  .outcome-card--h378,
  .outcome-card--h298 {
    height: auto;
    min-height: 458px;
  }
  .outcome-card--h378 { min-height: 378px; }
  .outcome-card--h298 { min-height: 298px; }
}


/* --------------------------------------------------------------------------
   <= 1279 · Laptop — 4 colonne -> 2, e la scaletta si scioglie
   Vedi la nota in testa al file: senza quattro colonne adiacenti la diagonale
   non e piu leggibile, quindi altezze libere e testo in alto per tutte.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .outcome__cards {
    flex-wrap: wrap;
    row-gap: var(--space-5);     /* 40px MIO: aria fra le due righe di card */
  }

  /* 50% meno meta gutter: due card per riga con lo stesso gap 16 di Figma. */
  .outcome-card {
    flex: 0 0 calc(50% - (var(--grid-gap) / 2));
  }

  /* Scioglimento della scaletta */
  .outcome-card--h458,
  .outcome-card--h378,
  .outcome-card--h298 {
    height: auto;
    min-height: 0;
    justify-content: flex-start; /* era flex-end: testo ancorato in basso */
  }
  .outcome-card--top {
    align-self: flex-start;      /* era stretch: non serve piu pareggiare la riga */
  }

  /* Separatori: fra le due colonne resta la riga verticale, ma solo sulla
     card di sinistra. Sulla card di destra il border-right cadrebbe sul
     bordo esterno del contenitore, dove a Figma non c'e nessuna linea. */
  .outcome-card:nth-child(odd) {
    border-right: var(--stroke-hairline);
  }
  .outcome-card:nth-child(even) {
    border-right: 0;
    padding-right: 0;            /* il padding-right 40 era il respiro del bordo */
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — testa impilata
   Titolo e paragrafo laterale a desktop sono allineati sulla stessa BASE:
   e un allineamento che esiste solo se stanno affiancati. Impilati, il
   paragrafo torna semplicemente sotto al titolo.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .outcome__head {
    flex-direction: column;
    align-items: flex-start;     /* era flex-end: allineamento sulle basi */
    gap: var(--space-3);         /* 16px MIO: era 0, in colonna serve stacco */
  }
  .outcome__lead { width: 100%; }

  /* 160px fra testa e card sono un terzo di schermo su tablet. 64 e MIO. */
  .outcome { gap: 64px; }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile — colonna singola, separatori verticali -> orizzontali
   Impilate una sull'altra le card non hanno piu un vicino a destra: il
   border-right diventa un border-bottom fra una card e la successiva.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .outcome { gap: 48px; }        /* MIO */

  .outcome__cards {
    flex-direction: column;
    row-gap: var(--space-4);     /* 32px MIO */
  }

  /* Tutte a piena larghezza, nessun padding-right: il rientro da 40 serviva
     a staccare il testo dal separatore verticale, che qui non esiste piu. */
  .outcome-card,
  .outcome-card:nth-child(odd),
  .outcome-card:nth-child(even) {
    flex: 0 0 auto;
    width: 100%;
    padding-right: 0;
    border-right: 0;
  }

  /* Il separatore diventa orizzontale; l'ultima card non lo prende, come a
     desktop la quarta non prendeva il border-right. */
  .outcome-card:not(:last-child) {
    border-bottom: var(--stroke-hairline);
    padding-bottom: var(--space-4);   /* 32px MIO: respiro sopra la linea */
  }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .outcome { gap: 40px; }                             /* MIO */
  .outcome__cards { row-gap: var(--space-4); }
  .outcome-card:not(:last-child) { padding-bottom: var(--space-3); }  /* 16px MIO */
}