/* Stili dei partial condivisi fra le pagine pubbliche.
   Stavano solo in page-home.css: su /news i cinque "Vai alla sezione" si
   stampavano senza una sola regola che li riguardasse, e la fascia dei chip
   non aveva il contenitore. Un partial condiviso non puo' avere i suoi stili
   dentro il foglio di una pagina sola.

   Caricato prima del foglio della pagina, che quindi puo' ancora sovrascrivere:
   la home resta esattamente com'era. */

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 15px;border:1px solid var(--grey-200);background:var(--white);color:var(--grey-600);
  transition:.18s;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.section-foot{display:flex;justify-content:center;margin-top:28px}
.section-foot .all{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-600);border:1px solid var(--grey-200);padding:14px 28px;transition:.18s;
}
.section-foot .all:hover{background:var(--ink);border-color:var(--ink);color:#fff}
/* Fascia scura del fantacalcio: stesso pulsante, colori invertiti. */
.fanta .section-foot .all{color:var(--grey-400);border-color:#2A2A2E}
.fanta .section-foot .all:hover{background:var(--orange);border-color:var(--orange);color:#fff}

/* ---------- Immagine aperta in grande ---------- */
/* Il dialogo nativo porta con se' il fondo, il fuoco e la chiusura con Esc:
   non serve replicarli a mano. */
.lb{
  border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;
  overflow:visible;
}
.lb::backdrop{background:rgba(0,0,0,.86)}
.lb-img{display:block;max-width:96vw;max-height:88vh;width:auto;height:auto;margin:0 auto}
.lb-cap{
  margin:12px auto 0;max-width:70ch;text-align:center;color:#D9D9DE;
  font-size:13.5px;line-height:1.5;
}
.lb-chiudi{
  position:fixed;top:14px;right:18px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;
  border:0;cursor:pointer;
}
.lb-chiudi:hover{background:rgba(255,255,255,.24)}
/* Un'immagine che si apre lo dice: il puntatore cambia. */
.body a[data-lightbox]{display:block;cursor:zoom-in;border:0}

/* ---------- Collegamenti social ---------- */
/* Erano scritti quattro volte identici, uno per foglio di pagina, e
   parlavano di .ig e .fb: due piattaforme sole, scritte nel CSS. Ora le voci
   arrivano dal pannello e possono essere qualsiasi, quindi si stilano per
   contenitore e non per piattaforma. */
.nav .socials{display:flex;align-items:center;gap:14px}
.nav .socials a{display:flex;align-items:center;color:var(--graphite)}
.nav .socials a::after{display:none}
.nav .socials a:hover{color:var(--orange)}
.nav .socials svg{width:19px;height:19px}

.f-social{display:flex;gap:12px;margin-top:20px}
.f-social a{
  width:36px;height:36px;border:1px solid #3A3A40;display:flex;align-items:center;
  justify-content:center;color:#B4B4B9;transition:.2s;
}
.f-social a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.f-social svg{width:17px;height:17px}

@media (max-width:860px){
  /* Nel menu aperto le icone diventano righe con il loro nome. L'etichetta la
     danno gli attributi, non il CSS: prima erano due content: "Instagram" e
     "Facebook" scritti a mano, e una terza voce sarebbe uscita senza nome. */
  .nav .socials{flex-direction:column;align-items:stretch;gap:0}
  .nav .socials a{gap:10px;padding:14px var(--gut);font-size:15px;border-bottom:1px solid var(--grey-100)}
  .nav .socials a::before{
    content:attr(aria-label);order:1;
    font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.09em;
  }
}

/* ---------- Sezione ridotta al solo titolo ---------- */
/* Tiene il posto di una categoria senza occupare la pagina con una griglia.
   Sta qui e non nel foglio di una pagina: le sezioni sono un partial
   condiviso, e gli stili di un partial non possono vivere in un foglio solo. */
.section-titolo{padding:0}
.titolo-riga{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--grey-200);
  transition:border-color .18s;
}
.titolo-riga h2{
  font-family:var(--display);font-weight:800;font-stretch:112%;
  font-size:clamp(19px,2.1vw,26px);line-height:1.1;letter-spacing:-.02em;margin:0;
}
.titolo-riga .freccia{
  font-family:var(--mono);font-size:15px;color:var(--grey-400);transition:transform .18s,color .18s;
}
a.titolo-riga:hover{border-bottom-color:var(--ink)}
a.titolo-riga:hover h2{color:var(--orange-dark)}
a.titolo-riga:hover .freccia{color:var(--orange);transform:translateX(4px)}
/* Categoria non ancora pubblicata: si legge, non si clicca. */
.titolo-riga.spento h2{color:var(--grey-400)}

/* Sul fondo scuro del fantacalcio i colori si invertono. */
.fanta .titolo-riga{border-bottom-color:#2A2A2E}
.fanta .titolo-riga h2{color:#fff}
.fanta a.titolo-riga:hover h2{color:var(--orange)}

/* ---------- Articolo in evidenza, fondo chiaro ---------- */
/* Era scritto due volte identico, in page-news.css e page-fantacalcio.css.
   Ora serve anche alle sezioni, quindi sta qui una volta sola.
   Ogni regola e' agganciata a .lead: senza, .lead-body si scontrerebbe con
   l'omonimo del blocco scuro, che e' un componente diverso con lo stesso nome. */
.lead-wrap{background:var(--white);padding-bottom:56px}
.lead{
  display:grid;grid-template-columns:1.15fr 1fr;
  border:1px solid var(--grey-200);background:var(--white);transition:background .2s;
}
.lead:hover{background:#FBFBFB}
.lead .thumb{aspect-ratio:auto;min-height:340px;height:100%}
.lead .lead-body{padding:44px;display:flex;flex-direction:column;justify-content:center}
.lead .lead-body .eyebrow{color:var(--orange);display:inline-flex;align-items:center;gap:9px;margin-bottom:14px}
.lead .lead-body .eyebrow::before{content:"";width:22px;height:2px;background:var(--orange)}
.lead .lead-body h2{
  font-family:var(--display);font-weight:800;font-stretch:110%;
  font-size:clamp(25px,3.1vw,40px);line-height:1.04;letter-spacing:-.024em;margin:0 0 16px;
}
.lead:hover .lead-body h2{color:var(--orange-dark)}
.lead .lead-body p{color:var(--grey-600);max-width:46ch;font-size:16px;margin:0 0 22px}
.lead .lead-meta{
  font-family:var(--mono);font-size:11px;color:var(--grey-400);
  letter-spacing:.08em;text-transform:uppercase;display:flex;gap:8px;flex-wrap:wrap;
}
.lead .lead-meta span:not(:last-child)::after{content:" ·";margin-left:8px;color:var(--grey-200)}
.lead .lead-meta b{color:var(--ink);font-weight:500}
/* Dentro una sezione il lead sta gia' in un .wrap: niente fascia a tutta pagina. */
.section .lead{margin-bottom:26px}

@media (max-width:980px){
  .lead{grid-template-columns:1fr}
  .lead .thumb{aspect-ratio:16/9;min-height:0}
  .lead .lead-body{padding:30px 26px 32px}
}

/* ---------- Blocco Fantacalcio, fondo scuro ---------- */
/* Stava in page-home.css con selettori nudi (.lead-body, .f-meta). Serve anche
   alla pagina della categoria, che carica page-news.css: li' .lead-body e' un
   blocco CHIARO, e i due omonimi si sarebbero pestati i piedi lasciando testo
   grigio scuro su fondo nero. Qui ogni regola e' agganciata a .fanta o a
   .fanta-lead: piu' specifica di quelle nude, e incapace di uscire dal blocco. */
.fanta{background:var(--ink);color:#fff}
.fanta .section-head{border-color:#2A2A2E}
.fanta .section-head h2{color:#fff}
.fanta .section-head .all{color:var(--grey-400)}
.fanta .section-head .all:hover{color:var(--orange)}
.fanta .mini{color:var(--grey-400)}
.fanta .sub{color:#8E8E95}
.fanta .chip{background:#121214;border-color:#2A2A2E;color:var(--grey-400)}
.fanta .chip:hover{border-color:var(--orange);color:#fff}
.fanta .chip[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.fanta .empty{background:#121214;color:var(--grey-400)}

/* ultimo contenuto pubblicato, in evidenza */
.fanta-lead{
  display:grid;grid-template-columns:1.1fr 1fr;
  background:#121214;border:1px solid #2A2A2E;margin-bottom:24px;
  transition:background .2s;
}
.fanta-lead:hover{background:#17171A}
.fanta-lead .thumb{aspect-ratio:auto;min-height:300px;height:100%}
.t-fanta{background-image:linear-gradient(125deg,#26262A,#0F0F11 62%,#E95A0C 200%)}
.t-fanta-2{background-image:linear-gradient(145deg,#1E1E21,#0C0C0D 68%,#C24A08 195%)}
.fanta-lead .lead-body{padding:40px;display:flex;flex-direction:column;justify-content:center}
.fanta-lead .lead-body .eyebrow{
  color:var(--orange);display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
}
.fanta-lead .lead-body .eyebrow::before{content:"";width:22px;height:2px;background:var(--orange)}
.fanta-lead .lead-body h3{
  font-family:var(--display);font-weight:800;font-stretch:110%;
  font-size:clamp(24px,2.9vw,38px);line-height:1.05;letter-spacing:-.022em;margin:0 0 14px;color:#fff;
}
.fanta-lead:hover .lead-body h3{color:var(--orange)}
.fanta-lead .lead-body p{color:#B4B4B9;max-width:46ch;font-size:15.5px;margin:0 0 22px}
.fanta .f-meta{
  font-family:var(--mono);font-size:10.5px;color:var(--grey-400);
  letter-spacing:.08em;text-transform:uppercase;display:flex;gap:8px;
}
.fanta .f-meta span:not(:last-child)::after{content:" ·";margin-left:8px;color:#3A3A40}
.fanta .f-meta b{color:#fff;font-weight:500}

/* contenuti successivi */
.fanta-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1px;background:#2A2A2E;border:1px solid #2A2A2E;
}
.f-card{background:#121214;padding:24px 26px 22px;display:flex;flex-direction:column;transition:background .2s}
.f-card:hover{background:#17171A}
.f-card .eyebrow{color:var(--orange);margin-bottom:12px}
.f-card h4{
  font-family:var(--display);font-weight:700;font-stretch:100%;
  font-size:17.5px;line-height:1.24;letter-spacing:-.015em;color:#fff;margin:0 0 10px;
}
.f-card:hover h4{color:var(--orange)}
.f-card p{color:#8E8E95;font-size:14px;margin:0 0 18px}
.f-card .f-meta{margin-top:auto}
/* Le due card filtrabili si nascondono qui, non nel foglio di una pagina:
   .card.hide stava in page-home.css e fuori dalla home il filtro a chip
   aggiungeva la classe senza che nulla la rendesse invisibile. */
.f-card.hide{display:none}
.card.hide{display:none}
/* Anche l'articolo in apertura: il filtro riguarda tutta la sezione, non la
   sola griglia. Senza queste due righe la classe verrebbe messa senza effetto,
   che e' il difetto gia' visto con .card.hide fuori dalla home. */
.lead.hide{display:none}
.fanta-lead.hide{display:none}

@media (max-width:980px){
  .fanta-lead{grid-template-columns:1fr}
  .fanta-lead .thumb{aspect-ratio:16/9;min-height:0}
  .fanta-lead .lead-body{padding:28px 26px 30px}
}

.empty{
  grid-column:1/-1;background:var(--white);padding:48px 22px;text-align:center;
  font-family:var(--mono);font-size:12.5px;color:var(--grey-600);letter-spacing:.06em;
}

/* ---------- Formazione consigliata ----------
   Sta in partials.css e non nel foglio del fantacalcio perche' il blocco
   compare su piu' pagine — fantacalcio, news, e la pagina della singola
   formazione, che ora si impagina come un articolo. Lo stile di un
   frammento condiviso lasciato nel foglio di una pagina sola e' lo stesso
   difetto gia' visto con .card.hide e con i social. */
.formazione{background:var(--ink);color:#fff;padding:56px 0}

/* Card senza immagine, per le formazioni: non ne hanno una, e il riquadro
   serviva solo a riempire un buco. Lo spazio in alto lo da' gia' .card-body,
   quindi qui serve solo l'etichetta della giornata, che stava dentro
   l'immagine e senza una casa sua si perderebbe. */
.card-testo .eyebrow{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange-dark);margin-bottom:8px;
}

.form-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border-bottom:1px solid #2A2A2E;padding-bottom:16px;margin-bottom:8px;
}
.form-head .eyebrow{color:var(--orange);display:block;margin-bottom:10px}
.form-head h2{
  font-family:var(--display);font-weight:800;font-stretch:108%;
  font-size:clamp(23px,3vw,34px);line-height:1.06;letter-spacing:-.022em;margin:0;
}
.form-head .all{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-400);white-space:nowrap;
}
.form-head .all:hover{color:var(--orange)}
.form-note{
  font-family:var(--mono);font-size:15px;color:#6E6E75;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 26px;
}
.reparti{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#2A2A2E;border:1px solid #2A2A2E}
.reparto{background:#121214;padding:22px 20px 18px}
.reparto h3{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-family:var(--display);font-weight:700;font-stretch:96%;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.reparto .role{
  width:24px;height:24px;flex:0 0 24px;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:#fff;
  font-family:var(--mono);font-size:12px;font-weight:600;
}
.reparto li{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid #1E1E21;
}
.reparto li:last-child{border-bottom:0}
.reparto li span{font-size:14.5px;color:#C4C4C9;line-height:1.35}
.reparto li b{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--orange)}


/* Il rimando all'archivio, in fondo al blocco. E' un pulsante e non un altro
   link in mono minuscolo come quello dell'intestazione: li' e' una nota a
   margine del titolo, qui e' il passo successivo di chi ha finito di leggere.
   Centrato, perche' non appartiene a nessuna delle quattro colonne dei reparti
   ma a tutte. */
.form-piede{display:flex;justify-content:center;margin-top:24px}
/* Squadrato come tutto il resto del blocco: la griglia dei reparti, le celle e
   il quadratino del ruolo non hanno un angolo tondo, e un pulsante a pillola
   qui in mezzo sarebbe l'unica forma di un'altra famiglia. */
.btn-archivio{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 26px;border:1px solid #3A3A40;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;text-decoration:none;transition:border-color .15s,background .15s,color .15s;
}
/* La freccia e' scritta qui e non nel markup: e' decorazione, e uno screen
   reader leggerebbe «Tutte le formazioni freccia destra». */
.btn-archivio::after{content:"→";font-size:13px;line-height:1}
.btn-archivio:hover{background:var(--orange);border-color:var(--orange);color:#fff}

@media (max-width:980px){
  .reparti{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .form-head{flex-direction:column;align-items:flex-start;gap:10px}
  .reparti{grid-template-columns:1fr}
  /* Su schermo stretto il pulsante prende la riga: un bersaglio da toccare
     grande quanto la colonna si sbaglia meno. */
  .form-piede{margin-top:20px}
  .btn-archivio{width:100%;justify-content:center}
}