/* ========================================================================== Blocco SFIDA, variante 3 + 2 — responsive PROVVISORIO. Nessuna riga fuori da @media La variante a cinque card (MRF, Monitoring) fissa la larghezza a un terzo con un calc. Da 1279 in giu il foglio della Home trasforma `.why__cards` in una GRIGLIA a due colonne: li quel calc va tolto, o le card sborderebbero dalla propria cella. ========================================================================== */ /* -------------------------------------------------------------------------- <= 1511 · LE CINQUE CARD PASSANO A DUE COLONNE ⚠️ 7 set 2026 — segnalato da Andrea con due schermate da un 13 pollici: «quando si stringono troppo cosi non sono belle, le trasformerei come la seconda immagine», cioe due colonne larghe. IL DIFETTO, misurato. A 1512 le cinque card stanno 3 + 2, larghe 413 ciascuna, come nel mockup. Da 1511 in giu il foglio della Home (responsive/03-why-vidim.css) da a `.why-card` un `flex: 1 1 0` — regola pensata per le QUATTRO card della Home, dove distribuire la riga e giusto. Con cinque card e `flex-wrap: wrap` quel `basis: 0` le fa stare tutte su UNA riga sola, e ognuna prende un quinto: 1512 -> 413px (3 + 2, come il mockup) 1470 -> 233px 1440 -> 227px 1366 -> 212px 1280 -> 195px (cinque colonne strette) 1279 -> 552px (due colonne, gia giusto) Sotto i 195px di larghezza un titolo da 28px si spezza a meta parola — «Complianc / e takes», «informatio / n is» nelle schermate di Andrea. La fascia rotta era quindi 1280-1511, cioe ESATTAMENTE la finestra di un portatile: a 1512 (il mockup) e sotto i 1280 (dove la griglia a due colonne entrava gia in funzione) si vedeva tutto giusto, ed e per questo che non era mai saltata fuori. LA CORREZIONE. La griglia a due colonne che esisteva gia sotto i 1280 sale a 1511: sotto la larghezza del mockup, le cinque card sono due colonne e basta. Non si tenta di tenere il 3 + 2 fino a 1280 con un calc: a 1440 tre colonne dentro un container da ~1200 darebbero card da 389px, cioe di nuovo piu strette del mockup, e il problema tornerebbe piu in basso. La quinta card resta da sola sull'ultima riga: e il comportamento che c'era gia sotto i 1280. ⚠️ Vale per `.sfida--tre` soltanto, cioe MRF e il `Container` di Monitoring — le uniche due sezioni con cinque card. La Home e le griglie da quattro non si spostano di un pixel. -------------------------------------------------------------------------- */ /* ⚠️ IL LIMITE INFERIORE (768) NON E DECORATIVO. Senza, questa regola scavalcava la colonna singola del telefono: `.sfida--tre .why__cards` ha una specificita piu alta di `.why__cards`, quindi vinceva anche sotto i 768 e le cinque card diventavano DUE COLONNE DA 140px su uno schermo da 360 — piu strette del difetto che questa correzione doveva risolvere. Trovato da parole-spezzate.mjs il giorno stesso: «Compliance» chiedeva 123px dentro 92px. */ @media (min-width: 768px) and (max-width: 1511px) { .sfida--tre .why__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); /* 16 */ } .sfida--tre .why-card { /* `width: auto` scavalca il calc di un terzo del foglio di blocco; `flex: none` toglie il `1 1 0` della Home, che in una griglia non servirebbe comunque ma resterebbe a confondere chi legge. */ width: auto; flex: none; } /* L'altezza minima della sfida (421) e tarata su una card larga 413: a due colonne la card e larga il doppio, il testo occupa meta delle righe e quei 421 diventerebbero mezza card vuota. Si passa al minimo che il foglio della Home usa gia per la griglia a due colonne. ⚠️ `.sfida.sfida--tre` E NON `.sfida--tre`: piu in basso, in QUESTO STESSO FILE, c'e un altro blocco a 1511 che ridichiara `.sfida .why-card { min-height: var(--altezza-card, 421px) }`. Ha la mia stessa specificita ma viene dopo, quindi vincerebbe lui — misurato: la card restava a 421 e le righe erano mezze vuote. Con due classi sullo stesso elemento la regola vince per specificita e non per posizione, che e l'unica difesa che non si rompe se un domani qualcuno riordina il file. */ .sfida.sfida--tre .why__cards, .sfida.sfida--tre .why-card { min-height: 340px; } } @media (max-width: 1279px) { /* Il padding del container scende a 40 (foglio della Home): le card si allargano ancora e il minimo puo tornare quello della griglia. */ .sfida--tre .why-card { width: auto; } } /* ========================================================================== Varianti SENZA CONTAINER e a DUE COLONNE — Monitoring Stesso blocco, altre due griglie. Anche qui le larghezze calcolate vanno restituite alla griglia della Home appena questa entra in funzione. ========================================================================== */ @media (max-width: 1511px) { /* I 1272 servono solo a tenere le card a 413,33 dentro una riga da 1432 (vedi la nota in blocchi/sfida.css). Sotto i 1512 la riga e gia fluida e il limite diventerebbe una fascia vuota a destra. */ .sfida--nudo.sfida--tre .why__cards { max-width: none; } } /* ⚠️ 1359 e non piu 1279: la griglia a due colonne del foglio della Home e salita a quella soglia (vedi la nota in responsive/03-why-vidim.css) e queste larghezze calcolate devono seguirla. Lasciandole a 1279 restava una fascia di 80px in cui la griglia era gia attiva ma il calc comandava ancora: misurato a 1280 su Monitoring, la card di `Data Sources` veniva larga 288 invece di 592 e «Apparecchiature,» si spezzava a meta. */ @media (max-width: 1359px) { .sfida--due .why-card { width: auto; } /* I 315 sono l'altezza dichiarata dal mockup su una card larga 413: appena la card cambia larghezza il vincolo non significa piu niente e lascia il posto al min-height del foglio della Home. */ .sfida--riga2-alta .why-card:nth-child(n+4) { min-height: 340px; } } @media (max-width: 1023px) { /* Senza riquadro il respiro fra intro e card lo da il gap del container: i 16 di `Data Sources` sono giusti a 1512, stretti su una colonna. */ .sfida--nudo .why__container { gap: var(--space-5); /* 40, MIO */ } .sfida--nudo { padding-top: 96px; padding-bottom: 96px; } } @media (max-width: 767px) { /* In colonna singola ogni card hugga il proprio testo, come le altre. */ .sfida--riga2-alta .why-card:nth-child(n+4) { min-height: 0; } .sfida--nudo { padding-top: 64px; padding-bottom: 64px; } } /* ========================================================================== ⚠️ L'ALTEZZA FISSA DELLE CARD — il difetto piu grosso trovato il 2 set 2026 `blocchi/sfida.css` dichiara `.sfida .why__cards, .sfida .why-card { height: var(--altezza-card, 421px) }`, che a 1512 e la misura del mockup. Il foglio della Home la rilascia sotto i 1512 — ma su `.why-card`, cioe con specificita 0,1,0, mentre quella di `sfida` e 0,2,0: NON vinceva. Risultato: su Maintenance le card di `The Challenge` restavano alte 421px mentre il testo, su una colonna da 342, ne chiedeva 540. Il testo usciva dalla card, la card usciva dalla sezione e finiva sopra il titolo di `The Difference`. Misurato: 119px di sconfinamento a 390px di larghezza. Qui l'altezza viene rilasciata con la stessa specificita, quindi vince. Il valore del mockup resta come MINIMO finche le card sono affiancate: e il rapporto fra icona e blocco di testo che il design vuole. ========================================================================== */ @media (max-width: 1511px) { .sfida .why__cards, .sfida .why-card { height: auto; } .sfida .why-card { min-height: var(--altezza-card, 421px); } } /* Su una colonna sola il minimo non ha piu senso: la card e alta quanto il suo testo, e imporne 421 lascerebbe un vuoto in fondo alle piu corte. */ @media (max-width: 767px) { .sfida .why-card { min-height: 0; } }