/* ==========================================================================
   Why Vidim — 18:624 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, non una misura di Figma. Quando arriveranno i frame
   mobile questo file si sostituisce in blocco.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la sezione
   resta identica al mockup (901px di altezza, Container 1432, card 306x368).

   Struttura desktop:
     .why__container 1432, Neutrals/100, radius 16, padding 80, gap 80
     .why__text      1272 — H2 + paragrafo, centrati
     .why__cards     1272 x 368 — 4 Why Card da 306, gap 16
     .why__actions   347 x 43 — coppia di pulsanti
   ========================================================================== */


/* --------------------------------------------------------------------------
   1280-1511 · Desktop compresso
   Le 4 card restano in riga: si sciolgono solo le larghezze fisse
   (1432, 1272, 306, 226) e le altezze fisse (368).
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  /* 1432 e 1272 -> tutta la larghezza utile del proprio contenitore */
  .why__container,
  .why__text,
  .why__h2,
  .why__lead,
  .why__cards {
    width: 100%;
  }

  /* 368px vale al wrapping di 306: appena la card si stringe il testo cresce.
     Le card devono restare alte uguali, quindi stretch al posto di center. */
  .why__cards {
    height: auto;
    align-items: stretch;
  }

  /* 306x368 -> la card prende la sua quota della riga.
     min-height MIA: sotto i 368 la card perderebbe il rapporto con l'icona e
     il blocco di testo si appoggerebbe al bordo inferiore. */
  .why-card {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 368px;
  }

  /* 226 = 306 - 40 - 40: larghezze derivate, quindi percentuali */
  .why-card__text,
  .why-card__title,
  .why-card__body {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   1024-1279 · Laptop — la riga di 4 diventa una griglia 2x2
   A 1280 la card e gia sotto i 250px: con 40px di padding per lato restano
   ~170px per un titolo da 28px ("Reporting and auditing become jobs of their
   own" andrebbe su 6 righe). Si scende a 2 colonne.
   Il padding del container passa da 80 a 40 (var Figma) per restituire
   larghezza alle card.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .why__container { padding: var(--space-5); }   /* 80 -> 40 */

  .why__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* le due righe si allineano da sole: ogni card riempie la propria cella */
  }
  .why-card {
    flex: none;
    min-height: 340px;                            /* MIO */
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet
   La 2x2 regge ancora (a 768 la card e larga ~296px, come sul desktop).
   Si accorcia solo il ritmo verticale interno.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .why__container { gap: 56px; }                  /* 80 -> 56, MIO */
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile — colonna singola
   min-height rimosso: in colonna ogni card hugga il proprio testo, allinearle
   tutte a 340px sprecherebbe mezzo schermo per le due card piu corte.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .why__container {
    padding: var(--space-4);                      /* 40 -> 32, MIO */
    gap: var(--space-5);                          /* 56 -> 40 */
  }

  .why__cards { grid-template-columns: minmax(0, 1fr); }
  .why-card   { min-height: 0; }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   40px di padding su una card di ~295px lascerebbero 215px di testo.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .why__container { padding: var(--space-3); }    /* 32 -> 16, MIO */
  .why-card       { padding: 24px; }              /* 40 -> 24, MIO */
}