/* ================= Da quotidiano (Luca, 14/10: "troppo spazio inutilizzato", "look da AI generated") =================
   Viene dopo proto.css e proto-wp.css e ha l'ultima parola. Regole:
   - ogni sezione ha una sola riga di intestazione: filetto scuro, nome breve, link a destra (niente occhiello arancio
     sopra un titolo-slogan);
   - niente riquadri con fondo colorato e angoli tondi attorno alle sezioni: le separano i filetti, come sulla carta;
   - niente pillole: Comuni, profili social e filtri sono link o bottoni squadrati;
   - occhielli in tondo, non in maiuscoletto spaziato;
   - meno aria fra le sezioni e foto meno alte.
   Il prefisso html:root serve solo a battere le regole del tema scuro di proto.css senza !important. */

:root { --raggio: 3px; }

/* ---------- intestazioni di sezione ---------- */
.sezione { padding: 14px 0 20px; }
.sezione + .sezione { border-top: 0; }
.sezione__testa { align-items: baseline; gap: 6px 16px; margin: 0 0 12px; padding-top: 7px; border-top: 2px solid var(--inchiostro); }
.sezione__titolo { font: 700 22px/1.15 var(--serif); letter-spacing: -0.01em; }
.sezione__titolo small { display: none; }
.sezione__tutti { font: 600 13px/1.2 var(--sans); }
.sezione__intro { margin: 0 0 12px; font-size: 16px; }
/* le sezioni per argomento hanno già un'intestazione ciascuna: quella generale sarebbe un filetto in più */
.sezione:has(> .wrap > .argomenti) .sezione__testa { display: none; }
.gn-home .wp-block-group.wrap { padding-bottom: 12px; }
.meteo-lago + .wp-block-group.wrap { padding-top: 16px; }

/* etichette di servizio: in tondo, non in maiuscoletto spaziato */
.occhiello, .tipo-et, .accadde__luogo, .breve__luogo { font: 600 12px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.occhiello { color: var(--tenue); }
.occhiello span:first-child { color: var(--lago); }
.occhiello span + span::before { margin: 0 5px; }
.flusso h2, .meteo-lago__t, .lato h2, .contesto h2, .oggi__t { font: 700 17px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--inchiostro); }
.meteo-lago__t { font-size: 15px; }
.argomento { padding-top: 7px; border-top-width: 2px; }
.argomento__t { font: 700 20px/1.15 var(--serif); letter-spacing: -0.005em; text-transform: none; }
.argomento__t a { color: var(--inchiostro); }

/* ---------- angoli quasi retti, niente pillole ---------- */
.apertura__lead-foto .foto, .titolo-mini .foto, .ev-img, .sponda__foto, .sponda-riga__testa .sponda__foto--vuota,
.comune-carta, .articolo-foto .foto, .art-comune, .mini-ev, .ricerca-comune, .gienne-ultimo, .riquadro { border-radius: var(--raggio); }
.pillola, .chip, .lingue, .mio-comune-chip, .bottone, .paginazione .page-numbers, .vicini a,
.cerca-testata input, .ricerca-form input, .cerca-testata .bottone, .ricerca-form .bottone { border-radius: var(--raggio); }
.pillola { height: 30px; padding: 0 10px; font-weight: 500; }
.bottone { height: 36px; padding: 0 14px; font-size: 13px; }
.tessera { width: 46px; height: 50px; border-radius: var(--raggio); box-shadow: none; border: 1px solid var(--linea); }
.tessera b { font-size: 22px; }

/* ---------- il mio Comune e GN: due colonne sotto lo stesso filetto, senza riquadri ---------- */
.duo-mio-gn { padding-top: 14px; padding-bottom: 20px; gap: 0; }
html:root .mio-comune { background: none; border-radius: 0; padding: 0; }
html:root .duo-mio-gn .gienne__riquadro { background: none; border-radius: 0; padding: 7px 0 0 clamp(18px, 2vw, 28px); margin-top: 0;
	border-top: 2px solid var(--inchiostro); gap: 12px 16px; grid-template-columns: 92px minmax(0, 1fr); }
.duo-mio-gn .mio-comune { padding-right: clamp(18px, 2vw, 28px); border-right: 1px solid var(--linea); }
.duo-mio-gn .mio-comune .sezione__testa { margin-bottom: 12px; }
.gienne__testo small, .gienne__precedenti small { font: 600 13px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tenue); }
.duo-mio-gn .gienne__testo h2 { font: 700 22px/1.15 var(--serif); margin: 2px 0 10px; }
.duo-mio-gn .gienne__copertina img, .gienne__prec img { border-radius: 2px; box-shadow: 0 1px 0 var(--linea), 0 3px 10px rgba(13, 21, 38, .18); }
.duo-mio-gn .gienne__precedenti > div { gap: 10px; margin-top: 8px; }
.duo-mio-gn .gienne__prec { width: 58px; font: 500 12px/1.25 var(--sans); }
.mio-comune__vuoto p { margin-bottom: 10px; font-size: 16px; }
.mio-comune .pillole { gap: 6px; }

/* ---------- sponsor: una riga sottile, non una card ---------- */
.gn-sp { margin: 16px 0; border-radius: 0; }
.gn-sp--fascia { min-height: 0; }
.gn-sp > .gn-sp-etichetta { top: 8px; right: 10px; }
.gn-sp__corpo { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; padding: 12px 16px; border-radius: var(--raggio); }
.gn-sp__marchio { width: 44px; height: 44px; border-radius: var(--raggio); font-size: 22px; }
.gn-sp__testo { gap: 2px; }
.gn-sp__testo b { font-size: 18px; }
.gn-sp__testo > span { font-size: 14px; }
.gn-sp__cta { padding: 9px 14px; border-radius: var(--raggio); font-size: 13px; }
html:root .gn-sp-intestazione { padding: 0; border-radius: 0; background: none; color: var(--inchiostro); font-size: 13px; }
.gn-sp--adsense { border-radius: 0; }
/* la cornice centra il contenuto: l'annuncio, vuoto finché Google non risponde, si stringeva a 0 px e restava senza annunci */
.gn-sp--adsense > ins.adsbygoogle { justify-self: stretch; width: 100%; }

/* ---------- servizi utili: una riga di link fra due filetti ---------- */
.sezione .servizi__t { margin: 0 0 0; padding-top: 7px; border-top: 2px solid var(--inchiostro); font: 700 22px/1.15 var(--serif); letter-spacing: -0.01em; text-transform: none; color: var(--inchiostro); }
.sezione .servizi { gap: 0; margin-top: 10px; }
.sezione .servizio { gap: 2px; padding: 4px 14px; border: 0; border-left: 1px solid var(--linea); border-radius: 0; background: none; }
.sezione .servizio:first-child { padding-left: 0; border-left: 0; }
.sezione .servizio b { font-size: 17px; }
@media (max-width: 1000px) {
	.sezione .servizi { row-gap: 12px; }
	.sezione .servizio:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
	.sezione .servizio:nth-child(3n+1) { padding-left: 14px; border-left: 1px solid var(--linea); }
	.sezione .servizio:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ---------- la storia: foto a sinistra e testo a destra, non più una banda a tutta pagina ---------- */
html:root .banda-storia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 clamp(18px, 2.4vw, 32px); align-items: center;
	min-height: 0; max-width: var(--larghezza); margin: 0 auto; padding: 14px var(--gutter) 20px; background: none; color: var(--inchiostro); overflow: visible; }
.banda-storia::after { display: none; }
.banda-storia > img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raggio); background: var(--carta-2); }
.banda-storia .wrap { max-width: none; padding: 0; }
.banda-storia h2 { margin: 8px 0 10px; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.1; max-width: none; }
.banda-storia p { color: var(--tenue); font: 400 17px/1.45 var(--serif); max-width: none; }
html:root .banda-storia .occhiello span { color: var(--lago); }
html:root .banda-storia .occhiello span + span { color: var(--tenue); }
html:root .banda-storia .occhiello span + span::before { color: var(--tenue); }
html:root .banda-storia .bottone--bianco { height: auto; margin-top: 12px !important; padding: 0; border: 0; background: none; color: var(--lago); font-size: 14px; }
@media (max-width: 1000px) { html:root .banda-storia { grid-template-columns: 1fr; } .banda-storia > img { margin-bottom: 12px; } }

/* ---------- la stagione: resta l'unica fascia colorata, ma bassa ---------- */
html:root .stagione { padding: 16px 0 22px; }
.stagione .sezione__testa { padding-top: 7px; border-top-color: rgba(255, 255, 255, .55); }
.stagione .sezione__titolo { font-size: clamp(24px, 2.2vw, 30px); }
html:root .stagione .occhiello span { color: var(--azzurro); }
html:root .stagione .occhiello span + span { color: #d3e3f8; }

/* ---------- agenda: carte più basse ---------- */
.scorri-carte .ev-img, .agenda-griglia .ev-img { aspect-ratio: 16 / 9; }
.ev-img .tessera { top: 8px; left: 8px; }
.ev-img--vuota span { font-size: clamp(44px, 6vw, 64px); }
.scorri-carte { gap: 20px; }
.carta { gap: 8px; }

/* ---------- dalle sponde: i Comuni come elenco di link ---------- */
.sponda-riga .comuni, .sponda .comuni { gap: 4px 12px; }
.sponda-riga .comuni a, .sponda .comuni a { padding: 0; border-radius: 0; background: none; font-size: 13px; color: var(--lago); }
.sponda-riga .comuni a:hover, .sponda .comuni a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sponda-riga__testa h3 { border-radius: 2px; padding: 4px 8px; font-size: 16px; }

/* ---------- notizie senza foto: la prima riga senza filetto, sta già sotto quello della sezione ---------- */
@media (min-width: 1001px) { .testi-3 li:nth-child(-n+3) { padding-top: 0; border-top: 0; } }
@media (min-width: 641px) and (max-width: 1000px) { .testi-3 li:nth-child(-n+2) { padding-top: 0; border-top: 0; } }
@media (max-width: 640px) { .testi-3 li:first-child { padding-top: 0; border-top: 0; } }

/* ---------- Accadde: una rubrica come le altre, con le foto piccole accanto al testo ---------- */
html:root .sezione.banda-accadde { padding: 14px 0 20px; background: none; color: var(--inchiostro); }
.banda-accadde .sezione__testa + .gn-sp-intestazione, .banda-accadde .gn-sp-intestazione { margin: -4px 0 12px; }
.banda-accadde .accadde { gap: 18px 28px; }
.banda-accadde .accadde__voce { row-gap: 4px; }
.banda-accadde .accadde__voce:has(.foto) { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; }
.banda-accadde .accadde__voce .foto { grid-row: 1 / span 3; aspect-ratio: 1 / 1; margin: 0; }
.banda-accadde .accadde__data { font-size: 18px; }
.banda-accadde .accadde__t { font-size: 18px; line-height: 1.25; }

/* ---------- piede (le icone social sono in proto-wp.css) ---------- */
.piede { padding: 36px 0 24px; margin-top: 16px; }
.piede__social-titolo, .piede .piede__titolo { font: 700 13px/1.2 var(--sans); letter-spacing: .02em; text-transform: none; }

/* ---------- telefono ---------- */
@media (max-width: 1000px) {
	.duo-mio-gn .mio-comune { padding-right: 0; border-right: 0; }
	html:root .duo-mio-gn .gienne__riquadro { padding-left: 0; margin-top: 18px !important; }
}
@media (max-width: 640px) {
	.sezione__titolo, .sezione .servizi__t { font-size: 20px; }
	.banda-accadde .accadde__voce:has(.foto) { grid-template-columns: 88px minmax(0, 1fr); }
}
/* sul telefono "Ultime notizie" non sta accanto all'apertura ma sotto: bastano le ultime tre, per non fare un muro di titoli (Luca, 14/10) */
@media (max-width: 1000px) { .flusso li:nth-child(n+4) { display: none; } }

/* ---------- il mio Comune e GN finiscono insieme (Luca, 14/10) ----------
   La lista sotto le schede prende solo lo spazio che avanza accanto a GN: se non avanza nulla non occupa niente
   (prima teneva 54 px vuoti anche senza voci). Lo stacco dalle schede sta dentro la lista, così gn.js lo misura. */
.mio-comune__lista { margin-top: 0; }
.mio-comune__lista li:first-child, .mio-comune__lista li:nth-child(2) { margin-top: 12px; }
@media (min-width: 1001px) { .gn-js .duo-mio-gn [data-riempi].mio-comune__lista { min-height: 0; } }
.duo-mio-gn { padding-bottom: 14px; }

/* ---------- un solo modo di presentare le immagini: l'angolo e il profilo delle copertine di GN ----------
   2 px di raggio e un filetto sottilissimo sul bordo, che stacca le foto chiare dal fondo; niente ombre sulle foto
   (l'ombra resta solo alle copertine di GN, che sono oggetti). */
:root { --raggio: 2px; --profilo: rgba(13, 21, 38, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --profilo: rgba(255, 255, 255, .12); } }
:root[data-theme="dark"] { --profilo: rgba(255, 255, 255, .12); }
.foto, .ev-img, .sponda__foto, .banda-storia > img, .gienne__copertina img, .gienne__prec img, .gienne-numero img, .gienne-ultimo__copertina img,
.comune-carta__testa, .art-comune, .apertura__lead-foto .foto, .titolo-mini .foto, .articolo-foto .foto {
	border-radius: var(--raggio); outline: 1px solid var(--profilo); outline-offset: -1px; }
.duo-mio-gn .gienne__copertina img, .gienne__prec img { border-radius: var(--raggio); }
/* il filetto qui sopra non deve coprire il fuoco da tastiera (WCAG 2.4.7): contorno pieno, all'interno perché il
   riquadro della scheda taglia quello che esce */
:is(.comune-carta__testa, .art-comune, .apertura__lead-foto, .sponda__foto, .gienne__copertina, .gienne__prec):focus-visible,
:is(.apertura__lead-foto, .gienne__copertina, .gienne__prec):focus-visible :is(.foto, img) { outline: 3px solid var(--lago); outline-offset: -3px; }

/* ================= Distinzione fra le sezioni (Luca, 14/10: "ora è fin troppo piatto") =================
   Senza aggiungere spazio: titoli di sezione più forti con un tratto arancio sul filetto, e una sezione su due
   a fondo pieno (largo quanto lo schermo, niente angoli), alternata alla Stagione blu. */
.sezione__testa, .sezione .servizi__t, .argomento, .duo-mio-gn .gienne__riquadro { position: relative; }
.sezione__testa::before, .sezione .servizi__t::before, .argomento::before, .duo-mio-gn .gienne__riquadro::before {
	content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 4px; background: var(--accento); }
.duo-mio-gn .gienne__riquadro::before { left: clamp(18px, 2vw, 28px); }
.sezione__titolo, .sezione .servizi__t { font-size: 26px; line-height: 1.1; letter-spacing: -0.015em; }
.argomento__t { font-size: 22px; }
.duo-mio-gn .mio-comune .sezione__titolo { font-size: 26px; }
.duo-mio-gn .gienne__testo h2 { font-size: 24px; }
.stagione .sezione__testa::before { background: #ffc8b0; }

/* fasce: In breve, Da conoscere, Dalle sponde */
.sezione:has(> .wrap > .testi-3), .sezione:has(> .wrap > .orizzontali), .sezione:has(> .wrap > .sponde-righe) {
	background: var(--carta-2); padding-top: 18px; padding-bottom: 22px; }
:root[data-theme="dark"] .sezione:has(> .wrap > .testi-3), :root[data-theme="dark"] .sezione:has(> .wrap > .orizzontali),
:root[data-theme="dark"] .sezione:has(> .wrap > .sponde-righe) { background: #101a2e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sezione:has(> .wrap > .testi-3),
	:root:not([data-theme="light"]) .sezione:has(> .wrap > .orizzontali), :root:not([data-theme="light"]) .sezione:has(> .wrap > .sponde-righe) { background: #101a2e; } }
/* nelle fasce le foto senza immagine e i filetti restano leggibili */
.sezione:has(> .wrap > .orizzontali) .foto, .sezione:has(> .wrap > .sponde-righe) .foto { background: var(--carta); }

@media (max-width: 640px) {
	.sezione__titolo, .sezione .servizi__t, .duo-mio-gn .mio-comune .sezione__titolo { font-size: 22px; }
	.argomento__t { font-size: 20px; }
}

/* ---------- apertura: foto e testo finiscono insieme (Luca, 14/10) ----------
   La foto è almeno 4:3 ma si allunga fino all'altezza del testo (niente vuoto sotto la foto); i titoli lunghi
   scendono di corpo. "Ultime notizie" distribuisce lo spazio che avanza fra le voci invece di lasciarlo in fondo. */
@media (min-width: 1001px) {
	.apertura__lead { align-items: stretch; }
	.apertura__lead-foto { position: relative; display: block; }
	.apertura__lead-foto::before { content: ""; display: block; padding-top: 75%; }
	html:root .apertura__lead-foto .foto { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.apertura__titolo--medio { font-size: clamp(26px, 2.4vw, 34px); }
	.apertura__titolo--lungo { font-size: clamp(24px, 2.1vw, 30px); }
	.apertura__sommario { font-size: 17px; }
	.gn-js .flusso ol[data-riempi] { display: flex; flex-direction: column; justify-content: space-between; }
	.gn-js .flusso ol[data-riempi] > li { flex: none; }
	.flusso .sezione__tutti { margin-top: 10px !important; }
}
/* il mio Comune: "html:root .mio-comune { padding: 0 }" toglieva anche lo stacco dal filetto verso GN */
@media (min-width: 1001px) { html:root .duo-mio-gn .mio-comune { padding-right: clamp(18px, 2vw, 28px); } }

/* Da non perdere (14/10): una grande e quattro piccole impilate in alto, niente vuoti fra le voci */
.da-non-perdere { grid-template-rows: repeat(4, auto); align-content: start; gap: 14px 28px; }
.da-non-perdere .carta:first-child { grid-row: span 4; }
.da-non-perdere .carta:first-child .ev-img { aspect-ratio: 3 / 2; }
.da-non-perdere .carta:not(:first-child) { grid-template-columns: 132px 1fr; }
.da-non-perdere .carta:not(:first-child) .ev-img { aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .da-non-perdere .carta:first-child { grid-row: auto; } }
/* scheda evento: senza foto buona la scheda tipografica resta bassa */
.ev-hero .ev-img--vuota { aspect-ratio: 16 / 9; }
.ev-hero--senza { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

/* Pagine di sezione (14/10): stessa impaginazione per tutte; senza colonna laterale l'elenco va su due colonne */
.elenco--due { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.elenco--due .riga { grid-template-columns: 180px 1fr; }
@media (max-width: 900px) { .elenco--due { grid-template-columns: 1fr; } }
.rass:not(:has(.ev-img)) { grid-template-rows: auto; }

/* anche col mouse: almeno 24 px (WCAG 2.5.8) per i link isolati su una riga */
.oggi__dove a, .briciole a { display: inline-flex; align-items: center; min-height: 24px; }

/* Aree cliccabili di almeno 32 px sui dispositivi touch (parere OrangeSquare, 16/10). Dove i link stanno in
   flex o grid si alza l'area e si toglie lo spazio fra le righe; dove sono in linea basta il padding verticale,
   che allarga la zona del tocco senza spostare il testo. */
@media (pointer: coarse), (max-width: 640px) {
  .comuni a, .piede__legali a, .piede li > a, .sezione__tutti, .bottone, .gn-sp-intestazione, .vicini a, .marchio,
  .pillola, .art-chip, .atto__link, .comune-testa__dati a, .oggi__dove a, .briciole a, .biglietto__righe a, .is-ordinanza a, .wp-block-file a {
    min-height: 32px; display: inline-flex; align-items: center;
  }
  .comuni, .piede__legali { row-gap: 0; }
  .piede ul:has(> li > a) { row-gap: 0; }
  .argomento__t a, a.t { padding-block: 6px; margin-block: -6px; } /* sui blocchi il margine negativo compensa */
}

/* ================= Ritmo degli spazi (Luca, 18/10: "possiamo fare meglio con la gestione degli spazi") =================
   Una misura sola, non una per sezione: le sezioni bianche 24 px sopra e 28 sotto, le fasce a fondo pieno 36/40 perché
   il colore ha bisogno di un margine proprio, la pubblicità 24 px di stacco da ciò che le sta attorno. Le fasce non
   toccano mai la pubblicità o un'altra fascia senza respiro. Resta compatto (14/10: niente aria inutile). */
.gn-home .sezione, .duo-mio-gn { padding-top: 24px; padding-bottom: 28px; }
.gn-home .sezione:has(> .wrap > .testi-3), .gn-home .sezione:has(> .wrap > .orizzontali), .gn-home .sezione:has(> .wrap > .sponde-righe) {
	padding-top: 32px; padding-bottom: 36px; }
html:root .gn-home .stagione { padding: 36px 0 40px; }
html:root .gn-home .sezione.banda-accadde { padding: 24px 0 28px; }
/* la pubblicità fra le sezioni: stacco uguale sopra e sotto, niente margini propri che si sommano */
.gn-home > .wp-block-group.wrap:has(> .gn-sp) { padding-top: 24px !important; padding-bottom: 24px; }
.gn-home > .wp-block-group.wrap > .gn-sp { margin: 0 auto; }
.gn-home > .wp-block-group.wrap:has(> .gn-sp) + .sezione:not(.stagione) { padding-top: 8px; }
/* le due sezioni dentro il blocco Comune + GN non hanno spazio proprio: lo dà il blocco (prima si sommavano, 72 px) */
.gn-home .duo-mio-gn > .sezione { padding: 0; }
.gn-home > .wp-block-group.wrap:has(> .gn-sp) + .duo-mio-gn { padding-top: 8px; }
/* nelle colonne per argomento il riquadro occupa la colonna e sta a 16 px dalla lista */
.argomento__lista > .gn-sp--riquadro { width: 100%; max-width: 336px; margin: 16px auto 16px; }

/* ---------- il fascione blu della stagione ---------- */
html:root .gn-home .stagione { padding: 28px 0 32px; }
.stagione .sezione__testa { padding-top: 12px; }
.stagione .sezione__titolo { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.08; }
.stagione .sezione__testa .stagione__intro { max-width: 34ch; margin: 14px 0 0; font: 400 17px/1.5 var(--serif); color: #d3e3f8; }
.stagione .sezione__testa .sezione__tutti { margin: 18px 0 0; }
/* la colonna di sinistra finisce con il resto: sotto il testo altri titoli della stagione (Luca, 18/10: "quello spazio
   blu vuoto non mi piace"); la lista prende l'altezza che avanza e gn.js tiene solo le voci intere */
@media (min-width: 1001px) {
	html:root .stagione .wrap { grid-template-rows: auto 1fr; }
	html:root .stagione .wrap > :last-child { grid-row: 1 / span 2; }
	.stagione__altri { grid-column: 1; grid-row: 2; contain: size; overflow: hidden; display: flex; flex-direction: column; margin: 22px 0 0; padding: 0; list-style: none; }
	.stagione__altri li { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
	.stagione__altri .t { font: 600 17px/1.25 var(--serif); color: #fff; text-decoration: none; }
	.stagione__altri .t:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.stagione .wrap > :last-child { padding-top: 2px; }
.stagione .scheda--grande .foto, .stagione .titolo-mini .foto { outline: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.stagione .scheda--grande > div { padding-top: 4px; }
.stagione .scheda--grande .t { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; }
.stagione .lista-mini li { padding-block: 14px; }
.stagione .lista-mini li:first-child { padding-top: 0; border-top: 0; }
@media (max-width: 1000px) {
	html:root .gn-home .stagione { padding: 24px 0 28px; }
	.stagione .sezione__testa .stagione__intro { max-width: 60ch; }
	.stagione__altri { display: none; }
}

/* ---------- Primo piano (banda con foto) ---------- */
html:root .banda-storia { align-items: center; padding-top: 24px; padding-bottom: 28px; }
.banda-storia .wrap > p:empty { display: none; }
html:root .banda-storia > .sezione__testa { grid-column: 1 / -1; margin-bottom: 14px; }
.banda-storia .wrap > .occhiello:empty { display: none; }

/* ---------- angoli delle foto: come le copertine di GN, tondi e uguali ovunque (Luca, 18/10: "mi sembrano quadrati") ---------- */
:root { --raggio-foto: 6px; }
.foto, .ev-img, .sponda__foto, .banda-storia > img, .gienne__copertina img, .gienne__prec img, .gienne-numero img, .gienne-ultimo__copertina img,
.comune-carta__testa, .art-comune, .apertura__lead-foto .foto, .titolo-mini .foto, .articolo-foto .foto,
.duo-mio-gn .gienne__copertina img, .mio-comune .foto { border-radius: var(--raggio-foto); overflow: hidden; }
.carta--evidenza .ev-img { border-radius: 0; }

/* ---------- apertura D4 (Luca, 28/10) ----------
   Niente colonna "Ultime notizie": la principale a tutta larghezza, sotto tre notizie con foto e tre Brevi
   (solo testo, niente date), poi i più letti numerati. */
html:root .apertura--d4 { display: block; }
/* Scatola blindata (Luca, 28/10): l'altezza la decide solo la foto 3:2. Il testo sta in una scatola alta come la foto
   (posizione assoluta: non può allungare la riga), le collegate in fondo; gn.js porta il titolo al corpo più grande che
   ci sta e, se non basta, toglie l'ultima frase del sommario o l'ultima collegata. Mai vuoti, mai frasi tagliate. */
.apertura--d4 .apertura__lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: stretch; }
.apertura--d4 .apertura__lead-testo { gap: 12px; padding: 0; }
.apertura--d4 .apertura__titolo { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.04; }
.apertura--d4 .apertura__titolo--medio { font-size: clamp(28px, 3vw, 42px); }
.apertura--d4 .apertura__titolo--lungo { font-size: clamp(26px, 2.6vw, 36px); }
.apertura--d4 .apertura__sommario { font-size: 18px; line-height: 1.45; margin: 0; }
.apertura--d4 .apertura__collegate { margin-top: auto; }
@media (min-width: 1001px) {
	.apertura--d4 .apertura__lead-foto::before { padding-top: 66.667%; }
	.apertura--d4 .apertura__lead-scatola { position: relative; }
	.apertura--d4 .apertura__lead-testo { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
}
.apertura__riga { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.apertura--d4 > .apertura__riga { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--linea); }
.apertura__riga .scheda .t { font-size: 20px; line-height: 1.16; }
.apertura__brevi ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.apertura__brevi li { padding: 2px 0 2px 14px; border-left: 3px solid var(--accento); }
.apertura__breve-et { display: block; margin-bottom: 4px; font: 700 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accento); }
.apertura__breve-et span { color: var(--lago); }
.apertura__brevi .t { display: block; font: 500 18px/1.22 var(--serif); }
.apertura__letti { margin-top: 20px; }
.apertura__etichetta { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--lago); }
.apertura__etichetta::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.apertura__letto { position: relative; }
.apertura__n { position: absolute; z-index: 1; left: 10px; top: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: var(--blu); color: #fff; font: 700 15px/1 var(--sans); pointer-events: none; }
@media (max-width: 1000px) {
	.apertura--d4 .apertura__lead { grid-template-columns: 1fr; }
	.apertura__riga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.apertura__riga { grid-template-columns: 1fr; gap: 18px; }
	.apertura__riga .scheda:not(.scheda--testo) { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
	.apertura__riga .scheda .foto { aspect-ratio: 1 / 1; }
	.apertura__riga .scheda .t { font-size: 18px; }
	.apertura__letto .apertura__n { left: 6px; top: 6px; width: 24px; height: 24px; font-size: 13px; }
}

/* logo più grande sul computer: a 232 px "NOTIZIE" e la riga sopra si leggevano poco, soprattutto nel tema scuro (Luca, 28/10) */
@media (min-width: 1001px) { .testata .marchio img { max-width: 320px; } }
/* apertura: titolo in alto e sotto il sommario due notizie collegate, come nei quotidiani (Luca, 28/10) */
.apertura__collegate { list-style: none; margin: 4px 0 0; padding: 0; }
.apertura__collegate li { padding: 9px 0 0 16px; margin-top: 9px; border-top: 1px solid var(--linea); position: relative; }
.apertura__collegate li::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; background: var(--accento); }
.apertura__collegate a { display: block; font: 600 17px/1.25 var(--serif); color: var(--inchiostro); }
.apertura__collegate a:hover { color: var(--lago); }

/* il mio Comune e GN, scatola blindata (Luca, 28/10): l'altezza la decide il mio Comune (la scheda col titolo più
   lungo); GN sta in una scatola alta uguale (posizione assoluta, non allunga la riga). L'ultimo numero prende tutta la
   larghezza della colonna, con la copertina alta quanto lo spazio che resta; sotto quattro precedenti bassi. */
.duo-mio-gn { padding-top: 14px; padding-bottom: 20px; }
@media (min-width: 1001px) {
	.duo-mio-gn .mio-comune .scheda .t { font-size: 18px; line-height: 1.2; }
	.duo-mio-gn .gienne > .wrap { position: relative; }
	/* la larghezza della copertina (--gn-cop) la regola gn.js: la più grande con cui tutto sta nella scatola */
	html:root .duo-mio-gn .gienne__riquadro { position: absolute; inset: 0; height: auto; overflow: hidden; display: grid;
		grid-template-columns: var(--gn-cop, 130px) minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px 18px; align-items: center; align-content: space-between; }
	.duo-mio-gn .gienne__copertina { display: block; }
	.duo-mio-gn .gienne__copertina img { width: 100%; height: auto; aspect-ratio: 1200 / 1641; transform: none; }
	.duo-mio-gn .gienne__testo { align-self: center; min-width: 0; }
	.duo-mio-gn .gienne__testo p { display: none; }
	.duo-mio-gn .gienne__testo h2 { font-size: clamp(22px, 2vw, 28px); margin: 4px 0 12px; }
	.duo-mio-gn .gienne__precedenti { grid-column: 1 / -1; }
	.duo-mio-gn .gienne__precedenti > div { display: flex; gap: 12px; margin-top: 6px; }
	.duo-mio-gn .gienne__prec { width: 56px; flex: none; gap: 4px; font-size: 11px; }
}