/* ==========================================================================
   Maintenance — `Outcome` 63:328 · responsive

   PROVVISORIO: riflussi miei, il mockup mobile non esiste.
   REGOLA INVIOLABILE: nessuna riga fuori da @media.
   ========================================================================== */

/* --- <= 1511 · le due colonne diventano proporzionali ---------------------
   696 / 1432 = 48.6%. Il gap fisso di 320px va invece rilasciato: serviva a
   far finire i pulsanti in fondo ai 595px del mockup, ma sotto i 1512 la
   colonna destra cresce (le domande vanno a capo) e 320 diventerebbe un buco
   arbitrario. Al suo posto: le due colonne si allineano in altezza e la
   sinistra distribuisce titolo e pulsanti agli estremi — stesso effetto,
   ottenuto dalla struttura invece che da un numero. */
@media (max-width: 1511px) {
  .mnt-outcome__container {
    align-items: stretch;
    gap: var(--space-3);
  }

  .mnt-outcome__testo {
    flex: 0 1 48.6%;
    width: 48.6%;
    gap: var(--space-6);
    justify-content: space-between;
  }

  .mnt-outcome__cards {
    height: auto;
    gap: 12.5px;              /* il passo del mockup, ora esplicito */
  }

  .mnt-outcome__media {
    height: auto;
    aspect-ratio: 1432 / 800;
  }
}

/* --- <= 1023 · una colonna sola -------------------------------------------
   Affiancare un titolo a 48px e cinque card a 24px sotto i 1024 lascia a
   entrambi una colonna troppo stretta. L'ordine e quello del DOM: prima la
   domanda ("cosa serve sapere"), poi le cinque risposte, poi i pulsanti.

   ⚠️ Qui i pulsanti si spostano DOPO le card con `order`: e l'unico punto del
   progetto in cui lo uso, e la ragione e che in colonna la coppia di bottoni
   fra il titolo e l'elenco spezzerebbe la lettura. L'ordine di tabulazione
   cambia, ma i pulsanti restano gli ultimi elementi interattivi della
   sezione, quindi non si crea nessuna trappola per la tastiera. */
@media (max-width: 1023px) {
  .mnt-outcome__container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }

  .mnt-outcome__testo {
    flex: 0 0 auto;
    width: 100%;
    gap: var(--space-5);
    display: contents;        /* titolo e pulsanti diventano figli diretti */
  }

  .mnt-outcome__titolo { order: 1; }
  .mnt-outcome__cards  { order: 2; }
  .mnt-outcome__container > .mnt-outcome__testo .btn-group { order: 3; }

  .mnt-outcome-card {
    padding: var(--space-4);  /* 32 */
  }
}

/* --- <= 767 · mobile ------------------------------------------------------ */
@media (max-width: 767px) {
  .mnt-outcome__cards {
    gap: var(--space-2);      /* 8: a schermo stretto 12.5 sembrava casuale */
  }

  .mnt-outcome__media {
    margin-top: 48px;         /* era 80 */
  }
}

/* --- < 480 · mobile stretto ---------------------------------------------- */
@media (max-width: 479px) {
  .mnt-outcome-card {
    padding: 24px;
    gap: var(--space-2);
  }
}