/* ==========================================================================
   Blocco condiviso — LE DOMANDE
   Monitoring & Reporting `Benefits` 113:1825 · 1512 x 955

   ⚠️ Il layer si chiama `Benefits` come la pila 123:2937. Non e la stessa
   sezione e non ha niente in comune con lei: vedi spec §4.7 punto 6.

   Verifica altezza: 160 + 635 + 160 = 955 ✔
     colonna destra = 109 + 8 + 109 + 8 + 109 + 8 + 138 + 8 + 138 = 635 ✔
     card a una riga = 40 + 29 + 40           = 109 ✔
     card a due righe = 40 + 29 + 29 + 40     = 138 ✔
   Le due colonne sono `flex: 1 0 0` su 1432 - 80 di gap = 676 ciascuna ✔

   ⚠️ Le altezze delle card NON vanno fissate: 109 e 138 escono dal fatto che
   le domande 4 e 5 vanno su due righe. Fissarle vorrebbe dire ridichiararle a
   ogni cambio di testo.
   ========================================================================== */

.domande__row {
  flex-direction: row;
  align-items: stretch;                  /* entrambe le colonne alte 635 */
  gap: var(--space-6);                   /* 80 — NON i 16 della griglia */
  width: var(--container-width);
}

/* --- Colonna sinistra 113:1827 -------------------------------------------
   space-between: il blocco di testo in alto, la coppia di pulsanti in fondo,
   a filo con l'ultima card della colonna destra.
-------------------------------------------------------------------------- */
.domande__colonna {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

/* Text 113:1855 — 676 x 208: 116 (titolo su due righe) + 16 + 76 (lead su
   quattro righe). */
.domande__testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);                   /* 16 */
  width: 100%;
}

/* ⚠️ Allineato a SINISTRA, non centrato: insieme a `How Works` e l'unica
   sezione della pagina con l'intestazione a bandiera. */
.domande__titolo {
  width: 100%;
  color: var(--text-on-light);
  text-align: left;
}

.domande__lead {
  width: 100%;
  color: var(--text-on-light-muted);
  text-align: left;
}

/* --- Colonna destra: la lista 113:1832 -----------------------------------
   `overflow: clip` in Figma, ma non c'e niente da tagliare: la somma delle
   card e esattamente l'altezza del contenitore.
-------------------------------------------------------------------------- */
.domande__lista {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                   /* 8 */
  counter-reset: domanda;
}

/* --- La card 113:1833 e gemelle ------------------------------------------
   ⚠️ Il gradiente NON e della famiglia --gradient-card-why-*: i colori sono
   invertiti (scuro -> chiaro) e l'asse e quasi orizzontale. Vedi il token.
-------------------------------------------------------------------------- */
.domanda {
  counter-increment: domanda;
  position: relative;
  padding: var(--space-5);               /* 40 su tutti e quattro i lati */
  /* Il rientro di 36 e quello del marcatore in Figma: il numero resta fuori
     dal testo, che si allinea su una sola colonna anche quando va a capo. */
  padding-left: calc(var(--space-5) + 36px);
  border-radius: var(--radius-lg);
  background: var(--gradient-card-domanda);
  color: var(--text-on-dark);
}

.domanda::before {
  content: counter(domanda) ".";
  position: absolute;
  left: var(--space-5);
  top: var(--space-5);
}