/* ==========================================================================
   Maintenance — `Outcome` 63:328 · 1512 x 1795

   ⚠️ NON e la `Outcome` della Home. Stesso nome nel mockup, struttura
   completamente diversa: qui e testo a sinistra + cinque card numerate a
   destra, con un'immagine a piena larghezza sotto. Non riusare
   css/sections/07-outcome.css.

   Verifica altezza:
     160 + 595 (container) + 80 (gap) + 800 (immagine) + 160 = 1795 ✔
   Colonna sinistra: 232 (testo) + 320 (gap) + 43 (pulsanti) = 595 ✔
   Colonna destra:   5 x 109 + 4 x 12.5 = 545 + 50 = 595 ✔
   ========================================================================== */

.mnt-outcome__container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

/* --- Colonna sinistra -----------------------------------------------------
   Il gap di 320px non e un capriccio: e quello che fa finire i pulsanti
   esattamente in fondo ai 595px della colonna destra. Non e `space-between`
   perche in Figma il valore e dichiarato, e su viewport diverse un
   space-between darebbe un risultato diverso. */
.mnt-outcome__testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 320px;
  width: 696px;
  flex: 0 0 696px;
}

.mnt-outcome__titolo {
  color: var(--text-on-light);
}

/* --- Colonna destra: le cinque domande ------------------------------------
   `justify-content: space-between` su 595px di altezza produce i 12,5px di
   gap del mockup senza doverli scrivere: sono il resto della divisione, e se
   un giorno le domande diventano quattro o sei si ridistribuiscono da sole.
-------------------------------------------------------------------------- */
.mnt-outcome__cards {
  flex: 1 1 0;
  min-width: 0;
  height: 595px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: clip;
  /* Azzera lo stile di lista: la numerazione la disegna ::before, cosi il
     numero sta DENTRO la card come in Figma e non nel margine. */
  list-style: none;
  counter-reset: domanda;
  margin: 0;
  padding: 0;
}

.mnt-outcome-card {
  counter-increment: domanda;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: var(--space-5);            /* 40 */
  border-radius: var(--radius-lg);
  background: var(--gradient-card-outcome);
  color: var(--text-on-dark);
}

/* Il numero. 36px di larghezza e l'indentazione della lista in Figma
   (`ms-[36px]` sul <li>): qui diventa la colonna del marcatore. */
.mnt-outcome-card::before {
  content: counter(domanda) ".";
  flex: 0 0 auto;
  min-width: 24px;
  font-variant-numeric: tabular-nums;
}

/* --- Immagine a piena larghezza -------------------------------------------
   ⚠️ `contain`, non `cover`: come l'immagine di Core Capabilities sulla Home,
   questa non viene ritagliata. Se il rapporto non e 1432:800 (1.79:1)
   restano bande vuote — e il comportamento voluto dal mockup.
-------------------------------------------------------------------------- */
.mnt-outcome__media {
  width: 100%;
  height: 800px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-6);         /* 80 */
}

.mnt-outcome__media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}