/* ==========================================================================
   Blocco LE DOMANDE — responsive
   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui e una mia scelta
   di riflusso. Nessuna riga fuori da @media.

   A >= 1512 la sezione resta identica al mockup: due colonne da 676 con 80 di
   gap, colonna sinistra in space-between, cinque card che sommano 635 esatti.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1511 · Desktop compresso
   Le uniche larghezze fisse sono i 1432 della riga: si sciolgono e il resto
   e gia in `flex: 1 0 0`.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .domande__row { width: 100%; }
}


/* --------------------------------------------------------------------------
   <= 1279 · Laptop — si accorcia il gap fra le colonne
   80px su due colonne da ~540 sono un quindicesimo della pagina buttato.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .domande__row { gap: var(--space-5); }        /* 80 -> 40, MIO */
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — le due colonne si impilano
   A 1023 la colonna e larga ~470: una domanda da 24px ci sta su tre righe e
   la coppia di pulsanti (405) sfonderebbe. Sotto, in colonna, il testo sta in
   cima e le domande subito dopo — che e anche l'ordine di lettura.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .domande__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);                        /* 40, MIO */
  }

  /* Impilate non c'e piu niente da allineare in fondo: il space-between
     lascerebbe i pulsanti a mezz'aria. */
  .domande__colonna { justify-content: flex-start; }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   40 di padding su una card larga ~330 lascerebbero 250 di testo per una
   domanda da 24px: quattro righe. Si stringe il padding e con lui il rientro
   del numero.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .domanda {
    padding: var(--space-4);                    /* 40 -> 32, MIO */
    padding-left: calc(var(--space-4) + 28px);
  }
  .domanda::before {
    left: var(--space-4);
    top: var(--space-4);
  }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .domanda {
    padding: 24px;
    padding-left: 52px;                         /* 24 + 28 */
  }
  .domanda::before {
    left: 24px;
    top: 24px;
  }
}