/* ==========================================================================
   Blocco condiviso — LA SFIDA (variante alta di Why Vidim)
   Maintenance `The Challenge` 55:822 · 1512 x 1037
   Su Compliance c'e `The Challenge` 63:1025, stessa struttura.

   Riusa integralmente markup e CSS di `Why Vidim` della Home
   (css/sections/03-why-vidim.css): stesso container grigio, stesso componente
   Why Card, stessa griglia. Cambiano tre cose sole, che stanno qui sotto.

   Verifica altezza: 877 (container) + 160 (padding sotto) = 1037 ✔
     container = 80 + 93 (testo) + 80 + 421 (card) + 80 + 43 (pulsanti) + 80 = 877 ✔
   ⚠️ La sezione NON ha padding sopra: si attacca ai Numeri che la precedono.
   ========================================================================== */

.sfida {
  padding-top: 0;
  padding-bottom: var(--space-7);        /* 160 */
}

/* 1. Le card sono piu alte dei 368 della Home, ma di quanto dipende dalla
      pagina: 421 su Maintenance, 417 su Compliance (li il titolo della
      sezione va su due righe e il conto cambia). Si passa dal template con
      --altezza-card.

   ⚠️ 4 set 2026 — E UN'ALTEZZA MINIMA, NON FISSA.
   Con i testi italiani veri del cliente la card «Ottenere un quadro
   affidabile della manutenzione richiede troppo lavoro» chiede 47px in piu
   dei 421 del mockup, e con `height` il testo usciva dal fondo della card:
   e il difetto che Andrea ha segnalato su Monitoring — l'italiano e piu
   lungo dell'inglese e le altezze prese dal mockup sono tarate sull'inglese.

   Con `min-height` l'inglese non si sposta di un pixel (ci sta dentro, quindi
   resta a 421) e l'italiano fa crescere la riga di quel tanto che serve. Le
   card restano tutte alte uguali perche `.why__cards` e una griglia e le
   celle si allineano da sole.
   Lo sorveglia la terza regola di strabordo.mjs. */
.sfida .why__cards,
.sfida .why-card {
  min-height: var(--altezza-card, 421px);
  /* ⚠️ Serve anche `height: auto`: il foglio della Home (03-why-vidim.css)
     dichiara `height: 470px` sulla riga, e `min-height` da solo non lo
     scavalca. Senza questo la riga restava inchiodata a 470 e la quarta card
     — la piu lunga in italiano — arrivava a 2px dal bordo inferiore invece
     dei 40 di padding. E la segnalazione di Andrea del 4 set: «il testo sulla
     card va un po' troppo a filo». */
  height: auto;
}

/* Le card si pareggiano sulla piu alta invece di stare centrate: con altezze
   diverse fra le lingue, `align-items: center` lasciava card di altezze
   diverse nella stessa riga. */
.sfida .why__cards {
  align-items: stretch;
}

/* 2. Di conseguenza cambia l'angolo del gradiente — vedi la nota estesa
      accanto al token: e lo stesso gradiente, non un colore diverso.
      L'angolo lo puo passare la pagina con --sfida-gradiente (Monitoring ha
      card 306x406 e quindi 135,086 gradi invece di 134,047); senza, resta
      quello di Maintenance e Compliance. */
.sfida .why-card {
  background: var(--sfida-gradiente, var(--gradient-card-why-alta));
}

/* Il grassetto in coda al corpo e Inter Bold nel mockup, non semibold. */
.sfida .why-card__body strong {
  font-weight: 700;
}

/* 3. Il container e largo quanto il contenitore di pagina, non 1432 fissi:
      su Compliance lo stesso blocco vive in una pagina con altre misure.
      ⚠️ Titolo e lead vanno inclusi: nel foglio della Home sono larghi 1272
      FISSI (1432 meno gli 80+80 di padding del riquadro grigio). Con la
      variante senza riquadro il testo dispone di 1432 e con i 1272 ereditati
      il lead di `Data Sources` andava a due righe invece di una, portandosi
      dietro 19px di sezione. */
.sfida .why__container,
.sfida .why__text,
.sfida .why__h2,
.sfida .why__lead,
.sfida .why__cards {
  width: 100%;
}


/* ==========================================================================
   Variante SENZA CONTAINER — Monitoring `Data Sources` 113:1920 (668) e
   `Container` 113:2161 (1139).

   Su Maintenance, Compliance e MRF il blocco disegna un riquadro grigio radius
   16 dentro una sezione bianca. Su Monitoring quelle due sezioni sono grigie
   loro, a piena larghezza, e le card ci stanno dentro senza riquadro: il
   grigio si sposta dalla scatola interna alla sezione, e il padding di 80 del
   riquadro diventa il padding di 160 della sezione.

   ⚠️ Le regole stanno PRIMA di .sfida--attaccata apposta: se un giorno una
   pagina volesse tutte e due, il padding-bottom: 0 deve poter vincere.

   Verifica `Data Sources` (le fonti): 160 + 93 + 16 + 239 + 160 = 668 ✔
   Verifica `Container`:               160 + 112 + 80 + 627 + 160 = 1139 ✔
   ========================================================================== */

.sfida--nudo {
  padding-top: var(--space-7);           /* 160 — il blocco base mette 0 */
  padding-bottom: var(--space-7);
  background: var(--color-neutral-100);  /* il grigio che era del riquadro */
}

.sfida--nudo .why__container {
  padding: 0;
  background: none;
  border-radius: 0;
  /* 80 dappertutto, 16 nella sola `Data Sources` (le fonti): e l'unica
     sezione del progetto con l'intro attaccata al contenuto. */
  gap: var(--sfida-gap-intro, var(--space-6));
}

/* ⚠️ Il radius 16 che Figma dichiara sulla sezione `Container` 113:2161 NON e
   riprodotto: a piena larghezza 1512 smangerebbe gli angoli contro il bordo
   del viewport. E una sbavatura del mockup — o va tolto, o la sezione va
   rientrata di 40 come le altre. In attesa di risposta, tolto. */


/* ==========================================================================
   Variante 2 colonne — Monitoring `Data Sources` (le fonti) 113:1932
   Stessa Why Card di `The Challenge`, ma larga 708 invece di 306. Cambia solo
   la griglia, non il componente.
   ========================================================================== */

.sfida--due .why__cards {
  height: auto;
  align-items: stretch;                  /* le due card si pareggiano */
}

.sfida--due .why-card {
  width: calc((100% - var(--grid-gap)) / 2);   /* (1432 - 16) / 2 = 708 */
  height: auto;
}

/* Stesso trabocchetto della variante 3+2: il blocco di testo della Why Card e
   largo 226 FISSI nel foglio della Home (306 - 80 di padding). Qui la card e
   larga 708, e con 226 il titolo andrebbe a cinque righe. Deve seguire la
   card. */
.sfida--due .why-card__text,
.sfida--due .why-card__title,
.sfida--due .why-card__body {
  width: 100%;
}


/* ==========================================================================
   Variante 3 + 2 — MRF `The Challenge` 85:5308, Monitoring `Container` 113:2161
   Cinque card invece di quattro: tre nella prima riga, due nella seconda
   CENTRATE. In Figma non e una griglia con un buco, e un wrap centrato — e
   qui e la stessa cosa, perche wrap + justify-content: center fa esattamente
   quello senza dover trattare l'ultima riga come un caso speciale.

   ⚠️ Niente altezza fissa: le due righe sono alte 349 e 315, e con il wrap
   ogni riga si pareggia da sola sul contenuto (`align-items: stretch` e il
   comportamento predefinito). Fissare --altezza-card qui le renderebbe
   uguali, che non e il mockup.
   ========================================================================== */

.sfida--attaccata {
  padding-bottom: 0;                     /* ⚠️ voluto: sotto attacca Benefits */
}

.sfida--tre .why__cards {
  height: auto;
  flex-wrap: wrap;
  align-items: stretch;
}

.sfida--tre .why-card {
  /* (1272 - 2 x 16) / 3 = 413,33 — il valore esatto del mockup. */
  width: calc((100% - 2 * var(--grid-gap)) / 3);
  height: auto;
}

/* ⚠️ Eccezione dichiarata dal mockup, non una correzione a mano.
   Su MRF le due card della seconda riga misurano 315 perche il loro contenuto
   e alto 179 (titolo su due righe + corpo su cinque): li l'altezza esce da
   sola e questa regola non scatta. Su Monitoring `Container` le stesse due
   card sono ancora dichiarate 315 in Figma (113:2169 e 113:2170, stesso
   componente e stesso angolo di gradiente di MRF), ma i testi sono piu corti
   e il contenuto ne chiede solo 262: sono istanze con l'altezza FISSATA,
   trascinata dietro al componente. Le card sono infatti `space-between`, cioe
   disegnate per reggere un box piu alto del contenuto — a differenza della
   card 3 della prima riga, che in Figma e hug e misura 296 esatti, gli stessi
   che il contenuto produce qui.
   Senza questa riga la sezione viene 1086 invece di 1139.
   ⚠️ La regola vive su una classe a parte e non su .sfida--tre, cosi su MRF
   non esiste proprio: se stesse sempre in piedi con un `var(..., auto)`
   vincerebbe per specificita sul min-height che il foglio responsive della
   Home da a .why-card sotto i 1512, e cambierebbe MRF dove non deve. */
.sfida--riga2-alta .why-card:nth-child(n+4) {
  min-height: var(--altezza-card-2);
}

/* ⚠️ Il blocco di testo della Why Card ha una larghezza FISSA di 226 nel
   foglio della Home (306 di card meno 80 di padding). Qui la card e larga
   413: lasciandogli i 226 il titolo va a quattro righe invece che a due e la
   sezione cresce di 182px. Deve seguire la card. */
.sfida--tre .why-card__text,
.sfida--tre .why-card__title,
.sfida--tre .why-card__body {
  width: 100%;
}

/* L'angolo del gradiente segue l'altezza della card, come sempre in questo
   progetto: 349 nella prima riga, 315 nella seconda. Con cinque card la
   seconda riga e sempre la quarta e la quinta. */
.sfida--tre .why-card { background: var(--sfida-gradiente, var(--gradient-card-why-349)); }
.sfida--tre .why-card:nth-child(n+4) { background: var(--sfida-gradiente-2, var(--gradient-card-why-315)); }

/* ⚠️ Su Monitoring la griglia 3+2 sta in una sezione SENZA riquadro, quindi la
   riga e larga 1432 e non 1272. Le card pero restano quelle: 413,33, come su
   MRF. In Figma infatti `Cards` 113:2165 e un wrap centrato dentro 1432, e le
   tre card della prima riga partono da x = 79,833 — cioe (1432 - 1272) / 2.
   Limitare la riga a 1272 riproduce quel valore da solo, e con lui i 295 / 724
   della seconda riga. */
.sfida--nudo.sfida--tre .why__cards {
  max-width: 1272px;
}