/* ============================================================
Unicasport — frontend pubblico (dal mockup E approvato)
Font: Archivo via assets/vendor/fonts/fonts.css (self-hosted).
============================================================ */
:root{
/* Triade rossazzurra presa dal LOGO UFFICIALE (assets/logo-unicasport.svg):
rosso #E20524 · azzurro #0489D1 · nero #000000. Prima i token erano
campionati a occhio dal gagliardetto del Catania e il logo aveva un rosso
suo: adesso barra di navigazione e logo che le sta sopra sono lo stesso
colore. Il rosso ufficiale fa 4,91:1 su bianco (il vecchio #FF0009 si
fermava a 4,00 e non passava AA, ne' come testo ne' come bianco su barra).
--ink resta il nero tipografico, piu' morbido del nero di marca.
--red-dark (hover), --red-tint/-strong (fondi) e --red-rgb (alone del
pulsante diretta) sono DERIVATI di --red: stessa tinta, luminosita'
diversa. Se cambia il rosso, si ricalcolano tutti da li'.
Stessa storia per l'azzurro: --blue-dark e --blue-tint derivano da
--blue. --blue fa 3,81:1 su bianco e come TESTO non passa AA, quindi
dove scrive si usa --blue-dark (4,89:1); --blue resta per i segni
grafici, dove il contrasto di testo non c'entra.
--green esiste solo per marcare una vittoria: e' il primo colore ok del
frontend. */
--bg:#FFFFFF; --surface-2:#F6F8FA; --ink:#101114; --muted:#6A7076;
--line:#E4E7EA; --line-strong:#C9CED4;
--red:#E20524; --red-dark:#C4041F; --blue:#0489D1; --chrome:#000000; --green:#2f6638;
--red-tint:#FDF0F2; --red-tint-strong:#FCE6E9; --red-rgb:226,5,36;
--blue-dark:#0577B3; --blue-tint:#EFF6FD;
--pad:clamp(20px, 4vw, 72px);
/* Casella del risultato fra le due squadre: stessa misura in calendario e
in coppa, ed e' FISSA anche quando dentro c'e' solo il trattino (vedi
.esito). Se cambia qui, le due pagine si muovono insieme. */
/* Casella del risultato nel calendario e in coppa. FLUIDA e non a
scatto: era 52px con un salto a 34px sotto i 400, e quel salto
rendeva la riga PIU' STRETTA man mano che lo schermo si allargava
(a 400px ogni squadra aveva 148px, a 401px ne aveva 127). Cresce
da 34 a 52 fra i 390 e i 755px, dove la riga torna a tre colonne. */
--esito-w:clamp(34px, calc(4.9vw + 15px), 52px);
/* --- I QUATTRO NUMERI CHE GOVERNANO LA HOME A DUE COLONNE ---
Sono misurati, non scelti. --binario ha un minimo di 260px perche' sotto
quella misura la riga della classifica non tiene stemma, nome, partite e
punti sulla stessa linea; e un massimo di 352 perche' oltre smette di
sembrare un margine e comincia a sembrare una seconda colonna di lettura.
--colonna-gap vale il 2-3% della pagina: sommato al binario tiene la
colonna principale nella forbice 72-78%.
--modulo-h e' l'altezza dei due moduli quando stanno affiancati
(640-1119): fissa e unica, e' il solo modo perche' chiudano sulla stessa
linea qualunque cosa ci sia dentro. */
--binario:clamp(260px, 21vw, 352px);
--colonna-gap:clamp(22px, 2.2vw, 36px);
--binario-top:18px;
--modulo-h:clamp(340px, 32vw, 400px);
--sans:'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;text-wrap:balance}
/* ---------- testata bianca (alla ilromanista) ---------- */
.mast{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px var(--pad);background:var(--bg);flex-wrap:wrap}
.mast-brand{display:flex;flex-direction:column;gap:9px;min-width:0}
.logo svg,.logo img{height:52px;width:auto}
/* Pay-off della testata, due decisioni. (1) Il corpo e' tarato perche' la
riga chiuda ESATTAMENTE sulla larghezza del logotipo (293px col logo a
52px, 225px con quello a 40px del mobile): logo e pay-off diventano un
blocco solo invece di due righe scollegate. Se cambia il testo del
pay-off il font-size va ritarato. (2) La parola UNICA prende il rosso del
marchio - nel logo e' proprio la parola dentro il blocco rosso. */
.tagline{font-size:1.13rem;font-weight:500;color:var(--muted);line-height:1.2;white-space:nowrap}
.tagline b{color:var(--red);font-weight:800;letter-spacing:.06em}
.mast-tools{display:flex;align-items:center;gap:8px}
.socials{display:flex;align-items:center;gap:8px}
/* Lente + hamburger della fascia del marchio: esistono solo sotto la
soglia, dove la barra rossa lascia il posto al pannello. */
.mast-azioni{display:none}
.social{display:grid;place-items:center;width:36px;height:36px;color:#3A3F45;border-radius:50%}
.social:hover{color:var(--red)}
.divisore{width:1px;height:36px;background:var(--blue);margin:0 14px}
.ascolta{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase}
.ascolta .play{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;transition:background .15s ease}
.ascolta:hover .play{background:var(--red-dark)}
@media (prefers-reduced-motion: reduce){.ascolta .play{transition:none}}
/* ---------- barra di navigazione rossa ---------- */
.barra{display:flex;align-items:stretch;background:var(--red);padding:0 var(--pad)}
.voci{display:flex;align-items:stretch;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.voci::-webkit-scrollbar{display:none}
/* indizio di scroll: dissolvenza sul bordo destro dello scroller */
.voci.scrollabile::after{content:"";position:sticky;right:0;flex:none;width:30px;margin-left:-30px;background:linear-gradient(to right, transparent, var(--red))}
.barra a,.barra button{display:inline-flex;align-items:center;gap:7px;color:#fff;font-family:var(--sans);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:15px 15px;white-space:nowrap;background:transparent;border:none;cursor:pointer}
.barra a:hover,.barra button:hover{background:var(--red-dark)}
.barra a:focus-visible,.barra button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.barra .attiva{background:var(--red-dark)}
.barra .ha-menu::after{content:"";width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid rgba(255,255,255,.85);transition:transform .15s ease}
.barra .ha-menu[aria-expanded="true"]{background:var(--red-dark)}
.barra .ha-menu[aria-expanded="true"]::after{transform:rotate(180deg)}
@media (prefers-reduced-motion: reduce){.barra .ha-menu::after{transition:none}}
.tendina{position:fixed;z-index:60;min-width:216px;max-height:min(72vh,460px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);box-shadow:0 12px 26px rgba(0,0,0,.16);padding:6px 0;display:flex;flex-direction:column}
.tendina[hidden]{display:none}
.tendina a{flex:none;padding:12px 18px;font-size:.86rem;font-weight:600;color:var(--ink)}
.tendina a:hover{background:var(--surface-2);color:var(--red-dark)}
/* sottocategorie: rientro invece di markup annidato, la tendina resta una colonna */
.tendina .liv-1{padding-left:34px;font-weight:500;color:var(--muted)}
.tendina .liv-2{padding-left:50px;font-weight:500;color:var(--muted)}
.tendina .attiva{color:var(--red);background:var(--surface-2)}
.barra .cerca{flex:none;padding:15px 12px}
.filo-blu{height:10px;background:var(--blue)}
/* ---------- tendina delle sezioni (telefono) ----------
Scende sotto la fascia del marchio e si ferma dove finisce l'elenco: la
pagina resta visibile sotto, velata, e toccarla chiude. Prima copriva tutto
lo schermo per mostrare 388px di voci — spazio preso e non usato.
Il bordo superiore lo calcola il JavaScript all'apertura (top = fondo della
testata in quel momento): la testata non e' sticky, quindi la misura giusta
si conosce solo li'.
La testata NON viene resa inerte: e' l'hamburger stesso a chiudere, e la
lente accanto deve restare raggiungibile. Inerte e' tutto il resto. */
.menu-mob{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;flex-direction:column}
.menu-mob[hidden]{display:none}
.menu-fondale{position:absolute;inset:0;background:rgba(0,0,0,.42);border:none;padding:0;cursor:default}
/* max-height in percentuale e non in px: qualunque sia l'altezza dello schermo
resta sempre una striscia di pagina sotto la tendina, ed e' lei a dire che
la pagina e' ancora li'. */
.menu-pannello{position:relative;z-index:1;max-height:82%;overflow-y:auto;overscroll-behavior:contain;
background:var(--bg);border-bottom:1px solid var(--line);
box-shadow:0 16px 30px rgba(16,17,20,.20)}
.mm-voce{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;
padding:14px var(--pad);font-family:var(--sans);font-size:1.05rem;font-weight:700;
text-transform:uppercase;letter-spacing:.03em;color:var(--ink);text-align:left;
background:transparent;border:none;border-bottom:1px solid var(--line);cursor:pointer}
.menu-pannello > :last-child{border-bottom:none}
.mm-voce.attiva{color:var(--red);box-shadow:inset 4px 0 0 var(--red)}
.mm-grup[aria-expanded="true"] > svg{transform:rotate(180deg)}
.mm-fig{background:var(--surface-2);border-bottom:1px solid var(--line)}
.mm-fig[hidden]{display:none}
/* Maiuscolo come le voci di primo livello: nel pannello sono la stessa cosa
— sezioni del sito — e la gerarchia la dicono gia' il rientro, il peso e il
colore piu' chiaro. Un filo di spaziatura in piu' di .mm-voce (.04 contro
.03) perche' qui il corpo e' piu' piccolo e il maiuscolo si serra. */
.mm-fig a{display:block;padding:12px var(--pad) 12px calc(var(--pad) + 14px);
font-size:.92rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
color:var(--muted)}
/* Rientro invece di markup annidato, come nella tendina del desktop. */
.mm-fig .liv-1{padding-left:calc(var(--pad) + 30px);font-weight:500}
.mm-fig .liv-2{padding-left:calc(var(--pad) + 46px);font-weight:500}
.mm-fig .attiva{color:var(--red)}
/* L'hamburger e' anche la X: un bersaglio solo che apre e chiude, invece di
un bottone che apre e un altro dentro il pannello che chiude. */
.menu-apri .ic-chiudi{display:none}
.menu-apri[aria-expanded="true"] .ic-menu{display:none}
.menu-apri[aria-expanded="true"] .ic-chiudi{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---------- cartellino partita: prossima, in diretta, appena finita ----------
Griglia simmetrica (1fr | tabellone | 1fr con padding uguali): il centro
della colonna centrale coincide sempre con il centro del cartellino, quindi
il 50/50 del filetto cade esattamente sulla linea di meta' campo a
qualunque larghezza. La data non e' piu' una quarta colonna a destra — era
lei a spostare il centro del box: adesso sta nel tabellone, dove al calcio
d'inizio lascia il posto al punteggio. */
.incontro{position:relative;margin:clamp(16px,2.4vw,28px) var(--pad) 0;background:var(--surface-2);
border:1px solid var(--line);overflow:hidden;
--inc-pad-x:clamp(18px,3vw,44px);--inc-tab:clamp(96px,14vw,204px);
--inc-ball:clamp(72px,8.6vw,112px)}
.incontro::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:3;
background:linear-gradient(90deg,var(--red) 0 50%,var(--blue) 50% 100%)}
/* Linea di meta' campo: attraversa tutto il cartellino e sfuma alle estremita'
(a taglio netto sembra il bordo di una tabella, non una riga di campo).
Stesso var(--line) delle aree di rigore: sono lo stesso disegno di campo e
devono avere lo stesso peso. */
.incontro::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);
background:linear-gradient(to bottom,transparent 0,var(--line) 9%,var(--line) 91%,transparent 100%)}
/* In home il cartellino apre la pagina, sotto comincia subito il mosaico delle
notizie: il distacco lo mette il contenitore, perche' .incontro non ha
margine in basso (in calendario a staccarlo e' la sezione .prossime). In
alto invece il margine del cartellino si somma al padding di .stacco-alto e
il buco raddoppia, quindi qui vale quello del main e basta. */
.incontro-slot--home{margin-bottom:clamp(20px,2.8vw,34px)}
.incontro-slot--home .incontro{margin-top:0}
/* riga occhiello: stato a sinistra, competizione a destra */
.incontro-testa{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:6px 16px;padding:15px var(--inc-pad-x) 0}
.incontro .eti{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:800;
text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}
.incontro .competizione{font-size:.72rem;font-weight:600;text-transform:uppercase;
letter-spacing:.1em;color:var(--muted)}
/* Diretta: un pallino tondo che pulsa, come una spia di registrazione. E'
l'unico segno rimasto accanto a un'etichetta in tutto il sito, e resta
perche' non e' un ornamento: dice lo STATO della partita — rosso mentre si
gioca, grigio quando e' finita, niente quando deve ancora cominciare.
Selettori scoped su .incontro: a specificita' minore il colore non
passerebbe. */
.incontro .eti--live{color:var(--red-dark)}
.incontro .eti--live::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
background:var(--red);animation:battito 1.9s ease-out infinite}
@keyframes battito{
0%{box-shadow:0 0 0 0 rgba(var(--red-rgb),.5)}
70%{box-shadow:0 0 0 8px rgba(var(--red-rgb),0)}
100%{box-shadow:0 0 0 0 rgba(var(--red-rgb),0)}
}
.incontro .eti--finita::before{content:"";flex:none;width:8px;height:8px;background:var(--muted)}
.incontro-griglia{position:relative;z-index:1;display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
gap:clamp(10px,2vw,28px);align-items:center;
padding:clamp(12px,1.8vw,22px) var(--inc-pad-x) clamp(18px,2.4vw,30px)}
.incontro-griglia > *{min-width:0}
/* Aree di rigore in filigrana, agganciate ai bordi del cartellino: riempiono
i due lati larghi senza aggiungere niente da leggere. */
.incontro-campo{position:absolute;top:50%;width:clamp(40px,5vw,74px);height:clamp(120px,17vw,210px);
transform:translateY(-50%);color:var(--line);pointer-events:none}
.incontro-campo--sx{left:0}
.incontro-campo--dx{right:0;transform:translateY(-50%) scaleX(-1)}
.squadra{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.stemma{width:clamp(56px,6.4vw,88px);aspect-ratio:1;border-radius:50%;background:#fff;
border:1.5px solid var(--line-strong);display:grid;place-items:center;
font-weight:800;font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--ink)}
.stemma img{width:70%;height:70%;object-fit:contain}
.squadra > b{font-size:clamp(.98rem,1.5vw,1.35rem);font-weight:800;letter-spacing:-.012em;
line-height:1.12;text-wrap:balance}
/* Il Catania in azzurro, in casa e in trasferta: prima era il LATO a decidere
il colore (casa azzurro, ospite rosso) e non voleva dire niente. Stessa
coppia di token del cartellino compatto (.mini-squadra--noi): --blue per il
cerchio, che e' un segno, e --blue-dark per il nome, che e' testo e deve
passare AA. */
.squadra--noi .stemma{border-width:3px;border-color:var(--blue)}
.squadra--noi > b{color:var(--blue-dark)}
/* Tabellone: il cerchio di centrocampo fa da medaglione. Prima della gara
tiene il VS, durante e dopo il punteggio — chi legge trova il dato sempre
nello stesso punto. Il cerchio (--inc-ball) e' piu' stretto della colonna
(--inc-tab): la colonna la deve dettare la didascalia con data e ora, che e'
la riga piu' larga: se la larghezza fosse 'auto' gonfierebbe il track e
schiaccerebbe le due squadre. */
.centro{width:var(--inc-tab);display:flex;flex-direction:column;align-items:center;gap:9px}
/* IL CERCHIO DI CENTROCAMPO, non una pastiglia posata sopra il cartellino:
stesso fondo del cartellino e stesso filo delle aree di rigore e della
linea di meta' campo (1px var(--line)). Col fondo bianco e un bordo piu'
scuro era l'unico pezzo del campo disegnato con altre regole, e si
staccava dal disegno invece di farne parte.
Il fondo resta PIENO e non trasparente: la linea di meta' campo corre
dietro al cerchio (.incontro::after, per tutta l'altezza del cartellino) e
trasparente l'attraverserebbe passando in mezzo al VS. */
.tabellone{position:relative;display:grid;place-content:center;justify-items:center;gap:1px;
width:var(--inc-ball);aspect-ratio:1;border-radius:50%;background:var(--surface-2);
border:1px solid var(--line)}
/* Il VS non e' piu' rosso: in rosso si prendeva il centro del cartellino, che
e' della partita e non di un'etichetta. Nero e non grigio chiaro perche' su
var(--surface-2) un grigio da filetto non si legge — i grigi chiari qui
dentro sono LINEE, e una linea puo' permettersi un contrasto che una parola
non puo'. */
.tabellone .vs{font-weight:800;font-style:italic;font-size:clamp(1rem,1.4vw,1.3rem);
color:var(--ink)}
/* I due numeri stanno a cavallo della linea di meta' campo, che qui fa da
separatore al posto del trattino. */
.tabellone--risultato::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
transform:translateX(-.5px);background:var(--line-strong)}
.punteggio{display:flex;align-items:center;gap:clamp(12px,1.7vw,24px);line-height:1;
font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.03em;
font-variant-numeric:tabular-nums}
.tab-quando{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;
font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink)}
.tab-quando b{font-size:1.06rem;font-weight:800;letter-spacing:.04em;color:var(--ink);
font-variant-numeric:tabular-nums}
.tab-quando--live b{color:var(--red-dark)}
.tab-quando--tbd{font-weight:600;letter-spacing:.08em}
/* Episodi: stessa linea di meta' campo, gol e cartellini di qua e di la'. Le
colonne sono quelle della riga squadre, cosi' ogni lista cade sotto la sua. */
.incontro-eventi{position:relative;z-index:1;display:grid;
grid-template-columns:minmax(0,1fr) var(--inc-tab) minmax(0,1fr);gap:clamp(10px,2vw,28px);
padding:12px var(--inc-pad-x) 16px;border-top:1px solid var(--line)}
.eventi{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:0;
list-style:none;min-width:0}
.eventi--ospite{grid-column:3}
.evento{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.eventi--casa .evento{flex-direction:row-reverse}
.evento .minuto{flex:none;font-size:.76rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.evento b{min-width:0;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evento svg{flex:none;width:15px;height:15px}
/* Stesso pallone del gol, senza il centro pieno: attenuato perche' non e' un
gol. Vedi il commento su $icona in includes/frontend/match_card.php. */
.evento--penalty_missed svg{color:var(--muted)}
.evento-nota{flex:none;font-size:.7rem;color:var(--muted)}
.cartellino{flex:none;width:9px;height:12px;background:#EFBB00}
.cartellino--rosso{background:var(--red)}
.eventi-vuoto{grid-column:1/-1;text-align:center;font-size:.78rem;color:var(--muted);margin:0}
/* ---------- conto alla rovescia al calcio d'inizio ----------
Sta nell'ultima fascia del cartellino, quella degli episodi: prima della
gara dice quanto manca, dal fischio d'inizio in poi lascia il posto a gol e
cartellini. La fascia in fondo risponde sempre a "che sta succedendo", e
non e' mai vuota.
La fascia ha lo stesso fondo del cartellino: a staccarla basta un filetto
in alto, dello stesso var(--line) del bordo del cartellino, cosi' la
riga chiude il box con il grigio che il box gia' usa. Il filetto che
divide etichetta e orologio cade invece
sul 50%, cioe' sulla stessa linea di meta' campo che attraversa il
cartellino e passa per il centro del tabellone: la fascia non e' appoggiata
sotto, e' agganciata all'asse del disegno. */
.conto{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;align-items:center;
padding:13px var(--inc-pad-x);background:var(--surface-2);
border-top:1px solid var(--line)}
.conto::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:1px;
transform:translateX(-.5px);background:var(--line)}
.conto-eti{justify-self:end;padding-right:clamp(13px,1.7vw,22px);text-align:right;
font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
color:var(--ink)}
.conto-orologio{justify-self:start;padding-left:clamp(13px,1.7vw,22px);
display:flex;align-items:baseline;gap:clamp(8px,1.1vw,13px);
font-variant-numeric:tabular-nums}
.conto-q{font-size:.7rem;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.conto-q b{margin-right:1px;font-size:1.12rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
/* I secondi sono la parte che scorre: si vedono, ma spenti di un grado, cosi'
davanti resta il numero che dice davvero quanto manca. */
.conto-q:last-child b{color:var(--muted)}
/* Scaduto il conto la fascia non sparisce: diventa una riga sola, centrata sul
cartellino. Cade anche l'etichetta, che a quel punto avrebbe finito il suo
lavoro e leggerebbe "al calcio d'inizio: calcio d'inizio". */
.conto--via{grid-template-columns:minmax(0,1fr);justify-items:center}
.conto--via::before,.conto--via .conto-eti{display:none}
.conto--via .conto-orologio{justify-self:center;padding:0;font-size:.84rem;font-weight:800;
text-transform:uppercase;letter-spacing:.1em;color:var(--ink)}
@media (prefers-reduced-motion: reduce){.incontro .eti--live::before{animation:none}}
/* ---------- prossime partite ---------- */
.prossime{margin:clamp(20px,2.8vw,34px) var(--pad) 0}
/* flex-wrap: sotto i 400px "Annulla ricerca" non ci sta accanto al titolo e
sfondava dal viewport, facendo scrollare in orizzontale TUTTA la pagina.
A capo va solo quando serve: sopra i 400px la riga resta com'era. */
.prossime-testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:4px}
.prossime-testa h2{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.prossime-testa .tutte{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--muted);white-space:nowrap}
.prossime-testa .tutte:hover{color:var(--red)}
/* ---------- ricerca a tutto schermo ---------- */
.cerca-overlay{position:fixed;inset:0;z-index:80}
.cerca-overlay[hidden]{display:none}
.cerca-fondale{position:absolute;inset:0;background:rgba(0,0,0,.55);border:none;padding:0;cursor:default}
.cerca-pannello{position:relative;background:#fff;border-bottom:4px solid var(--red);padding:clamp(28px,4vw,56px) var(--pad) clamp(30px,4vw,48px);max-height:min(86vh,640px);overflow-y:auto}
.cerca-riga{display:flex;align-items:center;gap:16px;border-bottom:3px solid var(--ink);padding-bottom:14px}
.cerca-riga:focus-within{border-bottom-color:var(--red)}
.cerca-riga > svg{flex:none;color:var(--muted)}
.cerca-riga input{flex:1;min-width:0;border:none;font-family:var(--sans);font-size:clamp(1.3rem,2.6vw,2rem);font-weight:700;color:var(--ink);background:transparent;letter-spacing:-.01em}
.cerca-riga input:focus{outline:none}
.cerca-riga input::placeholder{color:var(--muted)}
.cerca-chiudi{flex:none;width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1.5px solid var(--line);border-radius:50%;color:var(--ink);cursor:pointer}
.cerca-chiudi:hover{border-color:var(--red);color:var(--red)}
.cerca-sotto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,4vw,64px);margin-top:clamp(22px,3vw,34px)}
.cerca-sotto > *{min-width:0}
.cerca-sotto h2{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:0 0 14px}
.cerca-chips{display:flex;flex-wrap:wrap;gap:10px}
.sugg{display:flex;flex-direction:column}
.sugg a{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-weight:600}
.sugg a:last-child{border-bottom:none}
.sugg .cat-s{flex:none;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
.sugg a:hover{color:var(--red)}
/* ---------- filtri ---------- */
/* I chip vanno a capo, non scorrono: il filtro è l'indice delle sezioni del
giornale, e una voce fuori schermo per il lettore non esiste. Restano
centrati su ogni riga (niente margin auto sul primo/ultimo figlio: con
flex-wrap spingerebbe il chip a fondo riga). */
.filtri{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:clamp(22px,3vw,40px) var(--pad)}
/* Angoli vivi e non a pastiglia: nel frontend gli unici tondi sono i CERCHI
(stemmi, pastiglie di play), e i pulsanti — .bottone, .radio-cta — sono
tutti squadrati. Una pillola era la sola eccezione, e i chip ci stanno
accanto: filtri categoria, ricerche frequenti, paginazione. */
.chip{flex:none;font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.02em;padding:9px 18px;border:1px solid var(--line);color:var(--ink);background:var(--bg);cursor:pointer;transition:border-color .15s ease}
.chip:hover{border-color:var(--blue)}
.chip.attivo{background:var(--red);border-color:var(--red);color:#fff}
@media (prefers-reduced-motion: reduce){.chip{transition:none}}
/* pagine senza riga di filtri in testa (home): rimette lo stacco dalla barra
che prima arrivava dal padding di .filtri */
main.stacco-alto{padding-top:clamp(22px,3vw,40px)}
/* ---------- fondi immagine (duotoni con trama campo) ----------
Le tre tappe di ogni duotone sono la stessa tinta di --red / --blue a tre
luminosita' (65% / 35% / 14%): restano hex perche' servono dentro un
gradient, ma nascono dai token qui sopra. Ricalcolarle se cambia il brand. */
.ph{position:absolute;inset:0;background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='2'%3E%3Ccircle cx='200' cy='130' r='46'/%3E%3Cpath d='M200 0v260M0 22h400M0 238h400'/%3E%3Crect x='0' y='58' width='58' height='144'/%3E%3Crect x='342' y='58' width='58' height='144'/%3E%3C/g%3E%3C/svg%3E") center/cover,
linear-gradient(140deg, #FB5068 0%, #AE041C 58%, #45020B 100%)}
/* Il velo che scala in hover. Vale per ogni scheda che usa .ph — mosaico,
vetrine video, edicola — e sta scritto una volta sola: erano due regole
identiche scoped a due famiglie, e la terza sarebbe stata la terza copia. */
.ph > i{position:absolute;inset:0;background:inherit;transition:transform .4s ease}
.ph.blu{background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='2'%3E%3Ccircle cx='200' cy='130' r='46'/%3E%3Cpath d='M200 0v260M0 22h400M0 238h400'/%3E%3Crect x='0' y='58' width='58' height='144'/%3E%3Crect x='342' y='58' width='58' height='144'/%3E%3C/g%3E%3C/svg%3E") center/cover,
linear-gradient(140deg, #5AB0DF 0%, #036295 58%, #01293E 100%)}
.ph.scura{background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.1' stroke-width='2'%3E%3Ccircle cx='200' cy='130' r='46'/%3E%3Cpath d='M200 0v260M0 22h400M0 238h400'/%3E%3Crect x='0' y='58' width='58' height='144'/%3E%3Crect x='342' y='58' width='58' height='144'/%3E%3C/g%3E%3C/svg%3E") center/cover,
linear-gradient(140deg, #474747 0%, #242424 58%, #000000 100%)}
.ph.verde{background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='2'%3E%3Ccircle cx='200' cy='130' r='46'/%3E%3Cpath d='M200 0v260M0 22h400M0 238h400'/%3E%3Crect x='0' y='58' width='58' height='144'/%3E%3Crect x='342' y='58' width='58' height='144'/%3E%3C/g%3E%3C/svg%3E") center/cover,
linear-gradient(140deg, #6C8878 0%, #435C50 58%, #24312B 100%)}
/* ---------- mosaico notizie (testo sotto l'immagine) ----------
LA FINESTRA HA UN RAPPORTO, NON UN'ALTEZZA. Fino ad agosto 2026 .figura era
`height:clamp(210px,21vw,330px)`: la larghezza la dava la griglia, l'altezza
un clamp, e il rapporto del ritaglio cambiava in continuo mentre si
ridimensionava la finestra — 1.46:1 a 1440px, 1.72:1 a 900, 2:1 a 600. Con
`object-fit: cover` significa che la stessa foto veniva tagliata ogni volta
in modo diverso, e nessun punto focale puo' stabilizzare un fotogramma che
cambia forma da solo. 16:9 e' lo stesso rapporto della home, dell'apertura e
delle righe: una copertina si vede in un modo solo in tutto il sito. */
.mosaico{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));gap:clamp(26px,3vw,44px) clamp(14px,1.8vw,26px);padding:clamp(6px,1vw,16px) var(--pad) clamp(36px,4.5vw,64px)}
.scheda{grid-column:span 4;min-width:0}
.scheda.mezza{grid-column:span 6}
/* :not(.autore) perche' la firma e' ora un figlio diretto di .scheda
(fuori dal link della scheda, che non puo' contenere un altro ): senza
questo diventerebbe anche lei una colonna flex con gap 13px. */
.scheda > a:not(.autore){display:flex;flex-direction:column;gap:13px}
.figura{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--chrome)}
.figura img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
/* PASSANDOCI SOPRA IL TITOLO DIVENTA AZZURRO, non rosso. Il rosso resta il
colore delle AZIONI — pulsanti, richiami di sezione, icone social — e
usarlo anche per lo stato attivo di un titolo lo rendeva un accento in
piu' invece di un segnale. --blue-dark e non --blue: l'azzurro di marca
fa 3,81:1 su bianco e come testo non passa AA (vedi i token in cima al
foglio); e' lo stesso token della riga del Catania in classifica. */
@media (hover:hover){.scheda > a:hover .ph > i{transform:scale(1.05)}.scheda > a:hover .figura img{transform:scale(1.05)}.scheda > a:hover h2{color:var(--blue-dark)}}
.sotto{display:flex;flex-direction:column;gap:8px;min-width:0}
/* wrap: data e categoria sono entrambe nowrap, e con un corpo di sistema
ingrandito sfondavano il bordo destro portandosi dietro lo scroll
orizzontale di tutta la pagina. Andando a capo non si perde niente. */
.meta-riga{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.meta-riga time{white-space:nowrap}
.meta-riga .sep{flex:0 1 64px;height:1px;background:var(--line-strong)}
.meta-riga .categoria{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--red)}
/* TITOLO IN TONDO, non in maiuscolo. E' il trattamento che i titoli degli
articoli hanno gia' nelle altre due rese del sito — .articolo h1 sulla
pagina del pezzo e .archivio-titolo nell'archivio di una firma — dove sono
sempre stati cosi': la scheda era l'eccezione, non la regola.
La spaziatura passa da +.005 a NEGATIVA: quel valore serviva a dare aria a
un maiuscolo, e su un tondo dello stesso corpo fa l'opposto. -.015em e'
dove sta .archivio-titolo, che e' lo stesso titolo alla stessa misura.
La misura massima sale da 38 a 44ch: un ch e' la larghezza dello zero e non
cambia con il caso, ma le maiuscole occupavano piu' spazio per carattere —
a parita' di ch la riga in tondo veniva piu' corta di quella per cui il
numero era stato scelto. */
.scheda h2{font-size:1.14rem;font-weight:700;line-height:1.2;letter-spacing:-.015em;max-width:44ch}
.scheda.mezza h2{font-size:clamp(1.3rem,2vw,1.8rem);max-width:34ch}
.autore{font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.scheda .ph > i,.figura img{transition:none}.scheda > a:hover .ph > i,.scheda > a:hover .figura img{transform:none}}
/* ---------- carica altri ---------- */
.altri{display:flex;justify-content:center;padding:0 var(--pad) clamp(48px,6vw,88px)}
.altri button,.altri .bottone{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:.84rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red);background:var(--bg);border:2px solid var(--red);padding:15px 42px;cursor:pointer;transition:background .15s ease,color .15s ease}
.altri button:hover,.altri .bottone:hover{background:var(--red);color:#fff}
@media (prefers-reduced-motion: reduce){.altri button,.altri .bottone{transition:none}}
/* ---------- paginazione degli archivi ----------
Sostituisce il vecchio "Carica altri", che portava avanti di una pagina e
basta: non tornava indietro e all'ultima spariva, lasciando la pagina senza
navigazione. Le pillole sono i .chip dei filtri categoria — stesso bordo,
stesso raggio, stesso riempimento rosso sulla voce corrente — e qui si
aggiunge solo la disposizione, la misura minima dei numeri e lo stato spento.
Tutto va a capo, come nella riga dei filtri: la larghezza della fila di
numeri non e' prevedibile (cambia con la pagina corrente E con quante cifre
ha l'ultima pagina), quindi una riga rigida prima o poi sfonda il bordo e si
porta dietro lo scroll orizzontale di tutta la pagina. Con il wrap il caso
stretto peggiora di una riga invece di rompere il layout. */
.paginazione{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;
padding:0 var(--pad) clamp(48px,6vw,88px)}
.pag-numeri{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
/* Larghezza minima uguale per tutti: con il solo padding dei chip "1" sarebbe
una pillola stretta e "20" una larga, e la fila si leggerebbe storta. */
.pag-numero{justify-content:center;min-width:44px;min-height:44px;padding-inline:12px;
font-variant-numeric:tabular-nums;display:inline-flex;align-items:center}
.pag-passo{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.pag-passo svg{width:13px;height:13px;flex:none}
/* Spento: resta al suo posto per non far ballare il centro della riga, ma non
e' un bersaglio e non si accende al passaggio. */
.pag-passo--spento{color:var(--line-strong);border-color:var(--line);cursor:default}
.pag-passo--spento:hover{border-color:var(--line)}
.paginazione [aria-current="page"]{cursor:default}
.pag-stacco{display:inline-flex;align-items:center;justify-content:center;min-width:22px;min-height:44px;
color:var(--muted);letter-spacing:.06em}
.pag-conta{display:none;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Gli @media stanno DOPO le regole base: a pari specificita' vince l'ultima. */
@media (max-width:1000px){
/* Quando i numeri non stanno in riga con i due passi, prendono una riga
tutta loro invece di spingere "Successiva" a capo da sola: due righe
ordinate invece di un a-capo che sembra un guasto. La soglia e' scelta
sul caso peggiore realistico — nove pillole a tre cifre piu' i due
passi — non sul numero di pagine che ha l'archivio oggi. */
.pag-numeri{order:-1;flex-basis:100%}
}
@media (max-width:560px){
/* Sette numeri piu' due passi non entrano: restano i passi e la posizione
scritta in chiaro, che e' l'informazione che i numeri davano. */
.pag-numeri{display:none}
.pag-conta{display:block}
}
@media (max-width:400px){
/* A 320px "Precedente ... Pagina 5 di 20 ... Successiva" sfonda: le parole
spariscono alla vista ma restano allo screen reader, le frecce bastano. */
.pag-passo > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pag-passo{padding-inline:14px}
}
/* ---------- footer ---------- */
footer{background:var(--chrome);color:#B9BEC5;padding:clamp(36px,5vw,56px) var(--pad) 26px;border-top:3px solid var(--blue)}
.sponsor{padding-bottom:clamp(26px,3.5vw,40px);margin-bottom:clamp(26px,3.5vw,40px);border-bottom:1px solid #242424}
.sponsor h3{margin:0 0 16px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:#fff}
.sponsor-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.sponsor-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#fff;min-height:72px;padding:14px 18px}
.sponsor-slot:hover{background:#F1F3F5}
.sponsor-slot svg,.sponsor-slot img{height:32px;width:auto;max-width:100%}
.sponsor-nome{color:#4A4F55;font-weight:700;font-size:.92rem}
.sponsor-slot small{font-weight:600;font-size:.62rem;color:#8A9099;letter-spacing:.1em;text-transform:uppercase}
/* Il minimo di 300px sulla colonna del marchio non e' estetico: e' la
larghezza che tiene la fila social su una riga sola (7 bersagli da 44px
meno lo sbordo del margine negativo). Senza, fra 1061 e ~1080px l'ultima
icona andava a capo da sola. */
.foot-grid{display:grid;grid-template-columns:minmax(300px,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,48px);padding-bottom:32px;border-bottom:1px solid #242424}
.foot-grid > *{min-width:0}
.foot-grid .logo svg,.foot-grid .logo img{height:34px;width:auto}
/* Le icone social riusano il componente .social dell'header: stessa fila e
stessa regola (compare solo il network con l'URL impostato). Qui cambia
solo il colore, perche' il grigio tarato sulla testata bianca sparirebbe
sul nero. Il bersaglio sale a 44px - nel footer le icone restano visibili
anche sul telefono, dove nell'header spariscono - e il margine negativo
riallinea la prima icona, centrata dentro il chip, al bordo sinistro del
logotipo che le sta sopra. */
.foot-social{display:flex;flex-wrap:wrap;margin:7px 0 0 -12px}
footer .social{width:44px;height:44px;color:#B9BEC5}
footer .social:hover{color:#fff}
.foot-grid h3{margin:0 0 12px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:#fff}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.9rem}
.foot-grid a:hover{color:#fff}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;font-size:.8rem}
/* ---------- responsive ---------- */
/* ---------- testata del telefono: servizio sopra, marchio sotto ----------
MISURATA, non arrotondata. La testata a tre fasce si rompe in due punti:
(1) la riga del marchio chiede 801px di contenuto (293 di logo+pay-off, 24
di gap, 484 di social+ascolto) e ne riceve 0,92 della finestra, quindi sotto
i ~871px il pulsante di ascolto va a capo DA SOLO su una seconda riga;
(2) le OTTO voci della barra ne chiedono 1245 e sotto i 932 cominciano a
scorrere, nascondendone alcune. La soglia sta sopra entrambi: da 960 in giu'
le sezioni passano nel pannello dietro l'hamburger e la testata si riordina
in due fasce.
RIMISURATA il 27 agosto 2026, all'arrivo della voce «Video»: prima erano
sette voci, chiedevano 742px e scorrevano sotto gli 852, e la soglia stava a
880. Con l'ottava quella soglia sarebbe rimasta SOTTO il punto in cui la
barra comincia a scorrere, cioe' fra 880 e 932 avrebbe nascosto voci invece
di aprire l'hamburger. Il numero e' misurato sul DOM, non stimato: se
cambiano le etichette del menu o il pay-off, va rimisurato di nuovo.
Il pannello e' JavaScript: senza, .barra resta dov'e' e l'hamburger non
compare, quindi si naviga comunque (si degrada alla testata di prima). */
@media (max-width: 959.98px){
/* Griglia e non colonna flex: la striscia di servizio prende la riga intera,
logo e azioni si dividono quella sotto. */
.mast{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"servizio servizio" "marchio azioni";
align-items:center;
gap:0;
padding:0;
border-bottom:1px solid var(--line);
}
/* Il grid item che occupa la riga intera vuole min-width:0, altrimenti il
suo contenuto allarga la traccia 1fr oltre il viewport e la pagina
scorre in orizzontale. */
.mast-tools{grid-area:servizio;min-width:0;justify-content:space-between;
height:44px;padding:0 var(--pad);gap:6px}
.socials{gap:2px;min-width:0}
.social{width:30px;height:30px}
.divisore{height:20px;margin:0 8px}
.ascolta{font-size:.7rem;gap:7px}
.ascolta .play{width:28px;height:28px}
.ascolta .play svg{width:12px;height:12px}
/* IL PAY-OFF NON SI STAMPA da qui in giu'. Sopra la soglia sta sotto il
logotipo e ne chiude la riga; qui la fascia del marchio divide la sua
altezza con lente e hamburger, e una seconda riga di testo la fa crescere
per dire una cosa che il logotipo dice gia'. Il logo resta 2.125rem e non
2.25: a 320px il blocco ha 200px di spazio (280 utili meno gli 88 dei due
bersagli, piu' gli 8 di sbordo) e cosi' ne occupa 194,3; a 2.25rem ne
occuperebbe 203 e traboccherebbe. */
/* Padding solo a sinistra: a destra il blocco e' gia' delimitato dai due
bersagli, e pagare --pad anche li' rubava 20px proprio dove servivano
(a 320px schiacciava il logotipo da 191,8 a 180). */
.mast-brand{grid-area:marchio;min-width:0;padding:7px 0 7px var(--pad);
align-items:flex-start;justify-content:center}
.tagline{display:none}
.logo svg,.logo img{height:2.125rem}
/* Le icone sforano il padding di 8px per allinearsi otticamente al bordo:
i bersagli restano da 44px, il disegno arriva dove arriva il logo. */
.mast-azioni{grid-area:azioni;display:flex;align-items:center;
padding-right:calc(var(--pad) - 8px)}
.mast-azioni .cerca,.menu-apri{display:grid;place-items:center;width:44px;height:44px;
flex:none;padding:0;background:transparent;border:none;color:var(--ink);cursor:pointer}
/* Senza JavaScript ne' il pannello ne' l'overlay della ricerca si aprono:
sparisce tutta la coppia di bottoni invece di lasciarne due morti, e la
barra rossa resta al suo posto a fare da navigazione. */
html.js .barra{display:none}
html:not(.js) .mast-azioni{display:none}
/* Una riga rossa sopra il filo azzurro: senza la barra rossa delle sezioni —
che qui e' finita dietro l'hamburger — la testata perdeva il rosso di
marca e chiudeva su un azzurro solo.
Un GRADIENTE e non un border-top, e non e' un vezzo: con
`*{box-sizing:border-box}` un border piu' alto dell'elemento si mangia
tutto lo spazio e l'azzurro sparisce del tutto (verificato).
Cosi' le due misure si leggono per quello che sono: 8 di rosso, 6 di
azzurro. E resta un div solo: due div vuoti per due bande sarebbero uno
di troppo. */
.filo-blu{height:24px;background:linear-gradient(to bottom,var(--red) 0 16px,var(--blue) 8px 100%)}
}
/* Sotto i 360 sette icone e la parola "Ascolta" non ci stanno sulla stessa
riga: resta la pastiglia, che e' il bersaglio. */
@media (max-width: 359.98px){
.ascolta .txt{display:none}
}
@media (max-width: 1060px){
/* Il cartellino NON si impila piu': la forma da tabellone regge fino a
320px ed e' proprio sul telefono che si guarda una diretta. Si stringe
e basta (i clamp fanno gia' quasi tutto). */
.scheda,.scheda.mezza{grid-column:span 6}
/* Sotto i 1060 il marchio esce dalla fila e prende la riga intera: le tre
liste restano affiancate in una riga sola invece di impaiarsi a due a
due, e sparisce il buco che si apriva sotto il logo quando divideva la
riga con "Sezioni". Avendo tutta la larghezza, la fila social non ha
piu' bisogno del minimo di 300px sulla colonna.
Il row-gap sale a 36 perche' qui si separano due GRUPPI, non due voci:
col gap normale il titolino stava equidistante fra la lista che chiude
e quella che apre. */
.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
/* Il logotipo fa 192px e la fila social fra 266 e 308: nessuno dei due
entra in una colonna. */
.foot-grid > :first-child{grid-column:1 / -1}
}
@media (max-width: 640px){
.scheda,.scheda.mezza{grid-column:span 12}
.cerca-sotto{grid-template-columns:minmax(0,1fr)}
.sponsor-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
.scheda h2,.scheda.mezza h2{font-size:1.18rem}
/* AREE TOCCABILI. Il dito chiede ~44px: i chip ne facevano 40 e i link di
servizio (torna, annulla ricerca, la categoria nell'occhiello) fra 17 e
20. Dove il bersaglio non puo' crescere senza spostare il layout si usa
padding verticale + margine negativo: l'area cresce, la riga no. */
.chip{display:inline-flex;align-items:center;min-height:44px;padding-inline:14px}
/* Chip piu' stretti e gap piu' corto: la riga va a capo e ogni riga in meno
e' mezzo pollice di titoli guadagnato. A 360px passano da 4 righe a 3, a
320px da 5 a 4 — l'area toccabile resta 44px, si accorcia solo il fianco. */
.filtri{gap:8px}
.vuota .tutte,.prossime-testa .tutte{padding-block:11px}
.meta-riga a.categoria{padding-block:14px;margin-block:-14px}
/* 22px di gap + padding/margine da 11px: i link del footer arrivano a
44px di bersaglio e le aree finiscono esattamente a contatto,
senza sovrapporsi (con gap 14 il tap a meta' strada fra due voci
avrebbe aperto quella sbagliata). */
.foot-grid ul{gap:22px}
.foot-grid ul a{display:inline-block;padding-block:11px;margin-block:-11px}
/* L'occhiello di categoria ha larghezza variabile (BIG vs CALCIOMERCATO) e
spingeva ogni titolo suggerito a partire da una x diversa: sul telefono
va sopra al titolo, cosi' i titoli si allineano fra loro. */
.sugg a{flex-direction:column;align-items:flex-start;gap:3px;padding:12px 0}
/* Sul telefono lo stemma e il nome sono la partita: prendono lo spazio che
si libera stringendo il contorno (padding, tabellone, gap). Restano in
clamp perche' fra 320 e 640px la colonna passa da 75 a 250px: un valore
fisso sarebbe minuscolo in alto o traboccherebbe in basso. */
.incontro{--inc-pad-x:12px;--inc-tab:88px;--inc-ball:68px}
/* L'occhiello si impila e si centra. A tutta larghezza le due etichette
stanno ai due lati perche' reggono la simmetria del cartellino — stato a
sinistra, competizione a destra, tabellone in mezzo; sul telefono quella
simmetria non c'e' piu' e "space-between" le lascia appoggiate ai bordi,
sfalsate rispetto a tutto il resto che sotto e' centrato.
In colonna e non solo centrate: fra 561 e 640 le due etichette ci
starebbero ancora sulla stessa riga, e centrate si accosterebbero a 16px
l'una dall'altra leggendosi come una frase sola. */
.incontro-testa{flex-direction:column;align-items:center;text-align:center}
.incontro-griglia{gap:6px}
.stemma{width:clamp(64px,19vw,86px)}
.squadra > b{font-size:clamp(.95rem,4.2vw,1.2rem)}
.evento{gap:6px}
.evento b{font-size:.75rem}
.incontro-campo{display:none}
}
/* Le tre liste del footer stanno affiancate finche' la colonna regge il
titolino piu' lungo ("Unica Sport", 96.6px) e la voce piu' lunga
("Cookie Policy", 87.3px). Sotto i 420px di schermo tre track ne danno
96 e il titolo andrebbe a capo sfasando l'allineamento delle liste; due
ne danno 163 a 390px e 128 a 320px. */
@media (max-width: 420px){
.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Sotto i 560px le due colonne di episodi sono troppo strette e i cognomi
verrebbero troncati a due lettere: lista unica, il Catania a sinistra e
l'avversario a destra — il lato continua a dire di chi e' l'episodio. */
@media (max-width: 560px){
.incontro-eventi{grid-template-columns:minmax(0,1fr);gap:2px}
.eventi--casa{align-items:flex-start}
.eventi--ospite{grid-column:1;align-items:flex-end}
.eventi--casa .evento{flex-direction:row}
.eventi--ospite .evento{flex-direction:row-reverse}
/* la didascalia sta su una riga sola dentro il cerchio, non su tre */
.tab-quando{font-size:.66rem;letter-spacing:.05em}
.tab-quando b{font-size:.9rem;letter-spacing:.03em}
/* Il conto alla rovescia si impila: a meta' larghezza l'etichetta andrebbe
a capo da sola e il filetto resterebbe appeso in mezzo al nulla. */
.conto{grid-template-columns:minmax(0,1fr);justify-items:center;gap:6px;padding-block:11px}
.conto::before{display:none}
.conto-eti,.conto-orologio{justify-self:center;padding:0;text-align:center}
}
/* ---------- pagina articolo ---------- */
.articolo{max-width:860px;margin:0 auto;padding:clamp(28px,4vw,56px) var(--pad) clamp(48px,6vw,80px)}
.articolo .meta-riga{margin-bottom:14px}
.articolo h1{font-size:clamp(1.9rem,4vw,3.1rem);font-weight:800;letter-spacing:-.025em;line-height:1.04}
.articolo .sottotitolo{margin:14px 0 0;font-size:1.15rem;color:var(--muted);line-height:1.5}
/* Sottotitolo seguito SUBITO dal corpo: succede quando l'articolo non ha ne'
firma ne' copertina (le pagine legali). Senza questo, occhiello e primo
paragrafo si toccano; il valore e' lo stesso stacco che darebbe .copertina. */
.articolo .sottotitolo + .corpo{margin-top:clamp(22px,3vw,34px)}
.articolo .firma{display:block;margin-top:16px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.articolo .copertina{margin:clamp(22px,3vw,34px) 0;position:relative;overflow:hidden}
.articolo .copertina img{display:block;width:100%;height:auto}
/* overflow-wrap: rete di sicurezza. Un corpo che arriva dall'editor senza
punti di a-capo validi (parole legate da nbsp, URL lunghi) sborderebbe dalla
colonna e verrebbe tagliato dal viewport invece di andare a capo. */
.corpo{font-size:1.06rem;line-height:1.75;max-width:68ch;overflow-wrap:break-word}
.corpo p{margin:0 0 1.1em}
.corpo h2,.corpo h3{margin:1.6em 0 .5em;letter-spacing:-.01em}
.corpo ul,.corpo ol{margin:0 0 1.1em;padding-left:1.4em}
.corpo li{margin:0 0 .35em}
.corpo blockquote{margin:1.4em 0;padding-left:18px;border-left:3px solid var(--red);color:var(--muted)}
.corpo img{max-width:100%;height:auto}
.corpo a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
/* Modificatore di .articolo: toglie la misura da lettura e lascia che il testo
usi tutta la larghezza della pagina, come le altre sezioni del sito. Serve ai
documenti che si CONSULTANO invece di leggersi di seguito (privacy, cookie
policy): con la colonna da 68ch si allungano per schermate e trovare una
sezione diventa un lavoro di scroll. Non usarlo sugli articoli: li' la misura
stretta e' il punto. */
.articolo.fluido{max-width:none}
.articolo.fluido .corpo{max-width:none}
.torna{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
.torna:hover{color:var(--red-dark)}
/* L'area toccabile di .torna: stava nel blocco 640px in cima al file, cioe'
PRIMA della regola base, quindi il margin-top:15px non ha mai avuto effetto
(a pari specificita' vince l'ultima nel sorgente). Spostata qui, dopo la base. */
@media (max-width: 640px){
.torna{padding-block:11px;margin-top:15px}
}
/* ---------- pagine di sezione ---------- */
.pagina-testa{padding:clamp(30px,4.5vw,56px) var(--pad) 0;text-align:center}
/* MAIUSCOLO: e' il titolo di una SEZIONE, non di un pezzo — sta nella stessa
famiglia di segni della barra di navigazione, che le sezioni le elenca in
maiuscolo. La crenatura scende da -.03em a -.015em perche' il maiuscolo ha
fianchi piatti e a -.03em, a 64px, le lettere si toccano: e' lo stesso
valore gia' usato dall'altro titolone maiuscolo del sito (.numero-testa h1).
Non tocca i titoli che sono NOMI DI PERSONA — .firma-testa h1 della pagina
autore e .gioc-chi h1 della scheda giocatore — che hanno un trattamento
loro e un nome in maiuscolo si legge come un'insegna, non come una firma. */
.pagina-testa h1{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:800;letter-spacing:-.015em;line-height:.98;
text-transform:uppercase}
.pagina-testa p{margin:12px auto 0;max-width:56ch;color:var(--muted)}
.vuota{margin:clamp(30px,4vw,56px) var(--pad) clamp(48px,6vw,80px);padding:clamp(36px,5vw,64px) clamp(20px,3vw,44px);text-align:center;background:var(--surface-2);border:1px solid var(--line)}
.vuota p{font-size:1.05rem;color:var(--muted);margin:0 0 14px}
.vuota .tutte{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red-dark)}
.vuota .tutte:hover{color:var(--ink)}
.nota-dati{margin:14px var(--pad) 0;font-size:.78rem;color:var(--muted);text-align:center}
/* ---------- calendario ---------- */
/* Titolo di sezione e sottotitolo interno hanno LO STESSO trattamento tipografico
e lo leggono da qui: erano due regole gemelle in due punti del foglio e
avevano gia' preso misure diverse. A distinguerli restano posizione e
contesto, non il corpo. */
.cal-gruppo,.stat-sottotitolo{font-size:clamp(.95rem,1.6vw,1.15rem);font-weight:800;text-transform:uppercase;letter-spacing:.1em;text-align:center}
/* Centrato con justify-content e non solo con text-align perche' e' una riga
flex: il conteggio di .rosa-reparto e le altre spalle stanno accanto al
titolo e devono restare dentro il gruppo centrato. */
.cal-gruppo{display:flex;align-items:center;justify-content:center;gap:9px;margin:clamp(26px,3vw,40px) 0 4px}
/* ---------- classifica ---------- */
.classifica{margin:clamp(22px,3vw,40px) var(--pad) clamp(48px,6vw,80px);overflow-x:auto}
.classifica table{width:100%;border-collapse:collapse;min-width:520px}
.stat-confronto th,.classifica th{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:2px solid var(--ink)}
.stat-confronto td,.classifica td{padding:11px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.classifica .pos{font-weight:800;width:44px;color:var(--muted)}
.classifica .club{display:flex;align-items:center;gap:12px;font-weight:600}
.classifica .club img{width:26px;height:26px;object-fit:contain}
.classifica th.num,.classifica td.num{text-align:right;width:56px}
.classifica .evidenza,.stat-doppia .evidenza{background:var(--blue-tint)}
.classifica .evidenza .pos{color:var(--blue-dark)}
.classifica td.num strong{font-weight:800}
/* La nota sta dentro .classifica, che ha gia' il suo margine di pagina: senza
questo si sommavano e la riga rientrava rispetto alla tabella. */
.classifica .nota-dati{margin-left:0;margin-right:0}
/* SUL TELEFONO LA TABELLA DEVE STARE NELLO SCHERMO, non scrollare.
Con min-width:520px a 390px si vedevano #, Squadra e meta' di "Pt": il
numero piu' importante della pagina restava fuori, e siccome lo scroller
non ha barra visibile niente diceva che ci fosse dell'altro. Colonne e
padding stretti fanno entrare tutto (GF/GS/DR sono gia' nascoste sopra).
Sta DOPO le regole base: a pari specificita' vince l'ultima. */
@media (max-width: 640px){
.classifica table{min-width:0}
.stat-confronto th,.classifica th{padding:10px 6px}
.stat-confronto td,.classifica td{padding:11px 6px}
.classifica .pos{width:28px}
.classifica .club{gap:8px}
.classifica .club img{width:22px;height:22px}
.classifica th.num,.classifica td.num{width:32px}
/* Utility generiche, volutamente senza genitore: qualunque tabella (vedi
anche .stat-giocatori) puo' nascondere una colonna sul telefono senza
ridichiarare la regola. */
.nascondi-mobile{display:none}
}
/* Sotto i 360px anche cosi' resterebbero ~70px per il nome del club, che
spezzerebbe "Audace Cerignola" su tre righe: vinte/pari/perse escono, come
sono gia' uscite GF/GS/DR. Punti e giocate restano: sono la classifica. */
@media (max-width: 359.98px){
/* Utility generica, volutamente senza genitore: stessa idea della regola qui sopra. */
.nascondi-xs{display:none}
}
/* ---------- statistiche: riquadri, strisce, grafici ----------
Famiglia .stat-*. Riusa i margini di pagina di .classifica (var(--pad)) e i
colori di :root: qui non nasce nessun token nuovo.
Le sezioni sono autonome: ognuna compare solo se ha dati, quindi nessuna
regola puo' dipendere da quella prima o quella dopo. */
.stat-sezione{margin:0 var(--pad) clamp(30px,4vw,52px)}
/* MASSIMO QUATTRO PER RIGA: la traccia minima e' un quarto della riga (meno
i tre gap), quindi la quinta colonna non entra mai — a qualunque
larghezza, senza dipendere da --misura o da --pad. Il max() con 150px
tiene il comportamento di prima quando la riga si stringe: sotto i 720px
scarsi il quarto vale meno del minimo leggibile e le colonne scendono a
tre, poi a due. Resta auto-fit e non repeat(4,...) perche' le sezioni con
due o tre riquadri devono continuare a occupare tutta la riga invece di
lasciare mezza riga vuota. */
.stat-numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(150px,(100% - 30px)/4),1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
/* La prima sezione di statistiche non ha titolo: il suo stacco dal titolone di
pagina lo dava il .cal-gruppo, quindi qui il margine dei riquadri sale ai
valori usati dalle altre pagine con .pagina-testa (vedi .pagina-testa +
.vetrina). Adiacente e non regola sul titolo: quando i dati mancano al posto
della griglia c'e' .vuota, che il suo margine ce l'ha gia'. */
.pagina-testa + .stat-sezione .stat-numeri{margin-top:clamp(24px,2.8vw,40px)}
/* L'etichetta e' il TITOLO del riquadro, ancorato in alto e separato dal filetto;
il corpo (numero + nota) e' centrato nello spazio che avanza. Il centraggio lo
fanno i margini auto e non justify-content, che sposterebbe anche il titolo:
margin-top:auto sul numero e margin-bottom:auto sull'ultimo figlio si dividono
lo scarto in parti uguali, quindi il corpo resta al centro sia con la nota sia
senza. Serve perche' i riquadri di una riga sono alti uguale ma hanno
contenuti di lunghezza diversa (titoli che vanno a capo, note solo in alcuni). */
.stat-numero{display:flex;flex-direction:column;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);min-width:0}
.stat-numero > :last-child{margin-bottom:auto}
.stat-numero--forte{background:var(--red-tint);border-color:var(--red-tint-strong)}
/* L'accento e' quello che distingue una serie di vittorie da una di sconfitte:
il numero da solo (es. "3") non lo dice. */
.stat-numero--win,.stat-numero--unbeaten{border-left:3px solid var(--green)}
.stat-numero--loss,.stat-numero--winless{border-left:3px solid var(--red)}
.stat-valore{display:block;margin-top:auto;font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat-valore sup{font-size:.5em;font-weight:700}
/* Maiuscolo come le altre etichette-titolo del sito (.cal-gruppo, le teste
di colonna): il corpo scende a .72rem perche' il maiuscolo occupa piu'
spazio e a .78 i titoli lunghi mangiavano il riquadro. */
.stat-etichetta{display:block;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--line);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
.stat-nota{display:block;margin-top:4px;font-size:.72rem;color:var(--muted)}
a.stat-nota{color:var(--red-dark);font-weight:700}
a.stat-nota:hover{color:var(--ink)}
/* La striscia della forma: una lettera per gara, la piu' recente a destra. */
.stat-forma{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.stat-esito{display:grid;place-items:center;width:30px;height:30px;font-size:.78rem;font-weight:800;color:#fff;background:var(--muted)}
.stat-esito--v{background:var(--green)}
.stat-esito--n{background:var(--muted)}
.stat-esito--p{background:var(--red)}
.stat-figura{margin:20px 0 0}
.stat-figura figcaption{font-size:.78rem;color:var(--muted);margin-bottom:8px}
.stat-avvertenza{display:block;font-size:.72rem}
/* L'altezza sta qui e non nel viewBox: il grafico e' disegnato in unita'
astratte e la pagina decide quanto spazio dargli. */
.stat-grafico,.stat-istogramma{width:100%;height:clamp(160px,22vw,260px)}
.stat-grafico polyline{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}
.stat-linea--noi{stroke:var(--red)}
.stat-linea--altri{stroke:var(--line-strong)}
.stat-barra--noi{fill:var(--red)}
.stat-barra--loro{fill:var(--line-strong)}
/* Il confronto casa/trasferta riusa l'impaginazione della classifica, ma senza
il margine di pagina: sta gia' dentro .stat-sezione. */
.stat-confronto{margin-top:20px;overflow-x:auto}
.stat-confronto table{width:100%;border-collapse:collapse}
.stat-confronto tbody th{font-size:.9rem;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
.stat-confronto th.num,.stat-confronto td.num{text-align:right;width:52px}
/* Solo lo spazio sopra: il corpo, il maiuscolo e la centratura arrivano dalla
regola condivisa con .cal-gruppo, piu' su. */
.stat-sottotitolo{margin:clamp(26px,3vw,40px) 0 0}
.stat-legenda{display:inline-flex;gap:12px;margin-left:10px}
.stat-chiave{display:inline-flex;align-items:center;gap:5px;font-size:.72rem}
.stat-chiave::before{content:"";width:9px;height:9px}
.stat-chiave--noi::before{background:var(--red)}
.stat-chiave--loro::before{background:var(--line-strong)}
/* Le etichette delle fasce stanno SOTTO il grafico e non dentro l'SVG: dentro
si deformerebbero con preserveAspectRatio="none". */
.stat-fasce{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin:4px 0 0;padding:0;list-style:none;font-size:.66rem;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.stat-sezione .nota-dati{margin-left:0;margin-right:0}
.stat-ordina{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.stat-ordina:hover{text-decoration-color:var(--red)}
.stat-ordina.attiva{color:var(--red-dark)}
.stat-giocatori tbody th{font-weight:600}
.stat-chi{display:flex;align-items:center;gap:9px;min-width:0}
.stat-maglia{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);font-size:.7rem;font-weight:800;font-variant-numeric:tabular-nums}
.stat-ex{margin-left:5px;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
/* Il nome e' l'unico link della riga: sottolineatura solo all'interazione,
niente colore nuovo (eredita da a{color:inherit}). Qualificato con `a` come
il gemello .rosa-nome: qui la classe sta solo sul link, ma la simmetria fa
risparmiare la domanda a chi legge. */
a.stat-nome:hover,a.stat-nome:focus-visible{text-decoration:underline}
/* Il minutaggio e' una barra sotto il nome: e' un confronto fra righe, e una
colonna in piu' non ci sta sul telefono. */
.stat-minutaggio{display:block;margin-top:6px;height:3px;background:var(--line)}
.stat-minutaggio span{display:block;height:100%;background:var(--blue)}
/* Due classifiche affiancate finche' c'e' spazio, impilate sotto. La soglia e'
la stessa a cui la tabella a quattro colonne smette di stare in meta' riga. */
.stat-doppia{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,28px);margin-top:20px}
.stat-doppia .stat-confronto{margin-top:0;min-width:0}
.stat-pos{width:30px;color:var(--muted);font-weight:800}
.stat-confronto .stat-chi img{width:22px;height:22px;object-fit:contain;flex:0 0 auto}
/* Tabellino: una riga per statistica, i due numeri ai lati e la barra sotto.
La barra e' in scala con la propria coppia, non con le altre righe: il
possesso e i fuorigioco non hanno la stessa unita' e non hanno perche'
condividere un picco. */
.tabellino{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.tab-riga{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px}
.tab-noi,.tab-loro{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
.tab-loro{color:var(--muted)}
.tab-che{text-align:center;font-size:.82rem;min-width:0}
/* La base di gare sta sotto il nome della statistica: e' il dato che rende
onesto il numero, non una nota a pie' di pagina. */
.tab-base{display:block;font-size:.68rem;color:var(--muted)}
.tab-barra{grid-column:1 / -1;display:flex;height:6px;background:var(--line)}
.tab-barra__noi{background:var(--red-dark)}
/* Sul telefono i riquadri diventano due per riga e le tabelle stringono i
padding, come fa gia' la classifica. STA DOPO le regole base: a pari
specificita' vince l'ultima. */
@media (max-width: 640px){
.stat-numeri{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.stat-valore{font-size:1.6rem}
.stat-confronto th.num,.stat-confronto td.num{width:34px}
.stat-maglia{width:19px;height:19px;font-size:.64rem}
.stat-chi{gap:7px}
/* Gialli e Rossi escono dalla tabella sul telefono: la sezione disciplina
riporta gia' quegli stessi cartellini per giocatore, quindi qui non si
perde nessun dato. La regola che li nasconde e' fra le utility condivise
con la classifica, sopra: non e' piu' legata a questa tabella. */
}
/* ---------- rosa: elenco per reparto ----------
Righe, non figurine. La rosa si SCORRE — chi c'e', che ruolo fa, che numero
porta — e finche' la redazione non carica gli scatti una griglia di ritratti
3:4 era mezza pagina di rettangoli vuoti per reparto. La riga tiene il vuoto
a 72px e mette il nome per primo.
Il duotone del ritratto resta la codifica del reparto (verde ai portieri —
la maglia del portiere, blu ai difensori, nero elefante ai centrocampisti,
rosso agli attaccanti): stesso device delle figurine, in formato quadrato.
Le righe non sono link nella loro interezza: solo il nome porta alla
scheda del giocatore, e la riga non ha hover di fondo — il ritratto, il
ruolo e il numero non sono cliccabili. */
.rosa-pagina{--misura:760px;padding-bottom:clamp(48px,6vw,80px)}
.rosa-reparto{margin:0 var(--pad)}
/* Filetto ink sotto l'intestazione di reparto: e' il device gia' in uso sulla
testata della classifica e sotto il nome nella pagina autore. Qui apre la
colonna di righe come si apre una tabella. */
.rosa-reparto .cal-gruppo{margin-bottom:0;padding-bottom:clamp(9px,1.2vw,13px);
border-bottom:2px solid var(--ink)}
/* conteggio accanto al titolo di reparto, dentro .cal-gruppo */
.cal-gruppo .quanti{font-weight:700;letter-spacing:.1em;color:var(--muted)}
.cal-gruppo .quanti::before{content:"";display:inline-block;width:14px;height:1px;background:var(--line-strong);vertical-align:middle;margin-right:9px}
/* --rosa-ritratto e --rosa-num sono le due manopole della riga: il quadrato
della foto e la colonna del numero. Il nome prende quello che resta.
La colonna del numero esiste solo con .rosa-elenco--numeri, che rosa.php
mette quando ALMENO UN giocatore ha il numero di maglia: a numeri tutti
vuoti una colonna riservata sarebbe una fila di caselle bianche.
Il ruolo e' una colonna a destra e non un sottotitolo: e' il dato che si
scorre in verticale (chi gioca terzino? chi fa il mediano?) e in riga larga
e' anche l'unica cosa che tiene il bordo destro finche' i numeri non ci
sono. Sotto i 760px torna sottotitolo, vedi in fondo al blocco. */
.rosa-elenco{--rosa-ritratto:clamp(52px,5.4vw,66px);--rosa-num:2.6rem;list-style:none;margin:0;padding:0}
.rosa-riga{display:grid;grid-template-columns:var(--rosa-ritratto) minmax(0,1fr) auto;
gap:clamp(13px,1.8vw,20px);align-items:center;
padding:clamp(9px,1.1vw,12px) 0;border-bottom:1px solid var(--line)}
.rosa-elenco--numeri .rosa-riga{grid-template-columns:var(--rosa-ritratto) minmax(0,1fr) auto var(--rosa-num)}
.rosa-riga > *{min-width:0}
.rosa-ritratto{position:relative;aspect-ratio:1;overflow:hidden;background:var(--chrome)}
/* NON riusa .ph di proposito: quella porta una trama di campo con viewBox
orizzontale (400x260) che dentro un quadrato da 72px viene tagliata e legge
come sporco. Il reparto qui e' l'unica sorgente del colore. */
.rosa-fondo{position:absolute;inset:0}
/* Gli stessi quattro selettori valgono anche per .gioc-ritratto-- della
scheda giocatore: stesso reparto, stesso colore, un'unica dichiarazione. */
.rosa-riga--portiere .rosa-fondo,
.gioc-ritratto--portiere .rosa-fondo{background:linear-gradient(140deg,#6C8878 0%,#435C50 58%,#24312B 100%)}
.rosa-riga--difensore .rosa-fondo,
.gioc-ritratto--difensore .rosa-fondo{background:linear-gradient(140deg,#5AB0DF 0%,#036295 58%,#01293E 100%)}
.rosa-riga--centrocampista .rosa-fondo,
.gioc-ritratto--centrocampista .rosa-fondo{background:linear-gradient(140deg,#474747 0%,#242424 58%,#000000 100%)}
.rosa-riga--attaccante .rosa-fondo,
.gioc-ritratto--attaccante .rosa-fondo{background:linear-gradient(140deg,#FB5068 0%,#AE041C 58%,#45020B 100%)}
.rosa-ritratto img,.gioc-ritratto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
/* sagoma di maglia: sta al posto della foto senza scusarsi */
.rosa-maglia{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:.26}
.rosa-maglia svg{width:52%;height:auto}
.rosa-chi{display:flex;flex-direction:column;gap:3px}
/* Nome tenue, cognome in nero pieno: un calciatore lo si cerca dal cognome, e
scorrendo la colonna e' quello che deve saltare all'occhio. Non maiuscolo —
in riga il maiuscoletto pesa, come gia' visto sui titoli dell'archivio. */
.rosa-nome{font-size:clamp(1.02rem,1.35vw,1.26rem);font-weight:500;letter-spacing:-.018em;
line-height:1.16;color:var(--muted)}
.rosa-nome b{font-weight:800;color:var(--ink)}
/* Il nome e' l'unico link della riga: sottolineatura solo all'interazione,
niente colore nuovo (eredita da a{color:inherit}). Qualificato con `a`
perche' .rosa-nome sta anche sullo di chi non ha uno slug: un
sottolineato all'hover su un nome non cliccabile prometterebbe il falso.
Il link e' un flex item di .rosa-chi, quindi occupa tutta la colonna del
nome: bersaglio generoso sul telefono, e nessun altro elemento della riga
gli contende quello spazio. */
a.rosa-nome:hover,a.rosa-nome:focus-visible{text-decoration:underline}
.rosa-ruolo{text-align:right;font-size:.7rem;font-weight:600;text-transform:uppercase;
letter-spacing:.1em;color:var(--muted)}
.rosa-numero{justify-self:end;font-size:clamp(1.3rem,2vw,1.62rem);font-weight:800;
letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
/* Sotto i 760px la colonna del ruolo non ha piu' spazio accanto al nome:
torna sottotitolo sotto il cognome, che e' il layout da telefono. Il numero
resta all'estrema destra, dove sta anche in riga larga.
Queste regole stanno DOPO le basi: a pari specificita' vince l'ultima nel
sorgente (un @media scritto prima della base non avrebbe effetto). */
@media (max-width:760px){
.rosa-riga{grid-template-columns:var(--rosa-ritratto) minmax(0,1fr);gap:14px;
row-gap:2px;align-items:center}
.rosa-elenco--numeri .rosa-riga{grid-template-columns:var(--rosa-ritratto) minmax(0,1fr) var(--rosa-num)}
.rosa-ritratto{grid-column:1;grid-row:1/span 2}
.rosa-chi{grid-column:2;grid-row:1}
.rosa-ruolo{grid-column:2;grid-row:2;text-align:left}
.rosa-elenco--numeri .rosa-numero{grid-column:3;grid-row:1/span 2}
}
/* Sotto i 480px il cognome piu' lungo (BRUZZANITI) non ci sta accanto al
ritratto: rimpicciolisci e, se serve, manda a capo invece di sfondare. */
@media (max-width:479.98px){
.rosa-elenco{--rosa-ritratto:52px;--rosa-num:2.1rem}
.rosa-nome{font-size:.98rem;overflow-wrap:anywhere}
.rosa-ruolo{font-size:.66rem;letter-spacing:.08em}
}
/* ---------- pagina giocatore: la testa della scheda e la tabella gara per gara ----------
Due colonne: ritratto piu' grande a sinistra, nome e ruolo a destra.
.rosa-fondo, .rosa-maglia e i duotoni per reparto sono quelli della rosa
(vedi sopra): qui cambia solo la misura del ritratto, non il device. */
.gioc-testa{display:grid;grid-template-columns:clamp(96px,16vw,168px) 1fr;
gap:clamp(16px,2.4vw,28px);align-items:center;
margin:clamp(24px,4vw,48px) var(--pad) clamp(20px,3vw,32px)}
.gioc-ritratto{position:relative;aspect-ratio:1;overflow:hidden;background:var(--chrome)}
.gioc-chi{display:flex;flex-direction:column;gap:8px;min-width:0}
.gioc-chi h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:500;letter-spacing:-.02em;
line-height:1.04;color:var(--muted);overflow-wrap:anywhere}
/* Cognome in nero pieno, come .rosa-nome b: e' quello che salta all'occhio. */
.gioc-chi h1 b{font-weight:800;color:var(--ink)}
.gioc-ruolo{font-size:.85rem;color:var(--muted)}
.gioc-numero{font-weight:600}
/* Corsivo per uno stato non-presente, come .cal-ora--tbd e .coppa-ora--tbd.
Solo il corsivo, pero': quelle due portano anche font-weight 500 perche'
stanno in una colonna di orari, dove il peso separa il previsto dal
definito. Qui e' una riga di prosa e il peso non ha niente da separare. */
.gioc-ex{font-style:italic}
/* La riga di una gara che il giocatore ha saltato: si legge, ma non compete
con quelle giocate. Nessun colore nuovo, solo meno contrasto.
Il th e' qualificato con .stat-confronto perche' .stat-confronto tbody th
ridipinge il th della riga con --ink e ha specificita' piu' alta: senza il
qualificatore l'avversario resterebbe a contrasto pieno. */
.gioc-fuori td,.stat-confronto .gioc-fuori th{color:var(--muted)}
.gioc-sfida{display:flex;align-items:center;gap:8px;min-width:0}
/* C/T: un quadratino, non una parola, per non rubare larghezza al nome
dell'avversario, che e' l'informazione della colonna. */
.gioc-dove{display:grid;place-items:center;width:18px;height:18px;flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);font-size:.62rem;font-weight:800}
/* Sotto i 560px il ritratto grande accanto al nome non regge piu': si
impila, ritratto sopra. Regola DOPO la base, a pari specificita' vince
l'ultima nel sorgente. */
@media (max-width:560px){
.gioc-testa{grid-template-columns:1fr;justify-items:start;gap:14px}
.gioc-ritratto{width:clamp(88px,28vw,120px)}
}
/* ---------- redazione: la gerenza come elenco ----------
Stessa forma della rosa e per la stessa ragione: finche' i ritratti non ci
sono, una griglia di schede sarebbe una pagina di rettangoli vuoti. La
differenza e' a destra — ogni riga porta l'archivio della firma e la mail —
quindi il ruolo scende sotto il nome invece di occupare la colonna finale,
che qui serve ai link.
NON riusa le classi .rosa-*: quelle codificano il REPARTO nel fondo del
ritratto (verde ai portieri, rosso agli attaccanti) e legano due pagine che
non hanno ragione di cambiare insieme. Le regole condivise sono i token e
i device (.pagina-misura, il filetto ink, il maiuscoletto della metariga).
Senza foto si stampano le INIZIALI: le persone della redazione sono poche e
hanno un nome, due lettere lo dicono meglio di una sagoma uguale per tutti. */
.redaz-pagina{--misura:1180px;padding-bottom:clamp(48px,6vw,80px)}
/* Quattro schede per riga come una gerenza stampata, e non tre come le vetrine
video: li' il soggetto e' un fotogramma e vuole larghezza, qui e' una faccia
e a quattro il ritratto resta sopra i 240px, cioe' sopra la misura in cui si
riconosce qualcuno. */
.redaz-griglia{list-style:none;margin:clamp(22px,3vw,38px) var(--pad) 0;padding:0;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.1vw,28px)}
.redaz-scheda{min-width:0;display:flex;flex-direction:column}
/* Il ritratto e' quadrato e ancorato in ALTO: uno scatto a mezzo busto tagliato
al centro perde la fronte, e in una pagina di facce e' il taglio che si nota
per primo. */
.redaz-ritratto{position:relative;aspect-ratio:1;overflow:hidden;background:var(--chrome)}
.redaz-ritratto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
/* Le iniziali stanno SOPRA il fondo duotone e sono piene, non al 66%: sul
gradient del .ph un bianco smorzato si perderebbe nella parte chiara. */
.redaz-iniziali{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;letter-spacing:.02em;line-height:1;
text-shadow:0 1px 10px rgba(0,0,0,.28)}
/* La didascalia e' una fascia chiara staccata dal ritratto da un filetto rosso:
e' l'unico colore della scheda e fa da riga di gerenza sotto la faccia.
flex:1 perche' le schede della stessa riga chiudano allineate anche quando un
cognome va a capo e una mail lunga si spezza. */
.redaz-didascalia{flex:1;display:flex;flex-direction:column;gap:1px;
padding:clamp(11px,1.3vw,15px) clamp(12px,1.4vw,16px) clamp(12px,1.4vw,16px);
background:var(--surface-2);border-top:3px solid var(--red)}
.redaz-ruolo{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
color:var(--muted)}
/* Nome tenue e cognome in nero pieno, uno sopra l'altro: il cognome e' la
chiave con cui una redazione si cita, e prende il corpo maggiore. */
.redaz-nome{margin-top:5px;font-size:.8rem;font-weight:600;text-transform:uppercase;
letter-spacing:.06em;line-height:1.1;color:var(--muted)}
.redaz-cognome{font-size:clamp(1rem,1.25vw,1.28rem);font-weight:800;text-transform:uppercase;
letter-spacing:-.012em;line-height:1.08;color:var(--ink);overflow-wrap:anywhere}
/* I link seguono il cognome a distanza fissa e NON sono appoggiati al fondo
della fascia: appoggiati, una scheda con due link e una con uno solo
partirebbero a due altezze diverse, e nella riga si legge come uno sfasamento.
Ancorati al nome partono tutti allineati, e lo spazio che avanza resta sotto. */
.redaz-link{padding-top:10px;display:flex;flex-direction:column;gap:3px}
/* Il link all'archivio ha la voce dei richiami del sito (maiuscoletto rosso,
come "Tutte le news" e i temi della pagina autore): dice che si va da
un'altra parte dentro il giornale, non che si apre un contatto. */
.redaz-archivio{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
color:var(--red-dark)}
/* Il conteggio resta nel maiuscoletto dell'etichetta: senza la stessa
spaziatura sembrerebbe una cifra caduta li' per sbaglio. */
.redaz-archivio span{letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
.redaz-mail{font-size:.72rem;color:var(--muted);overflow-wrap:anywhere}
@media (hover:hover){
.redaz-scheda:hover .redaz-cognome{color:var(--red)}
.redaz-archivio:hover{color:var(--ink)}
.redaz-mail:hover{color:var(--red)}
}
/* Le soglie: a 1120 cadono le quattro colonne perche' sotto il ritratto
scenderebbe sotto i 240px; a 860 restano due, e due reggono fino al telefono
— una faccia sola per riga farebbe di una redazione di sei persone sei
schermate di scroll. Stanno DOPO le regole base: a pari specificita' vince
l'ultima nel sorgente. */
@media (max-width:1119.98px){
.redaz-griglia{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:859.98px){
.redaz-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:400px){
.redaz-cognome{font-size:.98rem}
.redaz-mail{font-size:.68rem}
}
/* ---------- Sicilia Stadio: l'edicola e il sommario del numero ----------
IL CONTENUTO E' LA COPERTINA. In edicola non si legge una didascalia, si
guarda una copertina: qui prende tutta la tessera, in 3:4 come una rivista
stampata, e sotto resta una riga sola con data e titolo. Tre per fila e non
quattro come le vetrine video: li' il soggetto e' un fotogramma dentro una
scheda, qui il soggetto E' la scheda, e a quattro una copertina scenderebbe
sotto i 270px, cioe' sotto la misura in cui un titolo di copertina si legge. */
.sicilia-pagina{--misura:1180px;padding-bottom:clamp(48px,6vw,80px)}
.edicola{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(26px,3vw,44px) clamp(16px,2.2vw,30px);
margin:clamp(24px,3.4vw,40px) var(--pad) 0}
.numero{min-width:0}
.numero > a{display:flex;flex-direction:column;gap:13px}
.numero-copertina{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--chrome)}
.numero-copertina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .4s ease}
/* La riga sotto la copertina e' un'etichetta da scaffale: prima la data, che e'
quello che distingue un'uscita dall'altra, poi il titolo. */
.numero-riga{display:flex;flex-direction:column;gap:5px;min-width:0}
.numero-riga time{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.numero-riga b{font-size:1.05rem;font-weight:800;line-height:1.15;text-transform:uppercase;
letter-spacing:-.005em;overflow-wrap:anywhere}
/* La testata del sommario: la copertina ACCANTO al titolo, non sopra. Sopra
sarebbe una seconda edicola da una tessera sola; accanto dice "questo
numero", e sotto comincia subito il sommario. Il filetto ink e' il device
che apre gli elenchi in tutto il sito. */
.numero-testa{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
gap:clamp(20px,3vw,40px);align-items:center;
margin:clamp(24px,3.4vw,40px) var(--pad) clamp(24px,3vw,40px);
padding-bottom:clamp(20px,2.6vw,32px);border-bottom:2px solid var(--ink)}
.numero-testa > *{min-width:0}
.numero-testa-copertina{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--chrome)}
.numero-testa-copertina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.numero-testa-testo{display:flex;flex-direction:column;gap:9px}
.numero-testa-eti{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:800;
text-transform:uppercase;letter-spacing:.14em;color:var(--red)}
.numero-testa h1{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;line-height:1.05;
text-transform:uppercase;letter-spacing:-.015em}
.numero-testa time{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
@media (hover:hover){
.numero > a:hover .numero-copertina img{transform:scale(1.04)}
.numero > a:hover .ph > i{transform:scale(1.04)}
.numero > a:hover .numero-riga b{color:var(--blue-dark)}
}
@media (prefers-reduced-motion: reduce){
.numero-copertina img{transition:none}
.numero > a:hover .numero-copertina img,.numero > a:hover .ph > i{transform:none}
}
/* Le soglie: a 860 le copertine scendono a due per fila, e due reggono fino al
telefono — a 390px una copertina 3:4 larga quanto lo schermo sarebbe alta
mezzo schermo, e sei numeri diventerebbero tre schermate di scroll. La
testata del sommario si impila sotto i 640, con la copertina che smette di
prendersi meta' riga. Stanno DOPO le regole base: a pari specificita' vince
l'ultima nel sorgente. */
@media (max-width:859.98px){
.edicola{grid-template-columns:repeat(2,minmax(0,1fr))}
.numero-testa{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
}
@media (max-width:639.98px){
.numero-testa{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.numero-testa-copertina{max-width:180px}
.numero-riga b{font-size:.95rem}
}
/* ---------- la coda dell'articolo ----------
Chi arriva in fondo ha finito di leggere: qui trova le ultime notizie, il
richiamo all'archivio e i due moduli del binario della home.
STESSA MISURA DELL'ARTICOLO (860px): la coda continua la colonna di lettura,
non apre una pagina nuova sotto. Il filetto ink in cima e' il device che
apre gli elenchi nel resto del sito — classifica, gerenza, sommario di un
numero — e qui fa da linea di separazione. */
.coda-articolo{max-width:860px;margin:0 auto;padding:0 var(--pad) clamp(48px,6vw,80px)}
.coda-articolo > :first-child{padding-top:clamp(26px,3.4vw,40px);border-top:2px solid var(--ink)}
/* .blocco porta i suoi margini laterali per stare in una colonna della home:
qui il padding e' gia' del contenitore e si sommerebbero. */
.coda-articolo .blocco{margin:0}
.coda-articolo .altri{padding:clamp(22px,2.6vw,34px) 0 0}
/* I due moduli affiancati. Nel binario stanno uno sopra l'altro perche' la
colonna e' stretta; qui la riga e' larga 860 e impilarli farebbe due
schermate di scroll dopo un articolo gia' lungo. */
.coda-moduli{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(16px,2.2vw,28px);margin-top:clamp(30px,3.6vw,46px)}
.coda-moduli > *{min-width:0}
/* L'altezza della classifica va DETTA. Nel binario gliela da' il flex del
contenitore, e sotto i 1120 c'e' gia' una regola che la fissa; qui sopra i
1120 resterebbe senza, e venti squadre farebbero un modulo alto quanto
l'articolo. Stesso clamp della regola che governa il caso impilato. */
.coda-moduli .mod-classifica{height:clamp(300px,46vh,400px)}
/* Sotto i 700 la riga non tiene due moduli da 350: il cartellino partita
scenderebbe sotto i 260px, la misura minima sotto cui la riga della
classifica non tiene stemma, nome, partite e punti sulla stessa linea. */
@media (max-width:699.98px){
.coda-moduli{grid-template-columns:minmax(0,1fr)}
}
/* ---------- contatti: i recapiti scritti grandi ----------
I RECAPITI SONO IL CONTENUTO, quindi prendono il corpo del contenuto. Su una
pagina contatti l'indirizzo non e' la didascalia di un'icona: e' la cosa che
il lettore e' venuto a prendere. In corpo display si legge da lontano, si
seleziona senza mirare e sul telefono e' un bersaglio grande quanto la riga.
Il numero e' grande come la mail anche se il canale e' secondario: un
telefono in corpo piccolo su un telefono e' un tap sbagliato.
La misura e il filetto ink in testa all'elenco sono gli stessi di redazione
e classifica: e' il device con cui il sito apre una colonna di righe.
PILLOLE RIUSATE: il pulsante "copia" e i profili social sono .chip, la
pillola dei filtri categoria — stesso bordo, stesso raggio, stesso bersaglio
da 44px sotto i 640. Qui si aggiunge solo cio' che cambia davvero: l'icona
accanto all'etichetta (.rete) e lo stato nascosto del pulsante. */
.contatti-pagina{--misura:760px;padding-bottom:clamp(48px,6vw,80px)}
.contatti-intro{margin:clamp(20px,3vw,30px) var(--pad) 0}
.contatti-canali{list-style:none;margin:clamp(26px,3.4vw,42px) var(--pad) 0;padding:0;border-top:2px solid var(--ink)}
/* Etichetta e nota spannano la riga; il valore tiene la prima colonna e il
pulsante la seconda, cosi' "copia" resta accanto all'indirizzo e non sotto. */
.canale{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px clamp(14px,2vw,24px);
align-items:center;padding:clamp(17px,2.3vw,26px) 0;border-bottom:1px solid var(--line)}
.canale > *{min-width:0}
.canale-etichetta{grid-column:1/-1;font-size:.7rem;font-weight:800;text-transform:uppercase;
letter-spacing:.1em;color:var(--muted)}
/* overflow-wrap:anywhere e non break-word: un indirizzo lungo va spezzato dove
capita piuttosto che sfondare la colonna e portarsi dietro la pagina. */
.canale-valore{grid-column:1;font-size:clamp(1.4rem,5.4vw,2.7rem);font-weight:800;
letter-spacing:-.03em;line-height:1.06;overflow-wrap:anywhere;transition:color .15s ease}
/* La nota dice A COSA SERVE quel canale: e' la sola cosa che una pagina
contatti deve aggiungere al recapito. Misura da lettura, non da titolo. */
.canale-nota{grid-column:1/-1;max-width:54ch;font-size:.87rem;color:var(--muted);line-height:1.5;text-wrap:balance}
.contatti-copia{grid-column:2;white-space:nowrap}
.contatti-copia[hidden]{display:none}
/* GRIGLIA e non flex-wrap: sette profili in fila a capo lasciavano l'ultimo da
solo sulla seconda riga, e un orfano sembra un errore. A colonne uguali le
pillole si dispongono in una matrice — quattro e tre — che si legge come un
elenco invece che come una fila andata storta. Il minmax e' la misura
dell'etichetta piu' lunga ("X (Twitter)") con la sua icona. */
.canale-reti{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
gap:8px;margin-top:1px}
.rete{display:inline-flex;align-items:center;gap:8px;padding-inline:14px}
.contatti-coda{margin:clamp(20px,2.6vw,30px) var(--pad) 0;font-size:.92rem;color:var(--muted)}
.contatti-coda a{font-weight:700;color:var(--red-dark)}
@media (hover:hover){
.canale-valore:hover{color:var(--red)}
.rete:hover{color:var(--red)}
.contatti-coda a:hover{color:var(--ink)}
}
@media (prefers-reduced-motion: reduce){.canale-valore{transition:none}}
/* Sotto i 520px il pulsante non sta piu' accanto all'indirizzo senza
strozzarlo: scende sulla sua riga, allineato all'asse del testo. Questa
regola sta DOPO le basi: a pari specificita' vince l'ultima nel sorgente. */
@media (max-width:520px){
.canale{grid-template-columns:minmax(0,1fr)}
.contatti-copia{grid-column:1;justify-self:start;margin-top:3px}
}
/* ---------- calendario: righe partita ----------
Sostituisce .partita.gara su calendario.php. Quella aveva colonne a
larghezza FISSA (112px 172px ...) e "ora da definire" sfondava sul nome
delle squadre in 19 righe su 38: qui le colonne sono flessibili e i
contenuti possono restringersi (minmax(0,...)).
NB: il contenitore si chiama .cal-elenco e non .cal-gruppo perche' quel
nome e' gia' preso qui sopra dall'intestazione di giornata. */
.cal-mese{display:flex;align-items:baseline;gap:9px;margin:clamp(26px,3vw,40px) 0 10px;
font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.cal-mese span{font-weight:600;color:var(--muted);letter-spacing:.08em}
/* --cal-sfida-w: unica manopola per la larghezza del confronto. La usano sia
la traccia centrale della griglia sia .cal-sfida: devono restare uguali.
Vale 450px e non 420 perche' la casella centrale adesso tiene il risultato
(--esito-w) invece del solo trattino: senza i 30px in piu' le due squadre
perderebbero quello spazio e i nomi lunghi si troncherebbero.
--cal-riga-pad: respiro verticale fra una partita e l'altra. */
.cal-elenco{display:block;border-top:1px solid var(--line);
--cal-sfida-w:450px;--cal-riga-pad:30px}
/* Tracce laterali uguali (1fr ciascuna) invece di auto: cosi' il confronto
sta al centro esatto della riga sempre. Con le laterali auto la larghezza
dipendeva dal contenuto (il tag TRASFERTA e' piu' largo di CASA) e le righe
si spostavano di ~19px l'una rispetto all'altra. */
.cal-riga{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--cal-sfida-w)) minmax(0,1fr);
gap:clamp(12px,2vw,28px);align-items:center;
/* Il margine interno si stringe SOLO sui telefoni davvero stretti, dove quei
10px per lato valgono un pezzo di nome: misurato, a 360px con il margine
pieno quindici nomi vanno a capo, a 393px nessuno. Quindi la rampa e'
corta — minimo a 376, pieno a 400 — e non lenta fino a 760 come in una
prima versione, che lasciava le righe a filo del margine di pagina su
mezzo parco telefoni.
IL MINIMO E' 4px E NON 0, e i 4px non sono estetici: .cal-riga--prossima
disegna la sua barra rossa con un box-shadow INSET da 3px, che sta dentro
il padding box. A zero il contenuto della riga evidenziata partiva sotto
la barra — misurato, da 360 a 375px, cioe' esattamente sulle due
larghezze di telefono piu' diffuse (360 Android, 375 iPhone SE/8).
Sotto i 360 la riga si impila e riprende i suoi 10px (blocco @359.98). */
padding:var(--cal-riga-pad) clamp(4px, calc(25vw - 90px), 10px);
transition:background .15s ease}
.cal-riga:hover{background:var(--surface-2)}
/* la prossima partita: unico elemento evidenziato della lista */
.cal-riga--prossima{background:var(--red-tint);box-shadow:inset 3px 0 0 var(--red)}
.cal-riga--prossima:hover{background:var(--red-tint-strong)}
.cal-quando{display:flex;flex-direction:column;gap:2px;min-width:0}
.cal-data{font-weight:700;font-size:.95rem;text-transform:capitalize}
.cal-ora{font-size:.8rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.cal-ora--tbd{font-weight:500;font-style:italic}
/* Scatola di larghezza fissa: le due squadre stanno ai suoi estremi, quindi
stemmi e nomi cadono su assi verticali costanti riga dopo riga. Il
max-width duplica il cap della traccia centrale perche' sotto i 760px la
griglia passa a 2 colonne e .cal-sfida sta in una colonna 1fr. */
/* align-items:flex-start e NON center: il blocco squadra e' alto due righe
(nome + forma) e la casella del risultato una sola. Centrandola sul blocco
finiva 9px sotto la riga dei nomi — orizzontalmente al centro esatto, ma
verticalmente appesa nel vuoto fra le due righe. Il risultato e' il pari
grado del nome, non della forma: parte dallo stesso filo. */
.cal-sfida{display:flex;align-items:flex-start;gap:clamp(14px,1.4vw,20px);
width:100%;max-width:var(--cal-sfida-w);margin-inline:auto;min-width:0}
/* ---------- risultato fra le due squadre (calendario E coppa) ----------
Nomi generici come .rigori e .rinviata: le due pagine mostrano la stessa
cosa e leggono la stessa definizione, non due copie che divergono.
Casella centrale del confronto: prima della gara il trattino, dopo il
risultato. Il dato che si cerca per primo sta sull'asse centrale della
riga, in mezzo alle due squadre, non in fondo. La larghezza e' FISSA e
uguale nei due stati: se cambiasse, le righe giocate spingerebbero le
squadre verso l'interno e i nomi non cadrebbero piu' sullo stesso asse. */
.esito{flex:none;width:var(--esito-w);
display:flex;flex-direction:column;align-items:center;gap:3px}
/* --muted e non --line-strong: quello e' il token dei FILETTI, tarato per
essere appena visibile, e come colore di testo dava 1.58:1 sul bianco e
1.43:1 sulla riga della prossima partita. axe-core non lo segnalava — esclude
la punteggiatura isolata — quindi serviva la misura sulla coppia vera:
tests/Smoke/FrontendContrastTest.php. */
.esito--attesa{color:var(--muted);font-weight:700}
.esito--live{color:var(--red-dark)}
/* I due numeri stanno a cavallo di un filetto verticale: e' la linea di
meta' campo del cartellino (.tabellone--risultato) in piccolo, e mette
ogni numero dalla parte della sua squadra.
minmax(0,1fr) E NON 1fr: `1fr` vale `minmax(auto,1fr)`, quindi una traccia
non scende MAI sotto il suo contenuto. I due misurano cifra + padding
(20,28px a 360) e non entrano nella casella (--esito-w, 34px li'): con
l'auto le tracce restavano larghe quanto il contenuto e la griglia sfondava
TUTTA VERSO DESTRA, spostando la coppia di 3,28px fuori centro — il
contenitore era centrato, i numeri dentro no.
Con minmax(0,1fr) le due meta' sono uguali per costruzione: se il testo
sborda, sborda simmetrico, e la coppia resta centrata a qualunque
larghezza e con qualunque numero di cifre. */
.esito__punti{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
width:100%;font-size:1.15rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.esito__punti::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
transform:translateX(-.5px);background:var(--line-strong)}
/* IL VUOTO STA SOLO DAL LATO DEL FILETTO. Serve a staccare la cifra dalla
linea di meta' campo; dall'altro lato non stacca da niente, perche' li' c'e'
gia' il gap del confronto. Su tutti e due i lati invece la cifra non entrava
nella sua meta' — 12,28px di glifo + 4 + 4 fanno 20,28 in 17px a 360 — il
testo traboccava, e UN TESTO CHE TRABOCCA IGNORA text-align e si appoggia
comunque a sinistra: le due cifre finivano spinte tutte e due dallo stesso
lato e la coppia usciva dal centro. Con il vuoto su un lato solo la cifra
entra (16,28 in 17) e text-align torna a valere. */
.esito__punti{--punti-stacco:clamp(4px, calc(.83vw + .67px), 7px)}
.esito__punti b{padding:0}
.esito__punti b:first-child{text-align:right;padding-right:var(--punti-stacco)}
.esito__punti b:last-child{text-align:left;padding-left:var(--punti-stacco)}
/* Spia di diretta: il minuto quando la redazione lo tiene aggiornato, la
parola quando no. Stesso battito del cartellino e del cammino di coppa. */
.diretta{display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;color:var(--red-dark);font-variant-numeric:tabular-nums}
.diretta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);
animation:battito 1.9s ease-out infinite}
.cal-team{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 0}
.cal-team:last-child{flex-direction:row-reverse;text-align:right}
.cal-stemma{width:30px;height:30px;object-fit:contain;flex:none}
.cal-stemma--vuoto{border-radius:50%;background:#EDF0F3}
.cal-team__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.cal-team__nome{font-weight:600;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Il Catania in rosso: si capisce dalla posizione se gioca in casa (a
sinistra) o in trasferta (a destra), senza dover leggere. */
.cal-team--noi .cal-team__nome{font-weight:800;color:var(--red-dark)}
.cal-forma{font-size:.72rem;color:var(--muted);white-space:nowrap}
.cal-forma b{color:var(--ink);font-weight:800}
/* Quale competizione, dove siamo dentro (giornata o turno) e, quando serve, il
rinvio: i metadati della gara stanno tutti qui, a filo destro perche' la
colonna e' l'ultima della riga. A sinistra resta il solo quando, data e ora.
Il risultato non sta piu' qui, sta in mezzo alle squadre. */
.cal-dove{flex:none;justify-self:end;display:flex;flex-direction:column;
align-items:flex-end;gap:2px;text-align:right;min-width:0}
/* Solo testo: senza cornice i due maiuscoletti non competono con il confronto,
e a filo destro si allineano otticamente con il resto della colonna. La
competizione sta sopra e un filo piu' grande del turno, si legge dal
generale al particolare. */
.cal-competizione{font-size:.66rem;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted)}
.cal-tag{font-size:.62rem;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* Sotto i 760px la riga diventa a due piani: sopra data e ora a sinistra con
competizione e turno all'estrema destra, sotto il confronto a tutta
larghezza. Cosi' le due squadre hanno sempre meta' riga a testa e
restano su assi fissi, invece di essere spinte di lato dalla colonna. */
@media (max-width:760px){
/* Riga su due piani. La distanza fra una partita e l'altra (--cal-riga-pad
x2 = 48px) deve restare nettamente maggiore di quella fra i due piani
della stessa partita (row-gap 18px), altrimenti le righe smettono di
leggersi come blocchi: qui non c'e' un filetto a separarle, solo il
vuoto. Rapporto 2,7:1 — prima era 6:1, troppo stretto dentro e troppo
largo fuori. */
.cal-elenco{--cal-riga-pad:24px}
.cal-riga{grid-template-columns:minmax(0,1fr) auto;gap:18px 12px}
/* flex-wrap + nowrap sui figli: a 320px data e ora non ci stanno in riga e
senza questo si spezzavano DENTRO ("Sab 29 / Ago"). Cosi' va a capo il
pezzo intero, che e' l'unico a-capo che si legge. */
.cal-quando{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 8px;grid-column:1;grid-row:1}
.cal-data,.cal-ora{white-space:nowrap}
/* sotto gli 11px il maiuscoletto grigio non si legge su un telefono. La
competizione qui puo' andare a capo: "COPPA ITALIA SERIE C" tutta d'un
fiato sono ~145px di colonna 'auto' e a 320px spingerebbe la riga oltre il
viewport. Il turno invece e' corto e resta intero. */
.cal-competizione{font-size:.7rem}
.cal-tag{font-size:.7rem}
.cal-dove{grid-column:2;grid-row:1}
/* A tutta riga: il cap da 420px tiene le due squadre su assi fissi quando
accanto c'e' altro, ma qui il confronto ha il piano tutto per se' e quel
cap lascerebbe da 40 a 110px di margine vuoto per lato. Senza, gli stemmi
vanno agli estremi e il nome ha piu' spazio prima di andare a capo. */
.cal-sfida{grid-column:1/-1;grid-row:2;min-width:0;max-width:none;gap:clamp(8px, calc(.55vw + 5.8px), 10px)}
/* I nomi vanno a capo invece di essere troncati. overflow-wrap e' la rete:
"Salernitana" e' una parola sola e non ha punti di a-capo, quindi senza
spezzerebbe fuori dalla sua meta' riga invece di andare a capo. */
.cal-team__nome{font-size:clamp(.86rem, calc(.267vw + .793rem), .92rem);white-space:normal;overflow-wrap:anywhere}
/* stemmi piu' grandi: sul telefono sono il modo piu' rapido di riconoscere
l'avversario, piu' del nome */
.cal-stemma{width:clamp(34px,8.5vw,40px);height:clamp(34px,8.5vw,40px)}
}
@media (prefers-reduced-motion: reduce){.cal-riga{transition:none}}
/* ---------- coppa italia: il cammino come un filo ----------
Il backend segue una squadra sola, quindi un tabellone a otto rami con
sette vuoti direbbe il falso: qui il cammino e' un filo verticale che
scende di turno in turno. Quello che si ricorda della pagina e' come
FINISCE il filo — reciso quando sei fuori, aperto su un nodo vuoto quando
il prossimo turno non e' ancora fissato.
Un solo elemento della pagina e' grande (il verdetto). Tutto il resto sta
zitto: righe, filetti, il trattamento delle squadre gia' in uso altrove
(.cal-stemma, riusata e non riscritta).
--nodo / --filo-w sono le due sole manopole della geometria: il filo cade
sempre al centro del nodo perche' la sua x e' calcolata da loro. */
/* Un solo contenitore per verdetto e turni: il filo e i pallini vivono nella
GRONDAIA a sinistra (--gutter), il contenuto comincia dopo. Cosi' il filetto
del verdetto e i pallini dei turni stanno sulla stessa identica x e nessuno
sporge oltre il margine della pagina: il pallino piu' a sinistra tocca
esattamente il bordo del riquadro, non lo scavalca.
--nodo e --filo-w sono le sole manopole: la x del filo si calcola da loro. */
.coppa{position:relative;margin:clamp(26px,3.5vw,44px) var(--pad) 0;padding-left:var(--gutter);
--nodo:20px;--filo-w:3px;--gutter:40px;--turno-top:clamp(26px,3.4vw,44px);--bordo:1px}
/* x del filo, in coordinate di un figlio (che parte dopo la grondaia) */
.coppa{--filo-left:calc((var(--nodo) - var(--filo-w)) / 2 - var(--gutter))}
.coppa-verdetto{position:relative;padding:clamp(26px,3.4vw,42px) clamp(20px,3vw,40px);
background:var(--surface-2);border:var(--bordo) solid var(--line)}
/* Il filo comincia qui: il cammino parte dal verdetto e scende nei turni.
COMPENSAZIONE DEL BORDO, e non e' pedanteria: un pseudo-elemento assoluto
si posiziona sul PADDING box, che il bordo da --bordo sposta di 1px, mentre
i pallini e i segmenti dei turni cadono sul border box di elementi senza
bordo. Senza il -1px questo segmento sta un pixel piu' a destra degli altri
e lascia una tacca bianca prima del primo turno: a occhio nudo si vede, e
basta a far sembrare il filo due pezzi invece che uno. */
.coppa-verdetto::before{content:"";position:absolute;
top:calc(-1 * var(--bordo));
bottom:calc(-1 * (var(--bordo) + var(--turno-top) + var(--nodo) / 2));
left:calc(var(--filo-left) - var(--bordo));width:var(--filo-w);background:var(--red)}
.coppa-stagione{margin:0;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* Il tipo piu' grande e piu' stretto del sito: e' l'unica informazione che il
lettore cerca prima di ogni altra, e la pagina gliela da' senza chiedergli
di leggere una tabella. */
.coppa-titolo{margin:6px 0 0;font-size:clamp(2.6rem,8vw,6rem);font-weight:800;
letter-spacing:-.045em;line-height:.88;text-wrap:balance}
.coppa-nota{margin:14px 0 0;max-width:58ch;color:var(--muted);font-size:1rem}
.coppa-filo{list-style:none;margin:0;padding:0}
.coppa-turno{position:relative;padding:var(--turno-top) 0 0}
/* IL SEGMENTO VA DA NODO A NODO, non da bordo a bordo del blocco.
Il tratto fra due turni e' la conseguenza del turno di sopra — "ho passato
gli ottavi, quindi sono in semifinale" — quindi ne prende il colore e
cambia esattamente sul nodo. Prima partiva dal bordo del blocco e il
colore cambiava a meta' del vuoto, in un punto che non voleva dire niente.
Il bottom negativo lo fa sconfinare nel blocco successivo fino al centro
del suo nodo: e' li' che il tratto finisce, non dove finisce il markup. */
.coppa-turno::before{content:"";position:absolute;left:var(--filo-left);
top:calc(var(--turno-top) + var(--nodo) / 2);
bottom:calc(-1 * (var(--turno-top) + var(--nodo) / 2));
width:var(--filo-w);background:var(--line-strong)}
/* l'ultimo turno non ha un nodo a cui arrivare: il filo finisce sul suo */
.coppa-turno:last-child::before{display:none}
/* il pallino, concentrico al filo e tutto dentro la grondaia */
/* box-sizing ESPLICITO, e non e' ridondante: la regola `*{box-sizing:border-box}`
in cima a questo foglio NON copre gli pseudo-elementi (`*` non li seleziona),
quindi senza questa riga il pallino sarebbe largo --nodo PIU' i due bordi —
26px invece di 20 — e il suo centro cadrebbe 3px a destra del filo. Tutti i
calc() qui sotto danno per scontato che --nodo sia la larghezza VISIVA. */
.coppa-turno::after{content:"";position:absolute;box-sizing:border-box;
left:calc(0px - var(--gutter));top:var(--turno-top);
width:var(--nodo);height:var(--nodo);border-radius:50%;
border:var(--filo-w) solid var(--line-strong);background:var(--bg)}
/* turno superato: pallino pieno e filo rosso, il cammino continua */
.coppa-turno--passa::before{background:var(--red)}
.coppa-turno--passa::after{border-color:var(--red);background:var(--red)}
/* turno ancora aperto: il presente e' azzurro, l'altro colore del logo */
.coppa-turno--gioco::before{background:var(--blue)}
.coppa-turno--gioco::after{border-color:var(--blue)}
/* FUORI: sotto il pallino il filo non prosegue, e al suo posto c'e' un tratto
ORIZZONTALE che lo chiude. E' la riga che racconta la pagina. */
.coppa-turno--fuori::after{border-color:var(--red)}
/* Classe raddoppiata per SPECIFICITA': il turno che elimina e' anche
:last-child, e `.coppa-turno:last-child::before` (0,2,1) batterebbe una
`.coppa-turno--fuori::before` (0,1,1) imponendo la sua height — il taglio
verrebbe disegnato verticale invece che orizzontale. */
.coppa-turno.coppa-turno--fuori::before{display:block;
top:calc(var(--turno-top) + var(--nodo) + 10px);bottom:auto;
left:calc(0px - var(--gutter));width:var(--nodo);height:var(--filo-w);background:var(--red)}
/* pallino vuoto in fondo: il sorteggio non l'ha ancora deciso, e la pagina non
se lo inventa */
.coppa-turno--attesa::after{border-style:dashed;border-color:var(--line-strong)}
.coppa-turno--attesa .coppa-turno__nome{color:var(--muted)}
.coppa-turno__nome{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.coppa-turno__esito{margin:3px 0 0;font-size:.7rem;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted)}
.coppa-turno--passa .coppa-turno__esito{color:var(--red-dark)}
.coppa-turno--fuori .coppa-turno__esito{color:var(--red-dark)}
.coppa-live{display:inline-flex;align-items:center;gap:6px;color:var(--red-dark)}
.coppa-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);
animation:battito 1.9s ease-out infinite}
.coppa-gare{margin-top:16px;border-top:1px solid var(--line)}
/* 415px e non 380 per la stessa ragione del calendario: la casella centrale
adesso tiene il risultato, e quello spazio non deve toglierlo alle squadre. */
.coppa-gara{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--coppa-sfida-w)) minmax(0,1fr);
gap:clamp(12px,2vw,28px);align-items:center;
padding:18px clamp(0px, calc(10vw - 36px), 4px);
border-bottom:1px solid var(--line);
--coppa-sfida-w:415px}
.coppa-gara--live{background:var(--red-tint)}
.coppa-quando{display:flex;flex-direction:column;gap:2px;min-width:0}
.coppa-tipo{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.coppa-data{font-weight:700;font-size:.95rem;text-transform:capitalize}
.coppa-ora{font-size:.8rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.coppa-ora--tbd{font-weight:500;font-style:italic}
/* Stesso allineamento del calendario: la casella parte dal filo dei nomi. */
.coppa-sfida{display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,18px);
width:100%;max-width:var(--coppa-sfida-w);margin-inline:auto;min-width:0}
.coppa-team{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 0}
.coppa-team:last-child{flex-direction:row-reverse;text-align:right}
.coppa-team__nome{font-weight:600;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* il Catania in rosso: si capisce dalla posizione se gioca in casa o fuori */
.coppa-team--noi .coppa-team__nome{font-weight:800;color:var(--red-dark)}
/* Colonna di destra: solo lo stato di una gara che un risultato non ce l'ha.
Il risultato sta in mezzo alle due squadre, come nel calendario. */
.coppa-stato{flex:none;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
/* Rigori: stesso lessico e stessa forma ovunque compaiano — cammino di
coppa, elenco calendario, cartellino. */
.rigori{font-size:.72rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Gara senza risultato (rinviata, ancora da giocare): stessa forma nel
calendario e nel cammino di coppa, una definizione sola. */
.rinviata{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
/* Sotto i 760px la griglia della gara passa a due righe: data sopra, sfida e
risultato sotto. Sta DOPO la regola base, altrimenti a pari specificita'
non vincerebbe. */
@media (max-width:760px){
.coppa-gara{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px}
/* Riga a due piani, la stessa del calendario: sopra data e stato, sotto il
confronto (col risultato in mezzo) a tutta larghezza. Prima il confronto
divideva la riga con la colonna di destra e a 320px restavano ~45px per
squadra: i nomi uscivano come "Ca..." e "Al...". */
.coppa-quando{grid-column:1;grid-row:1;flex-direction:row;align-items:baseline;gap:4px 8px;flex-wrap:wrap}
.coppa-tipo{white-space:nowrap;font-size:.7rem}
.coppa-data,.coppa-ora{white-space:nowrap}
.coppa-stato{grid-column:2;grid-row:1;flex-direction:row;align-items:baseline;gap:8px}
.coppa-sfida{grid-column:1/-1;grid-row:2;max-width:none;margin-inline:0;gap:clamp(8px, calc(.55vw + 5.8px), 10px)}
/* i nomi vanno a capo invece di essere troncati dai puntini; overflow-wrap
e' la rete per i nomi senza spazi ("AlbinoLeffe") */
.coppa-team__nome{font-size:clamp(.86rem, calc(.267vw + .793rem), .92rem);white-space:normal;overflow-wrap:anywhere}
.coppa-titolo{font-size:clamp(2.2rem,11vw,3.4rem)}
.coppa{--gutter:30px}
}
/* ---------- telefoni stretti: recuperare larghezza per i nomi ----------
I cinque recuperi che stavano qui — casella del risultato piu' stretta,
numeri piu' vicini al filetto, righe a filo del margine, gap e nome un filo
piu' piccoli — ADESSO SONO CLAMP() NELLE REGOLE BASE, non piu' un blocco
@media a 400px.
Erano un interruttore, e un interruttore su una misura che dipende dalla
larghezza produce un'inversione: sotto i 400px la riga incassava 21px per
squadra, sopra li perdeva tutti insieme. Risultato, la riga diventava PIU'
STRETTA man mano che il telefono si allargava — 148px per squadra a 400px,
127px a 401px, e i 148 non tornavano prima dei ~470. Un Galaxy da 440
stava peggio di un iPhone da 393.
Con i clamp la stessa larghezza si recupera in modo continuo: nessuna
soglia da azzeccare, e la riga non puo' piu' peggiorare crescendo. Sotto i
360 il recupero non basta comunque e le squadre si impilano (@359.98). */
/* ---------- sotto i 360px: le due squadre si impilano ----------
Ultima risorsa, non il comportamento normale del telefono: lascia vuota
meta' riga. Anche con i recuperi qui sopra, sotto i 360 il nome non entra
piu' accanto a stemma e risultato, e li' si impila. Vale per il calendario
e per la coppa: la riga e' la stessa, e prima la coppa non impilava mai —
a 320px "AlbinoLeffe" si spezzava a meta' parola.
STA IN FONDO DI PROPOSITO. Prima veniva prima dei due @media 760 e le sue
regole a pari specificita' perdevano: `gap:6px` sul confronto impilato non
ha mai avuto effetto (vinceva il gap del blocco 760). Qui vince. */
@media (max-width:359.98px){
/* Impilate, le squadre hanno tutta la riga: il vincolo che a 360px obbliga
il margine interno a zero (misurato: a 360 bastano 4px per mandare a capo
i nomi lunghi) qui non c'e' piu', e la riga si riprende il suo margine.
Senza, il testo tocca la barra rossa della prossima partita. */
.cal-riga{padding-inline:10px}
.coppa-gara{padding-inline:4px}
/* Due squadre impilate = due righe, e il punteggio smette di stare in mezzo:
ogni cifra va a fine riga della SUA squadra, come su un tabellone. Fra due
righe una cifra al centro non appartiene a nessuno dei due.
display:contents toglie la scatola a .esito e a .esito__punti senza
toccare il markup — che e' lo stesso di desktop, dove il risultato in
mezzo funziona — cosi' i due diventano celle di questa griglia. */
.cal-sfida,.coppa-sfida{display:grid;grid-template-columns:minmax(0,1fr) auto;
align-items:center;gap:6px 10px}
.esito{display:contents}
.esito__punti{display:contents}
/* Il filetto di meta' campo non ha piu' un centro fra due squadre: senza
scatola resterebbe assoluto rispetto alla riga e taglierebbe il cartellino. */
.esito__punti::before{display:none}
.cal-team:first-child,.coppa-team:first-child{grid-column:1;grid-row:1}
.cal-team:last-child,.coppa-team:last-child{grid-column:1;grid-row:2}
.esito__punti b{grid-column:2;justify-self:end;padding:0;
font-size:1.3rem;line-height:1.15;font-variant-numeric:tabular-nums}
.esito__punti b:first-child{grid-row:1}
.esito__punti b:last-child{grid-row:2}
/* Rigori e minuto della diretta: sotto le due squadre, a filo delle cifre.
Spannano la riga cosi' il collocamento automatico non li infila accanto a
una squadra; la riga NON e' fissata, altrimenti una coppa live durante i
rigori — che stampa tutti e due — li sovrapporrebbe nella stessa cella. */
.rigori,.diretta{grid-column:1/-1;justify-self:end}
.cal-team,.cal-team:last-child,
.coppa-team,.coppa-team:last-child{flex-direction:row;text-align:left}
/* Il trattino fra due squadre impilate non vuol dire niente e sparisce: a
gara da giocare non c'e' nessun numero da mettere in fondo alle righe.
Sta DOPO .esito{display:contents}, che ha la stessa specificita'. */
.esito--attesa{display:none}
/* Il filetto separa le due squadre impilate solo quando in mezzo non c'e'
niente: se c'e' il risultato, e' il risultato a separarle. Il selettore
parte da .esito--attesa (che qui e' display:none, ma resta la sorella
adiacente) e non da .cal-team+.cal-team: fra le due squadre c'e' sempre
la casella centrale, quindi sorelle adiacenti non sono mai. */
.esito--attesa+.cal-team,.esito--attesa+.coppa-team{border-top:1px dashed var(--line);padding-top:6px}
.cal-team__nome,.coppa-team__nome{white-space:normal}
}
/* ---------- vetrina video: Storie, Interviste, Podcast ----------
Il mosaico delle notizie non va bene qui: le sue schede sono orizzontali e
un fotogramma di reel ci starebbe dentro solo tagliato a meta'. Griglia
propria, ritratto, con il tondo di play che dice subito che la copertina
apre un video e non un articolo. Metariga, titolo e firma riusano le
classi del mosaico (.sotto, .meta-riga, .autore): stessa voce tipografica
in tutto il sito.
I nomi sono generici (.vetrina, non .storie) perche' la griglia serve tre
sezioni: Storie, dove ogni scheda apre il visore, Interviste, dove le schede
YouTube portano fuori dal sito, e Podcast, che porta fuori sempre. Renderle
da un partial solo (includes/frontend/video_grid.php) evita le copie che
divergono. Le differenze fra sezioni stanno nelle varianti piu' sotto. */
.vetrina{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3vw,44px) clamp(14px,1.8vw,26px);padding:clamp(6px,1vw,16px) var(--pad) clamp(36px,4.5vw,64px)}
/* QUANDO LA GRIGLIA CADE SUBITO SOTTO IL TITOLO DI PAGINA e' lei l'unico
stacco, e il padding qui sopra non basta: e' scalato a vw, quindi si
RESTRINGE mentre il titolo, in proporzione, cresce — a 560px restavano
6px e «Storie» toccava le copertine. Il minimo di 24px allinea queste
pagine alle altre con .pagina-testa (calendario, classifica, rosa...),
che stanno fra 22 e 30px strette e sui 40 larghe.
Su video.php e news.php in mezzo ci sono le chip dei filtri, che il loro
stacco ce l'hanno gia': li' il selettore non si applica, ed e' il motivo
per cui e' un adiacente e non una regola sul titolo. */
.pagina-testa + .vetrina{padding-top:clamp(24px,2.8vw,40px)}
.vetrina-scheda{min-width:0}
/* :not(.autore) per lo stesso motivo del mosaico: la firma e' un figlio
diretto della scheda, fuori dal link che non puo' contenere un altro . */
.vetrina-scheda > a:not(.autore){display:flex;flex-direction:column;gap:13px}
/* 3/4 e non 9/16, che sarebbe il rapporto vero del reel: a piena colonna
9/16 fa schede alte oltre 500px e nello schermo ne entra una riga scarsa.
3/4 resta inequivocabilmente verticale e tiene la griglia leggibile; il
video vero, nel suo rapporto, si vede nel visore. */
.vetrina-figura{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--chrome)}
.vetrina-figura img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
/* Stesso tondo del pulsante "Ascolta" in testata: rosso di marca, triangolo
bianco. Il sito ha gia' un solo modo di dire "qui parte qualcosa". */
.vetrina-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--red);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.34);transition:background .15s ease,transform .15s ease}
.vetrina-scheda h2{font-size:1.05rem;font-weight:700;line-height:1.18;text-transform:uppercase;letter-spacing:.005em}
/* Bollino d'angolo con l'icona della piattaforma. Serve su Interviste, dove
una scheda Instagram apre il visore e una YouTube porta fuori dal sito:
dirlo PRIMA del click e' l'unico modo perche' nessuno si trovi su un'altra
scheda del browser senza aspettarselo. Su Storie non si stampa — sarebbe
uguale su ogni scheda e non direbbe niente.
Fondo scuro traslucido e non il colore di marca della piattaforma: sopra
una copertina qualsiasi il contrasto dell'icona bianca resta prevedibile,
e la scheda non diventa la pubblicita' di Meta o di Google. */
.vetrina-rete{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.58);color:#fff}
.vetrina-rete svg{width:16px;height:16px}
/* Varianti della griglia. Stanno DOPO le regole base perche' hanno la stessa
specificita': a pari peso vince l'ultima nel sorgente. Gli @media qui sotto
arrivano dopo ancora e continuano a comandare da 1180px in giu', dove le
colonne si spopolano per tutte le vetrine allo stesso modo.
Podcast: tre per riga e copertina orizzontale. Un episodio su YouTube e'
16:9 — nel riquadro 3/4 di Storie resterebbe tagliato ai lati — e a tre
colonne la copertina resta grande abbastanza da leggerci sopra un titolo. */
.vetrina--tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.vetrina--orizzontale .vetrina-figura{aspect-ratio:16/9}
@media (hover:hover){
.vetrina-scheda > a:hover .vetrina-figura img{transform:scale(1.05)}
.vetrina-scheda > a:hover .ph > i{transform:scale(1.05)}
.vetrina-scheda > a:hover .vetrina-play{background:var(--red-dark);transform:translate(-50%,-50%) scale(1.08)}
.vetrina-scheda > a:hover h2{color:var(--blue-dark)}
}
@media (prefers-reduced-motion: reduce){
.vetrina-figura img,.vetrina-scheda .ph > i,.vetrina-play{transition:none}
.vetrina-scheda > a:hover .vetrina-figura img,.vetrina-scheda > a:hover .ph > i{transform:none}
.vetrina-scheda > a:hover .vetrina-play{transform:translate(-50%,-50%)}
}
/* Gli @media stanno DOPO le regole base: a pari specificita' vince l'ultima
nel sorgente. Le soglie sono quelle della griglia, non quelle globali del
mosaico: qui le colonne sono 4 e si spopolano prima. */
@media (max-width:1180px){.vetrina{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.vetrina{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
.vetrina-scheda h2{font-size:1rem}
.vetrina-play{width:46px;height:46px}
}
/* Sotto i 480px la colonna scende a ~150px e le due metarighe affiancate si
toccano: si leggono come una riga sola. Restano DUE colonne — una vetrina
di video a colonna singola diventa uno scroll infinito — ma il filetto
sparisce (a quella larghezza si riduce gia' a zero) e il testo si stringe,
cosi' fra una scheda e l'altra si vede lo stacco. */
@media (max-width:480px){
.vetrina{gap:26px 16px}
.vetrina-scheda .meta-riga{gap:8px;font-size:.62rem;letter-spacing:.08em}
.vetrina-scheda .meta-riga .sep{display:none}
.vetrina-scheda h2{font-size:.92rem}
}
/* ---------- visore della storia: il reel dentro la pagina ----------
Stessa impalcatura dell'overlay di ricerca (fondale