/**
 * Biblioteca Sito — stili front-end (accordion, form, filtri).
 * Riusa i token del tema; definisce solo ciò che manca. WCAG 2.2 AA.
 */

/* --- Accordion accessibile ------------------------------------------- */
.bib-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bib-accordion .bib-accordion__item {
	/* Il margine verticale lo dà il `gap` della lista. Le classi del tema
	   padre non stanno più su questo markup — vedi la nota nel PHP — quindi
	   qui c'è tutto quello che serve a disegnare la voce. */
	margin: 0;
	border: 1px solid var(--neutral-300, #b8bec9);
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	background: #fff;
}

/* Specificità di due classi, non una: `.lib-prose h3` (0,1,1) vinceva su
   `.bib-accordion__heading` (0,1,0) e imponeva al titolo 32px di margine
   sopra e 12 sotto. Il risultato era la fascia chiara del pulsante sospesa in
   mezzo a due strisce bianche — la «barra» che si vedeva dentro ogni voce. */
.bib-accordion .bib-accordion__heading {
	margin: 0;
	font-size: inherit;
}

.bib-accordion .bib-accordion__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	/* Resta: è l'area di attivazione minima del criterio 2.5.8. */
	min-height: 48px;
	padding: 14px 18px;
	/* Nessun fondo proprio: la voce è già una scheda bianca col suo bordo, e
	   una campitura in più la spezzava in due invece di tenerla insieme. */
	background: transparent;
	border: 0;
	font: inherit;
	font-weight: var(--weight-medium, 600);
	color: var(--text-strong, #1b1b1b);
	text-align: left;
	cursor: pointer;
}

.bib-accordion .bib-accordion__head:hover {
	/* Solo al passaggio del mouse, dove serve a dire «questo si preme». */
	background: var(--skin-tint, var(--blue-50, #eef4ff));
}

.bib-accordion .bib-accordion__head:focus-visible {
	outline: 3px solid var(--skin-accent, var(--color-primary, #06c));
	outline-offset: -3px;
}

.bib-accordion__icon {
	flex: none;
	color: var(--skin-accent, var(--color-primary, #06c));
	transition: transform var(--duration-fast, 0.15s) ease;
}

.bib-accordion__head[aria-expanded="true"] .bib-accordion__icon {
	transform: rotate(180deg);
}

/* Aperta: una riga sottile separa il titolo dal contenuto, al posto della
   campitura. Gli stessi 18px di lato del pulsante, così il testo del pannello
   è incolonnato con quello del titolo. */
.bib-accordion .bib-accordion__panel {
	border-top: 1px solid var(--neutral-200, #e4e7ec);
}

.bib-accordion .bib-accordion__panel-inner {
	padding: 16px 18px;
}

.bib-accordion__panel[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.bib-accordion__icon {
		transition: none;
	}
}

/* --- Filtro bibliografie ---------------------------------------------- */
.bib-filter { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-bottom: 20px; }
.bib-filter .field { display: flex; flex-direction: column; gap: 4px; }
.bib-filter__text, .bib-filter__age {
	font: inherit; min-height: 44px; padding: 8px 12px;
	border: 1px solid var(--neutral-500, #6b7280); border-radius: var(--radius-md, 8px); background: #fff;
}
.bib-filter__text:focus-visible, .bib-filter__age:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }
.bib-proposte { gap: 20px; }

/* --- Moduli accessibili ----------------------------------------------- */
.bib-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.bib-form__field { display: flex; flex-direction: column; gap: 4px; }
.bib-form__control {
	font: inherit; min-height: 44px; padding: 8px 12px;
	border: 1px solid var(--neutral-500, #6b7280); border-radius: var(--radius-md, 8px); background: #fff;
	color: var(--text-strong, #1b1b1b);
}
textarea.bib-form__control { min-height: 96px; resize: vertical; }
.bib-form__control:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }
.bib-form__req { color: var(--danger, #b8261c); margin-left: 2px; }
.bib-form__consent label { display: flex; gap: 10px; align-items: flex-start; }
.bib-form__consent input { margin-top: 4px; width: 20px; height: 20px; }
/* Honeypot: fuori dallo schermo, non display:none (i bot lo compilano). */
.bib-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bib-form__actions { margin-top: 8px; }

/* --- Slider avvisi globali (accessibile) ------------------------------- */
.bib-avvisi { margin: 0; }
.bib-avvisi__viewport { position: relative; }
.bib-avvisi__track { list-style: none; margin: 0; padding: 0; }
.bib-avvisi__slide { margin: 0; }
.bib-avvisi__slide[hidden] { display: none; }
.bib-avvisi .alert__action { margin: 8px 0 0; }
.bib-avvisi .alert__action a { font-weight: 600; }

.bib-avvisi__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.bib-avvisi__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	line-height: 1;
	color: var(--color-primary, #0C6DB1);
	background: #fff;
	border: 1px solid var(--neutral-300, #C5C7CB);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.bib-avvisi__btn .icon { width: 22px; height: 22px; }
.bib-avvisi__btn:hover {
	background: var(--blue-50, #F2F8FC);
	border-color: var(--color-primary, #0C6DB1);
}
.bib-avvisi__btn:active { transform: scale( 0.94 ); }
.bib-avvisi__btn:focus-visible { outline: 3px solid var(--color-primary, #0C6DB1); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.bib-avvisi__btn { transition: none; }
	.bib-avvisi__btn:active { transform: none; }
}

/* Icona Pausa/Play disegnata in CSS (usa currentColor = colore brand). */
.bib-avvisi__pause-icon { position: relative; display: inline-block; width: 12px; height: 14px; }
.bib-avvisi__pause-icon::before,
.bib-avvisi__pause-icon::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4px;
	background: currentColor;
	border-radius: 1px;
}
.bib-avvisi__pause-icon::before { left: 0; }
.bib-avvisi__pause-icon::after { right: 0; }
/* In pausa: il bottone mostra il triangolo «play». */
.bib-avvisi__pause[aria-pressed="true"] .bib-avvisi__pause-icon {
	width: 0;
	height: 0;
	border-left: 13px solid currentColor;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}
.bib-avvisi__pause[aria-pressed="true"] .bib-avvisi__pause-icon::before,
.bib-avvisi__pause[aria-pressed="true"] .bib-avvisi__pause-icon::after { content: none; }

.bib-avvisi__dots { display: flex; gap: 4px; align-items: center; }
.bib-avvisi__dot {
	/* Target ≥ 24px (WCAG 2.5.8) con pallino visibile più piccolo. */
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
}
.bib-avvisi__dot::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--neutral-300, #C5C7CB);
}
.bib-avvisi__dot.is-active::before { background: var(--color-primary, #0C6DB1); }
.bib-avvisi__dot:focus-visible { outline: 3px solid var(--color-primary, #0C6DB1); outline-offset: 0; border-radius: 50%; }

/* --- Moduli: sezioni, gruppi di scelte, campi condizionali ---------------
   Le dimensioni dei controlli di scelta (24px) rispettano la dimensione
   minima del bersaglio richiesta da WCAG 2.2 (2.5.8 Target Size Minimum). */
.bib-form__section { border: 0; padding: 0; margin: 0 0 8px; }
.bib-form__section-title { margin: 24px 0 4px; font-size: 1.125rem; }
.bib-form__section-desc { margin: 0 0 12px; color: var(--color-muted, #555); }
.bib-form__intro { margin-bottom: 16px; }
.bib-form__hint { margin: 0 0 6px; font-size: 0.9375rem; color: var(--color-muted, #555); }

.bib-form__group { border: 1px solid var(--color-border, #d4d4d4); border-radius: 6px; padding: 12px 16px 16px; margin: 0; }
.bib-form__group legend { font-weight: 600; padding: 0 6px; }
.bib-form__choice { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.bib-form__choice input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; }
.bib-form__choice label { margin: 0; }
.bib-form__choice input:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }
/* Una casella disattivata dal limite di scelte deve restare leggibile: si
   attenua il controllo, non il testo dell'etichetta. */
.bib-form__choice input:disabled { opacity: 0.5; }
.bib-form__count { margin: 8px 0 0; font-size: 0.9375rem; font-weight: 600; }

.bib-form__gate, .bib-scuole__gate { margin: 24px 0; }
.bib-scuole__gate .alert__title { margin-top: 0; }
/* I due pulsanti stanno dentro un paragrafo e a schermo stretto vanno uno
   sotto l'altro: un margine laterale non li separava affatto. Con flex e `gap`
   la distanza c'è in entrambi i versi, e resta quando vanno a capo. */
.bib-gate__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 16px 0 12px;
}
.bib-gate__azioni .btn { margin: 0; }

/* Registrazione: i gruppi aggiunti alla pagina di login. */
.bib-reg__group { border: 0; padding: 0; margin: 0 0 12px; }
.bib-reg__group legend { font-weight: 600; margin-bottom: 4px; }
/* Testo riservato agli screen reader: comunica l'obbligatorietà dei gruppi di
   scelte, dove l'asterisco da solo sarebbe decorativo e quindi muto. */
.bib-form__req-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Pulsanti illustrati (repeater lato pagina) -------------------------
   Il testo è testo vero e non parte dell'immagine: si ingrandisce con lo
   zoom e resta leggibile nei temi ad alto contrasto (WCAG 2.2 — 1.4.5
   Immagini di testo). L'illustrazione accompagna, non sostituisce. */
.bib-pulsanti {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: grid;
	/* `min()` per lo stesso motivo della lista eventi: una colonna a misura
	   fissa non scende sotto quella misura e sborda sugli schermi stretti. */
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 24px;
}
.bib-pulsanti__item { margin: 0; }
.bib-pulsante {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 16px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	border: 2px solid var(--color-border, #d4d4d4);
	border-radius: 12px;
	background: var(--color-surface, #fff);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bib-pulsante:hover,
.bib-pulsante:focus-visible {
	/* Il colore dell'area: arancione fra i ragazzi, blu fra gli adulti. Prima
	   era sempre blu, perché `--color-primary` non cambia sulle pagine
	   interne della sezione ragazzi. */
	border-color: var(--skin-accent, var(--color-primary, #06c));
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
	transform: translateY(-2px);
}
/* Focus ben visibile e staccato dal bordo, così non resta coperto (2.4.11). */
.bib-pulsante:focus-visible {
	outline: 3px solid var(--skin-accent, var(--color-primary, #06c));
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.bib-pulsante { transition: none; }
	.bib-pulsante:hover, .bib-pulsante:focus-visible { transform: none; }
}
.bib-pulsante__img { max-width: 100%; height: auto; border-radius: 8px; }
.bib-pulsante__testo { display: block; }
.bib-pulsante__etichetta {
	display: block;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
}
.bib-pulsante__descrizione {
	display: block;
	margin-top: 4px;
	font-size: 0.9375rem;
	color: var(--color-muted, #555);
}
/* Testo per i soli screen reader (es. «si apre in una nuova scheda»). */
.bib-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Icona dei link che aprono una scheda nuova (LinkEsterni.php).
   Dimensionata in `em` così segue il corpo del testo in cui sta: dentro un
   titolo grande resta proporzionata, dentro una nota piccola non domina.
   L'unione di parola emessa prima dell'icona le impedisce di andare a capo
   da sola a fine riga. */
.bib-esterno__icona {
	width: 0.8em; height: 0.8em; margin-inline-start: 0.25em;
	vertical-align: baseline; fill: currentColor; flex: none;
}

/* Video in attesa di consenso (Consenso.php).
   Il riquadro tiene le proporzioni del video così la pagina non si riassesta
   quando il video compare. La copertina non si prende da YouTube: sarebbe una
   richiesta a Google fatta proprio dal riquadro che serve a evitarla. */
.bib-video-bloccato {
	position: relative; display: flex; align-items: center; justify-content: center;
	aspect-ratio: 16 / 9; width: 100%; margin: 0 0 var(--space-5, 1.5rem);
	background: var(--neutral-100, #f2f5f7); border: 1px solid var(--border, #c4dff2);
	border-radius: var(--radius-lg, 12px); overflow: hidden;
}
.bib-video-bloccato--aperto { display: block; background: none; border: 0; }
.bib-video-bloccato iframe { width: 100%; height: 100%; border: 0; display: block; }
.bib-video-bloccato__avviso { max-width: 42ch; padding: var(--space-5, 1.5rem); text-align: center; }
.bib-video-bloccato__titolo { font-weight: 700; margin: 0 0 var(--space-2, .5rem); }
.bib-video-bloccato__avviso p { margin: 0 0 var(--space-3, .75rem); }
.bib-video-bloccato__avviso p:last-child { margin-bottom: 0; }

/* Se il banner mostra comunque il proprio segnaposto, la copertina remota
   resta fuori: l'immagine arriverebbe da YouTube. */
.video-placeholder-youtube { background-image: none !important; background: var(--neutral-700, #3f4a52) !important; }

/* Sezione di modulo già compilata dal profilo: chiusa in un riassunto. */
.bib-form__section--riassunta {
	border: 1px solid var(--border, #c4dff2);
	border-radius: var(--radius-md, 8px);
	padding: 0;
	margin-bottom: var(--space-5, 1.5rem);
}
.bib-form__riassunto {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 14px 16px; cursor: pointer; list-style: none;
	font-size: var(--text-sm, .9rem);
}
.bib-form__riassunto::-webkit-details-marker { display: none; }
.bib-form__riassunto-azione { color: var(--skin-accent, #0c6db1); font-weight: 700; white-space: nowrap; }
.bib-form__section--riassunta[open] .bib-form__riassunto { border-bottom: 1px solid var(--border, #c4dff2); }
.bib-form__section--riassunta > *:not(summary) { padding-inline: 16px; }
.bib-form__section--riassunta > *:last-child { padding-bottom: 16px; }
/* Il fuoco da tastiera deve vedersi: `summary` non ha un contorno proprio. */
.bib-form__riassunto:focus-visible { outline: 3px solid var(--skin-accent, #0c6db1); outline-offset: 2px; }

/* Modulo: nota sotto il consenso e avviso di ripristino. */
.bib-form__consent-nota { margin: 6px 0 0 34px; }
.bib-form__ripreso {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-left: 4px solid var(--color-primary, #06c);
	background: var(--color-surface-alt, #f2f5f9);
	border-radius: 0 6px 6px 0;
	font-size: 0.9375rem;
}

/* --- Riquadro «serve l'accesso» delle pagine scuole ---------------------
   Segue la skin della sezione: nell'area ragazzi `--skin-tint` è l'arancio
   chiaro del tema e `--skin-accent` l'arancio scuro, quindi il riquadro
   diventa arancione da solo senza duplicare i colori qui.

   Contrasti verificati sul fondo arancione #FFF1E8: titolo e bordo in
   #B5471A stanno a 4,90:1, il testo scuro a 13,35:1. Il pulsante secondario
   ha fondo bianco esplicito e non trasparente: su bianco l'arancio arriva a
   5,41:1, e soprattutto non sembra più «arancione scritto in arancione».
   Un fondo bianco su fondo arancione chiaro è però quasi invisibile (1,11:1),
   quindi il bordo resta obbligatorio per far vedere dove finisce il pulsante
   (WCAG 2.2 — 1.4.11, contrasto degli elementi non testuali). */
.bib-scuole__gate,
.bib-form__gate {
	background: var(--skin-tint, #f2f8fc);
	border-left: 4px solid var(--skin-accent, #06c);
	border-radius: 0 8px 8px 0;
	padding: 20px 24px;
	margin: 24px 0;
	color: var(--color-text, #1f2933);
}
.bib-scuole__gate .alert__title,
.bib-scuole__gate h2 {
	margin-top: 0;
	color: var(--skin-accent-deep, var(--skin-accent, #06c));
}
.bib-scuole__gate p,
.bib-form__gate p { margin: 0 0 12px; }
.bib-scuole__gate p:last-child,
.bib-form__gate p:last-child { margin-bottom: 0; }

/* Il riquadro colora i propri link con l'accento dell'area: sul pulsante
   pieno, che quell'accento ce l'ha già come fondo, restava azzurro su azzurro
   (1,3:1). Il testo del pulsante pieno è sempre bianco. */
.bib-scuole__gate .btn--primary,
.bib-form__gate .btn--primary,
.bib-scuole__gate .btn--primary:hover,
.bib-form__gate .btn--primary:hover,
.bib-scuole__gate .btn--primary:focus-visible,
.bib-form__gate .btn--primary:focus-visible { color: #fff; }

/* I due pulsanti devono distinguersi a colpo d'occhio: uno pieno, uno
   contornato su fondo bianco. */
.bib-scuole__gate .btn--secondary,
.bib-form__gate .btn--secondary {
	background: #fff;
	border: 2px solid var(--skin-accent, #06c);
	color: var(--skin-accent, #06c);
}
.bib-scuole__gate .btn--secondary:hover,
.bib-form__gate .btn--secondary:hover {
	background: var(--skin-accent, #06c);
	color: #fff;
}
.bib-scuole__gate .btn + .btn,
.bib-form__gate .btn + .btn { margin-left: 8px; }
@media (max-width: 480px) {
	.bib-scuole__gate .btn,
	.bib-form__gate .btn { display: block; width: 100%; margin: 8px 0 0; text-align: center; }
}

/* --- Indice degli argomenti --- */
/* La dimensione varia poco e mai sotto il corpo base: chi ingrandisce la
   pagina fino al 200% (WCAG 1.4.4) deve continuare a leggere tutte le voci,
   e il numero di contenuti resta scritto in chiaro accanto al nome. */
.bib-argomenti__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.bib-argomenti__voce { margin: 0; }
.bib-argomenti__link {
	display: flex;
	align-items: baseline;
	gap: 8px;
	/* 24×24 CSS px minimi di area cliccabile (WCAG 2.5.8). */
	min-height: 44px;
	padding: 8px 14px;
	/* Il bordo disegna il contorno del pulsante: serve almeno 3:1 sul fondo
	   (WCAG 1.4.11), che il grigio-azzurro chiaro del tema non raggiunge. */
	border: 1px solid #6796BE;
	border-radius: 999px;
	background: #fff;
	color: var(--skin-accent, #0C6DB1);
	text-decoration: none;
	line-height: 1.3;
}
.bib-argomenti__link:hover,
.bib-argomenti__link:focus-visible {
	background: var(--skin-accent, #0C6DB1);
	border-color: var(--skin-accent, #0C6DB1);
	color: #fff;
}
.bib-argomenti__link:hover .bib-argomenti__n,
.bib-argomenti__link:focus-visible .bib-argomenti__n { color: #fff; }
.bib-argomenti__nome { font-weight: 600; }
.bib-argomenti__link.is-1 .bib-argomenti__nome { font-size: 1rem; }
.bib-argomenti__link.is-2 .bib-argomenti__nome { font-size: 1.15rem; }
.bib-argomenti__link.is-3 .bib-argomenti__nome { font-size: 1.35rem; }
.bib-argomenti__n {
	font-size: 0.875rem;
	color: #504F54;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.bib-argomenti__lista { gap: 8px; }
	.bib-argomenti__link { padding: 8px 12px; }
	.bib-argomenti__link.is-3 .bib-argomenti__nome { font-size: 1.2rem; }
}

/* Ricerca dentro l'indice degli argomenti. */
.bib-argomenti__cerca { margin: 0 0 16px; }
.bib-argomenti__cerca label { display: block; font-weight: 600; margin-bottom: 6px; }
.bib-argomenti__cerca-riga { display: flex; flex-wrap: wrap; gap: 8px; }
.bib-argomenti__cerca input[type="search"] {
	flex: 1 1 220px;
	min-width: 0;
	/* 44px: comodo da toccare e sopra i 24px minimi (WCAG 2.5.8). */
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #6796BE;
	border-radius: 6px;
	font-size: 1rem;
	color: #1B1C1E;
	background: #fff;
}
.bib-argomenti__cerca input[type="search"]:focus-visible {
	outline: 3px solid var(--skin-accent, #0C6DB1);
	outline-offset: 2px;
}
.bib-argomenti__cerca .btn { flex: 0 0 auto; min-height: 44px; }
.bib-argomenti__cerca .field__hint { margin: 6px 0 0; font-size: 0.875rem; color: #504F54; }
.bib-argomenti__esito { margin: 0 0 12px; font-size: 0.9375rem; color: #504F54; }
.bib-argomenti__vuoto { margin: 12px 0 0; }
.bib-argomenti__vuoto[hidden] { display: none; }

/* --- Vie d'uscita dalle pagine di errore --- */
.bib-uscite { margin: 24px 0 0; }
.bib-uscite__titolo { margin: 0 0 10px; font-weight: 600; }
.bib-uscite__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.bib-uscite__lista > li { margin: 0; }
.bib-uscite__lista .btn { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 480px) {
	/* Su schermo stretto i tre pulsanti in fila diventano illeggibili:
	   uno per riga, a tutta larghezza. */
	.bib-uscite__lista { flex-direction: column; }
	.bib-uscite__lista .btn { width: 100%; justify-content: center; }
}

/* --- Errori di validazione, sotto il campo che li ha causati --- */
/* Il colore non basta a segnalare l'errore: c'è anche il segno «!» e il
   messaggio scritto (WCAG 1.4.1, l'informazione non può passare dal solo
   colore). Il bordo del campo si ispessisce, così l'errore si nota anche
   ingrandendo la pagina. */
.bib-form__errore {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 6px 0 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: #A32020;
	font-weight: 500;
}
.bib-form__errore-segno {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: #A32020;
	color: #fff;
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.15rem;
	text-align: center;
}
.bib-form__field.is-errore .bib-form__control,
.bib-form__consent.is-errore input[type="checkbox"] {
	border: 2px solid #A32020;
	outline-offset: 2px;
}
.bib-form__group.is-errore {
	border-left: 3px solid #A32020;
	padding-left: 12px;
}

/* Riquadro reCAPTCHA: sta nel flusso del modulo come gli altri campi.
   Il widget di Google è largo 304px fissi e a 320px di schermo non ci sta.
   Non lo si fa scorrere — un contenitore che scorre va anche raggiunto da
   tastiera, e diventerebbe una tappa in più prima della casella vera
   (WCAG 2.1.1) — lo si rimpicciolisce quel poco che serve. */
.bib-form__recaptcha { margin: 16px 0; max-width: 100%; }
.bib-form__recaptcha.is-errore { border-left: 3px solid #A32020; padding-left: 12px; }

@media (max-width: 400px) {
	.bib-form__recaptcha .g-recaptcha {
		transform: scale(.85);
		transform-origin: left top;
	}
	/* La riduzione non toglie spazio da sola: l'altezza va corretta a mano,
	   o sotto resterebbe un vuoto di una ventina di pixel. */
	.bib-form__recaptcha { height: 68px; }
}

/* --- Notizie «spedite» in una pagina dal tag --- */
.bib-notizie {
	margin: 40px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--border-default, #d8dde3);
}
.bib-notizie__titolo { margin: 0 0 20px; }
.bib-notizie__tutte { margin: 20px 0 0; }