/* ==========================================================================
   Blocco condiviso — COPPIA DI CARD DI SOLO TESTO
   Become a partner `How What` 85:7441 · 1512 x 711

   Verifica altezza: 160 + 391 + 160 = 711 ✔
     card = 80 + 58 (titolo) + 40 + 133 (paragrafo piu lungo) + 80 = 391 ✔
     larghezza card = (1432 - 16) / 2 = 708 ✔
     larghezza utile del testo = 708 - 160 = 548 ✔

   ⚠️ Nessuna altezza fissa: i 391 escono dalla card col testo piu lungo, e
   l'altra si pareggia con `align-items: stretch`. E' anche quello che fa
   Figma, che pero lo dichiara solo su una delle due.
   ========================================================================== */

.coppia {
  padding-block: var(--space-7);          /* 160 */
  background: var(--color-neutral-100);   /* #f5f5f5 */
}

.coppia__riga {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: var(--grid-gap);                   /* 16 */
  width: 100%;
}

.coppia-card {
  flex: 1 0 0;
  min-width: 0;
  padding: var(--space-6);                /* 80 */
  border-radius: var(--radius-lg);
  /* ⚠️ Scuro a sinistra e piu chiaro a destra: e la famiglia di
     --gradient-card-core e --gradient-card-outcome, NON quella delle Why
     Card, che ha gli stessi due colori nell'ordine opposto. */
  background: var(--gradient-card-how-what);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);                    /* 40, minimo fra titolo e testo */
}

.coppia-card__titolo { width: 100%; color: var(--text-on-dark); }

.coppia-card__testo {
  width: 100%;
  color: var(--text-on-dark-muted);
}

/* La riga vuota fra i due capoversi e alta quanto una riga di testo: e cosi
   che il mockup separa i paragrafi, con un a-capo, non con un margine. */
.coppia-card__testo > p { margin: 0; }
.coppia-card__testo > p + p { margin-top: var(--type-body-lh); }