/*!
Theme Name: Biblioteca Ernesto Ragionieri — Child
Theme URI: https://biblioteca.test/
Description: Child theme del tema Biblioteca Ernesto Ragionieri. Contiene le sole modifiche grafiche: presentazione accessibile (WCAG 2.2 AA) della sidebar "Documenti" scaricabili.
Author: Comune di Sesto Fiorentino — Biblioteca Ernesto Ragionieri
Template: biblioteca-ernesto-ragionieri
Version: 1.51.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: biblioteca-ernesto-ragionieri-child
*/

/* -------------------------------------------------------------------------
 * Sidebar "Documenti" scaricabili — accessibile (WCAG 2.2 AA)
 * - target ≥ 24×24px (SC 2.5.8): link con altezza minima ampia e padding;
 * - focus visibile ad alto contrasto (SC 2.4.7 / 2.4.11);
 * - informazione non affidata al solo colore: testo descrittivo + icona;
 * - contrasto testo ≥ 4.5:1 su sfondo bianco.
 * ---------------------------------------------------------------------- */

.doc-list--accessibile {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.doc-list--accessibile .doc-list__item {
	margin: 0;
}

.doc-list--accessibile .doc-list__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px; /* ampiamente ≥ 24px (SC 2.5.8) */
	padding: 12px 14px;
	border: 1px solid var(--border-default, #c5c9d0);
	border-radius: var(--radius-md, 8px);
	background: var(--white, #fff);
	color: var(--text-strong, #1b1b1b); /* contrasto ≥ 4.5:1 su bianco */
	text-decoration: none;
	line-height: 1.35;
}

.doc-list--accessibile .doc-list__link:hover {
	border-color: var(--color-primary, #06c);
	background: var(--blue-50, #eef4ff);
	text-decoration: underline; /* non solo colore al hover */
}

.doc-list--accessibile .doc-list__link:focus-visible {
	outline: 3px solid var(--focus-ring, #06c);
	outline-offset: 2px;
}

.doc-list--accessibile .doc-list__icon {
	color: var(--danger, #b8261c); /* icona PDF, decorativa (aria-hidden) */
	flex: none;
	display: inline-flex;
}

.doc-list--accessibile .doc-list__text {
	font-weight: var(--weight-medium, 600);
}

/* Regione documenti: landmark etichettato per gli screen reader. */
.doc-region {
	margin: 0;
}

/* Orari sede secondaria (page-orari override) */
.bib-sede-orari { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bib-sede-orari li { font-size: var(--text-sm, 0.9rem); color: var(--text-body, #1b1b1b); }

/* ---------------------------------------------------------------------------
 * Epica 3 — Switch Bibliosesto/Ragazzi più evidente (govbar)
 * Più grande, contrasto e stato attivo chiari; accessibile e responsive.
 * ------------------------------------------------------------------------- */
.area-switch--prominente { gap: 6px; }
/* «Area riservata» è una linguetta come Bibliosesto e Ragazzi: sta negli stessi
   selettori, non in una regola parallela, così non possono divergere di nuovo.
   Prima ereditava dal padre gli angoli tutti arrotondati e l'altezza dei link
   di servizio, e si vedeva che era un'altra cosa. */
.area-switch--prominente .area-switch__link,
.area-switch--prominente .area-switch__login.is-active {
	min-height: 44px;               /* target ampio (WCAG 2.5.8) */
	height: auto;
	align-self: stretch;
	border-radius: 10px 10px 0 0;   /* forma a tab, come nel tema padre */
	padding: 0 22px;
	font-size: var(--text-sm, 0.95rem);
	font-weight: var(--weight-semibold, 600);
	letter-spacing: .02em;
	border: 1px solid rgba(255, 255, 255, .25);
	border-bottom: 0;
	color: #fff;                    /* contrasto pieno su govbar scura */
}
.area-switch--prominente .area-switch__link:not([aria-current="true"]) {
	background: rgba(255, 255, 255, .06);
}
.area-switch--prominente .area-switch__link[aria-current="true"],
.area-switch--prominente .area-switch__login.is-active {
	background: var(--skin-accent, #06c);
	color: #fff;
	font-weight: var(--weight-bold, 700);
	box-shadow: 0 -3px 0 rgba(255, 255, 255, .55) inset; /* stato attivo evidente */
}
.area-switch--prominente .area-switch__link:focus-visible,
.area-switch--prominente .area-switch__login.is-active:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* ---------------------------------------------------------------------------
 * Epica 2 — Layout pagina Notizie (/notizie/): spaziature e allineamenti
 * ------------------------------------------------------------------------- */
.blog .site-main .section { padding-block: clamp(24px, 4vw, 48px); }
.blog .chips { margin-bottom: 28px; }
.blog .hero-feature { margin-bottom: clamp(28px, 4vw, 44px); }
.blog .grid--3 { gap: clamp(20px, 3vw, 32px); align-items: stretch; }
.blog .news-card,
.blog .grid--3 > * { height: 100%; }
@media (max-width: 640px) {
	.blog .grid--3 { grid-template-columns: 1fr; }
	.blog .hero-feature__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Epica 3 — Carosello eventi (manuale) + Vetrina libri
 * ------------------------------------------------------------------------- */
.bib-carousel { position: relative; }
.bib-carousel__viewport {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	scrollbar-width: thin;
}
.bib-carousel__track { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.bib-carousel__slide {
	flex: 0 0 clamp(240px, 80vw, 300px);
	scroll-snap-align: start;
}
.bib-carousel__slide .event-card { height: 100%; }
.bib-carousel__controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.bib-carousel__btn {
	width: 44px; height: 44px;      /* target ampio (WCAG 2.5.8) */
	border: 1px solid var(--neutral-400, #9aa2ae);
	border-radius: 50%;
	background: #fff;
	color: var(--color-primary, #06c);
	font-size: 1.4rem; line-height: 1;
	cursor: pointer;
}
.bib-carousel__btn:hover { background: var(--blue-50, #eef4ff); }
.bib-carousel__btn:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }

.book-card__media { aspect-ratio: 3 / 4; overflow: hidden; }
.book-card__title { font-size: var(--text-md, 1rem); margin: 0 0 4px; }
.book-card__desc { font-size: var(--text-sm, 0.9rem); }

.bib-cultura-territorio { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
	.bib-carousel__viewport { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
 * Correzioni post-review — skin Area riservata, filtri proposte, placeholder
 * ------------------------------------------------------------------------- */

/* Honeypot anti-spam: il campo `.field[hidden]` del form Contatti resta visibile
 * perché `.field{display:flex}` vince sull'attributo `hidden`. Lo nascondiamo. */
.field[hidden] { display: none !important; }

/* Slot "Cultura e territorio": placeholder discreto quando non configurato. */
.bib-cultura-territorio--placeholder .callout { border: 1px dashed var(--neutral-400, #9aa2ae); background: var(--neutral-50, #f7f8fa); }

/* --- Skin AREA RISERVATA (viola #B545C6) ------------------------------------
 * L'area riservata usa il viola al posto del blu. Rimappiamo l'intera scala blu
 * (e le superfici brand) sui toni viola entro lo scope `body.area-riservata`:
 * così ogni elemento che usa il blu — direttamente o via --color-primary /
 * --surface-brand — diventa viola, in modo uniforme. Contrasti conformi AA.
 *
 * La scala intera va rimappata, non solo `--color-primary`: le tinte chiare
 * fanno da sfondo a cose che si notano subito, il tondo dietro le icone e il
 * riquadro «non hai eventi prenotati». Cambiando solo i colori principali
 * quelle restavano verdi in mezzo al viola — ed è successo davvero.
 * -------------------------------------------------------------------------- */
body.area-riservata {
	--blue-900: #4A1953;
	--blue-800: #6B2477;
	--blue-700: #8A2F99;
	--blue-600: #B545C6; /* PRIMARY — viola area riservata */
	--blue-500: #C05FCE;
	--blue-400: #CE85D9;
	--blue-300: #DFB0E6;
	--blue-200: #EDD3F1;
	--blue-100: #F7EAF9;
	--blue-50:  #FCF6FD;
	/* Viola. Il verde che stava qui è passato alla sezione Ragazzi, e due aree
	   con lo stesso colore non si distinguerebbero più.

	   #B545C6 dà 4,53:1 sul bianco: passa il 4,5:1 dell'1.4.3, ma di tre
	   centesimi. Regge come fondo e come tinta della banda, dove il testo
	   sopra è bianco e il margine ce l'ha il fondo; per i link su fondo
	   bianco si scende alle tinte più scure (5,75:1 e 7,13:1), che è dove
	   quel margine serve davvero. */
	--color-primary: #B545C6;
	--color-primary-hover: #9E39AE;
	--color-primary-active: #8A2F99;
	--color-primary-contrast: #fff;
	--surface-brand: #B545C6;
	--surface-brand-subtle: #F7EAF9;
	--border-interactive: #9E39AE;
	--info: #8A2F99;
	--info-bg: #F7EAF9;
	--text-link: #8A2F99;
	--text-link-hover: #9E39AE;
	--skin-accent: #9E39AE;
	--skin-accent-deep: #8A2F99;
	--skin-brand: #B545C6;
	--skin-brand-2: #8A2F99;
	--skin-tint: #F7EAF9;
}
/* Header (brandband) coerente col verde, come per la skin ragazzi. */
body.area-riservata .brandband { background: linear-gradient(135deg, var(--skin-brand), var(--skin-brand-2)); }
body.area-riservata .site-search__submit { background: var(--skin-accent); }

/* --- Filtri "Proposte di lettura" (stile "chips" come il filtro eventi) ----- */
.bib-proposte__filters { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; }
.bib-proposte__filter-group { display: flex; flex-direction: column; gap: 8px; }
.bib-proposte__filter-label { font-weight: 700; font-size: var(--text-sm, .9rem); margin: 0; }
.bib-proposte__filter select { min-height: 44px; }

/* Riga recapiti sopra la tabella oraria di ogni sede (pagina Orari e sedi). */
.bib-sede-blocco__recapiti { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; color: var(--text-muted, #55606e); }
.bib-sede-blocco__recapiti span { display: inline-flex; align-items: center; gap: 6px; }

/* Chip attive coerenti con la skin verde dei Ragazzi (pagina proposte). */
body.area-ragazzi .chip:hover { border-color: var(--skin-accent); color: var(--skin-accent); }
body.area-ragazzi .chip.is-active { background: var(--skin-accent); border-color: var(--skin-accent); color: #fff; }

/* --- Eventi per categoria: adulti = blu, ragazzi = arancione -----------------
 * Nella lista eventi (shortcode [biblioteca_eventi], anche dentro l'area
 * riservata verde) ogni categoria mantiene il proprio colore. Rimappiamo i
 * token colore nello scope della tab e del pannello: gli id (specificità alta)
 * vincono sullo scope verde `body.area-riservata`. Contrasti conformi AA.
 * -------------------------------------------------------------------------- */
#bib-tab-adulti,
#bib-panel-adulti {
	--color-primary: #0C6DB1;
	--color-primary-hover: #0A5A92;
	--color-primary-active: #084A79;
	--color-primary-contrast: #fff;
	--blue-600: #0C6DB1;
	--blue-700: #0A5A92;
	--blue-800: #084A79;
	--blue-100: #E5F0F9;
	--blue-50:  #F2F8FC;
	--surface-brand: #0C6DB1;
	--skin-accent: #0C6DB1;
	--skin-accent-deep: #084A79;
	--skin-tint: #E5F0F9;
}
#bib-tab-ragazzi,
#bib-panel-ragazzi {
	--color-primary: #046134;
	--color-primary-hover: #03562F;
	--color-primary-active: #034A28;
	--color-primary-contrast: #fff;
	--blue-600: #046134;
	--blue-700: #03562F;
	--blue-800: #034A28;
	--blue-100: #E8F5EE;
	--blue-50:  #F4FAF7;
	--surface-brand: #058648;
	--skin-accent: #046134;
	--skin-accent-deep: #034A28;
	--skin-tint: #E8F5EE;
}
/* Accento a sinistra della card evento, colorato per categoria. */
#bib-panel-adulti .event-card,
#bib-panel-ragazzi .event-card { border-left: 4px solid var(--color-primary); }

/* ---------------------------------------------------------------------------
 * §1 Mappa OpenStreetMap + Leaflet (Contatti, Orari e sedi)
 * ------------------------------------------------------------------------- */
.bib-map { display: flex; flex-direction: column; gap: 12px; }
.bib-map__canvas {
	width: 100%;
	height: clamp(260px, 40vh, 380px);
	border-radius: var(--radius-lg, 12px);
	border: 1px solid var(--border-default, #c5c9d0);
	background: #E8EEF3; /* segnaposto finché le tile non caricano */
	z-index: 0;
}
.bib-map__canvas:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }
/* Focus visibile sui controlli zoom di Leaflet (WCAG 2.4.7). */
.bib-map .leaflet-control a:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 1px; }
.bib-map__fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: var(--text-sm, .9rem); color: var(--text-body, #1b1b1b); }
.bib-map__fallback a { font-weight: 600; }

/* Nota fissa sotto la tabella orari (shortcode [bib_orari]). */
.bib-orari__nota { margin: 10px 0 0; font-size: var(--text-sm, .9rem); }

/* =======================================================================
   Copertine delle card: proporzione del modello del cliente (800×455)
   =======================================================================
   Il tema fissava l'altezza in pixel (170px per le notizie, 150px per gli
   eventi). Con `object-fit: cover` questo significa ritagliare: le immagini
   preparate dal cliente su un modello 800×455 perdevano parte del contenuto,
   e quanto perdessero dipendeva dalla larghezza della colonna.

   Qui si fissa invece la **proporzione**, non la dimensione: la copertina è
   sempre alta 455/800 della propria larghezza, quindi un'immagine di quel
   modello entra intera a qualunque dimensione, e resta nitida perché il file
   è più grande dello spazio in cui viene mostrato.

   Un effetto collaterale utile: un'altezza espressa in proporzione segue
   l'ingrandimento del testo, mentre un'altezza in pixel resta ferma e
   schiaccia la card quando si porta il testo al 200% (WCAG 2.2 — 1.4.4). */
:root { --bib-card-ratio: 800 / 455; }

.news-card .ph,
.news-card .media-cover,
.event-card__media .ph,
.event-card__media .media-cover,
.card .ph,
.card .media-cover {
	aspect-ratio: var(--bib-card-ratio);
	height: auto;
	min-height: 0;
}

/* La card orizzontale fa eccezione, e la deve fare.

   Là l'altezza non la decide l'immagine ma la colonna del testo accanto, e
   imporre il rapporto 800×455 lasciava l'immagine alta 252px dentro un
   riquadro alto 405: centocinquanta pixel di vuoto sotto la copertina. Il tema
   padre lo diceva già — `height: 100%` — ma la mia regola, arrivando dopo con
   la stessa specificità, vinceva.

   Qui l'immagine riempie la sua colonna. Non si deforma comunque, perché
   `object-fit: cover` mantiene le proporzioni: quello che cambia è che un file
   di forma diversa viene ritagliato invece di lasciare uno spazio vuoto. Dove
   ritagliare lo decide il punto focale della scheda dell'articolo. */
.hero-feature .media-cover,
.hero-feature .ph {
	aspect-ratio: auto;
	height: 100%;
	min-height: 320px;
}

@media (max-width: 760px) {
	.hero-feature .media-cover,
	.hero-feature .ph {
		height: 200px;
		min-height: 200px;
	}
}

/* Le immagini riempiono il riquadro senza deformarsi. Con un file già in
   proporzione non c'è alcun ritaglio; con un file di forma diversa si ritaglia
   dal centro, che è il comportamento meno sorprendente. */
.news-card .media-cover img,
.event-card__media .media-cover img,
.card .media-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* =======================================================================
   Più schede a colpo d'occhio sugli schermi larghi
   =======================================================================
   Sotto i 1400px resta tutto com'era. Sopra, dove lo spazio avanza davvero,
   le griglie da tre passano a quattro colonne: si guadagna una riga intera
   di contenuti senza rimpicciolire nulla.

   Il limite è scelto perché a 1400px una colonna su quattro resta larga
   ~300px, sufficiente a tenere titoli di due righe e testo alla dimensione
   normale. Scendere sotto vorrebbe dire comprimere il testo, che è
   esattamente ciò che WCAG chiede di non fare: la leggibilità viene prima
   della densità. Le regole per schermi piccoli non si toccano, così il
   contenuto continua a scorrere su una colonna sola a 320px (1.4.10). */
/* Gli archivi seguono lo spazio che hanno, non la larghezza dello schermo.

   Prima le colonne le decideva una media query: `.grid--3` passava a 4 sopra
   1400px e a 5 sopra 1800. Ma una media query guarda la finestra e non sa
   quanto è larga la colonna in cui la griglia sta davvero. Su
   /pillole-di-doccia/, che è in colonna di lettura, a 1920px si ottenevano
   dodici card in cinque colonne dentro 672px: 110px per card.

   La modalità è già scritta nel markup — `container--narrow` per la colonna
   di lettura, `container` liscio per la larghezza piena — quindi si guarda
   quella. Due card in lettura, quattro a tutta larghezza: sono le misure
   chieste, e a quel punto una card sta rispettivamente su ~324px e ~286px,
   abbastanza per un titolo di due righe. */
/* Da 641px in su: sotto comanda la regola del tema padre, che mette tutto su
   una colonna sola. Senza questo limite la mia regola — più specifica —
   avrebbe vinto anche da telefono, lasciando due card da 152px. */
@media (min-width: 641px) {
	.container--narrow .grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.container:not(.container--narrow) .grid--3 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- Notizie in home: tre per riga ------------------------------------
   Erano in `.grid--2`, la stessa classe dei due richiami in fondo alla
   pagina, e le due cose vogliono misure diverse: i richiami sono due e
   stanno a metà schermo, le notizie sono quattro e la biblioteca le ha
   chieste più piccole. Con la classe in comune non si poteva accontentare
   l'una senza rovinare l'altra. */
.bib-griglia-news {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
	.bib-griglia-news { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.bib-griglia-news { grid-template-columns: 1fr; }
}

/* `.grid--2` non si allarga, e la riga qui sotto dice perché è stata tolta.

   C'era: sopra i 1400px diventava tre colonne. Ma `.grid--2` non regge una
   lista di lunghezza qualsiasi — la usano gruppi di due o di quattro
   elementi — e una colonna in più lasciava un buco invece di guadagnare una
   riga. Misurato a 1920px: i due richiami in fondo alla home occupavano un
   terzo ciascuno con il terzo vuoto a destra, tanto da sembrare lo spazio
   riservato a una barra laterale che lì non c'è; le quattro notizie
   diventavano tre più una; l'area riservata lasciava un buco anche lei.
   Nessun caso ci guadagnava.

   Il nome della classe lo diceva già: una griglia «a due» sta a due. */


/* --- Correzioni di accessibilità sul tema padre --- */

/* 1.4.3 Contrasto minimo. Il grigio dei metadati evento (#6c6e73) tiene 5,1:1
   sul bianco ma solo 4,41:1 sul fondo azzurro della card in evidenza, dove
   compare in home. Un gradino più scuro passa in entrambi i contesti (4,7:1
   sull'azzurro, 5,4:1 sul bianco) senza cambiare la gerarchia visiva. */
.event-meta { color: #686A6F; }

/* 1.4.10 Reflow. `.page-intro__head` è una riga flex: icona a larghezza fissa
   più testo. Un elemento flex non scende sotto la propria larghezza minima
   intrinseca, e su titoli lunghi («Amministrazione trasparente») quella
   larghezza supera i 320px di riferimento: la pagina scorreva in orizzontale.
   `min-width: 0` gli ridà il permesso di stringersi, e le parole lunghe vanno
   a capo invece di sfondare. */
.page-intro__text { min-width: 0; }
.page-intro__title,
.page-intro__lead,
.page-intro__eyebrow { overflow-wrap: break-word; }

@media (max-width: 480px) {
	/* Sotto i 480px l'icona ruba spazio al titolo senza aggiungere
	   informazione: il testo prende tutta la riga. */
	.page-intro__head { flex-wrap: wrap; gap: 12px; }
	.page-intro__text { flex: 1 1 100%; }
	.page-intro__title { font-size: var(--text-2xl, 1.5rem); }
}

/* 2.5.8 Dimensione del target. Briciole di pane e badge hanno un'altezza
   cliccabile di ~21px: sotto i 24px minimi, e senza spazio libero attorno che
   possa compensare. Il riempimento verticale li porta a 24px senza cambiare
   il ritmo della pagina. */
.breadcrumb__item > a,
a.badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* 1.4.10 Reflow. Le didascalie importate portano una larghezza in pixel
   scritta nell'attributo `style`: a 320px la figura sfondava di 400px. */
.wp-caption,
figure.wp-block-image {
	max-width: 100%;
}
.wp-caption img,
.wp-block-image img { max-width: 100%; height: auto; }

/* Gli URL scritti per esteso nei contenuti importati non hanno punti dove
   andare a capo: su schermo stretto trascinavano fuori tutta la pagina. */
.entry-content a,
.wp-block-paragraph a { overflow-wrap: anywhere; }

/* `bib-sr-only` è finita dentro i contenuti (le note «si apre in una nuova
   scheda» aggiunte in fase di import): senza il CSS del plugin — che si carica
   solo dove c'è uno shortcode — quel testo si vedeva a schermo. La regola vive
   qui, nel foglio che c'è sempre. */
.bib-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Lo sfondo al passaggio del mouse sulle linguette d'area era
   `rgba(255,255,255,.06)`: reso su nero dà #292A2C e il bianco sopra tiene
   14,4:1, ma un controllo automatico che non sa comporre la trasparenza legge
   «bianco su bianco» e segnala un errore che non c'è. Lo stesso colore, scritto
   opaco: identico a vedersi, verificabile da chiunque. */
.area-switch__link:hover { background: #292A2C; }
.area-switch__login:hover { background: #313234; }

/* 1.4.10 Reflow. La barra in alto è una riga sola allineata a destra: con
   l'utente collegato si aggiungono «Area riservata» ed «Esci», la riga supera
   i 320px e la linguetta «Bibliosesto» finisce fuori schermo a sinistra —
   irraggiungibile, non solo scomoda: da telefono non si poteva più tornare
   all'area istituzionale. Sotto i 640px le voci vanno a capo. */
/* Su schermo stretto la barra deve stare su una riga sola. Andando a capo, le
   due linguette Bibliosesto/Ragazzi si staccano dalla testata colorata sotto e
   perdono la forma a tab: sembrano galleggiare.
   Con l'utente collegato le voci sono quattro e non ci starebbero: «Area
   riservata» ed «Esci» restano la sola icona, col nome che continua a esserci
   per chi non la vede (`aria-label` sul link e testo nascosto alla vista).
   Le due linguette tengono il testo: sono la navigazione principale. */
@media (max-width: 640px) {
	.govbar__inner {
		justify-content: flex-start;
		flex-wrap: nowrap;
		padding: 0 10px;
		gap: 2px;
	}
	.area-switch {
		flex-wrap: nowrap;
		min-width: 0;
		flex: 1 1 auto;
	}
	.area-switch__link {
		padding: 0 12px;
		white-space: nowrap;
	}
	.area-switch__login-testo {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.area-switch__login {
		/* Icona sola: l'area toccabile non deve rimpicciolirsi con lei
		   (WCAG 2.2 — 2.5.8). */
		min-width: 44px;
		height: 44px;
		padding: 0 8px;
		justify-content: center;
		margin-left: auto;
	}
	/* La linguetta attiva fa eccezione: tiene il nome, perché è l'unica che
	   dice in che area ci si trova. */
	.area-switch--prominente .area-switch__login.is-active {
		min-width: 0;
		height: auto;
		padding: 0 10px;
		margin-left: auto;
	}
	.area-switch--prominente .area-switch__login.is-active .area-switch__login-testo {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}
	.area-switch--prominente .area-switch__link {
		padding: 0 10px;
		white-space: nowrap;
	}
	.area-switch__login + .area-switch__login { margin-left: 0; }
	.govbar__sep { display: none; }
}

/* 1.4.3. Nella skin verde dell'area riservata il verde primario (#0E864D) fa
   4,6:1 come *fondo* col testo bianco, ma solo 4,4:1 quando è il *testo* su
   una superficie chiara — sotto il minimo. I pulsanti contornati e i link
   ghost usano il verde più scuro già presente fra i token (5,3:1 sul grigio
   chiaro), lasciando invariati i pieni. */
body.area-riservata .btn--secondary,
body.area-riservata .btn--secondary:hover,
body.area-riservata .btn--ghost,
body.area-riservata .btn--ghost:hover {
	color: var(--color-primary-hover, #0B6E3F);
	border-color: var(--color-primary-hover, #0B6E3F);
}
body.area-riservata .btn--ghost,
body.area-riservata .btn--ghost:hover { border-color: transparent; }

/* 404: la ricerca e i tre collegamenti stanno in colonna, centrati come il
   resto del blocco. */
.error-404__search { max-width: 460px; margin: 28px auto 0; text-align: left; }
.error-404__search .btn { margin-top: 10px; min-height: 44px; }
.error-404 .bib-uscite { margin-top: 28px; }
.error-404 .bib-uscite__lista { justify-content: center; }

/* --- Menu: la voce padre entra nella tendina + terzo livello --- */
/* Tutte le voci con figli si comportano allo stesso modo: un pulsante che apre
   la tendina. Per un po' «Eventi» ha fatto eccezione — titolo cliccabile e
   freccia in un pulsante a parte — perché senza quello la pagina del calendario
   spariva dal menu. Ma una voce che risponde diversamente dalle altre si impara
   a sbagliare, e le regole di impaginazione che quella struttura richiedeva
   erano un rammendo dietro l'altro.

   Ora la pagina della voce padre entra come prima riga della tendina:
   comportamento uniforme e niente perso.

   Il filetto che la separava dal resto e' stato tolto. Da telefono era anche
   un doppione: il tema padre mette gia' un bordo sopra ogni voce della
   tendina, quindi fra la prima e la seconda ne comparivano due. Il grassetto
   basta a far capire che quella riga porta alla pagina della voce. */
/* La prima riga della tendina non ha nessuno stile suo, ed e' voluto.

   Ci avevo messo prima un filetto e poi il grassetto, ma il grassetto dice
   «questa voce conta piu' delle altre», e non e' vero: porta alla pagina
   invece che a una sottopagina, e' un'altra cosa, non una cosa piu'
   importante. Nel menu il peso segnala anche la voce corrente, quindi
   aggiungerne un terzo uso metteva tre segnali in concorrenza.

   A dirlo basta l'etichetta, «Vai a Eventi». Le classi restano nel markup
   come appiglio, se un domani servisse. */

/* Terzo livello: indentato dentro la stessa tendina, non un'altra tendina che
   si apre di lato — impossibile da tenere aperta col mouse, inservibile da
   telefono. */
.nav-drop__sub {
	list-style: none;
	margin: 0 0 4px;
	padding: 0 0 0 16px;
	border-left: 2px solid #C4DFF2;
}
.nav-drop__sub > li { margin: 0; }
.nav-drop__sub a { font-size: 0.9375rem; }

.m-sub__sub {
	list-style: none;
	margin: 0 0 4px;
	padding: 0 0 0 16px;
	border-left: 2px solid #C4DFF2;
}
.m-sub__sub > li { margin: 0; }

/* 1.4.3 — pulsanti pieni dentro il testo di una pagina.
   `.lib-prose a` (0,2,0) è più specifico di `.btn--primary` (0,1,0): un
   pulsante pieno messo dentro il corpo di una pagina prende il colore dei
   link invece del proprio. Nella skin ragazzi la regola che vince è
   `body.area-ragazzi .lib-prose a` — arancione — sopra un fondo arancione:
   1:1, testo invisibile. Oggi capitava sul pulsante «Accedi» del riquadro
   insegnanti, ma è una trappola che scatta ovunque si metta un pulsante in una
   pagina, e i moduli si inseriscono proprio così. */
.lib-prose a.btn--primary,
body.area-ragazzi .lib-prose a.btn--primary,
body.area-riservata .lib-prose a.btn--primary {
	color: var(--color-primary-contrast, #fff);
}
.lib-prose a.btn--secondary,
body.area-ragazzi .lib-prose a.btn--secondary,
body.area-riservata .lib-prose a.btn--secondary {
	color: var(--skin-accent, var(--color-primary, #06c));
}

/* ---------- Nessuna copertina: niente segnaposto ----------
   `bib_placeholder()` del tema padre disegna al posto dell'immagine mancante
   un riquadro sfumato con dentro il nome di un file che non esiste
   («mostra-darte-della-carta-ritagliata-cinese.jpg»). Serviva mentre il sito
   si costruiva, per vedere dove sarebbero andate le immagini; a sito
   pubblicato è un finto contenuto, e mostra all'utente un dettaglio tecnico
   che non lo riguarda.

   La funzione sta nel tema padre, che è un submodulo, e non ha la guardia
   `function_exists` che permetterebbe di sostituirla dal figlio: si toglie
   qui. `display:none` la fa sparire anche dalla lettura degli screen reader,
   che altrimenti annuncerebbero quel nome di file.

   I contenitori con proporzioni fisse vanno tolti insieme al segnaposto,
   altrimenti resta al loro posto un riquadro vuoto. */
.ph {
	display: none;
}

.article-cover:has(.ph),
.hero-feature__media:has(.ph),
.book-card__media:has(.ph),
.media-cover:has(.ph) {
	display: none;
}

/* La card in evidenza è una griglia a due colonne, testo e immagine: tolta
   l'immagine, la colonna resterebbe lì vuota. Il testo si prende tutto lo
   spazio, e la card smette di avere l'altezza minima pensata per contenere
   una fotografia. */
.hero-feature__grid:has(.hero-feature__media .ph) {
	grid-template-columns: 1fr;
	min-height: 0;
}

/* Il corpo della card è una colonna flessibile: a piena larghezza il pulsante
   si stirerebbe da un bordo all'altro, che per un pulsante non ha senso.
   L'allineamento va dato al solo pulsante: applicandolo a tutta la colonna si
   stringerebbe anche la riga in alto, e la data finirebbe appiccicata
   all'etichetta invece di stare al suo posto in fondo a destra. */
.hero-feature__grid:has(.hero-feature__media .ph) .hero-feature__body > .btn {
	align-self: flex-start;
}

/* ---------- Sfogliabile PDF: spazio prima dei documenti ----------
   Il contenitore dello sfogliabile lo costruisce il plugin in JavaScript,
   senza margini: la riga «Documenti scaricabili» finiva appiccicata al bordo
   inferiore, e sembravano un pezzo solo.

   Lo spazio si dà qui e non alla sezione dei documenti, perché quella sezione
   su altre pagine — Regolamento, Spazi — vive dentro una scheda laterale
   dove è già distanziata di 14px dal proprio titolo: aggiungerle un margine
   le romperebbe. Il margine appartiene allo sfogliabile, che è la novità. */
[class*="real3dflipbook-"] {
	margin-bottom: var(--space-6, 2rem);
}

/* ---------- Card evento: pillola e posti ----------
   La pillola del tipo («Evento», «Laboratorio») e l'etichetta «Concluso» sono
   posizionate in assoluto sopra la copertina. Da quando le card senza immagine
   non mostrano più il segnaposto, quel contenitore è alto zero: la pillola
   cadeva quindi sul riquadro della data, coprendo il mese.

   Dove una copertina c'è, restano sovrapposte come prima. Dove non c'è,
   tornano nel flusso, in riga sopra la data. */
.event-card__media:not(:has(img)) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 16px 0;
}

.event-card__media:not(:has(img)) .event-card__badge,
.event-card__media:not(:has(img)) .event-card__status {
	position: static;
}

/* I posti disponibili si leggono nella pagina dell'evento, dove si prenota e
   dove il numero conta. Nella card sono rumore: su una griglia di eventi si
   sceglie per data e argomento, non per quanti posti restano. `display:none`
   li toglie anche dalla lettura degli screen reader, non solo dalla vista.
   Il pulsante continua a dire «Metti in lista d'attesa» quando è pieno: è un
   avviso utile prima del clic, e non è un conteggio. */
.event-card .seatbar {
	display: none;
}

/* ---------- Card evento condivisa ----------
   Stessa card in archivio, in home e nella home ragazzi. I colori arrivano dal
   tema d'area (`--skin-accent`): blu fra gli adulti, arancione fra i ragazzi,
   senza duplicare nulla.

   Il respiro fra i blocchi è il motivo per cui questa card esiste: prima
   pillola, data, titolo, orario e pulsante si toccavano, e a colpo d'occhio
   non si capiva dove finiva un'informazione e cominciava l'altra. */
.bib-evcard__body {
	padding: var(--space-5, 1.5rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-4, 1rem);
}

.bib-evcard__pillole {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.bib-evcard__head {
	display: flex;
	gap: var(--space-4, 1rem);
	align-items: flex-start;
}

.bib-evcard__titolo {
	margin: 0;
	/* La data è alta 64px: il titolo le si allinea sopra invece di galleggiare
	   a metà, così le due colonne cominciano insieme. */
	padding-top: 2px;
}

.bib-evcard__meta {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Il pulsante scende in fondo anche quando le card di una riga hanno testi di
   lunghezza diversa: così i pulsanti restano allineati fra loro. */
.bib-evcard__azione {
	margin: auto 0 0;
	padding-top: var(--space-2, 0.5rem);
}

/* Il riquadro della data prende il colore dell'area. */
.bib-evcard .date-chip__m {
	background: var(--skin-accent, var(--color-primary, #0c6db1));
	color: #fff;
}

/* Nel carosello della home le card stanno affiancate: stessa altezza. */
.bib-carousel__slide .bib-evcard {
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Sezione Ragazzi: dall'arancione al verde
 * ------------------------------------------------------------------------- */

/* Il verde era dell'area riservata (#0e864d) e passa qui; l'area riservata
   prende il viola. Due aree con lo stesso colore non si distinguerebbero.

   Il tema padre e' un sottomodulo: le sue tinte non si toccano, si
   ridefiniscono le variabili che usa. `--rag-1` e `--rag-2` sono gli estremi
   del degrade' della testata e stanno nel `:root` del padre; qui si
   riscrivono senza scope, cosi' cambiano anche dove il padre le usa fuori
   dall'area ragazzi (il richiamo «Sezione Ragazzi» in fondo alla home adulti).

   Le due tinte vanno da scura a chiara, come chiesto. Il punto peggiore del
   degrade' e' l'estremo chiaro, 4,66:1 col bianco: passa il testo normale,
   non solo i titoli. L'arancione di prima si fermava a 3,36:1 sul primo
   estremo, e molto peggio sull'ambra.

   La testata e' stata schiarita alzando l'estremo SCURO da #046134 a #05753F
   (da 7,60:1 a 5,80:1). L'estremo chiaro invece e' gia' al massimo: il testo
   guida sopra e' bianco di 22px, che per WCAG non e' «testo grande» — la
   soglia e' 24px — quindi serve 4,5:1, e #058648 ne fa 4,66. Basta alzarlo
   dell'1% di luminosita' per scendere a 4,37 e sforare. Se un domani si
   volesse un verde piu' acceso, la strada e' portare il testo guida a 24px:
   a quel punto diventa «testo grande», ne bastano 3:1 e si arriva a
   #06A85A. E' una scelta di grafica, non di codice. */
:root {
	--rag-1: #05753F;
	--rag-2: #058648;
	--rag-soft: #E8F5EE;
}

/* Due verdi, non uno, e la ragione e' misurata.

   #058648 da' 4,66:1 sul bianco *puro*, ma i fondi del sito non sono bianco
   puro: sul grigino delle card (#F8F9FA) scende a 4,42 e sulla tinta verde
   chiara a 4,15. Sotto il 4,5:1. axe l'ha trovato su tre elementi della home
   ragazzi e uno di una pagina interna.

   Quindi il verde chiaro resta dove il testo sopra e' bianco — fondi pieni,
   estremo chiaro del degrade', banda — e per i testi, i bordi e i link su
   fondo chiaro si usa #046134, che nel punto peggiore fa 6,77:1. E' la stessa
   distinzione che il codice faceva per l'arancione (#B5471A per i testi,
   #D44508 per la banda): il criterio non cambia, cambia la tinta. */
body.area-ragazzi {
	--skin-accent: #046134;
	--skin-accent-deep: #034A28;
	--skin-brand: #046134;
	--skin-brand-2: #034A28;
	--skin-tint: #E8F5EE;
	--color-primary: #046134;
	--color-primary-hover: #03562F;
	--color-primary-active: #034A28;
	--surface-brand: #058648;
	--text-link: #046134;
	--text-link-hover: #034A28;
}

/* Il padre scrive l'arancione a mano sul pulsante pieno, che e' bianco col
   testo del colore dell'area. Il verde scuro sul bianco da' 7,60:1.

   `:not(--ghost)` non e' un dettaglio: l'altro pulsante della testata, quello
   con lo sfondo trasparente, non sta sul bianco ma sul degrade', e il padre
   gli da' giustamente il testo bianco. La mia regola aveva specificita' piu'
   alta e glielo sovrascriveva, lasciando verde scuro su verde: «Cerca un
   libro» era quasi illeggibile. Il testo bianco su quel fondo torna a fare
   almeno 4,66:1, come tutto il resto della testata. */
body.area-ragazzi .rag-hero__btn:not(.rag-hero__btn--ghost),
body.area-ragazzi .rag-hero__btn:not(.rag-hero__btn--ghost):hover,
body.area-ragazzi .rag-hero__btn:not(.rag-hero__btn--ghost):visited {
	color: #046134;
}

/* Il passaggio del mouse sul pulsante pieno: il padre lo tinge di un rosato
   (#fff5ef), che con il verde stona. */
body.area-ragazzi .rag-hero__btn:not(.rag-hero__btn--ghost):hover {
	background: #F1F9F5;
}

/* Il pulsante trasparente: velo scuro invece che chiaro.

   Il padre lo riempie di bianco al 18%, che sul degradé schiarisce il fondo
   proprio sotto al testo bianco: si scende a 4,05:1 sull'estremo scuro e
   3,45:1 su quello chiaro. Il testo e' 16px in grassetto, e il grassetto
   conta come «grande» solo da 18,66px, quindi serve 4,5:1: non ci siamo.
   Non e' un guaio del verde — con l'arancione era lo stesso — ma e' il
   pulsante segnalato, e ora si vede.

   Un velo nero al 12% fa il contrario: mantiene la profondita' del pulsante e
   scurisce il fondo, portando il peggiore a 5,72:1. Il bordo diventa bianco
   pieno: 4,66:1 sul fondo, sopra il 3:1 che l'1.4.11 chiede ai contorni. */
body.area-ragazzi .rag-hero__btn--ghost {
	background: rgba(0, 0, 0, .12);
	border-color: #fff;
	color: #fff;
}
body.area-ragazzi .rag-hero__btn--ghost:hover,
body.area-ragazzi .rag-hero__btn--ghost:visited {
	color: #fff;
}
body.area-ragazzi .rag-hero__btn--ghost:hover {
	background: rgba(0, 0, 0, .22);
}

/* Il richiamo alla Sezione Ragazzi in fondo alla home adulti. Il padre lo fa
   blu-arancione; qui prende il degrade' della sezione, cosi' il richiamo
   somiglia alla pagina in cui porta. */
.callout--rag {
	background: linear-gradient(120deg, var(--rag-1), var(--rag-2));
}

/* Il pulsante dentro quel richiamo era blu su verde: prendeva i colori
   dell'area istituzionale mentre stava su una card dei ragazzi.

   Ora e' bianco pieno con il testo verde scuro, 7,60:1, e senza contorno: il
   bianco sul degrade' verde fa gia' 4,66:1 nel punto peggiore, ben sopra il
   3:1 che l'1.4.11 chiede al confine di un comando, quindi un bordo non
   aggiungerebbe niente se non un'altra riga da guardare. */
.callout--rag .btn {
	background: #fff;
	color: #046134;
	border-color: #fff;
}
.callout--rag .btn:hover,
.callout--rag .btn:focus-visible {
	background: var(--rag-soft, #E8F5EE);
	color: #034A28;
	border-color: var(--rag-soft, #E8F5EE);
}
.callout--rag .btn:visited {
	color: #046134;
}



/* Le card «Cosa puoi fare» che portano da qualche parte.

   Il collegamento avvolge tutta la card, quindi va reso a blocco e privato
   della sottolineatura che il tema mette ai link nel testo — qui il testo
   della card non e' un link dentro una frase, e' la card intera.

   Al passaggio del mouse e con il fuoco da tastiera la card si solleva di un
   pelo: e' l'unico segnale che si puo' premere, dato che non ha la forma di un
   pulsante. `:focus-visible` serve quanto `:hover`, perche' chi naviga da
   tastiera deve vedere dove si trova. */
.rag-do__card--link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform var(--duration-fast, .15s), box-shadow var(--duration-fast, .15s);
}
.rag-do__card--link:hover,
.rag-do__card--link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}
.rag-do__card--link:focus-visible {
	outline: 3px solid var(--skin-accent, #046134);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.rag-do__card--link { transition: none; }
	.rag-do__card--link:hover,
	.rag-do__card--link:focus-visible { transform: none; }
}


/* I prossimi laboratori: al massimo tre, spesso uno solo.

   Con una griglia a colonne fisse un laboratorio solo restava in mezzo a tre
   caselle vuote, e la sezione sembrava rotta. Qui le card si affiancano e
   basta: tre riempiono la riga, una resta larga un terzo e sta a sinistra,
   senza buchi da spiegare.

   `min-width` evita che due card si stringano oltre il leggibile quando lo
   spazio cala; sotto quella soglia vanno a capo da sole. */
.rag-laboratori {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: stretch;
}
.rag-laboratori > * {
	flex: 0 1 calc((100% - 48px) / 3);
	min-width: 260px;
}
@media (max-width: 640px) {
	.rag-laboratori > * { flex-basis: 100%; min-width: 0; }
}

/* ---------------------------------------------------------------------------
 * Home ragazzi: notizie e consigli con il calendario di fianco
 * ------------------------------------------------------------------------- */

/* Le notizie stanno in tre quarti di larghezza e il calendario eventi occupa
   il quarto rimanente, dove resta agganciato mentre si scorre: si sgancia dopo
   i consigli di lettura, non alla fine delle notizie. Per questo le due
   sezioni condividono una griglia — un elemento appiccicato non può uscire
   dall'area in cui sta.

   `align-items: start` c'e' gia' su `.layout-2col`, ed e' quello che rende
   l'area alta quanto la colonna principale invece che quanto il calendario. */
.rag-blocco .events-cal {
	position: sticky;
	top: 24px;
}

/* Sotto i 900px `.layout-2col` passa a una colonna sola: il calendario finisce
   sotto le notizie e non deve piu' restare agganciato, altrimenti seguirebbe
   lo scorrimento coprendo il contenuto. */
@media (max-width: 900px) {
	.rag-blocco .events-cal {
		position: static;
	}
}

/* La notizia in evidenza: una sola, larga quanto la colonna. La card e' la
   stessa delle altre — cambia solo lo spazio che ha — cosi' non c'e' un
   secondo modello da mantenere. */
.rag-news-grande {
	margin: 0 0 24px;
}

/* Le tre piccole sotto, e sono tre davvero.

   Il selettore ripete il contenitore perche' altrimenti perde: la regola degli
   archivi — `.container:not(.container--narrow) .grid--3` — porta a quattro
   colonne tutte le griglie da tre che stanno a tutta larghezza, e queste ci
   finivano dentro. Tre card in quattro colonne lasciavano un buco.

   Sotto i 900px la colonna si stringe e tre card non ci stanno piu': si scende
   a due, e a una sotto i 640. */
.container:not(.container--narrow) .rag-news-piccole {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.container:not(.container--narrow) .rag-news-piccole { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.container:not(.container--narrow) .rag-news-piccole { grid-template-columns: 1fr; }
}

/* Il titolo dei consigli, quando sta dentro il blocco condiviso, ha bisogno
   dell'aria che prima gli dava la sezione a se'. */
.rag-blocco .rag-consigli__titolo {
	margin-top: 40px;
}

/* ---------------------------------------------------------------------------
 * Fascia del logo, sezione ragazzi — schiarita su richiesta del cliente
 * ------------------------------------------------------------------------- */

/* La fascia segue il verde nuovo. Vale ancora il criterio di prima: la tinta
   chiara sta in cima al gradiente e la seconda è più scura, mai più chiara,
   così il testo bianco non incontra mai un punto peggiore di 4,66:1. */
body.area-ragazzi .brandband {
	--rag-band-1: #058648;
	--rag-band-2: #034A28;
	background: linear-gradient(135deg, var(--rag-band-1), var(--rag-band-2));
}

/* ---------------------------------------------------------------------------
 * Avvisi: un bordo per staccarli dal fondo
 * ------------------------------------------------------------------------- */

/* Il riquadro azzurrino e il grigino della pagina si somigliavano troppo e il
   bordo dell'avviso spariva: restava solo la barretta di sinistra. Un filo di
   contorno nella stessa famiglia di colore del fondo delimita l'area senza
   diventare una cornice. La barra colorata a sinistra resta: è quella che dice
   di che tipo è l'avviso. */
.alert {
	border: 1px solid var(--neutral-200, #e4e7ec);
	border-left: 4px solid var(--blue-600, #0c6db1);
}
.alert--info { border-color: #bcd9ee; border-left-color: #0c6db1; }
.alert--success { border-color: #b9e0c6; border-left-color: var(--success, #1a7f45); }
.alert--warning { border-color: #ead9ac; border-left-color: var(--warning, #a1660b); }
.alert--danger { border-color: #eec4c0; border-left-color: var(--danger, #b8352b); }

/* Il colore di un avviso dice **che tipo** di avviso è, non in che sezione del
   sito ci si trova: azzurro è un'informazione, giallo un'attenzione, rosso
   un'urgenza. Il tema padre invece tinge barra e icona degli avvisi
   informativi con l'arancio dei ragazzi, e nella sezione ragazzi lo stesso
   avviso cambiava colore pur dicendo la stessa cosa — con il titolo rimasto
   blu, per giunta. Qui si riporta tutto al tono.

   I colori sono scritti per esteso e non presi da `--blue-600`: quella
   variabile viene ridefinita in arancione dentro i pannelli della home
   ragazzi, ed è proprio ciò da cui questi avvisi devono restare indipendenti. */
body.area-ragazzi .alert--info,
body.area-riservata .alert--info {
	border-color: #bcd9ee;
	border-left-color: #0c6db1;
}
body.area-ragazzi .alert--info .alert__icon,
body.area-riservata .alert--info .alert__icon {
	color: #0c6db1;
}

/* ---------------------------------------------------------------------------
 * Vetrina libri (home adulti) e consigli di lettura (home ragazzi)
 * ------------------------------------------------------------------------- */

/* Copertina sopra, titolo sotto: la lettura della vetrina dell'OPAC. Le
   colonne si adattano al numero di libri e scendono a due sui telefoni; il
   `min()` evita che una colonna a misura fissa sbordi a 320px (1.4.10). */
.bib-vetrina {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 45%), 1fr));
	gap: 28px 20px;
}
.bib-vetrina__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: var(--text-strong);
	border-radius: var(--radius-md, 8px);
}
.bib-vetrina__copertina {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Proporzione tipica di un libro: le copertine restano allineate anche
	   quando arrivano da scansioni di formato diverso. */
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: var(--neutral-100, #eef0f4);
	transition: transform .15s ease, box-shadow .15s ease;
}
.bib-vetrina__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	/* `contain` e non `cover`: una copertina ritagliata perde il titolo, ed è
	   proprio dal titolo in copertina che il libro si riconosce. */
	object-fit: contain;
	display: block;
	border-radius: 4px;
	/* L'ombra sta sull'immagine, non sul riquadro: così sono le copertine a
	   staccarsi dalla pagina, senza una cornice attorno al vuoto. */
	box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.bib-vetrina__copertina--vuota {
	/* Senza copertina non si finge di averne una: un fondo tenue e un segno
	   discreto, così la griglia resta allineata e nessuno crede che manchi
	   qualcosa. */
	box-shadow: none;
	border: 1px dashed var(--neutral-300, #b8bec9);
	color: var(--text-muted, #5b6472);
	background: var(--neutral-50, #f5f7fa);
}
.bib-vetrina__titolo {
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	line-height: 1.3;
	text-wrap: balance;
}
.bib-vetrina__link:hover .bib-vetrina__copertina,
.bib-vetrina__link:focus-visible .bib-vetrina__copertina {
	transform: translateY(-3px);
}
.bib-vetrina__link:hover .bib-vetrina__titolo { text-decoration: underline; }
.bib-vetrina__link:focus-visible {
	outline: 3px solid var(--skin-accent, var(--color-primary));
	outline-offset: 4px;
}

/* Consigli di lettura: stessa impaginazione della vetrina, con la tinta della
   fascia d'età dietro la copertina. Titolo ed età vanno sotto, non a fianco.

   Classi nuove e non `rag-book*`: quelle del tema padre disegnano una scheda
   bianca col titolo in bianco *dentro* la copertina, e riusarle qui avrebbe
   voluto dire scrivere il titolo bianco su fondo bianco. */
.rag-consigli {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(170px, 45%), 1fr));
	gap: 28px 20px;
}
.rag-consiglio { margin: 0; }
.rag-consiglio__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: var(--text-strong);
}
.rag-consiglio__cover {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 3;
	/* Il colore della fascia fa da passepartout attorno alla copertina, non le
	   sta dietro nascosto: è quello che distingue una fascia dall'altra a
	   colpo d'occhio, e una copertina a pieno riquadro lo coprirebbe tutto.
	   La tinta arriva dal termine della tassonomia, in `style`. */
	padding: 14px;
	overflow: hidden;
	border-radius: 10px;
	color: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
.rag-consiglio__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	/* `contain`: la copertina si vede intera, non ritagliata. Le proporzioni
	   dei libri non sono tutte uguali e tagliarne il titolo sarebbe peggio di
	   lasciare un margine. */
	object-fit: contain;
	display: block;
	border-radius: 4px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
}
/* Il segno che compare quando una fascia non ha ancora una bibliografia.
   Bianco sulle tinte scure, scuro su quelle chiare: su un giallo il bianco
   sparisce, e il riquadro sembrerebbe vuoto per errore. */
.rag-consiglio__icona { opacity: .55; }
.rag-consiglio__cover--chiara { color: #3D1A00; }
.rag-consiglio__cover--chiara .rag-consiglio__icona { opacity: .45; }
.rag-consiglio__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rag-consiglio__titolo {
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	line-height: 1.3;
	text-wrap: balance;
}
.rag-consiglio__link:hover .rag-consiglio__cover,
.rag-consiglio__link:focus-visible .rag-consiglio__cover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.rag-consiglio__link:hover .rag-consiglio__titolo { text-decoration: underline; }
.rag-consiglio__link:focus-visible {
	outline: 3px solid var(--skin-accent, var(--color-primary));
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bib-vetrina__copertina,
	.rag-consiglio__cover { transition: none; }
	.bib-vetrina__link:hover .bib-vetrina__copertina,
	.bib-vetrina__link:focus-visible .bib-vetrina__copertina,
	.rag-consiglio__link:hover .rag-consiglio__cover,
	.rag-consiglio__link:focus-visible .rag-consiglio__cover { transform: none; }
}

/* ---------------------------------------------------------------------------
 * Hero ragazzi: illustrazione caricata dal pannello
 * ------------------------------------------------------------------------- */

/* Con un'immagine vera spariscono il tratteggio e il fondo trasparente del
   segnaposto: restano solo l'immagine e i suoi angoli arrotondati. */
.rag-hero__art--immagine {
	height: auto;
	background: none;
	border: 0;
	padding: 0;
}
.rag-hero__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
	border-radius: var(--radius-xl, 16px);
}
.rag-consiglio__vuoto { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------------------------------------------------------------------------
 * Hero ragazzi: impaginazione a container query
 * ------------------------------------------------------------------------- */

/* Il punto in cui la hero passa da due colonne a una dipende dallo spazio che
   ha, non dalla larghezza della finestra: dentro un contenitore stretto due
   colonne non stanno, indipendentemente dallo schermo. `.rag-hero` diventa il
   contenitore interrogato e la griglia scende di un livello, perché un
   contenitore non può interrogare sé stesso per ridisegnarsi. */
.rag-hero {
	display: block;
	container-type: inline-size;
	container-name: rag-hero;
}
/* Il margine laterale che il contenitore aveva perso.

   `.container` dà `padding: 0 24px`, ma nel tema padre `.rag-hero` — che è
   sullo stesso elemento, ha la stessa specificità ed è caricato dopo —
   dichiara `padding: 32px 0 48px`, e la forma abbreviata azzera anche i lati.
   Da desktop non si notava, perché il contenitore ha comunque una larghezza
   massima e lo spazio resta ai bordi; da mobile è quel padding l'unico
   margine, e titolo, testo e pulsanti finivano appiccicati al bordo dello
   schermo.

   Si scrive `.container.rag-hero` per stare sopra a entrambe le regole del
   padre senza `!important`, e si toccano solo i lati: sopra e sotto restano
   quelli suoi. Il tema padre è un sottomodulo e non si modifica. */
.container.rag-hero {
	padding-left: 24px;
	padding-right: 24px;
}
.rag-hero__griglia {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}
@container rag-hero (min-width: 620px) {
	.rag-hero__griglia { grid-template-columns: 1.3fr 1fr; }
	.rag-hero__griglia--sola { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Scritta decorativa della hero ragazzi
 * ------------------------------------------------------------------------- */

/* Sta al posto dell'illustrazione, quando non ce n'è una. Non è un titolo: è
   un `<p>`, e il titolo vero della pagina resta l'`<h1>` della hero.

   Il fondo è quello della hero, senza pezze: riempimento chiaro e bordino
   scuro appoggiati direttamente sul gradiente verde.

   Col degrade' arancione il riempimento chiaro non raggiungeva il 3:1
   dell'1.4.3, e non poteva: sull'estremo ambra #F2A900 sarebbe servita una
   luminanza di 1,52 e il bianco puro si ferma a 1,00. Reggeva come
   decorazione pura, che l'1.4.3 esclude dal calcolo, ma era un'eccezione da
   difendere ogni volta.

   Col verde non serve piu': l'estremo chiaro #058648 da' 4,66:1 col bianco,
   quindi la scritta supera il 3:1 e pure il 4,5:1 senza appellarsi a niente.
   Una cosa in meno da spiegare a un audit. */
.rag-scritta-lato {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 6px;
	/* La colonna è il contenitore su cui si misura il corpo delle lettere. */
	container-type: inline-size;
	container-name: rag-scritta;
}

.rag-scritta {
	margin: 0;
	text-align: center;
	font-family: var(--font-display, var(--font-sans));
	font-weight: 700;
	/* Il corpo si misura sulla **parola più lunga**, non sulla frase: `--maxw`
	   arriva dal server e `cqi` è la larghezza di questa colonna. Nessuna
	   misurazione in JavaScript, quindi nessuno sfarfallio al primo disegno.

	   Prima si divideva la lunghezza totale, e il risultato era una riga sola
	   di lettere piccole in mezzo al vuoto: «Bentornati a scuola!» stava a
	   40px in una colonna da 500. Dividendo la parola più lunga il corpo
	   cresce fin quando quella parola riempie la colonna, e le altre vanno a
	   capo da sé — due o tre righe che occupano lo spazio invece di
	   galleggiarci. */
	font-size: clamp(32px, calc(168cqi / var(--maxw, 8)), 112px);
	/* Righe ravvicinate: è lettering, non testo corrente. */
	line-height: 0.98;
	color: var(--rag-scritta-testo, #FFF6EE);
	/* Anello a otto direzioni in `em`, così il bordino scala col corpo.
	   Sottile (.022em invece di .038) e in un bruno caldo semitrasparente
	   invece del quasi-nero: serve a staccare le lettere dall'arancio, non a
	   disegnarci sopra un contorno da fumetto. */
	text-shadow:
		.022em 0 0 var(--rag-scritta-bordo, rgba(106, 44, 10, .8)),
		-.022em 0 0 var(--rag-scritta-bordo, rgba(106, 44, 10, .8)),
		0 .022em 0 var(--rag-scritta-bordo, rgba(106, 44, 10, .8)),
		0 -.022em 0 var(--rag-scritta-bordo, rgba(106, 44, 10, .8)),
		.016em .016em 0 var(--rag-scritta-bordo, rgba(106, 44, 10, .8)),
		-.016em .016em 0 var(--rag-scritta-bordo, rgba(106, 44, 10, .8)),
		.016em -.016em 0 var(--rag-scritta-bordo, rgba(106, 44, 10, .8)),
		-.016em -.016em 0 var(--rag-scritta-bordo, rgba(106, 44, 10, .8)),
		/* Un'ombra morbida sotto, per dare peso senza indurire il bordo. */
		0 .03em .05em rgba(106, 44, 10, .35);
}

.rag-scritta__lettere { display: block; }

/* Una parola per blocco: così non si spezza a fine riga. Gli spazi fra le
   parole restano caratteri veri, fuori dalle lettere inclinate. */
.rag-scritta__parola {
	display: inline-block;
	white-space: nowrap;
}

.rag-scritta__lettera {
	display: inline-block;
	/* Inclinazione e scarto arrivano dal server, uguali a ogni caricamento. */
	transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0));
}

/* L'entrata si nasconde solo se il JavaScript c'è: la classe la mette lui.
   Senza JavaScript la scritta è semplicemente lì, ferma e inclinata — nessuna
   lettera resta bloccata a `opacity: 0`. */
.rag-scritta--anima .rag-scritta__lettera {
	opacity: 0;
	animation: rag-scritta-entra .5s cubic-bezier(.34, 1.5, .64, 1) forwards;
	animation-delay: calc(var(--n, 0) * var(--passo, 45ms));
}

@keyframes rag-scritta-entra {
	from {
		opacity: 0;
		transform: rotate(var(--rot, 0deg)) translateY(calc(var(--dy, 0px) + 18px)) scale(.86);
	}
	to {
		opacity: 1;
		transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0));
	}
}

/* Chi ha chiesto meno movimento vede la scritta già ferma e già inclinata: le
   inclinazioni sono grafica, non animazione, e restano. */
@media (prefers-reduced-motion: reduce) {
	.rag-scritta--anima .rag-scritta__lettera {
		opacity: 1;
		animation: none;
	}
}

/* Il contenitore non regge le container query (browser molto vecchio): la
   colonna resta sotto al testo, che è il ripiego giusto. */
@supports not (container-type: inline-size) {
	.rag-scritta { font-size: clamp(32px, 9vw, 72px); }
}

/* ---------------------------------------------------------------------------
 * Decorazioni della testata ragazzi
 * ------------------------------------------------------------------------- */

/* Pallini e righe ondulate per riempire il fondo, che senza l'illustrazione
   resterebbe vuoto. Stanno *dietro* al contenuto e lontani dalla colonna
   centrale: una decorazione che passasse sotto le lettere cambierebbe il fondo
   su cui si misura il contrasto, e renderebbe il conto impossibile da fare.
   Sono `aria-hidden` e non intercettano il puntatore. */
.rag-hero-deco {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

/* Il contenuto sta sopra: `.rag-hero` è già `position: relative`. */
.rag-hero { z-index: 1; }

/* Le posizioni sono scelte per stare intorno alla scritta, mai sotto: sono in
   percentuale della testata, così seguono la larghezza senza inseguirla in
   JavaScript. */

/* Pallini in basso a sinistra, sotto i bottoni. */
.rag-hero-deco--pallini {
	left: -20px;
	bottom: 6px;
	width: 200px;
	height: 104px;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .34) 4px, transparent 4.5px);
	background-size: 27px 27px;
	mask-image: linear-gradient(75deg, #000 30%, transparent 88%);
	-webkit-mask-image: linear-gradient(75deg, #000 30%, transparent 88%);
}

/* Un secondo gruppo di pallini sopra la scritta, più piccoli e più fitti. */
.rag-hero-deco--pallini2 {
	right: 4%;
	top: 14%;
	width: 34%;
	max-width: 300px;
	height: 62px;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .30) 3px, transparent 3.5px);
	background-size: 22px 22px;
	mask-image: linear-gradient(190deg, #000 20%, transparent 90%);
	-webkit-mask-image: linear-gradient(190deg, #000 20%, transparent 90%);
}

/* Righe ondulate: il disegno è un SVG in `data:` — nessuna richiesta in più e
   nessun file da caricare. Una sotto la scritta, una a metà della testata. */
.rag-hero-deco--onde,
.rag-hero-deco--onde2 {
	background-repeat: repeat-x;
	background-size: 70px 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='24' viewBox='0 0 70 24'%3E%3Cpath d='M0 12q8.75-9 17.5 0T35 12t17.5 0T70 12' fill='none' stroke='rgba(255,255,255,0.38)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.rag-hero-deco--onde {
	right: 3%;
	bottom: 15%;
	width: 32%;
	max-width: 320px;
	height: 26px;
	mask-image: linear-gradient(255deg, #000 30%, transparent 92%);
	-webkit-mask-image: linear-gradient(255deg, #000 30%, transparent 92%);
}

.rag-hero-deco--onde2 {
	left: 44%;
	top: 10%;
	width: 150px;
	height: 26px;
	opacity: .7;
	mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
	-webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
}

/* Sugli schermi stretti la testata è già piena di suo: le decorazioni
   toglierebbero respiro invece di darne. */
@media (max-width: 620px) {
	.rag-hero-deco { display: none; }
}

/* Ogni riga della scritta è un blocco: la « | » del pannello manda a capo. */
.rag-scritta__riga { display: block; }

/* ---------------------------------------------------------------------------
 * Galleria a mosaico della hero ragazzi
 * ------------------------------------------------------------------------- */

/* Sta dove stava l'illustrazione. Può sbordare a destra e in verticale —
   la banda della hero ha `overflow: hidden`, quindi non produce scorrimento
   orizzontale della pagina (1.4.10) — ma **non** a sinistra, dove c'è il
   testo: un'immagine sopra il titolo lo renderebbe illeggibile. */
.rag-galleria-lato {
	/* Verso il testo non si sborda mai: un'immagine sopra il titolo lo
	   renderebbe illeggibile. A destra sì, ma solo dove c'è margine vero da
	   invadere — vedi la regola più sotto. */
	margin-right: 0;
	container-type: inline-size;
	container-name: rag-galleria;
}

/* Il mosaico è fatto di colonne vere, non delle colonne del CSS.

   Con `columns` il contenuto di ogni colonna parte dall'alto e non c'è modo di
   centrarlo: le colonne del CSS non hanno un allineamento verticale proprio.
   Con una colonna per contenitore invece sì — ognuna è una fila flessibile con
   il contenuto centrato — e in cambio la distribuzione va decisa dal server,
   che la fa bilanciando le altezze stimate. */
.rag-galleria {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.rag-galleria__colonna {
	flex: 1 1 0;
	/* Larghezza minima nulla: senza, le immagini larghe allargherebbero la
	   colonna oltre la sua parte. */
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* Il centraggio verticale chiesto: ogni colonna tiene il suo contenuto a
	   mezza altezza, e le colonne più corte non restano appese in alto. */
	justify-content: center;
	gap: 12px;
}

.rag-galleria__cella {
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(90, 36, 8, .22);
	/* Inclinazione e scarto laterale arrivano dal server, indicizzati sulla
	   posizione: fotografie appoggiate sul tavolo, e identiche a ogni
	   caricamento. */
	transform: rotate(var(--incl, 0deg)) translateX(var(--dx, 0));
}

.rag-galleria__img {
	display: block;
	width: 100%;
	/* Le proporzioni sono quelle dell'immagine: niente ritaglio. Gli attributi
	   `width` e `height` che WordPress scrive nel tag riservano lo spazio in
	   anticipo, quindi la pagina non sobbalza mentre carica. */
	height: auto;
}

/* Quando lo spazio si stringe le colonne restano quelle, ma si avvicinano. */
@container rag-galleria (max-width: 420px) {
	.rag-galleria,
	.rag-galleria__colonna { gap: 8px; }
}

/* --- L'ingresso ------------------------------------------------------- */

/* Come per la scritta: la classe che nasconde le celle la mette il
   JavaScript. Se non parte, le immagini sono semplicemente lì — nessuna
   resta bloccata a `opacity: 0`. */
.rag-galleria--anima .rag-galleria__cella {
	opacity: 0;
	animation-duration: .55s;
	animation-timing-function: cubic-bezier(.34, 1.5, .64, 1);
	animation-fill-mode: forwards;
	animation-delay: calc(var(--n, 0) * var(--passo, 90ms));
}

.rag-galleria--anima .rag-galleria__cella--pop { animation-name: rag-gal-pop; }
.rag-galleria--anima .rag-galleria__cella--dissolvi { animation-name: rag-gal-dissolvi; }
.rag-galleria--anima .rag-galleria__cella--sali { animation-name: rag-gal-sali; }
.rag-galleria--anima .rag-galleria__cella--zoom { animation-name: rag-gal-zoom; }
.rag-galleria--anima .rag-galleria__cella--ruota { animation-name: rag-gal-ruota; }

@keyframes rag-gal-pop {
	from { opacity: 0; transform: rotate(var(--incl, 0deg)) translateX(var(--dx, 0)) scale(.82); }
	to   { opacity: 1; transform: rotate(var(--incl, 0deg)) translateX(var(--dx, 0)) scale(1); }
}
@keyframes rag-gal-dissolvi {
	from { opacity: 0; transform: rotate(var(--incl, 0deg)) translateX(var(--dx, 0)); }
	to   { opacity: 1; transform: rotate(var(--incl, 0deg)) translateX(var(--dx, 0)); }
}
@keyframes rag-gal-sali {
	from { opacity: 0; transform: rotate(var(--incl, 0deg)) translateX(var(--dx, 0)) translateY(26px); }
	to   { opacity: 1; transform: rotate(var(--incl, 0deg)) translateX(var(--dx, 0)) translateY(0); }
}
@keyframes rag-gal-zoom {
	from { opacity: 0; transform: rotate(var(--incl, 0deg)) translateX(var(--dx, 0)) scale(1.14); }
	to   { opacity: 1; transform: rotate(var(--incl, 0deg)) translateX(var(--dx, 0)) scale(1); }
}
@keyframes rag-gal-ruota {
	from { opacity: 0; transform: rotate(calc(var(--incl, 0deg) - 7deg)) translateX(var(--dx, 0)) scale(.9); }
	to   { opacity: 1; transform: rotate(var(--incl, 0deg)) translateX(var(--dx, 0)) scale(1); }
}

/* Chi ha chiesto meno movimento vede le immagini già ferme e già al loro
   posto. Le inclinazioni restano: sono grafica, non movimento. */
@media (prefers-reduced-motion: reduce) {
	.rag-galleria--anima .rag-galleria__cella {
		opacity: 1;
		animation: none;
	}
}

/* Lo sbordamento a destra: si accende solo quando il contenitore è arrivato
   alla sua larghezza massima e ai lati resta spazio da invadere. Sotto quella
   soglia il contenitore tocca già il bordo della finestra, e sbordare non
   sarebbe un'invasione dei margini ma un taglio dell'immagine.

   Qui la media query è lo strumento giusto e non la container query: la
   domanda non è quanto spazio ha la galleria, ma quanto ne resta *fuori* dal
   contenitore — e quello lo sa solo la finestra. */
@media (min-width: 1300px) {
	.rag-galleria-lato { margin-right: -26px; }
}

/* Sui telefoni la galleria non si mostra affatto.
   È decorazione: nessun criterio WCAG chiede che sia presente a tutte le
   larghezze, e 1.4.10 parla di contenuto e funzioni — la decorazione non è né
   l'uno né l'altra. Su uno schermo stretto un mosaico di copertine costringe a
   scorrere per arrivare a ciò che serve, e non dà niente in cambio. */
@media (max-width: 620px) {
	.rag-galleria-lato { display: none; }
}

/* ============================================================
   Testata con immagine (home istituzionale)
   ------------------------------------------------------------
   L'altezza e il punto focale arrivano dal pannello come variabili scritte
   sull'elemento: qui si dichiarano solo i valori di ripiego, così la fascia
   resta sensata anche se un giorno quelle variabili non arrivassero.
   ============================================================ */
.bib-testata {
	--bib-testata-h: 420px;
	--bib-testata-pos: 50% 50%;

	position: relative;
	width: 100%;
	height: var(--bib-testata-h);
	overflow: hidden;
	background: var(--blue-050, #eef4fa);
}

.bib-testata__img {
	display: block;
	width: 100%;
	height: 100%;
	object-position: var(--bib-testata-pos);
}

/* Ritagliata: riempie la fascia e il punto focale decide che cosa resta
   dentro. */
.bib-testata--cover .bib-testata__img {
	object-fit: cover;
}

/* Intera: si vede tutta, e lo spazio che avanza resta ai lati. Sta al centro
   perché un'immagine più stretta della fascia, appoggiata a sinistra,
   sembrerebbe sbagliata e non una scelta. */
.bib-testata--contain .bib-testata__img {
	object-fit: contain;
	object-position: center;
}

/* Su schermi stretti una fascia alta come sul desktop mangia tutto lo
   schermo: si accorcia, senza però scendere sotto un'altezza in cui
   l'immagine si legge ancora. */
@media (max-width: 782px) {
	.bib-testata {
		height: min(var(--bib-testata-h), 46vh);
		min-height: 180px;
	}
}