/* Foglio di stile dedicato alle pagine evento (2026-09-16, template
   riusabile per i futuri eventi del Distretto — issue #41), caricato
   solo lì (layouts/evento/baseof.html) insieme a style.css, non da
   tutto il resto del sito: questo template è deliberatamente "più
   libero" (niente header/nav, footer diverso, layout a due colonne
   con titolo fisso) e non ha senso farne pesare le regole su ogni
   altra pagina. Riusa comunque variabili e componenti già definiti in
   style.css (--colore-*, --font-*, .bottone, .colonna-lettura,
   .sezione-divisa) invece di duplicarli — style.css resta comunque
   caricato prima di questo file. */

/* Copertina delle pagine evento. Comportamento verificato leggendo il
   CSS sorgente del riferimento dato da Enrico (del-nostro-peggio):
   l'immagine (.evento-immagine) NON è fixed, è un blocco normale in
   cima alla pagina — scorrendo se ne va come qualunque altro
   contenuto. Il titolo (.evento-titolo) invece è fixed fin da subito:
   all'inizio sta sopra l'immagine, ma quando questa scorre via il
   titolo resta fermo e si ritrova a fianco del testo, che nel
   frattempo è comparso sotto. Sono due elementi distinti proprio per
   questo — un solo elemento non potrebbe avere entrambi i
   comportamenti insieme.
   Sotto i 981px niente fixed: due colonne larghe la metà sarebbero
   troppo strette per leggere, resta una copertina classica (immagine +
   titolo sovrapposto) con il testo sotto. */
/* --evento-header-h su .corpo-evento (non su .evento-copertina più
   sotto): serve dentro .evento-copertina per l'altezza vera
   dell'header. */
.corpo-evento { --evento-header-h: 6rem; }
/* .corpo-evento (classe sul <body>, vedi layouts/evento/baseof.html):
   azzera il padding di "main" impostato in style.css (2rem in testa,
   3rem in fondo — pensato per le pagine normali, dove serve respiro
   sotto l'header/sopra il footer). Qui l'header è "sticky" (vedi
   .evento-copertina__footer sotto), non fisso fin da subito: parte
   nella sua posizione naturale in fondo alla copertina, quindi non
   copre l'immagine e non serve riservargli spazio in cima. */
.corpo-evento main { padding: 0; }
/* Scrollbar verticale invisibile, solo su queste pagine (il resto del
   sito tiene quella sottile colorata definita in style.css) — coerente
   con l'idea di "locandina" immersiva, niente chrome del browser in
   vista. La classe "corpo-evento" è sia su <html> sia su <body> (vedi
   layouts/evento/baseof.html): la barra di scorrimento della pagina
   appartiene al <html>, non al <body>, quindi nasconderla solo lì non
   bastava — verificato dal vivo (primo giro: scrollbar ancora
   visibile). Per tornare a una scrollbar sottile invece che invisibile,
   basta cambiare "none" in "thin" qui sotto e rimettere il colore
   (var(--colore-confine) var(--colore-crosta)) sulla riga
   scrollbar-color. */
.corpo-evento { scrollbar-width: none; }
.corpo-evento::-webkit-scrollbar { display: none; }
/* Testo del corpo pagina più grande del resto del sito (2026-09-17,
   richiesta esplicita), solo qui: niente regola su "body" in style.css,
   che cambierebbe tutto il sito. Vale a ogni larghezza, non solo
   desktop. Non tocca h1/h2/h3 (già in rem assoluti, indipendenti dal
   font-size ereditato) né .evento-info (ha già la sua dimensione
   fissa). */
.corpo-evento .colonna-lettura { font-size: 1.15rem; }
/* Margine laterale sotto i 981px (2026-09-17, bug segnalato: "il corpo
   del testo... è appiccicato al bordo della viewport") — il template
   evento non usa .contenitore (che altrove nel sito dà il padding
   orizzontale, vedi style.css), quindi .colonna-lettura qui non aveva
   nessun respiro laterale proprio finché non si superava il breakpoint
   desktop (che imposta il suo padding: 3rem, vedi sotto). var(--spazio)
   è lo stesso valore usato da .contenitore nel resto del sito, non un
   numero nuovo. Sopra i 981px la regola nel media query desktop
   sovrascrive comunque questo padding con la propria. */
.corpo-evento .colonna-lettura {
  padding: 0 var(--spazio);
  box-sizing: border-box;
}
/* Titoli del corpo con un rettangolo colorato (2026-09-18, richiesta
   esplicita) — stesso principio grafico del badge "CORSO GRATUITO" in
   copertina (ulivo pieno, testo chiaro), non il rettangolo chiaro di
   .evento-titolo__riga: lì il rettangolo crosta risalta sulla foto,
   qui lo sfondo pagina è già crosta (vedi style.css, "sfondo pagina,
   unico in tutto il sito") — un rettangolo dello stesso colore
   sarebbe invisibile. Sostituisce sia il colore ereditato da "h1, h2,
   h3" sia il sottolineato di h2, entrambi in style.css.
   width:fit-content + display:block (non inline, che il rettangolo
   seguirebbe il flusso del testo invece di un blocco a sé): si stringe
   alla larghezza del titolo, non a tutta la colonna di lettura. Vale
   per h1/h2/h3 anche se oggi solo h2/h3 compaiono davvero nel corpo
   (Programma, A chi è rivolto...) — h1 incluso per coerenza/eventi
   futuri con markdown libero da Notion. Da h4 in giù NIENTE badge
   (richiesta esplicita) — nessuna regola qui, restano il colore terra e
   il font-size semplice già dati da style.css, senza bisogno di
   overridarli/azzerarli qui. */
#evento-corpo h1,
#evento-corpo h2,
#evento-corpo h3 {
  display: block;
  width: fit-content;
  background: var(--colore-ulivo);
  color: var(--colore-crosta);
  padding: 0.15em 0.5em;
  border-bottom: none;
}
/* Liste del corpo con l'asterisco ✳ del sito (2026-09-18, richiesta
   esplicita: "il nostro asterisco usato anche nel sito") — stesso
   carattere di riposo di .elenco-finalita in style.css (Il Distretto/
   home), qui senza l'animazione hover/"brulicare" di quel componente:
   quello è pensato per un set fisso di 6 voci, qui le liste sono di
   lunghezza libera (Programma, markdown da Notion...). padding-left:0
   sull'ul toglie l'indentazione di default del browser (list-style:none
   da solo non basta, stesso bug già risolto per .elenco-finalita
   mobile); lo spazio per il simbolo lo riserva il padding-left su li,
   con l'asterisco posizionato assoluto rispetto a lui. */
#evento-corpo ul {
  list-style: none;
  padding-left: 0;
}
#evento-corpo ul li {
  position: relative;
  padding-left: 1.4em;
}
#evento-corpo ul li::before {
  /* "\FE0E" = variante testo (2026-09-23, bug su iPhone: "gli
     asterischi cambiano font" — senza, iOS disegna ✳ come emoji, il
     quadratino verde). */
  content: "\2733\FE0E";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--colore-ulivo);
}
.evento-copertina {
  position: relative;
  /* Margine condiviso (richiesta esplicita: stesso padding-left dei
     titoli per loghi/data/luogo/pulsanti) — un solo valore invece di
     ripeterlo in ogni regola, così tutti questi elementi restano
     garantiti allineati anche se in futuro cambia. 1rem è lo stesso
     valore del padding orizzontale di .evento-titolo (2026-09-16,
     semplificato: un tentativo precedente approssimava l'inizio delle
     lettere del testo con 1.75rem, ora è un match diretto e semplice
     col padding del titolo). */
  --evento-margine: 1rem;
  /* Dimensione di "+Bio" (riga--1), dichiarata QUI e non su
     .evento-titolo (2026-09-17, spostata: serve anche fuori da
     .evento-titolo, a .evento-copertina__loghi dentro
     .evento-copertina__footer — un fratello diverso, che come custom
     property non la vedrebbe se restasse dichiarata più in basso
     nell'albero). .evento-copertina è il più vicino antenato comune a
     entrambi. Usata da riga--1 stessa e dal margin-bottom di "CORSO
     GRATUITO" — un valore solo, non copie che potrebbero disallinearsi. */
  --evento-titolo-riga1: clamp(4rem, 21vw, 12rem);
  /* Stessa idea, per il sottotitolo (2026-09-17, richiesta esplicita: i
     loghi sotto la copertina si allineano al testo DEL SOTTOTITOLO, non
     di "+Bio" — corretto dopo un primo tentativo che usava riga1).
     Usata dal sottotitolo stesso e dal padding-left dei loghi. */
  --evento-titolo-sottotitolo: clamp(1rem, 3.5vw, 2.1rem);
}
/* Racchiude le due immagini sovrapposte + titolo + data/luogo + "scopri
   di più" (2026-09-16, aggiunto per correggere un bug: l'header sotto
   è "sticky", quindi in flusso normale, e la sua altezza si sommava a
   quella di .evento-copertina — gli elementi con inset:0 relativo a
   .evento-copertina finivano per coprire "immagine + header" invece
   che solo l'immagine, sfasando le due foto sovrapposte). Ora
   .evento-immagine-colore/.evento-titolo/eccetera sono relativi a
   QUESTO contenitore, che ha l'altezza esatta della sola immagine. */
.evento-copertina__media { position: relative; }
/* Fascia FEASR sopra la copertina: solo mobile (2026-09-17, richiesta
   esplicita), nascosta di default — vedi @media (max-width: 980px) più
   sotto per come si mostra e per il layout mobile che la ospita. */
.evento-copertina__feasr-riga { display: none; }
/* "Scopri di più" incorporato nella barra loghi: solo mobile, nascosto
   di default — vedi @media (max-width: 980px) più sotto. Senza questo,
   su desktop sarebbe un quarto elemento non gestito nella griglia a 3
   colonne di .evento-copertina__footer (1fr auto 1fr), sbilanciandola. */
.evento-copertina__scopri-barra { display: none; }
.evento-immagine {
  /* width:100% (non il trucco "100vw + margine negativo" usato altrove
     nel sito, es. .banner-notizie): quel trucco serve a uscire da un
     .contenitore che limita la larghezza — qui non c'è nessun
     .contenitore (il template evento non lo usa), quindi 100vw
     produrrebbe solo un rischio di scrollbar orizzontale fantasma
     (100vw include la scrollbar verticale, 100% no) senza alcun
     beneficio. */
  width: 100%;
  /* Sempre a piena altezza di viewport (2026-09-17, richiesta esplicita:
     "manterrei il criterio di avere la copertina sempre full-height" —
     prima era 60vh solo sotto i 981px, un'eccezione tolta: ora la
     stessa regola vale a ogni larghezza, non serve più ripeterla nel
     media query desktop sotto). Meno l'altezza della barra loghi/
     Iscriviti (richiesta esplicita originale: "non deve essere full
     height ma considerare la barra") — la barra è fixed sopra la
     copertina, senza questo conto la copertina finirebbe parzialmente
     coperta invece di terminare esattamente dove inizia la barra. */
  height: calc(100vh - var(--evento-header-h));
  /* dvh dopo vh, non al posto di vh (2026-09-17, bug reale segnalato su
     telefono: "la barra loghi e Scopri di più finiscono sotto il
     pulsante Iscriviti") — "100vh" nei browser mobili è storicamente
     l'altezza MASSIMA della finestra, come se la barra degli indirizzi
     fosse sempre nascosta: appena la pagina si apre (barra visibile),
     lo spazio VERO in vista è più basso di 100vh, quindi tutto quello
     dimensionato su 100vh (qui, e su .evento-copertina/.evento-titolo
     più sotto) risulta più alto dello schermo reale, e Iscriviti (fixed
     in fondo, ancorato invece alla vera area visibile) finisce a
     coprire l'ultima fetta di quel contenuto. "100dvh" (Dynamic
     Viewport Height, unità più recente) segue invece lo spazio
     realmente visibile in ogni momento, barra degli indirizzi inclusa/
     esclusa. Dichiarata DOPO "vh", non al posto suo: i browser che non
     conoscono "dvh" ignorano semplicemente questa riga (proprietà con
     unità sconosciuta = riga non valida, scartata) e restano sul valore
     vh sopra — nessun browser resta senza altezza. */
  height: calc(100dvh - var(--evento-header-h));
  background-size: cover;
  background-position: center;
  /* "position:relative" non per posizionarla altrove (resta dov'è nel
     flusso normale), ma per farla partecipare all'ordine di
     sovrapposizione insieme a .evento-immagine-colore sotto (elemento
     "positioned", z-index:auto): tra due elementi positioned senza
     z-index esplicito vince l'ordine nel DOM, e questa viene dopo nel
     markup — resta sopra. Senza, da elemento "statico" finirebbe
     comunque sotto quella assoluta, indipendentemente dall'ordine nel
     markup. */
  position: relative;
}
.evento-immagine--segnaposto { background: var(--colore-terra); }
/* Immagine a colori sotto il duotone (2026-09-16, richiesta esplicita:
   "due immagini una sopra l'altra, quella duocolor sopra") — stesso
   riquadro esatto di .evento-immagine (inset:0 dentro lo stesso
   .evento-copertina), visibile attraverso il pattern di "+" ritagliato
   nel duotone sopra (vedi .evento-immagine--pattern sotto). Facoltativa:
   se un evento futuro non imposta immagine_hero_colore, questo elemento
   non esiste nemmeno nel markup, il duotone resta semplice come prima. */
.evento-immagine-colore {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* Pattern statico di "+" ripetuti (2026-09-16, richiesta esplicita:
   "niente puntatore dinamico" — sostituisce tre tentativi precedenti
   con un cursore che seguiva il mouse: clip-path:path(), una maschera
   con un buco solo, un canvas-gomma con indicatore SVG, tutti rimossi).
   Puro CSS, nessun JS: una maschera SVG piccola e RIPETUTA (mask-repeat,
   non mask-size:100%) — un quadrato bianco con un "+" nero per
   tassello, bianco mostra il duotone, nero lo rende trasparente,
   rivelando .evento-immagine-colore sotto in una griglia regolare di
   piccole finestre a croce. Con "repeat" il problema del tentativo con
   mask a buco singolo (l'area fuori dal tassello risultava trasparente
   invece che visibile) non si presenta: qui il tassello copre l'intera
   immagine ripetendosi, non c'è nessuna area "fuori". */
.evento-immagine--pattern {
  --evento-pattern-piu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpath d='M41,10 L59,10 L59,41 L90,41 L90,59 L59,59 L59,90 L41,90 L41,59 L10,59 L10,41 L41,41 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--evento-pattern-piu);
  mask-image: var(--evento-pattern-piu);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 10px 10px;
  mask-size: 10px 10px;
  /* Esplicito invece di lasciare il default "match-source": più
     affidabile tra i browser per un'immagine raster/SVG generica
     (non un elemento <mask> inline) usata come sorgente. */
  mask-mode: luminance;
}
/* Cerchio a bordo sfumato che segue il mouse (2026-09-16, richiesta
   esplicita: "un cerchio grandino dal bordo fumato che dissolve il
   layer duocolor texturizzato svelando il colore pieno"), animato da
   static/js/evento-cerchio.js — solo su dispositivi con un vero mouse
   (verificato lì con matchMedia, niente su touch). Terzo livello a sé
   invece di comporre due maschere sullo stesso .evento-immagine
   (pattern statico + cerchio dinamico): mask-composite per unirle
   avrebbe supporto browser meno maturo, stesso tipo di rischio già
   incontrato con clip-path:path() in un tentativo precedente — un
   livello a parte con LA SUA SOLA maschera evita il problema.
   radial-gradient come maschera invece di un'immagine ritagliata:
   bianco (visibile) al centro, sfuma a trasparente verso il bordo —
   è il "bordo fumato" richiesto, e a differenza del vecchio tentativo
   con un buco singolo (mask-size piccolo, ripetuto) qui la maschera
   copre SEMPRE l'intera immagine (mask-size di default = 100% quando
   non specificato), quindi non c'è nessuna area "fuori dal tassello"
   che sparisce per errore. --cerchio-x/y fuori schermo di default:
   niente cerchio finché il mouse non è sopra l'immagine. */
.evento-immagine-cerchio {
  position: absolute;
  inset: 0;
  /* Non intercetta il mouse (2026-09-16, bug confermato via Claude in
     Chrome: "10 errori in console" del giro precedente, poi verificato
     che il vero problema non erano gli errori ma il mousemove che non
     scattava mai): questo livello sta sopra .evento-immagine nello
     stacking, quindi senza questa riga catturava lui tutti gli eventi
     del mouse, e il listener attaccato a .evento-immagine sotto
     (evento-cerchio.js) non riceveva più nulla — stesso tipo di bug già
     trovato una volta con .evento-titolo sopra la barra loghi. */
  pointer-events: none;
  background-size: cover;
  background-position: center;
  --cerchio-x: -9999px;
  --cerchio-y: -9999px;
  --cerchio-raggio: 240px;
  -webkit-mask-image: radial-gradient(circle at var(--cerchio-x) var(--cerchio-y), white 0, white var(--cerchio-raggio), transparent calc(var(--cerchio-raggio) + 120px));
  mask-image: radial-gradient(circle at var(--cerchio-x) var(--cerchio-y), white 0, white var(--cerchio-raggio), transparent calc(var(--cerchio-raggio) + 120px));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Il cursore di sistema sparisce sopra l'immagine quando c'è il
   cerchio: fa lui stesso da puntatore ("al posto del puntatore",
   richiesta esplicita). .evento-immagine--pattern (non :has(), meno
   supportato) è già presente solo quando c'è anche il cerchio, stesso
   ramo del template. */
@media (hover: hover) and (pointer: fine) {
  .evento-immagine--pattern { cursor: none; }
}
.evento-titolo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1.5rem 1rem;
  /* --evento-titolo-riga1 non è più dichiarata qui ma su .evento-copertina
     (2026-09-17: serve anche a .evento-copertina__loghi, un fratello
     fuori da questo elemento — vedi commento lì). Eredita comunque
     normalmente da lì, nessun'altra modifica necessaria in questa
     regola. */
  /* Spazio extra in fondo perché il testo (qui in basso, con
     justify-content:flex-end) non finisca dietro la barra loghi/
     Iscriviti, che è fixed in fondo alla viewport per tutta la pagina
     (--evento-header-h). z-index più alto della barra (sotto, in
     .evento-copertina__footer) così, anche in caso di sovrapposizione
     residua, il titolo le "passa sopra" invece di sparirci dietro —
     richiesta esplicita. */
  padding-bottom: calc(var(--evento-header-h) + 1rem);
  z-index: 11;
  box-sizing: border-box;
  /* Non intercetta il mouse (2026-09-16): su desktop .evento-titolo è
     alto 100vh a prescindere dall'altezza ridotta di
     .evento-copertina__media, quindi la sua metà inferiore si
     sovrappone alla barra loghi/Iscriviti (fixed in fondo) — con uno
     z-index più alto (sopra) ma senza questa riga, quel riquadro
     trasparente ci passava comunque sopra e ne bloccava i click, pur
     non avendo nulla di suo su cui cliccare (bug: "i link non
     funzionano"). Nessun link/pulsante vive dentro .evento-titolo,
     quindi non toglie nulla di cliccabile. */
  pointer-events: none;
}
.evento-titolo h1 { margin: 0; }
/* Data e luogo in alto a destra sulla copertina, due elementi distinti
   e grandi (2026-09-16, richiesta esplicita — prima erano un solo
   badge piccolo con <br> in mezzo), impilati in un contenitore comune
   (2026-09-17) invece che con un "top" calcolato a mano sul secondo —
   quel calcolo assumeva un'altezza fissa per la data, non più vera ora
   che il suo font-size scala con clamp() (vedi sotto): un flex-column
   si adatta da solo, qualunque sia l'altezza reale della data. Stesso
   margine condiviso dei pulsanti del footer sotto
   (right:var(--evento-margine)). */
.evento-copertina__info {
  position: absolute;
  top: 1.5rem;
  right: var(--evento-margine);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.evento-copertina__data,
.evento-copertina__luogo {
  margin: 0;
  text-align: right;
  background: var(--colore-crosta);
  color: var(--colore-terra);
}
.evento-copertina__data {
  font-family: var(--font-titoli);
  font-weight: 700;
  /* clamp() invece di una misura fissa (2026-09-17, bug segnalato: "la
     data viene troncata" — su schermi stretti 1.8rem fissi possono
     sforare, stesso "problema" già risolto per i titoli con clamp(),
     qui applicato allo stesso modo). */
  font-size: clamp(1.1rem, 4.5vw, 1.8rem);
  padding: 0.2rem 0.5rem;
}
/* Scadenza iscrizioni (2026-09-23, richiesta esplicita: "è importante
   che sia ben visibile") — nel blocco titolo, sotto il sottotitolo
   (spostata lì lo stesso giorno dall'angolo data/luogo, richiesta
   esplicita), stesso badge di "CORSO GRATUITO" (ulivo, ombra terra). */
.evento-copertina__scadenza {
  display: block;
  width: fit-content;
  margin: 0.8rem 0 3px;
  background: var(--colore-ulivo);
  color: var(--colore-crosta);
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: clamp(0.95rem, 3.6vw, 1.35rem);
  padding: 0.25rem 0.6rem;
  /* Stessa ombra marrone di "CORSO GRATUITO" (2026-09-23, richiesta
     esplicita); 3px di margine sotto per non tagliarla. */
  box-shadow: 3px 3px 0 var(--colore-terra);
}
.evento-copertina__luogo {
  font-family: var(--font-dati);
  font-size: clamp(0.8rem, 2.8vw, 1.1rem);
  padding: 0.2rem 0.5rem;
  max-width: 60vw; /* indirizzi lunghi non devono sforare a sinistra dello schermo */
}
/* Barra loghi/Iscriviti, visibile fin da subito (2026-09-16, richiesta
   esplicita: "dovrebbe vedersi fin da subito" — position:sticky del
   giro precedente partiva "sotto" e restava nascosta finché non si
   scrollava tutta l'altezza della copertina). position:fixed; bottom:0:
   ancorata in fondo alla viewport per tutta la pagina, non solo mentre
   la copertina è a schermo (un primo tentativo la spostava in cima
   dopo la copertina, con un piccolo script — scartato, "mi piace anche
   se rimane in fondo, anzi meglio"). z-index alto ma sotto a
   .evento-titolo (vedi sotto, che ci passa sopra su richiesta
   esplicita). Altezza maggiore di prima (--evento-header-h) e niente
   più bordo marrone, entrambi su richiesta esplicita. Loghi allineati
   allo stesso margine del titolo (var(--evento-margine)).
   Tutto questo blocco resta valido solo DESKTOP (2026-09-17): sotto i
   980px la barra non è più fixed e non contiene più né la fascia FEASR
   né Iscriviti (entrambi altrove) — vedi @media (max-width: 980px) in
   fondo al file per il layout mobile, radicalmente diverso. */
/* Griglia a 3 colonne (2026-09-17, prima era flex space-between): con
   solo 2 elementi, space-between centra un eventuale terzo elemento in
   mezzo solo se i due estremi sono larghi uguale, quasi mai vero qui
   (loghi partner vs pulsante Iscriviti hanno larghezze diverse). Con
   "1fr auto 1fr" la colonna centrale (larga solo quanto la fascia
   FEASR, "auto") resta sempre visivamente centrata nella barra intera,
   qualunque sia la larghezza dei loghi partner a sinistra o del
   pulsante a destra — solo desktop, questo intero impianto a 3 colonne
   non esiste più sotto i 980px. */
.evento-copertina__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--evento-header-h);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 var(--evento-margine);
  background: var(--colore-crosta);
}
.evento-copertina__loghi {
  display: flex;
  align-items: center;
  /* Stesso valore del padding-left del titolo (2026-09-16, richiesta
     esplicita: "riportalo anche nei gap tra di loro") — var(--evento-margine)
     è già quel valore (1rem), non un numero a parte. */
  gap: var(--evento-margine);
  /* nowrap, non più wrap (2026-09-18, bug segnalato: "i loghi vanno a
     capo anziché scalare") — la fascia FEASR al centro della griglia
     (vedi .evento-copertina__logo--feasr sotto, ~500px anche lei) resta
     larga fissa, quindi su desktop non larghissimi la colonna 1fr dei
     loghi partner si stringe abbastanza da non contenerli più alla loro
     altezza piena: prima andavano a capo (rotto, la barra ha altezza
     fissa), ora restano su una riga e si rimpiccioliscono da soli
     insieme a .evento-copertina__logo qui sotto (clamp anziché
     un'altezza fissa). */
  flex-wrap: nowrap;
}
.evento-copertina__footer > .bottone { justify-self: end; }
/* I loghi non erano centrati in verticale (2026-09-16): da quando sono
   dentro un <a> per il link, l'elemento che il flex del contenitore
   sopra centra è l'<a> stesso, non l'immagine/span al suo interno — un
   <a> inline eredita line-height/allineamento a baseline dal testo, che
   lascia dello spazio residuo sotto l'immagine e la spinge visivamente
   in alto. Reso anch'esso un flex container che centra il proprio
   contenuto, invece di fare affidamento sull'allineamento inline. */
.evento-copertina__loghi a,
.evento-copertina__loghi .link-fermo {
  /* .link-fermo (2026-09-23): nella build per dbtf.bio il logo DBTF è
     dentro uno <span class="link-fermo"> invece che un <a> — senza
     questa riga tornava inline, allineato alla baseline, e "saliva"
     rispetto agli altri loghi (bug visto su iPhone e Android). */
  display: flex;
  align-items: center;
}
.evento-copertina__logo {
  /* clamp(), non più un'altezza fissa (2026-09-18, stesso bug del
     "vanno a capo" sopra): 3.2rem restava fisso a ogni larghezza,
     quindi quando la colonna si stringeva l'unica via d'uscita era
     andare a capo. Ora scala con la larghezza della finestra, minimo
     1.8rem (stessa misura già usata sotto i 980px, .evento-copertina__logo
     nel media query) fino al massimo di prima. .evento-copertina__logo--dbtf
     eredita questa altezza e ricava la sua larghezza da `aspect-ratio`
     (sotto), quindi scala insieme senza distorcersi. */
  height: clamp(1.8rem, 3vw, 3.2rem);
  width: auto;
}
/* Fascia di comunicazione obbligatoria FEASR/UE/Regione Toscana
   (2026-09-17, seconda versione: ora al centro della barra, non più
   dentro .evento-copertina__loghi — vedi griglia a 3 colonne su
   .evento-copertina__footer sopra). Altezza proporzionale a quella base
   degli altri loghi (sotto), richiesta esplicita "regola l'altezza per
   eguagliare gli altri" — essendo pochissimo alta e molto larga
   (~9,76:1), a piena altezza è larga ~500px: max-width:100% è una
   sicurezza perché non sfori un contenitore stretto; la vera riduzione
   per mobile è nella media query sotto. */
.evento-copertina__logo--feasr {
  /* Il file ha molto margine bianco interno sopra/sotto i loghi veri
     (verificato via screenshot, 2026-09-17): alla stessa altezza di
     riquadro degli altri loghi (3.2rem) i loghi visibili al suo interno
     risultano molto più piccoli. Altezza maggiorata per compensare,
     così il contenuto grafico appare della stessa taglia degli altri
     tre, non il riquadro dell'immagine in sé. Ereditata anche dai loghi
     dei finanziatori generici (template evento/generico.html): singoli
     loghi enti, senza lo stesso margine bianco della fascia "+Bio" — a
     5rem potrebbero risultare più grandi degli altri, da verificare
     quando arriveranno file reali da Notion.
     calc() sul clamp() di .evento-copertina__logo, non un secondo
     clamp() con i suoi numeri (2026-09-18, bug segnalato: "il logo
     feasr si stretcha anziché scalare" — prima aveva un'altezza fissa
     5rem che vinceva sul clamp() introdotto sopra, quindi non si
     restringeva più con la finestra, mentre max-width:100% comprimeva
     comunque la larghezza quando la colonna si stringeva: risultato,
     un logo schiacciato/deformato). "* 1.5625" è lo stesso rapporto
     5/3.2 di prima: cambiando la taglia base degli altri loghi, questa
     la segue automaticamente, sempre in proporzione, niente numeri da
     tenere sincronizzati a mano in due punti. */
  height: calc(clamp(1.8rem, 3vw, 3.2rem) * 1.5625);
  max-width: 100%;
  justify-self: center;
}
/* Contenitore dei loghi finanziatori quando sono più di uno (template
   generico, 2026-09-18 — "+Bio" ha un'unica immagine già pronta, non
   passa da qui) — prende il posto del singolo <img> come figlio della
   griglia a 3 colonne di .evento-copertina__footer, quindi è lui ad
   avere justify-self:center; i loghi al suo interno (stessa classe
   .evento-copertina__logo--feasr di "+Bio", per ereditarne
   altezza/max-width) si dispongono in riga tra loro. */
.evento-copertina__finanziatori {
  display: flex;
  align-items: center;
  gap: var(--evento-margine);
  flex-wrap: wrap;
  justify-self: center;
}
/* "Scopri di più" resta nella copertina, in basso a destra (2026-09-16,
   richiesta esplicita: separato dall'header fisso sopra, "Iscriviti" è
   rimasto lì) — position:absolute dentro .evento-copertina, non fixed:
   scorre via con l'immagine come il resto della copertina, non
   persiste per tutta la pagina. */
.evento-copertina__scopri {
  position: absolute;
  right: var(--evento-margine);
  bottom: 1.5rem;
  z-index: 2;
  /* Colori invertiti rispetto al normale .bottone (2026-09-16,
     richiesta esplicita: "marrone di default, con l'hover diventa
     chiaro") — pieno di --colore-terra a riposo, non solo bordato, e
     si schiarisce invece di scurirsi al passaggio del mouse. */
  background: var(--colore-terra);
  color: var(--colore-crosta);
}
.evento-copertina__scopri:hover {
  background: var(--colore-crosta);
  color: var(--colore-terra);
}
/* Stessa larghezza per "Iscriviti" (nella barra) e "Scopri di più"
   (in copertina), richiesta esplicita — pur vivendo in due contenitori
   diversi, restano visivamente coerenti. 11rem basta al testo più
   lungo ("Scopri di più") con un po' di margine. */
.evento-copertina__footer .bottone,
.evento-copertina__scopri {
  width: 11rem;
}
/* Logo DBTF nel verde del tema invece dei suoi colori originali
   (2026-09-16, richiesta esplicita) — non un <img>, il logo stesso è
   usato come maschera (mask-image) su uno sfondo a tinta unita
   (--colore-ulivo): ricolora qualunque file a un colore fisso
   indipendentemente dai suoi colori originali, stessa tecnica del
   pattern di "+" sull'immagine sopra. aspect-ratio invece di una
   larghezza fissa: uno <span> mascherato non ha una dimensione
   intrinseca come un <img>, va dichiarata (284/351 è il viewBox del
   file). */
.evento-copertina__logo--dbtf {
  /* display esplicito (2026-09-16): prima lo span era figlio diretto
     del contenitore flex, che lo "blockificava" da solo facendo
     funzionare height/aspect-ratio anche se di per sé è inline — ora
     che è dentro un <a> (per il link), non è più figlio diretto del
     flex e perderebbe quel comportamento senza dichiararlo qui. */
  display: inline-block;
  aspect-ratio: 284 / 351;
  background-color: var(--colore-ulivo);
  -webkit-mask-image: url("/img/logo/DBTF_logo.svg");
  mask-image: url("/img/logo/DBTF_logo.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.evento-copertina__azioni {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* Terzo tentativo (2026-09-16): niente più colore di testo "furbo" da
   solo (scartati mix-blend-mode:difference, poi un'ombra sfocata, poi
   un colore fisso semplice — nessuno si leggeva abbastanza bene sopra
   una foto). Ogni riga ha ora un vero sfondo pieno, colori del tema
   (crosta dietro, terra il testo) — a differenza del pannello scartato
   qualche giro fa (dietro TUTTO il titolo, riquadro unico), qui il
   riquadro segue la larghezza di ogni singola riga di testo (width:
   fit-content), non l'intera colonna: resta "leggero", a misura delle
   parole invece che un blocco. align-items:flex-start su .evento-titolo
   sopra impedisce al flex di stirare comunque le righe a piena
   larghezza nonostante fit-content. */
.evento-titolo__riga {
  display: block;
  width: fit-content;
  background: var(--colore-crosta);
  color: var(--colore-terra);
  padding: 0.05em 0.35em;
}
/* "CORSO GRATUITO" sopra il titolo (2026-09-17 — inizialmente pensata
   come alternativa più semplice al bollino tondo in copertina, poi
   rimasto solo questa, il bollino è stato tolto) — stesso principio
   delle righe sopra (sfondo pieno a misura di parola, non testo "furbo"
   da solo sulla foto, vedi commento storico qui sotto): sfondo verde,
   testo chiaro, ombra solida marrone a 45° (niente più bordo chiaro,
   tolto su richiesta esplicita). display:flex invece di block per
   centrare il testo in altezza nel box (prima si affidava solo al
   padding simmetrico, meno affidabile con line-height diversi).
   margin-bottom aumentato per più respiro prima di "+Bio" sotto. */
.evento-titolo__corso-gratuito {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  background: var(--colore-ulivo);
  color: var(--colore-crosta);
  box-shadow: 3px 3px 0 var(--colore-terra);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15em 0.45em;
  /* Stesso spazio che c'è tra "+Bio" e la riga sotto di lui (2026-09-17,
     richiesta esplicita, seconda correzione — "0.15em" da solo, primo
     tentativo, risolveva in un valore minuscolo: 0.15em è relativo al
     font-size DI QUESTO elemento, molto più piccolo di quello di
     +Bio, non allo stesso font-size di +Bio come serviva). Misurato dal
     vivo: lo spazio reale tra le due righe del titolo è ~28.8px, quasi
     interamente il margin-bottom di +Bio stesso (0.15em DI +Bio, non
     i 0.3rem di margin-top della riga successiva, molto più piccoli) —
     calc() sulla stessa variabile --evento-titolo-riga1 (vedi
     .evento-titolo) replica esattamente quel valore, qui e a "+Bio"
     restano sempre sincronizzati anche quando la taglia scala con
     clamp(). */
  margin-bottom: calc(var(--evento-titolo-riga1) * 0.15);
  font-size: clamp(1rem, 3vw, 1.6rem);
}
/* Compensazione ottica sul testo, non sul riquadro (2026-09-17): un
   transform sull'elemento colorato stesso sposterebbe riquadro e testo
   insieme, lasciando lo scarto identico (verificato: nessun effetto,
   provato prima su .evento-titolo__corso-gratuito direttamente) — serve
   uno strato interno che si muova RISPETTO al riquadro fermo, stesso
   schema di .elenco-finalita li a in style.css (lì il riquadro stabile
   è <li>, l'elemento che trasla è <a>; qui il riquadro stabile è
   .evento-titolo__corso-gratuito, l'elemento che trasla è questo
   <span>). Stesso "problema" del font già diagnosticato per
   .banner-notizie in home e .elenco-finalita in style.css (spazio
   ascendente/discendente asimmetrico intorno alla riga), ma valore
   ricalibrato qui (0.04em, non 0.08em): misurato via
   getBoundingClientRect() sul testo reso (gapSopra/gapSotto), 0.08em
   spostava il testo troppo in basso, oltre il centro — l'entità dello
   scarto dipende dal font-size e dal line-height del contesto, non è
   la stessa costante ovunque nel sito. */
.evento-titolo__corso-gratuito-testo {
  display: block;
  transform: translateY(0.04em);
}
/* Riga 1 molto più grande delle altre (richiesta esplicita: "impattare
   gli altri 2, raddoppiali") — le altre due righe raddoppiate rispetto
   alla dimensione precedente, per restare in proporzione col salto di
   scala della prima invece di sembrare due didascalie a parte.
   font-size con clamp() (2026-09-17, richiesta esplicita: "zoomando o
   andando in responsive le scritte rimangono enormi... scalerei la
   grandezza dei titoli") — prima erano due sole misure fisse (una sopra
   e una sotto i 550px, salto netto in mezzo); clamp(min, preferito-in-
   vw, max) segue invece con continuità la larghezza reale del
   viewport, compreso lo zoom del browser (che la cambia), invece di
   restare bloccato al valore desktop finché non si passa sotto 550px.
   La media query sotto non serve più per questi 4 selettori — resta
   solo per la fascia loghi/barra, che non usa clamp. */
.evento-titolo__riga--1 { font-size: var(--evento-titolo-riga1); font-weight: 700; line-height: 0.9; margin-bottom: 0.15em; }
.evento-titolo__riga--2 { font-size: clamp(1.5rem, 6vw, 3.4rem); margin-top: 0.3rem; }
.evento-titolo__riga--3 { font-size: clamp(1.2rem, 4.5vw, 2.5rem); opacity: 0.85; margin-top: 0.2rem; }
.evento-titolo__sottotitolo {
  display: block;
  width: fit-content;
  background: var(--colore-crosta);
  color: var(--colore-terra);
  padding: 0.05em 0.35em;
  font-style: italic;
  margin-top: 0.4rem;
  font-size: var(--evento-titolo-sottotitolo);
}
@media only screen and (max-width: 980px) {
  /* Ristrutturazione mobile (2026-09-17, richiesta esplicita — sostituisce
     due tentativi precedenti: prima loghi+FEASR+Iscriviti tutti in
     un'unica barra fixed che andava a capo su più righe con bug, poi
     un'unica riga con scroll orizzontale). Ora: la fascia FEASR diventa
     una riga a sé SOPRA la copertina, i loghi partner (APAB/DBTF/RSR)
     restano una riga SOTTO la copertina ma in flusso normale (non più
     fixed), e solo "Iscriviti" resta ancorato in fondo alla viewport,
     ora a piena larghezza. Richiesta esplicita: aprendo la pagina, la
     somma "fascia FEASR + copertina + barra loghi + spazio del
     pulsante" deve riempire esattamente l'altezza della viewport.
     Ottenuto con flexbox invece di calcolare a mano l'altezza di ogni
     fascia: .evento-copertina è un flex-column alto 100vh, la copertina
     (.evento-copertina__media) ha flex:1 e assorbe da sola tutto lo
     spazio che le due righe di loghi (altezza naturale) non usano —
     un'unica costante dichiarata (--evento-iscriviti-h, l'altezza del
     pulsante) invece di tre, perché è l'unico elemento che si sottrae
     dal totale stando fuori dal flusso (position:fixed). */
  /* --evento-iscriviti-h: 3.5rem, INVARIATA (2026-09-17, corretto dopo
     un fraintendimento: "il pulsante iscriviti doveva rimanere come
     prima" — un giro precedente l'aveva abbassata insieme alla barra
     loghi, cambiando anche l'altezza di Iscriviti, che invece doveva
     restare quella di sempre). La barra loghi ha una sua costante
     separata, --evento-loghi-bar-h — non un numero scelto a caso, è
     esattamente l'altezza naturale di .evento-copertina__feasr-riga più
     sotto (padding 0.5rem sopra e sotto + logo, oggi 2rem = 3rem,
     richiesta esplicita "la barra alta come la barra feasr in alto") —
     le due barre di loghi (sopra e sotto la copertina) restano della
     stessa altezza, indipendente da quella di Iscriviti. Aggiornata da
     2.8 a 3rem insieme al logo FEASR (2026-09-17, "facciamo i loghi
     feasr 2rem"): se cambia di nuovo l'altezza del logo FEASR, va
     ricalcolata anche qui. */
  .corpo-evento {
    --evento-iscriviti-h: 3.5rem;
    --evento-loghi-bar-h: 3rem;
  }
  /* Margine di sicurezza in fondo al testo (2026-09-17, bug segnalato:
     "ancora taglia la pagina" — dopo aver tolto .piede-evento, l'ultima
     fetta di testo restava coperta da Iscriviti, fisso in fondo alla
     viewport per tutta la pagina: qui .colonna-lettura non aveva alcun
     padding-bottom proprio). Non solo l'altezza esatta del pulsante: un
     margine extra oltre, "un bel margine... per essere sicuri". */
  .corpo-evento .colonna-lettura {
    padding-bottom: calc(var(--evento-iscriviti-h) + 2rem);
  }
  .evento-copertina {
    height: 100vh;
    /* dvh dopo vh (2026-09-17, bug reale su telefono: "la barra loghi e
       Scopri di più finiscono sotto il pulsante Iscriviti") — stesso
       problema/stessa soluzione spiegati sopra su .evento-immagine:
       "100vh" nei browser mobili ignora la barra degli indirizzi
       (assume sia sempre nascosta), quindi appena la pagina si apre
       questo contenitore risulta più alto dello spazio davvero
       visibile, e Iscriviti (fixed, ancorato invece alla vera area
       visibile) copre l'ultima fetta di barra loghi/Scopri di più.
       "100dvh" segue lo spazio reale; dichiarata dopo "vh" così i
       browser che non la conoscono restano comunque sul fallback. */
    height: 100dvh;
    padding-bottom: var(--evento-iscriviti-h);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  /* "Scopri di più" (entrambe le copie, in copertina e nella barra)
     punta a questa ancora — su mobile senza questo il testo finiva
     esattamente a filo del bordo superiore dello schermo, un salto
     brusco (richiesta esplicita, "un'accortezza": un po' di margine
     sopra invece di partire attaccato). scroll-margin-top, non
     padding/margin sull'elemento: sposta solo il punto di arrivo dello
     scroll via ancora, non la sua posizione nel flusso normale. */
  #evento-corpo { scroll-margin-top: 1.25rem; }
  .evento-copertina__feasr-riga {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap/flex-wrap (2026-09-18, template generico): "+Bio" ha un solo
       file, non serve; gli eventi generati da Notion possono avere più
       finanziatori come <img> diretti qui dentro (nessun div
       contenitore in più, a differenza di .evento-copertina__finanziatori
       nella barra sotto la copertina), quindi serve uno spazio tra loro. */
    gap: var(--evento-margine);
    flex-wrap: wrap;
    flex: none;
    padding: 0.5rem var(--evento-margine);
    background: var(--colore-crosta);
  }
  /* 2rem (2026-09-17, richiesta esplicita: "facciamo i loghi feasr
     2rem") — su, da 1.8rem: il logo FEASR (obbligo di comunicazione)
     resta il più prominente delle due barre, gli altri (sotto) si
     rimpiccioliscono invece (vedi .evento-copertina__logo più sotto). */
  .evento-copertina__feasr-riga .evento-copertina__logo--feasr {
    height: 2rem;
    max-width: 100%;
  }
  /* La copia della fascia FEASR dentro la barra sotto (pensata per la
     griglia a 3 colonne del desktop) va nascosta qui: su mobile si vede
     solo quella sopra la copertina appena sopra. */
  .evento-copertina__footer .evento-copertina__logo--feasr { display: none; }
  .evento-copertina__media {
    /* Assorbe tutto lo spazio verticale residuo (vedi sopra) — non più
       un'altezza calcolata sottraendo la vecchia barra fissa, che qui
       non esiste più. min-height:0 (non il default "auto" implicito
       dei figli flex) permette a questo box di restringersi sotto
       l'altezza intrinseca del suo contenuto (l'immagine), altrimenti
       in un flex-column non si comprimerebbe oltre quella misura. */
    flex: 1 1 auto;
    min-height: 0;
  }
  .evento-immagine {
    /* height:100% del contenitore (ora flex:1, già dimensionato giusto)
       invece del calc() su --evento-header-h: quella variabile qui non
       ha più lo stesso significato, "fixed" ora è solo Iscriviti. */
    height: 100%;
  }
  .evento-titolo {
    /* Stesso principio del calc() precedente, ma solo Iscriviti resta
       fisso in fondo alla viewport per tutta la pagina, non più
       l'intera barra. */
    padding-bottom: calc(var(--evento-iscriviti-h) + 1rem);
  }
  /* Barra loghi (APAB/DBTF/RSR) sotto la copertina: non più fixed, in
     flusso normale come terzo elemento della "somma" — contiene solo
     questi tre ora (niente più fascia FEASR, spostata sopra; niente più
     Iscriviti, spostato in fondo pagina). Alta come la fascia FEASR
     sopra (--evento-loghi-bar-h, non --evento-iscriviti-h: le due
     misure sono deliberatamente separate, vedi commento su
     .corpo-evento più sopra). align-items:center perché, a differenza
     di "height:auto" di prima, ora l'altezza della barra non segue più
     il contenuto (i loghi, più bassi), va centrato lui dentro. */
  .evento-copertina__footer {
    position: static;
    height: var(--evento-loghi-bar-h);
    flex: none;
    display: flex;
    /* stretch, non più center (2026-09-17): "Scopri di più" qui dentro
       (vedi .evento-copertina__scopri-barra sotto) deve arrivare a
       piena altezza della barra, non restare centrato a misura del suo
       contenuto. */
    align-items: stretch;
    /* Niente più padding qui (prima 0 var(--evento-margine)): lo mette
       .evento-copertina__loghi al suo interno, così "Scopri di più"
       resta a filo del bordo destro invece di avere un margine vuoto
       intorno — è quello il senso di "incorporato nella barra". */
    padding: 0;
    background: var(--colore-crosta);
    /* Riga di separazione dalla barra Iscriviti fissa sotto (2026-09-18,
       richiesta esplicita, solo mobile — su desktop non c'era e va
       lasciata via: qui non tocca il contenuto scrollato, è già fissa in
       fondo). */
    border-bottom: 1px solid var(--colore-terra);
  }
  /* flex:1 1 auto (non più width:100%, ora che "Scopri di più" è un
     fratello dentro la stessa barra) fa sì che questo blocco occupi
     tutto lo spazio residuo dopo il pulsante, non l'intera larghezza.
     justify-content:flex-start (2026-09-18, richiesta esplicita: loghi
     allineati a sinistra, non più distribuiti su tutta la porzione di
     barra con space-between). */
  .evento-copertina__loghi {
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: center;
    /* Allineati al TESTO del SOTTOTITOLO, non al bordo del suo riquadro
       (2026-09-17, corretto dopo un fraintendimento: un primo tentativo
       si era allineato a "+Bio"/riga--1, richiesta esplicita "i loghi
       non dovevano fare riferimento a +bio ma al sottotitolo") —
       .evento-titolo__sottotitolo ha un padding proprio (0.35em,
       relativo al SUO font-size, variabile con clamp()) tra il bordo
       del riquadro e dove inizia davvero la lettera.
       var(--evento-titolo-sottotitolo) è la stessa variabile che dà al
       sottotitolo il suo font-size (vedi .evento-copertina): calc()
       replica esattamente quel 0.35em qui. */
    padding-left: calc(var(--evento-margine) + var(--evento-titolo-sottotitolo) * 0.35);
    padding-right: var(--evento-margine);
    flex-wrap: nowrap;
  }
  /* Rimpiccioliti in tre passaggi (2026-09-17): 3.2rem → 2rem ("brutto...
     rimpicciolisci i loghi proporzionalmente" — la vecchia misura
     pensata per la barra più alta di allora, 6rem, risultava quasi a
     contatto con i bordi della nuova barra più bassa) → 1.5rem (il logo
     FEASR era cresciuto a 2rem, questi dovevano restare secondari) →
     1.8rem (richiesta esplicita "i 3 loghi 1.8rem": leggermente sotto i
     2rem di FEASR, non così piccoli come 1.5rem). Stessa altezza per
     tutti e tre, come prima. */
  .evento-copertina__logo { height: 1.8rem; }
  /* "Scopri di più" incorporato nella barra loghi, a piena altezza
     (2026-09-17, richiesta esplicita) — quello sopra l'immagine (stesso
     testo, in copertina) va nascosto qui, altrimenti comparirebbe due
     volte. Stessi colori invertiti dell'originale (--colore-terra
     pieno, testo chiaro) per restare un pulsante riconoscibile anche
     incorporato in una barra più chiara. */
  .evento-copertina__scopri { display: none; }
  .evento-copertina__scopri-barra {
    /* height:100% (non affidarsi ad align-items:stretch da solo):
       .bottone in style.css impone già un'altezza fissa propria
       (2.7rem) — senza sovrascriverla esplicitamente qui vincerebbe
       quella, "stretch" del genitore non ha effetto su un elemento che
       ha già un'altezza dichiarata. */
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0 1.1rem;
    background: var(--colore-terra);
    color: var(--colore-crosta);
    /* Niente font-size proprio (2026-09-17, richiesta esplicita:
       "font-size iscriviti e scopri di più da fare uguali" — un valore
       a parte, 0.85rem, li faceva leggermente diversi): eredita lo
       stesso 0.78rem di .bottone in style.css, la stessa classe di
       base di Iscriviti qui accanto, invece di un numero duplicato che
       potrebbe disallinearsi di nuovo. */
    white-space: nowrap;
  }
  /* Iscriviti: l'unico elemento che resta fisso, ora a piena larghezza
     in fondo alla viewport (richiesta esplicita) invece che dentro la
     barra loghi — resta comunque figlio di .evento-copertina__footer
     nel markup, position:fixed lo stacca visivamente da lì senza
     bisogno di spostarlo nell'HTML. Selettore su .bottone--verde, non
     .bottone da solo (2026-09-17, bug: "Scopri di più" dentro la barra
     ha anche lui la classe .bottone — un selettore troppo largo lo
     rendeva fixed e sovrapposto a Iscriviti, invisibile perché
     schiacciato nello stesso riquadro). .bottone--verde è solo su
     Iscriviti. */
  .evento-copertina__footer > .bottone--verde {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 15;
    width: 100%;
    height: var(--evento-iscriviti-h);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Bordo chiaro in fondo (2026-09-18, richiesta esplicita), solo
       mobile: Iscriviti qui è fixed a filo del bordo inferiore della
       viewport. */
    border-bottom: 1px solid var(--colore-crosta);
  }
  /* Tolto in fondo al testo, solo mobile (2026-09-17, richiesta
     esplicita) — resta comunque visibile e raggiungibile per tutta la
     pagina come barra fissa in fondo alla viewport (regola sopra), qui
     era ridondante. .colonna-lettura > , non .bottone--pieno da solo:
     quella classe esiste anche altrove nel sito (style.css), restare
     specifici a questo contenitore evita di toccarne altri usi anche
     se qui non ne condividerebbe comunque il foglio di stile. */
  .colonna-lettura > .bottone--pieno { display: none; }
  /* Logo centrato in orizzontale (2026-09-17, richiesta esplicita) —
     .evento-linea-azione__logo-link ha larghezza propria (non piena),
     "justify-content:center" lo centra nella riga quando va a capo sotto
     il testo (flex-wrap:wrap, vedi .evento-linea-azione sopra) invece di
     restare appoggiato a sinistra. */
  .evento-linea-azione { justify-content: center; }
}
@media only screen and (min-width: 981px) {
  /* Su desktop .evento-titolo passa a padding:3rem (sotto), non più
     1rem come su mobile — il margine condiviso deve seguirlo, altrimenti
     loghi/data/luogo/pulsanti restano allineati al vecchio 1rem mentre
     il riquadro del titolo è già a 3rem (bug confermato via inspector:
     "lo spazio... è minore... l'inspector dà 3rem per loro"). */
  .evento-copertina { --evento-margine: 3rem; }
  .evento-titolo {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    /* dvh dopo vh, stesso motivo spiegato su .evento-immagine e
       .evento-copertina (2026-09-17) — qui riguarda soprattutto tablet
       o finestre strette con barra degli indirizzi dinamica. */
    height: 100dvh;
    justify-content: center;
    padding: 3rem;
    padding-bottom: calc(var(--evento-header-h) + 1rem);
    z-index: 11;
  }
  .corpo-evento .colonna-lettura {
    /* Prima "max-width: none" riempiva tutta la metà destra dello
       schermo (2026-09-17, richiesta esplicita: "colonna di testo più
       stretta come negli articoli del sito") — --misura-max è la
       stessa variabile che regola .colonna-lettura ovunque nel resto
       del sito (style.css), qui semplicemente non più azzerata. */
    max-width: var(--misura-max);
    /* Centrata nella metà destra (2026-09-17, richiesta esplicita — non
       più ancorata all'inizio subito dopo i 50vw): lo spazio vuoto che
       resta quando lo schermo è molto largo (il testo non supera
       comunque --misura-max) va diviso equamente tra sinistra e destra
       della metà destra, non tutto a destra. min(...) copre il caso in
       cui la metà destra sia più stretta di --misura-max (vicino alla
       soglia 981px): lì il margine aggiuntivo è 0, stesso comportamento
       di quando semplicemente riempiva la colonna. */
    margin: 0 0 0 calc(50vw + (50vw - min(var(--misura-max), 50vw)) / 2);
    padding: 3rem;
    /* Margine di sicurezza in fondo (2026-09-17, bug segnalato: "ancora
       taglia la pagina" — dopo aver tolto .piede-evento, l'ultima fetta
       di testo restava comunque coperta dalla barra fissa desktop,
       perché il padding sopra è un valore fisso di 3rem, più basso
       dell'altezza vera della barra, --evento-header-h, 6rem). Non solo
       l'altezza esatta della barra: un margine extra oltre, "un bel
       margine... per essere sicuri", così anche un domani che la barra
       cambi leggermente altezza resta comunque un margine di sicurezza. */
    padding-bottom: calc(var(--evento-header-h) + 3rem);
    box-sizing: border-box;
  }
}
/* Titolo troppo alto su desktop "basso" (2026-09-18, bug segnalato da un
   collega via screenshot: "+Bio" finiva sopra la barra loghi, sforando
   lo spazio dell'immagine). Causa: sopra, tutti i clamp() del titolo
   scalano SOLO in base alla larghezza (vw) — mai in base all'altezza —
   quindi su uno schermo largo ma basso (molti notebook 1366×768/
   1440×900, o una finestra non massimizzata in verticale) il testo
   resta vicino al massimo mentre lo spazio verticale è ridotto.
   .evento-titolo è alto 100dvh, centrato (justify-content:center) e
   con un margine di sicurezza in fondo di 7rem (--evento-header-h +
   1rem) per non finire sotto la barra fissa — se il contenuto reale
   supera lo spazio disponibile (100dvh meno i due padding), trabocca
   oltre quel margine e finisce visivamente sopra la barra (il titolo
   ha z-index più alto, quindi le passa sopra invece di sparire dietro).
   Stima ai valori normali (colonna ~50vw): "+Bio" (fino a 12rem) +
   riga--2 (fino a 3.4rem, anche 4 righe come nello screenshot) +
   sottotitolo (fino a 2.1rem) + "CORSO GRATUITO" sommano a ~640px,
   serve quindi un viewport verticale di almeno ~800px (al netto dei
   padding) perché non trabocchi — sotto quella soglia si scalano i
   massimi dei clamp(), non la logica: min e preferito (vw) restano
   uguali, cambia solo il tetto. Non serve toccare
   .evento-titolo__corso-gratuito: il suo margin-bottom è già calcolato
   come percentuale di --evento-titolo-riga1, si riduce da solo insieme
   al titolo. Con questi nuovi massimi il contenuto scende a ~370-400px,
   con margine anche per finestre piuttosto basse (~600px). */
@media (min-width: 981px) and (max-height: 800px) {
  .evento-copertina {
    --evento-titolo-riga1: clamp(3rem, 15vw, 7rem);
    --evento-titolo-sottotitolo: clamp(0.9rem, 2.5vw, 1.5rem);
  }
  .evento-titolo__riga--2 { font-size: clamp(1.2rem, 4vw, 2.2rem); }
}
/* Riga data/sede sopra la descrizione, stesso registro tipografico
   delle altre pagine (es. .scheda-atlante__meta). */
.evento-info {
  font-family: var(--font-dati);
  font-size: 0.85rem;
  color: var(--colore-terra);
  opacity: 0.75;
}
/* Sezione "questo corso rientra nel Piano del DBTF" (2026-09-17,
   richiesta esplicita) — logo (versione con testo, non la maschera
   verde usata nella barra loghi: qui serve leggibile e riconoscibile
   da solo, non ricolorato) affiancato alla frase con il rimando. flex-
   wrap:wrap perché su schermi stretti il logo va sopra al testo invece
   di schiacciarlo. */
.evento-linea-azione {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
/* Logo linkato all'home (2026-09-17, richiesta esplicita: "mettici il
   link al sito nel logo") — niente sottolineatura/colore da link
   generico: il logo parla già da solo. La didascalia "dbtf.bio" sotto
   (in un primo momento aggiunta "in forma estesa", poi tolta su
   richiesta esplicita) non c'è più: la regola .evento-linea-azione__url
   che la stilizzava è stata rimossa con lei, non lasciata come scarto
   inutilizzato. */
.evento-linea-azione__logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  text-decoration: none;
  color: inherit;
}
.evento-linea-azione__logo {
  /* 7rem (2026-09-17, richiesta esplicita, era 4rem) */
  height: 7rem;
  width: auto;
}
.evento-linea-azione__testo {
  flex: 1 1 16rem;
  margin: 0;
}
/* .piede-evento rimosso (2026-09-17, richiesta esplicita) — vedi
   commento in layouts/evento/baseof.html: sia la barra fissa desktop
   sia Iscriviti fisso su mobile lo sormontavano. */

/* Link interni "fermi" (2026-09-23): nella build per dbtf.bio
   (config/corso) esiste solo la pagina del corso — i rimandi al resto
   del sito restano visibili ma come testo, senza aspetto da link. */
.link-fermo { color: inherit; text-decoration: none; cursor: default; }

/* Programma: titolo grande e sottosezioni marroni (2026-09-23, "per
   coerenza con ig e pdf") — stessi ruoli di .programma__titolo (ulivo,
   grande) e .programma__sezione-titolo (terra, font dati) nel volantino.
   Selettori con #evento-corpo per vincere sulla regola generica dei
   titoli del corpo sopra. */
#evento-corpo .evento-programma__titolo {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
}
#evento-corpo .evento-programma__sezione {
  background: var(--colore-terra);
  font-family: var(--font-dati);
  font-size: 1.05rem;
}
/* Scadenza nel corpo, in fondo prima del bottone Iscriviti. */
.evento-scadenza-corpo {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.75rem;
}

/* Luogo in copertina: indirizzo completo su desktop, solo la città su
   mobile (2026-09-23, bug su iPhone: le 4 righe dell'indirizzo finivano
   sopra "CORSO GRATUITO"/"+Bio"). */
.evento-copertina__luogo--breve { display: none; }
@media only screen and (max-width: 980px) {
  .evento-copertina__luogo--esteso { display: none; }
  .evento-copertina__luogo--breve { display: block; }
}
/* Schermi mobili bassi (Safari su iPhone con le barre visibili): titolo
   più piccolo, stesso principio della regola desktop max-height:800px
   sopra — il blocco titolo (ora con anche la scadenza) non deve
   raggiungere data/luogo in alto. */
@media only screen and (max-width: 980px) and (max-height: 760px) {
  .evento-copertina {
    --evento-titolo-riga1: clamp(3rem, 17vw, 12rem);
    --evento-titolo-sottotitolo: clamp(0.9rem, 3.2vw, 2.1rem);
  }
  .evento-titolo__riga--2 { font-size: clamp(1.3rem, 5.4vw, 3.4rem); }
}