/* ==========================================================================
   Outcome — 32:1384 · 1512 x 1054
   Flusso verticale: 160 + 116 (Text) + 160 (gap) + 458 (Cards) + 160
   Base .section + .section--narrative (padding 160/40, column, align center).
   ========================================================================== */

.outcome {
  gap: var(--space-7);                     /* 160px — gap dell'auto-layout 32:1384 */
  background: var(--color-neutral-100);    /* #f5f5f5, tinta piatta */
  color: var(--text-on-light);
}

/* --- Text 32:1387 — 1432 x 116 --------------------------------------------
   row, align-items: flex-end (le BASI di titolo e paragrafo coincidono a
   116), justify-content: space-between, gap 0. Titolo flex:1 -> 1086px,
   paragrafo largo 346px fisso. 1086 + 346 = 1432: nessuno spazio residuo.

   ATTENZIONE — DUPLICAZIONE DA UNIFICARE: questo e lo stesso pattern
   "titolo largo + paragrafo laterale allineati sulla base" per cui un'altra
   sezione sta introducendo `.section-head--split` in components.css.
   Qui e definito in locale di proposito per non toccare i file condivisi:
   quando la classe condivisa esistera, sostituire .outcome__head con essa. */
.outcome__head {
  width: var(--container-width);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0;
}

/* Titolo 32:1389 — 48/58, #00122b, box 1086 x 116 (2 righe da <br> manuale) */
.outcome__h2 {
  flex: 1 0 0;
  min-width: 0;
  color: var(--color-tertiary);
  text-align: left;
}

/* Paragrafo 32:1390 — 16/19, #525e6f, box 346 x 95 (5 righe, wrap automatico) */
.outcome__lead {
  flex: 0 0 auto;
  width: var(--col-1);                     /* 346px */
  color: var(--color-tertiary-300);
  text-align: left;
}

/* --- Cards 32:1432 — 1432 x 458 -------------------------------------------
   row, align-items: flex-start, gap 16. Le 4 card sono flex: 1 0 0
   (in Figma 346.25 / 346.25 / 346.25 / 345.25 per arrotondamento).
   L'altezza della riga (458) e imposta dalla prima card. */
.outcome__cards {
  width: var(--container-width);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--grid-gap);                    /* 16px */
}

/* --- Card 32:1427 / 32:1428 / 32:1433 / 32:1436 ---------------------------
   column, align-items flex-start, gap 8, padding-right 40 (top/left/bottom 0),
   nessun fill, nessun radius, nessun effetto. */
.outcome-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);                     /* 8px */
  padding: 0 var(--space-5) 0 0;           /* solo padding-right 40 */
}

/* Card 1-3: ALTEZZA FISSA + testi ancorati in basso (justify-content:
   flex-end). Le tre altezze calano di 80px alla volta, quindi le basi dei
   testi formano la scaletta 458 -> 378 -> 298. Non e un align-items:flex-end
   di riga. Il border-right corre per tutta l'altezza della card, quindi anche
   i separatori seguono la stessa scaletta. */
.outcome-card--h458,
.outcome-card--h378,
.outcome-card--h298 {
  justify-content: flex-end;
  border-right: var(--stroke-hairline);    /* 1px solid #e8e8e8 */
}
.outcome-card--h458 { height: 458px; }
.outcome-card--h378 { height: 378px; }
.outcome-card--h298 { height: 298px; }

/* Card 4 32:1436: nessuna altezza propria, align-self: stretch (quindi 458
   come la riga) e testi ancorati in ALTO. Nessun bordo: e l'ultima. */
.outcome-card--top {
  align-self: stretch;
  justify-content: flex-start;
  border-right: 0;
}

/* Titoli card — 24/29, #00122b, sempre 2 righe (58px), box 305.25px */
.outcome-card__title {
  width: 100%;
  color: var(--color-tertiary);
  text-align: left;
}

/* Body card — 16/19, #525e6f, box 305.25px */
.outcome-card__body {
  width: 100%;
  color: var(--color-tertiary-300);
  text-align: left;
}