/* ==========================================================================
   NEWS — archivio e articolo
   Carica dopo base.css e components.css. Qui vive solo cio' che e' proprio
   delle news: la scheda senza fotografia, il campo di ricerca e il corpo
   dell'articolo. Tutto il resto (chip, briciole, stato vuoto, .prose) e' gia'
   nel sistema.
   ========================================================================== */

/* ---------- Archivio: testata e comandi ---------- */
.archivio-testa .crumbs { margin-bottom: var(--space-lg); }
.archivio-testa .h1 { max-width: 18ch; }
.archivio-testa .lead { margin-top: 18px; max-width: 62ch; }
/* Etichette a sinistra, ricerca e conteggio a destra, sulla stessa riga.
   Sotto i 900px la ricerca scende sotto le etichette: affiancate resterebbero
   due campi da otto caratteri. */
.comandi-archivio {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 1.7vw, 32px);
}
.comandi-archivio .filtri { margin-bottom: 0; padding: 0; flex: 1 1 auto; }
.comandi-archivio .ricerca { margin-top: 0; flex: 0 1 auto; justify-content: flex-end; }
@media (max-width: 900px) {
  .comandi-archivio { flex-direction: column; align-items: stretch; }
  /* Un figlio di flex non scende sotto il proprio contenuto minimo: la riga
     lente + campo + conteggio misurava 381px dentro una colonna da 327 e
     usciva dallo schermo di 30px. min-width: 0 la lascia stringere, il wrap
     manda il conteggio a capo quando proprio non ci sta. */
  .comandi-archivio > * { min-width: 0; width: 100%; }
  .comandi-archivio .ricerca { justify-content: flex-start; flex-wrap: wrap; }
}

/* Il campo di ricerca non e' una ricerca: e' un filtro sul DOM, e senza
   JavaScript non filtra niente. Per questo parte nascosto e lo accende
   main.js aggiungendo la classe .js al documento: una casella che non cerca
   promette qualcosa che non mantiene. I chip, che funzionano in CSS puro,
   coprono il caso principale anche senza script. */
.js-only { display: none; }
.js .js-only { display: flex; }

/* Campo e conteggio sulla stessa riga, a destra: il conteggio commenta la
   ricerca, e mandarlo a capo lo faceva sembrare un'altra cosa. */
.ricerca {
  margin-top: 18px;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}
/* La ricerca e' chiusa in una lente accanto alle etichette e si apre al
   passaggio del cursore: un campo sempre aperto ruba la riga ai chip, che
   sono il comando principale. Il campo resta raggiungibile da tastiera —
   :focus-within lo apre — e sotto i 720px, dove il passaggio del cursore non
   esiste, e' aperto in partenza. */
.ricerca-lente {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: var(--c-white);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.ricerca-lente svg { width: 20px; height: 20px; }
.ricerca-lente:hover,
.ricerca:focus-within .ricerca-lente { background: rgba(255, 255, 255, 0.14); border-color: var(--c-white); }

/* Sotto i 900px il campo e' gia' aperto e la lente diventa lo stesso comando
   una seconda volta, per giunta inerte: si toglie. Dichiarata qui, dopo la
   regola che le da' un display, perche' sopra avrebbe perso per ordine. */
@media (max-width: 900px) {
  .ricerca-lente { display: none; }
  .ricerca { margin-top: 4px; }
}

.ricerca .input {
  flex: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-white);
}

.ricerca .input {
  width: 0;
  min-width: 0;
  padding-left: 0; padding-right: 0;
  border-color: transparent;
  opacity: 0;
  transition: width .32s var(--ease), opacity .22s var(--ease), padding .32s var(--ease);
}
.ricerca:hover .input,
.ricerca:focus-within .input,
.ricerca.e-aperta .input {
  width: min(280px, 46vw);
  padding-left: 16px; padding-right: 16px;
  border-color: rgba(255, 255, 255, 0.28);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) { .ricerca .input { transition: none; } }
@media (max-width: 720px) {
  /* Aperto in partenza, e largo quanto lo lascia la riga: con flex: none e
     width: 100% l'input si misurava sul contenitore che stava misurando lui,
     e usciva dallo schermo di 152px. */
  .ricerca .input { flex: 1 1 auto; width: auto; min-width: 0;
                    padding-left: 16px; padding-right: 16px;
                    border-color: rgba(255, 255, 255, 0.28); opacity: 1; }
}

.ricerca .input::placeholder { color: var(--c-white-soft); }
.ricerca .input:focus-visible {
  border-color: var(--c-lime);
  background: rgba(255, 255, 255, 0.12);
}
.testata-elenco .filtri-conteggio { color: var(--c-white-soft); font-size: 14px; white-space: nowrap; }

/* ---------- Archivio: la griglia ---------- */
/* ---------- Archivio news: schede con fotografia che si espandono ----------
   Revisione 21/09: "il layout attuale e' un elenco testuale poco accattivante,
   va rivisto", con una fotografia per articolo e lo stesso hover di espansione
   della pagina Chi siamo.

   Il numero di colonne e' fissato per breakpoint e non piu' auto-fill: la
   catena calcola il verso di apertura leggendo gridTemplateColumns, e con
   auto-fill il conto cambia a ogni pixel di larghezza. Una scheda deve sapere
   se sotto di lei c'e' una riga o no. */
/* ---------- Archivio news: la regola della sezione ----------
   Revisione 22/09. Le tre regole che c'erano si contraddicevano: la scheda in
   evidenza era larga due e alta una, aprendosi diventava larga una e alta due,
   e nel frattempo tutte le altre in evidenza si stringevano. Ogni apertura
   ridisponeva la griglia, e una scheda usciva dallo schermo.

   Ora la regola e' una sola, e si dice in una riga:

     una scheda che non mostra il sommario si allunga per mostrarlo;
     una scheda che lo mostra gia' sta ferma.

   Da cui discende tutto il resto:

   - La scheda in evidenza occupa due colonne E due righe. Non e' una scheda
     normale allargata: e' un blocco, e il sommario ce l'ha gia' scritto
     dentro. Quindi non si apre — non avrebbe niente da mostrare — e siccome
     occupa entrambe le righe delle sue colonne, nessuna scheda puo' allungarsi
     sopra o sotto di lei. Il conflitto non si gestisce: non esiste.

   - Niente si ridispone mai. La classe .ha-aperta e il restringimento sono
     spariti insieme al problema che tamponavano.

   - Il passo di nove non e' arbitrario: 1 blocco (4 celle) + 4 schede chiudono
     esattamente due righe, altre 4 ne chiudono una terza, e la nona riparte a
     inizio riga. Con quattro colonne il conto torna; con tre e con due torna
     ugualmente, perche' il blocco resta quadrato e il resto scorre.

   dense e' la rete di sicurezza per quando un filtro nasconde delle schede e
   l'allineamento salta: i buchi li riempie la prima scheda che ci sta. */
.griglia-news {
  --news-gap: clamp(16px, 1.67vw, 28px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--news-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1200px) { .griglia-news { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .griglia-news { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .griglia-news { grid-template-columns: 1fr; } }

/* Il blocco in evidenza: due colonne, due righe, sommario sempre in chiaro.
   L'altezza non la dichiara lui — la prendono le due righe che occupa, che
   sono alte quanto le schede normali. */
.scheda-catena.in-evidenza {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.scheda-catena.in-evidenza .scheda-news-sommario { display: block; }
/* La fotografia prende lo spazio che avanza dopo il testo: in un blocco alto
   il doppio, un rapporto fisso lascerebbe un vuoto o sborderebbe. */
.scheda-catena.in-evidenza .scheda-news-foto {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 0;
}
.scheda-catena.in-evidenza .scheda-news-titolo { font-size: clamp(19px, 1.7vw, 27px); }
.scheda-catena.in-evidenza .scheda-news-corpo { gap: 12px; padding: 20px 24px 8px; }
.scheda-catena.in-evidenza .scheda-news-sommario { padding: 0 24px; font-size: 15px; line-height: 1.6; }
.scheda-catena.in-evidenza .scheda-news-leggi { padding: 14px 24px 20px; }

/* A due colonne il blocco perde la larghezza doppia e tiene l'altezza.
   Non e' un ripiego estetico: occupando due colonne su due occuperebbe la riga
   intera, e in quelle righe non resterebbe nessun'altra scheda a dare loro
   un'altezza. Le righe implicite si misurano sul contenuto, e il contenuto di
   una scheda e' un pannello in posizione assoluta — cioe' alto zero. Il blocco
   collassava a sedici pixel, che era solo il gap.
   Restando alto due e largo uno, le righe le misura la colonna accanto, e la
   gerarchia si legge ugualmente: una scheda che vale il doppio delle altre. */
@media (max-width: 900px) {
  .scheda-catena.in-evidenza { grid-column: span 1; }
}
/* A una colonna sola non c'e' piu' nessuna colonna accanto, e vale lo stesso
   ragionamento: il blocco torna una scheda come le altre. Sotto i 720px il
   pannello e' gia' in flusso normale e le schede si misurano sul contenuto,
   quindi il sommario che resta visibile non sborda. */
@media (max-width: 560px) {
  .scheda-catena.in-evidenza { grid-row: span 1; }
}

/* La cella ha un'altezza propria e il pannello ci galleggia dentro: e' il
   pannello ad allungarsi, non la cella, cosi' la griglia non si ridispone e
   nessuna scheda si sposta sotto al mouse fermo. */
.scheda-catena {
  position: relative;
  aspect-ratio: 300 / 340;
  container-type: inline-size;
}
.scheda-news-pannello {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--c-navy);
  color: var(--c-white);
  transition: top .5s var(--ease-morbido), bottom .5s var(--ease-morbido),
              box-shadow .35s var(--ease);
}
.scheda-catena.is-open { z-index: 2; }
.scheda-catena.is-open .scheda-news-pannello { box-shadow: var(--shadow-3); }
/* Si allunga sulla cella della stessa colonna: sotto, o sopra se e' l'ultima
   riga. Il verso lo mette js/catena.js. */
.scheda-catena.is-open.apre-giu .scheda-news-pannello { bottom: calc(-100% - var(--news-gap)); }
.scheda-catena.is-open.apre-su  .scheda-news-pannello { top: calc(-100% - var(--news-gap)); }

/* Il link riempie sempre la scheda, aperta o chiusa. La fascia vuota che si
   era vista aperta non veniva da qui ma dalla fotografia, che aveva un
   rapporto fisso: il link cresceva, la fotografia no, e lo spazio in piu'
   restava a galleggiare sotto al testo. Ora la fotografia e' l'elemento
   elastico (vedi piu' sotto) e si prende lei tutto cio' che avanza. */
.scheda-news {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  color: inherit;
}
.scheda-news-foto {
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-blue);
}
.scheda-news-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-morbido);
}
.scheda-catena.is-open .scheda-news-foto img { transform: scale(1.04); }
.scheda-news-corpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px;
}
.scheda-news-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scheda-news-data {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--c-white-soft);
}
.scheda-news-titolo {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}
/* Il sommario e' la ricompensa dell'apertura: da chiusa la scheda mostra
   fotografia, categoria e titolo, e tanto basta a scegliere. */
.scheda-news-sommario {
  display: none;
  margin: 0;
  padding: 0 18px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-white-soft);
}
.scheda-catena.is-open .scheda-news-sommario {
  display: block;
  margin-top: 0;
  padding-top: 4px;
  font-size: 15px;
  line-height: 1.6;
  animation: news-sale .45s var(--ease-morbido) both;
}
/* Aperta, la fotografia si prende tutto lo spazio che avanza.
   Con un rapporto fisso restava alta come da chiusa e sotto si apriva una
   fascia vuota: l'apertura raddoppiava l'altezza della scheda senza dare in
   cambio niente da guardare. Ora e' la fotografia a giustificare l'apertura
   (22/09), e testo e rimando prendono solo l'altezza che serve loro. */
.scheda-catena.is-open .scheda-news-foto {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 0;
}
.scheda-catena.is-open .scheda-news-corpo { gap: 12px; padding: 18px 20px 6px; }
.scheda-catena.is-open .scheda-news-titolo { font-size: clamp(17px, 1.35vw, 21px); }
@keyframes news-sale {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Il rimando sta in fondo alla scheda e si vede sempre, anche da chiusa:
   chiesto il 22/09 ("manca un tasto che porti l'utente a leggere l'articolo
   direttamente da qui"). Tutta la scheda e' gia' un link, quindi questo e' un
   doppione per chi lo cerca: per la tastiera e per i lettori di schermo e'
   escluso (tabindex -1, aria-hidden), altrimenti ogni scheda annuncerebbe due
   volte la stessa destinazione. */
.scheda-news-leggi {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding: 14px 20px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.82);
  transition: color .2s var(--ease), gap .25s var(--ease);
}
.scheda-news-leggi svg { width: 16px; height: 16px; flex: none; }
.scheda-catena:hover .scheda-news-leggi,
.scheda-catena.is-open .scheda-news-leggi { color: var(--c-lime); gap: 12px; }

/* Dove il passaggio del mouse non esiste, o lo schermo e' stretto, l'apertura
   non ha senso: la scheda mostra tutto da ferma e si allunga quanto serve. */
@media (hover: none), (max-width: 720px) {
  .scheda-catena { aspect-ratio: auto; }
  .scheda-news-pannello { position: static; }
  .scheda-news-sommario { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .scheda-news-pannello,
  .scheda-news-foto img { transition: none; }
  .scheda-catena.is-open .scheda-news-sommario { animation: none; }
}

/* Il rimando "Leggi" sta nel sommario, che e' fratello di .scheda-news e non
   suo discendente: con il selettore vecchio non veniva piu' agganciato, e una
   freccia senza misura si prendeva mezza scheda. Si aggancia al pannello, che
   e' l'antenato di entrambi. */
.scheda-news-pannello .p-link {
  align-self: flex-end;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.82);
  transition: color .2s var(--ease);
}
.scheda-news-pannello .p-link svg { width: 16px; height: 16px; flex: none; }

/* Lo stato vuoto della ricerca: lo mostra main.js, non il CSS, perche'
   dipende da che cosa e' stato digitato. */
.archivio-griglia .empty-state { margin-top: var(--space-xl); }

/* Le regole di filtro per categoria le genera tools/modello_news.py e stanno
   in fondo a questo file: aggiungere una categoria li' e rigenerare tiene
   allineati chip, schede e regole. */

/* ---------- Articolo ---------- */
.articolo-testa .crumbs { margin-bottom: var(--space-lg); }
.articolo-testa .pill-badge { margin-bottom: 18px; }
.articolo-testa .h1 { max-width: 22ch; text-wrap: balance; }
.articolo-data {
  margin-top: 18px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--c-white-soft);
}

/* Il corpo dell'articolo e' l'eccezione bianca del sistema: vale per il testo
   lungo e mai per una sezione di narrazione. Su navy o blu nove capitoli di
   testo si leggono male, e il grigio di --c-ink-soft e' pensato per due righe
   di didascalia, non per tremila parole. */
.articolo-corpo { background: var(--c-white); color: var(--c-ink); }
.articolo-corpo .wrap {
  padding-block: var(--space-3xl);
  display: grid;
  justify-items: center;
}
.articolo-corpo .prose { width: 100%; max-width: 68ch; }

.articolo-fondo {
  width: 100%;
  max-width: 68ch;
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.articolo-fondo p { font-size: 17px; font-weight: 500; }

.griglia-correlati { margin-top: var(--space-xl); }
.griglia-correlati .scheda-news { background: rgba(255, 255, 255, 0.06); }
@media (hover: hover) {
  .griglia-correlati .scheda-news:hover { background: rgba(255, 255, 255, 0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .scheda-news, .scheda-news:hover { transition: none; transform: none; }
}

/* Filtri di categoria — generati da tools/modello_news.py */
.archivio:has(input[value="fotovoltaico"]:checked) .griglia-news > li:not([data-cat="fotovoltaico"]) { display: none; }
.archivio:has(input[value="aziendali"]:checked) .griglia-news > li:not([data-cat="aziendali"]) { display: none; }
.archivio:has(input[value="amianto"]:checked) .griglia-news > li:not([data-cat="amianto"]) { display: none; }
.archivio:has(input[value="agrivoltaico"]:checked) .griglia-news > li:not([data-cat="agrivoltaico"]) { display: none; }
.archivio:has(input[value="bess"]:checked) .griglia-news > li:not([data-cat="bess"]) { display: none; }

/* ---------- Elenco mostrato a poco a poco ----------
   La classe la mette main.js. Senza JavaScript non compare, e l'elenco resta
   intero: un archivio troncato senza un modo di aprirlo non e' un'economia,
   e' un contenuto perso. Il pulsante e' gia' .js-only per lo stesso motivo. */
.griglia-news > li.oltre-il-limite { display: none; }

.altro-elenco {
  margin-top: clamp(28px, 3vw, 44px);
  display: flex;
  justify-content: center;
}
.altro-elenco[hidden] { display: none; }
.js .altro-elenco.js-only { display: flex; }

/* ---------- L'apertura dell'articolo ----------
   Chiesta il 22/09: l'immagine c'era nell'archivio e spariva entrando a
   leggere. Sta fra la testata navy e il corpo bianco e ne scavalca il
   confine, cosi' lega le due lastre invece di stare appoggiata su una delle
   due. Il margine negativo in basso e' esattamente la meta' dell'altezza che
   entra nel bianco. */
.articolo-apertura {
  margin: clamp(28px, 3.2vw, 56px) 0 calc(clamp(28px, 3.2vw, 56px) * -1 - clamp(24px, 3vw, 56px));
  border-radius: var(--radius-media);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.articolo-apertura img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Il corpo bianco fa posto alla meta' di fotografia che gli sale addosso. */
.articolo-corpo { padding-top: calc(var(--section-gap) + clamp(24px, 3vw, 56px)); }
@media (max-width: 720px) {
  .articolo-apertura { margin-bottom: calc(clamp(28px, 3.2vw, 56px) * -1 - 24px); }
  .articolo-apertura img { aspect-ratio: 4 / 3; }
}