/* 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}

/* ---------- 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}
.f-card.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;
}