/* ================================================================
   BG — Single Progetto Template (modello "libro")
   Namespace: .bg-progetto* / .bg-caro*
   Load: condizionale su is_singular('progetto') tramite functions.php
   ================================================================ */

/* ── Layout: azzerare Astra ──────────────────────────────────── */
#primary.bg-progetto-primary {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	float: none !important;
	flex: 1 !important;
}

body.bg-progetto-page #content,
body.bg-progetto-page .site-content,
body.bg-progetto-page #content .ast-container,
body.bg-progetto-page #primary,
body.bg-progetto-page #main,
body.bg-progetto-page .ast-article-single,
body.bg-progetto-page article.bg-progetto {
	padding: 0 !important;
}

#primary.bg-progetto-primary .site-main {
	padding: 0;
	margin: 0;
}

/* Modello libro: il container Astra ha max-width 1240 centrata — va
   sbloccato perché il carosello usi tutta la larghezza della pagina. */
body.bg-progetto-has-caro #content .ast-container {
	max-width: 100% !important;
	width: 100% !important;
}

/* Astra mette margin-top: 68px su #primary: lo riduciamo per attaccare
   il carosello subito sotto la navbar e usare tutta l'altezza utile. */
body.bg-progetto-has-caro #primary.bg-progetto-primary {
	margin-top: 20px !important;
}

/* Skip-link di sistema ("Vai al contenuto"): superfluo nella modalità libro,
   dove l'intera pagina è già il contenuto. */
body.bg-progetto-page .skip-link {
	display: none !important;
}

/* ── Masthead immersivo (solo singolo progetto) ──────────────────
   Quando il masthead è in cima, dopo qualche secondo sfuma SOLO il menu
   (sezione destra), lasciando visibile il logo BRANDOGALLO (sezione
   sinistra). progetto.js arma il timer e aggiunge .bg-masthead-idle al
   body; il menu riappare quando il puntatore raggiunge la fascia superiore
   o un link riceve focus da tastiera. Solo dove esiste un puntatore con
   hover: su touch il masthead è già sostituito da #bg-mobile-nav e non
   tornerebbe. Additivo: non interferisce con #custom-sticky-header
   (gestito da custom-header.js allo scroll oltre soglia). */
@media (hover: hover) {
	/* Ricomparsa all'hover: rapida e reattiva, così il menu risponde subito. */
	body.bg-progetto-page #masthead .site-header-primary-section-right {
		transition: opacity 380ms ease-out;
		will-change: opacity;
	}
	/* Scomparsa: lenta e dolce (ease morbido), un lungo dissolvere. */
	body.bg-progetto-page.bg-masthead-idle #masthead .site-header-primary-section-right {
		opacity: 0;
		transition: opacity 1400ms cubic-bezier(0.25, 0.1, 0.25, 1);
	}
}

/* Mobile: navbar trasparente solo mentre il carosello è visibile nel viewport.
   La classe bg-caro-visible è aggiunta/rimossa da IntersectionObserver in progetto.js. */
body.bg-caro-visible #bg-mobile-nav.bg-mobile-nav--scrolled {
	background: transparent;
	pointer-events: none;
}

/* ── Article root + fade-in ──────────────────────────────────── */
.bg-progetto {
	background: transparent;
	margin: 0;
	/* Svelamento: la scena (titolo + carosello) emerge dal nero. Fade puro,
	   senza scivolamento, con un micro-ritardo che copre l'assestamento del
	   layout (slide → position: absolute, ridisegno del titolo serif). */
	animation: bg-progetto-fadein 1s cubic-bezier(0.45, 0, 0.55, 1) 80ms both;
}

@keyframes bg-progetto-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Meta anno/luogo ─────────────────────────────────────────── */
.bg-progetto-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	font-family: var(--f-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: var(--track-eyebrow-tight, 0.08em);
	text-transform: uppercase;
	color: var(--text-2);
}

.bg-progetto-meta__sep {
	opacity: 0.45;
}

/* ── Titolo ──────────────────────────────────────────────────── */
.bg-progetto-title {
	font-family: var(--f-serif);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: var(--track-hero, -0.01em);
	color: var(--text);
	margin: 0;
	text-wrap: balance;
	overflow: visible;
	padding-bottom: 0.12em;
}

/* ── Testo narrativo (base, usata dal fallback) ──────────────── */
.bg-progetto-testo p {
	font-family: var(--f-sans);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.8;
	color: rgba(240, 240, 240, 0.82);
	margin: 0 0 var(--gap-text);
	text-wrap: pretty; /* niente parola isolata sull'ultima riga del paragrafo */
}

.bg-progetto-testo p:last-child {
	margin-bottom: 0;
}

/* Link inline nel corpo — stesso comportamento di .btn-linkop (CTA "Scrivimi"):
   il colore NON cambia mai, l'unico feedback è la linea bianca 1px che cresce
   da sinistra in hover. Il ::after di .btn-linkop qui non va: un link nel corpo
   può andare a capo, quindi la linea è un background-image ripetuto su ogni
   riga (box-decoration-break: clone) e animato con background-size. */
.bg-progetto-testo a,
.bg-caro__text-body a,
.bg-progetto-testo a:hover,
.bg-progetto-testo a:focus,
.bg-progetto-testo a:focus-visible,
.bg-progetto-testo a:active,
.bg-progetto-testo a:visited,
.bg-caro__text-body a:hover,
.bg-caro__text-body a:focus,
.bg-caro__text-body a:focus-visible,
.bg-caro__text-body a:active,
.bg-caro__text-body a:visited {
	color: inherit;
	text-decoration: none;
}

.bg-progetto-testo a,
.bg-caro__text-body a {
	font-weight: 500;
	background-image: linear-gradient( var(--text, #F2F2F2), var(--text, #F2F2F2) );
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 0.08em);
	background-size: 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size var(--dur-s, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bg-progetto-testo a:hover,
.bg-progetto-testo a:focus-visible,
.bg-caro__text-body a:hover,
.bg-caro__text-body a:focus-visible {
	background-size: 100% 1px;
}

/* Touch: l'hover non esiste, quindi la linea resta sempre visibile — è l'unico
   segnale che quel pezzo di testo è un link. */
@media ( hover: none ) {
	.bg-progetto-testo a,
	.bg-caro__text-body a {
		background-size: 100% 1px;
	}
}

/* Tastiera: outline pieno come .btn-linkop:focus-visible. */
.bg-progetto-testo a:focus-visible,
.bg-caro__text-body a:focus-visible {
	outline: 2px solid var(--text, #F2F2F2);
	outline-offset: 3px;
	border-radius: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.bg-progetto-testo a,
	.bg-caro__text-body a {
		transition: none;
	}
}

/* =================================================================
   CAROSELLO "LIBRO" — pagine sfogliabili centrate
   ================================================================= */
.bg-caro {
	/* Altezza pagina: tutto deve entrare nel viewport senza tagli.
	   100svh − (navbar+margine ~110) − (didascalia/controlli ~120). */
	--caro-h: max(380px, calc(100svh - 168px));
	--caro-pad: clamp(16px, 3vw, 56px);
	--caro-page: min(820px, 100%); /* larghezza leggibile per testo/frontespizio */
	/* Tetto assoluto al lato lungo delle foto: oltre questa misura smettono di
	   ingrandirsi col viewport, così non superano la risoluzione del file servito
	   (2048px) e non si ammorbidiscono su schermi grandi. --w limita le orizzontali,
	   --h le verticali. Combinati col limite viewport via min() sui singoli img. */
	--caro-img-max-w: 1000px;
	--caro-img-max-h: 1000px;
	--caro-fade: 800ms; /* durata di UNA fase (uscita / entrata, in serie) */
	--caro-hold: 150ms; /* pausa sul nero tra le due fasi: dà il "battito di ciglia" */
	--caro-ease: cubic-bezier(0.45, 0, 0.55, 1); /* ease-in-out morbido, dissolvenza da pellicola */
	--caro-front-meta-delay: 400ms;        /* svelamento in quattro tempi: 1) il meta… */
	--caro-front-title-delay: 1150ms;      /* 2) …poi, con un respiro, il titolo… */
	--caro-front-statement-delay: 2050ms;  /* 3) …l'abstract sotto il titolo… */
	--caro-front-nav-delay: 2700ms;        /* 4) …infine la navigazione */
	position: relative;
	user-select: none;
	-webkit-user-select: none;
}

/* Modello "fade-through-black": le pagine non scorrono, si IMPILANO nello
   stesso punto (position: absolute). Il viewport dà l'altezza e il
   contesto di posizionamento. */
.bg-caro__viewport {
	position: relative;
	height: var(--caro-h);
	overflow: hidden;
}

.bg-caro__track {
	position: relative;
	height: 100%;
	touch-action: pan-y pinch-zoom; /* swipe orizzontale al JS, scroll verticale e pinch-to-zoom al browser */
}

/* Vista zoomata: abilita il pan orizzontale nativo per muoversi nella pagina ingrandita. */
.bg-caro.is-zoomed .bg-caro__track {
	touch-action: pan-x pan-y pinch-zoom;
}

/* Ogni slide = una pagina sovrapposta, contenuto centrato. Solo l'attiva è
   visibile. Stacco a due fasi:
   — uscita: l'attiva esce, opacity 1→0 senza delay (sfuma a nero);
   — entrata: la nuova entra con transition-delay = --caro-fade, così la sua
     opacity 0→1 parte SOLO dopo che la precedente è sparita.
   visibility evita che le pagine spente intercettino il puntatore. */
.bg-caro__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0 var(--caro-pad);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--caro-fade) var(--caro-ease),
	            visibility 0s linear var(--caro-fade);
}

.bg-caro__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
	transition: opacity var(--caro-fade) var(--caro-ease) calc(var(--caro-fade) + var(--caro-hold)),
	            visibility 0s;
}

/* ── Pagina di testo/frontespizio ────────────────────────────── */
.bg-caro__page {
	width: var(--caro-page);
	max-height: 100%;
	margin: 0 auto;
}

/* Frontespizio: meta + titolo, centrati come apertura di capitolo */
.bg-caro__front {
	text-align: center;
}

/* Svelamento in cascata: il meta affiora per primo, il titolo lo segue dopo
   un respiro. Riusa il keyframe del fade globale (solo opacity). */
.bg-caro__front .bg-progetto-meta {
	justify-content: center;
	margin: 0 0 24px;
	animation: bg-progetto-fadein 0.8s var(--caro-ease) var(--caro-front-meta-delay) both;
}

.bg-caro__front .bg-progetto-title {
	font-size: clamp(3rem, 6vw, 6rem);
	max-width: 14ch;
	margin: 0 auto;
	animation: bg-progetto-fadein 2.2s var(--caro-ease) var(--caro-front-title-delay) both;
}

/* Abstract sotto il titolo: ponte tra titolo e racconto. Quarto tempo.
   Registro .body-lead canonico: Lora italic 400, 1.2rem, lh 1.65, bianco. */
.bg-caro__front .bg-progetto-statement {
	max-width: 42ch;
	margin: 1.6rem auto 0;
	font-family: var(--f-serif);
	font-style: italic;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: var(--track-normal, 0);
	color: var(--text);
	text-wrap: balance;
	font-synthesis: none;
	animation: bg-progetto-fadein 1.2s var(--caro-ease) var(--caro-front-statement-delay) both;
}

/* Pagina testo: due colonne giornalistiche */
.bg-caro__slide--text .bg-progetto-testo {
	column-count: 2;
	column-gap: clamp(32px, 4vw, 64px);
	overflow: hidden;
}

.bg-caro__slide--text .bg-progetto-testo p {
	font-size: var(--size-body);
	line-height: 1.7;
	margin: 0 0 1rem;
}

/* ── Pagina citazione (a metà racconto) ──────────────────────── */
.bg-caro__quote {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* Scope .bg-caro: vince su `body.single blockquote` (custom-style.css) che
   imporrebbe la barra a sinistra. Registro lead: Lora italic, sobrio. */
.bg-caro .bg-progetto-quote {
	max-width: 32ch;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--f-serif);
	font-weight: 400;
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.5;
	letter-spacing: var(--track-normal, 0);
	color: var(--text);
	text-align: center;
	text-wrap: balance;
	font-synthesis: none;
}

/* ── Composizione: blocchi affiancati (Foto / Griglia) ───────── */
/* Linea di terra comune via subgrid a due righe: riga 1 = immagini (appoggiate
   al fondo, stessa base per foto e griglia), riga 2 = didascalie che pendono
   sotto in modo indipendente (altezza uniforme = la didascalia più alta). Così
   la griglia non supera mai le foto né mangia la propria didascalia.
   grid-template-columns è scritto inline dal template (foto 1fr · griglia 1.4fr). */
.bg-caro__slide--compo .bg-compo {
	display: grid;
	grid-template-rows: auto auto;
	align-items: end;
	--compo-gap: clamp(12px, 2vw, 32px);
	column-gap: var(--compo-gap);
	row-gap: clamp(0.8rem, 1.5vw, 1.25rem);
	width: 100%;
	max-width: 1500px;
	max-height: 100%;
	margin: 0 auto;
	/* Galleria giustificata ad ALTEZZA COMUNE: --row-h = il MINIMO fra
	   • budget d'altezza: viewport meno la riserva didascalia (~96px);
	   • budget di larghezza: spazio orizzontale (prudente: 90vw, max 1500) meno i
	     gap, diviso la somma delle proporzioni dei blocchi (--ar-sum-compo dal PHP);
	   • tetto assoluto (--caro-img-max-h).
	   Foto e griglie usano tutte questa altezza → fondi e cime allineati, senza
	   feedback né misura JS (modello stabile, sostituisce measureCompo). */
	--row-h: min(
		calc(var(--caro-h) - 96px),
		calc((min(1500px, 90vw) - (var(--compo-n, 2) - 1) * var(--compo-gap)) / var(--ar-sum-compo, 3)),
		var(--caro-img-max-h)
	);
}

/* Ogni blocco eredita le due righe della madre (subgrid): l'immagine si appoggia
   al fondo della riga 1, la didascalia cade nella riga 2. */
.bg-caro__slide--compo .bg-compo > .bg-compo__cell {
	display: grid;
	grid-row: 1 / span 2;
	grid-template-rows: subgrid;
	align-items: end;
	justify-items: start;
	min-width: 0;
	min-height: 0;
}

/* Blocco Foto: la cella si stringe sulla foto (fit-content) ed è centrata nella
   colonna; .bg-compo__print sparisce (display:contents) così immagine e
   didascalia diventano i due item della subgrid e la didascalia parte dal bordo
   sinistro reale dell'immagine. */
.bg-caro__slide--compo .bg-compo__foto {
	justify-self: center;
	width: fit-content;
	max-width: 100%;
}

.bg-caro__slide--compo .bg-compo__print {
	display: contents;
}

.bg-compo__img {
	display: block;
	align-self: end;
	width: auto;
	/* Altezza comune della galleria giustificata (definita su .bg-compo): la
	   larghezza segue per proporzione → tutte le foto sulla stessa linea di terra. */
	height: var(--row-h);
	max-width: 100%;
	object-fit: contain;
	border-radius: var(--radius-img);
	margin: 0;
}

/* Blocco Griglia: la cella si stringe sul contenuto (fit-content) → la
   didascalia (riga 2, min-width:100%) eredita la larghezza REALE della griglia e
   ne segue il bordo sinistro. La griglia eguaglia l'altezza della foto più alta
   (misurata dal JS in --compo-img-h) e appoggia sullo stesso fondo. */
.bg-caro__slide--compo .bg-compo__griglia-wrap {
	justify-self: center;
	width: fit-content;
	max-width: 100%;
}

.bg-compo__griglia {
	display: grid;
	grid-template-columns: repeat(var(--gcols, 3), 1fr);
	grid-auto-rows: 1fr;
	gap: 8px; /* spazio fisso tra colonne e righe */
}

/* Desktop: galleria GIUSTIFICATA PER ALTEZZA — righe ad altezza fissa (= foto),
   colonne `auto` dimensionate sull'immagine (larghezza per proporzione), box a
   larghezza variabile che abbraccia il contenuto. */
.bg-caro__slide--compo .bg-compo__griglia {
	grid-template-columns: repeat(var(--gcols, 3), auto);
	align-self: end;
	justify-content: start;
	min-height: 0;
	width: fit-content;
	max-width: 100%;
	/* Altezza comune della galleria giustificata (= foto): stessa linea di terra. */
	height: var(--row-h);
	overflow: hidden; /* rete di sicurezza: niente sbordo sotto, mai sulla didascalia */
}

/* Miniature a proporzioni originali: mai ritagliate. min-height/min-width: 0 →
   le righe/colonne possono dimensionarle senza che il min-content le faccia
   sbordare sotto, sulla didascalia. */
.bg-compo__gimg {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	border-radius: calc(var(--radius-img) * 0.6);
}

/* Desktop: l'altezza è fissa (= riga), la larghezza segue l'aspect → la colonna
   `auto` si dimensiona sull'immagine. Niente object-fit: l'<img> è già a
   proporzioni naturali. */
.bg-caro__slide--compo .bg-compo__gimg {
	width: auto;
	height: 100%;
	object-fit: fill;
}

/* Didascalia (FIGURE.md): riga 2 della subgrid, sigillo a barra. width:0 +
   min-width:100% → mai più larga della cella (= larghezza immagine/griglia).
   Scope .bg-caro per vincere su `body.single figcaption` (custom-style.css). */
.bg-caro .bg-compo__cap {
	display: block;
	width: 0;
	min-width: 100%;
	margin: 0;
	padding-inline-start: 16px;
	border-inline-start: 1px solid var(--border-hover);
	font-family: var(--f-sans);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--text-3);
	text-align: left;
	font-synthesis: none;
}

/* Desktop: la didascalia parte dall'ALTO della riga 2 (la riga è alta quanto la
   didascalia più lunga) → tutte le caption iniziano sulla stessa linea, anche se
   con un numero di righe diverso. */
.bg-caro__slide--compo .bg-compo__cap {
	align-self: start;
}

/* Mobile: ogni blocco diventa una pagina sfogliabile. Il JS collassa la madre
   e inserisce i blocchi (la griglia resta un blocco unico). */
.bg-caro__slide.is-compo-collapsed,
.bg-caro__slide.is-model-collapsed {
	display: none;
}

/* 3D + testo su mobile: la madre (colonna) è collassata e sostituita via JS da
   due slide separate — prima il testo (--mtpart-text), poi il 3D (--mtpart-model).
   Il model fuori dalla grid --mt ha bisogno di un'altezza esplicita; il testo
   torna a flusso normale (niente max-height/scroll della colonna desktop). */
.bg-caro__slide--mtpart-model .bg-caro__mt-media {
	position: relative;
	width: 100%;
	height: var(--caro-h);
	overflow: hidden;
}

.bg-caro__slide--mtpart-model .bg-caro__model {
	height: 100%;
	width: 100%;
}

/* Caption in overlay in basso (come la slide 3D senza testo):
   evita che sfori sotto il viewport nella zona delle frecce.
   Il gradiente sta nel ::before per non allungare la linea del sigillo editoriale. */
.bg-caro__slide--mtpart-model .bg-caro__caption {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	margin: 0;
	padding: 0 var(--caro-pad);
	/* pointer-events:auto (default) — i touch sulla cap bubblinano al track
	   per lo swipe, senza passare al model-viewer che controlla l'orbita */
}
.bg-caro__slide--mtpart-model .bg-caro__caption::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 250%;
	background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 45%, transparent 100%);
	z-index: -1;
	pointer-events: none;
}

.bg-caro__slide--mtpart-text .bg-caro__mt-text {
	width: 100%;
	max-height: none;
	overflow: visible;
}

.bg-compo--part {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-height: 100%;
	margin: 0;
}

/* Foto mobile: la cella centra la "stampa" (display:table, fit-content, già
   definita sopra) che si dimensiona sulla foto; la didascalia (table-caption)
   eredita la larghezza dell'immagine e ne segue il bordo sinistro. */
.bg-compo--part .bg-compo__foto {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* Mobile: la "stampa" ha una larghezza CALCOLATA dalla proporzione della foto
   (--f-ar, scritta dal PHP sulla cella) — il più largo box con quel rapporto
   che entra anche in altezza, stessa formula della foto singola (--s-ar).
   Immagine e didascalia la riempiono, quindi la didascalia resta allineata al
   bordo sinistro dell'immagine senza doverne misurare la resa.
   Prima era `display:table` + `width:fit-content` con la caption in
   `table-caption`: la larghezza dipendeva dall'immagine renderizzata, e finché
   la foto non era caricata la table restava larga 0 → didascalia impilata una
   lettera per riga. (Una table, oltretutto, cresce col min-content del
   contenuto e non rispetta max-width.) Su desktop .bg-compo__print è contents. */
.bg-compo--part .bg-compo__print {
	display: block;
	width: min(100%, calc((var(--caro-h) - 40px) * var(--f-ar, 0.75)));
	margin: 0 auto;
}

.bg-compo--part .bg-compo__img {
	display: block;
	width: 100%;
	height: auto;
	/* Spazio riservato prima del caricamento: niente salto di layout. */
	aspect-ratio: var(--f-ar, 0.75);
	max-height: calc(var(--caro-h) - 40px);
	object-fit: contain;
	margin: 0;
}

/* La stampa non è più una table: la didascalia è un blocco normale e riempie
   la larghezza già definita dal contenitore. */
.bg-caro .bg-compo--part .bg-compo__cap {
	display: block;
	width: auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.bg-compo--part .bg-compo__griglia-wrap {
	justify-self: auto;
	align-self: auto;
	width: auto;
	max-width: 100%;
}

.bg-compo--part .bg-compo__griglia {
	flex: none; /* su mobile la griglia è sola: righe fisse, niente stiramento */
	/* Galleria GIUSTIFICATA PER ALTEZZA, come su desktop: --row-h-mob è il minimo
	   fra il budget verticale (altezza utile / righe) e quello orizzontale
	   (larghezza schermo / (colonne · proporzione)); la colonna ne deriva per
	   proporzione. Il PHP scrive --gcols-mob (colonne cappate a 2: su 390px tre
	   miniature starebbero in ~100px), --grows-mob (righe che ne risultano) e
	   --ar-grid (proporzione più stretta del blocco).
	   Prima: colonne 1fr e righe fisse a un terzo dell'altezza, qualunque fosse
	   il numero di foto — con 4 foto restava un vuoto in fondo alla pagina, con
	   5 la didascalia finiva incollata al contatore. */
	--row-h-mob: min(
		(var(--caro-h) - 70px - (var(--grows-mob, 3) - 1) * 10px) / var(--grows-mob, 3),
		(100vw - 42px - (var(--gcols-mob, 2) - 1) * 10px) / (var(--gcols-mob, 2) * var(--ar-grid, 0.75))
	);
	grid-template-columns: repeat(var(--gcols-mob, 2), calc(var(--row-h-mob) * var(--ar-grid, 0.75)));
	grid-auto-rows: var(--row-h-mob);
	gap: 10px;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	max-height: 100%;
}

/* Didascalia della griglia su mobile: blocco (il wrapper non è più table). */
.bg-caro .bg-compo--part .bg-compo__griglia-wrap .bg-compo__cap {
	display: block;
	width: auto;
	min-width: 0;
}

.bg-compo--part .bg-compo__cap {
	margin-top: 1rem;
}

/* ── Tavole multi-immagine: dittico · trittico · griglia ─────── */
/* Desktop: celle affiancate su DUE righe di griglia — riga 1 le foto, riga 2 le
   didascalie. Ogni cella eredita le due righe (subgrid) e appoggia l'immagine al
   fondo della riga 1: così le foto poggiano su una linea di terra comune e le
   didascalie pendono sotto in modo indipendente, sempre, con o senza caption.
   Mobile: il JS separa ogni cella in una slide (la madre .bg-tavola è nascosta). */
.bg-caro__slide--tavola .bg-tavola {
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: end;
	justify-items: center;
	column-gap: clamp(12px, 2vw, 32px);
	row-gap: 1.25rem;
	width: 100%;
	max-width: 1680px;
	max-height: 100%;
	margin: 0 auto;
}

.bg-tavola--dittico  { grid-template-columns: repeat(2, 1fr); }
.bg-tavola--trittico { grid-template-columns: repeat(3, 1fr); }
/* Griglia → galleria giustificata: regole più sotto (.bg-tavola--griglia). */

/* Dittico/Trittico: foto più ravvicinate (override scoped). Colonne dimensionate
   sulla foto (auto, non 1fr) per togliere l'aria di centratura, blocco centrato.
   Il dittico tiene un gap più ampio del trittico (due foto, più respiro). */
.bg-tavola--dittico,
.bg-tavola--trittico {
	justify-content: center;
}

.bg-caro__slide--tavola .bg-tavola--dittico  { grid-template-columns: repeat(2, auto); column-gap: clamp(48px, 9vw, 160px); }
.bg-caro__slide--tavola .bg-tavola--trittico { grid-template-columns: repeat(3, auto); column-gap: clamp(8px, 1.1vw, 18px); }

/* Dittico/Trittico — orientamento manuale (classe dal template, da $tav['orient']). */
/* Orizzontale: blocco ampio → foto più grandi, ben distanziate. */
.bg-caro__slide--tavola .bg-tavola--dittico.bg-tavola--orizz,
.bg-caro__slide--tavola .bg-tavola--trittico.bg-tavola--orizz {
	max-width: min(1620px, 94%);
	column-gap: clamp(56px, 6vw, 120px);
}
/* Verticale (solo dittico): colonne più vicine. Il trittico verticale ha una
   resa propria più sotto (didascalie SOTTO le foto, non a lato). */
.bg-caro__slide--tavola .bg-tavola--dittico.bg-tavola--vert {
	column-gap: clamp(40px, 5vw, 100px);
}

/* Cella desktop: occupa entrambe le righe e le eredita (subgrid). La cella si
   dimensiona sulla foto (fit-content) e tiene i contenuti a sinistra, così la
   didascalia parte dal bordo sinistro dell'immagine — come la foto singola. */
.bg-caro__slide--tavola .bg-tavola > .bg-tavola__cell {
	display: grid;
	grid-row: 1 / span 2;
	grid-template-rows: subgrid;
	align-items: end;
	justify-items: start;
	justify-self: center;
	width: fit-content;
	max-width: 100%;
	min-height: 0;
}

.bg-tavola__frame {
	display: block;
	min-height: 0;
}

.bg-tavola__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, var(--caro-img-max-w));
	max-height: min(calc(var(--caro-h) - 96px), var(--caro-img-max-h));
	object-fit: contain;
	border-radius: var(--radius-img);
	margin: 0;
}

/* ── Griglia: righe a stessa altezza, foto intere ────────────── */
/* Ogni foto ha la STESSA altezza di riga (--row-h); la larghezza segue la
   proporzione (foto mai tagliate). Le righe sono allineate a sinistra e il
   blocco si restringe al contenuto (width: fit-content) ed è centrato nella
   slide: così il bordo sinistro delle foto a sx è una linea sola, a cui si
   allinea anche la didascalia generale. Colonne/righe scelte nell'editor. */
.bg-caro__slide--tavola .bg-tavola--griglia {
	display: flex;
	flex-direction: row;          /* [blocco righe] | [didascalia generale] */
	align-items: flex-end;        /* didascalia allineata al fondo della griglia */
	justify-content: center;
	column-gap: clamp(18px, 2vw, 32px);
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	/* Altezza di riga = il MINIMO fra:
	   • budget d'altezza: altezza utile − didascalie per-foto sotto (~34px/riga), /righe;
	   • budget di larghezza: spazio orizzontale per le foto (~70vw, lasciando posto
	     alla didascalia generale) diviso la somma delle proporzioni della riga più larga.
	   Così le foto sono il più grandi possibile senza sforare in nessuna direzione. */
	--row-h: min(
		calc((var(--caro-h) - var(--grows, 2) * 34px) / var(--grows, 2)),
		calc((74vw - (var(--gcols, 3) - 1) * 12px) / var(--ar-sum-max, 4.5))
	);
}

.bg-tavola--griglia .bg-tavola__rows {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: clamp(6px, 0.8vw, 12px);
}

.bg-tavola--griglia .bg-tavola__row {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	column-gap: clamp(6px, 0.8vw, 12px);
	max-width: 100%;
}

.bg-tavola--griglia .bg-tavola__cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 0 auto;
	min-width: 0;
}

.bg-tavola--griglia .bg-tavola__frame { display: block; }

.bg-tavola--griglia .bg-tavola__img {
	display: block;
	height: var(--row-h);
	width: auto;
	max-width: 100%;
	max-height: none;
	border-radius: 0; /* foto interne squadrate */
}

/* Solo i quattro angoli ESTERNI del blocco griglia restano arrotondati.
   :last-of-type (non :last-child) perché l'ultimo figlio del blocco è la
   <figcaption> della didascalia generale, non l'ultima riga. */
.bg-tavola--griglia .bg-tavola__row:first-of-type .bg-tavola__cell:first-child .bg-tavola__img { border-top-left-radius: var(--radius-img); }
.bg-tavola--griglia .bg-tavola__row:first-of-type .bg-tavola__cell:last-child  .bg-tavola__img { border-top-right-radius: var(--radius-img); }
.bg-tavola--griglia .bg-tavola__row:last-of-type  .bg-tavola__cell:first-child .bg-tavola__img { border-bottom-left-radius: var(--radius-img); }
.bg-tavola--griglia .bg-tavola__row:last-of-type  .bg-tavola__cell:last-child  .bg-tavola__img { border-bottom-right-radius: var(--radius-img); }

/* ── Griglia di SOLE foto verticali ──────────────────────────────
   La didascalia va a DESTRA di ogni foto (come il dittico): la riga non cresce
   in altezza, così le verticali diventano più grandi. Niente didascalia sotto →
   il budget d'altezza non perde spazio; il budget di larghezza, però, deve
   includere la colonna di testo di OGNI foto. */
.bg-caro__slide--tavola .bg-tavola--griglia--vert {
	--row-h: min(
		calc((var(--caro-h) - (var(--grows, 2) - 1) * 12px) / var(--grows, 2)),
		calc((74vw - var(--gcols, 3) * 13vw - var(--gcols, 3) * 14px) / var(--ar-sum-max, 2))
	);
}

.bg-tavola--griglia .bg-tavola__cell--vert {
	flex-direction: row;
	align-items: flex-end;
	gap: 14px;
}

.bg-tavola--griglia .bg-tavola__cell--vert .bg-tavola__frame { flex: 0 0 auto; }

/* Didascalia a destra: torna il sigillo a barra (come dittico), larghezza fissa,
   allineata al fondo della foto. */
.bg-caro .bg-tavola--griglia .bg-tavola__cell--vert .bg-tavola__cap {
	flex: 0 1 auto;
	width: clamp(130px, 13vw, 210px);
	margin-top: 0;
	align-self: flex-end;
	padding-inline-start: 14px;
	border-inline-start: 1px solid var(--border-hover);
}

/* Didascalia per-foto nella griglia: registro minimale — più piccola e SENZA
   barra, allineata al bordo sinistro della foto (override dello scope condiviso). */
.bg-caro .bg-tavola--griglia .bg-tavola__cap {
	padding-inline-start: 0;
	border-inline-start: 0;
	font-size: 0.68rem;
	margin-top: 0.6rem;
}

/* Didascalia generale della griglia: ricca a tre righe (titolo · descrizione ·
   anno·luogo), A DESTRA del blocco griglia (colonna laterale), CON sigillo a
   barra, allineata al fondo. È un figlio flex della figure in riga. */
.bg-caro .bg-tavola--griglia .bg-tavola__cap-gen {
	display: block;
	flex: 0 0 auto;
	align-self: flex-end;
	width: clamp(150px, 16vw, 240px);
	max-width: 100%;
	margin: 0;
	padding-inline-start: 16px;
	border-inline-start: 1px solid var(--border-hover);
	font-family: var(--f-sans);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--text-3);
	text-align: left;
	font-synthesis: none;
}

/* Didascalia per-foto: stesso registro della foto singola — Manrope, sigillo a
   barra, allineata al bordo sinistro dell'immagine. Le righe (titolo grassetto ·
   descrizione · anno·luogo) sono rese dagli span .bg-caro__cap-* condivisi. */
.bg-caro .bg-tavola__cap {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding-inline-start: 16px;
	border-inline-start: 1px solid var(--border-hover);
	font-family: var(--f-sans);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--text-3);
	text-align: left;
	font-synthesis: none;
}

/* Didascalia mai più larga della foto: width:0 + min-width:100% impedisce alla
   cap di espandere la cella fit-content; si avvolge alla larghezza dell'immagine
   (critico per le foto verticali, strette — la cap non deve mai sforare). */
.bg-caro .bg-tavola--dittico .bg-tavola__cap,
.bg-caro .bg-tavola--trittico .bg-tavola__cap {
	width: 0;
	min-width: 100%;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Dittico verticale: foto grandi che riempiono l'altezza utile della slide.
   max-height ≤ --caro-h (altezza del viewport del carosello) → mai tagliate.
   Container più ampio per accogliere le due foto alte affiancate + cap a lato. */
.bg-caro__slide--tavola .bg-tavola--dittico.bg-tavola--vert {
	max-width: min(1880px, 96%);
	--vert-cap-w: 12rem; /* colonna didascalia a larghezza fissa (≈24 caratteri):
	   rende deterministico lo shift di centratura qui sotto */
}
.bg-caro .bg-tavola--dittico.bg-tavola--vert .bg-tavola__img {
	max-height: calc(var(--caro-h) - 16px);
}

/* Centratura OTTICA delle foto: il blocco (foto + cap a lato) è centrato, ma le
   FOTO cadono a sinistra perché ogni didascalia sta a destra della sua foto.
   Sposto il blocco a destra di mezza colonna-didascalia → le due foto risultano
   centrate nella vista, le cap pendono a destra. Solo ≥1280px: sotto, il JS
   separa ogni cella in una slide singola (questo layout affiancato non esiste). */
@media (min-width: 1280px) {
	.bg-caro__slide--tavola .bg-tavola--dittico.bg-tavola--vert {
		transform: translateX(calc((var(--vert-cap-w) + 18px) / 2));
	}
}

/* Dittico verticale: didascalia A LATO della foto (a destra), allineata in
   basso. La cella passa da impilata (foto sopra / cap sotto) ad affiancata. */
.bg-caro__slide--tavola .bg-tavola--dittico.bg-tavola--vert > .bg-tavola__cell {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 18px;
}
/* Cap a lato: testo a bandiera sinistra, sigillo a barra a sinistra (come il
   default), larghezza propria limitata — non più vincolata alla foto. */
.bg-caro .bg-tavola--dittico.bg-tavola--vert .bg-tavola__cap {
	width: var(--vert-cap-w);
	min-width: 0;
	max-width: var(--vert-cap-w);
	flex: 0 0 auto;
	text-align: left;
	padding-inline-start: 16px;
	padding-inline-end: 0;
	border-inline-start: 1px solid var(--border-hover);
	border-inline-end: 0;
	margin-bottom: 0.25rem;
}

/* ── Trittico verticale: didascalie SOTTO le foto, foto al massimo ──────
   A differenza del dittico verticale (didascalia a lato), qui le tre foto non
   spartiscono la larghezza con tre colonne di testo: la cella resta impilata
   (foto sopra · cap sotto, dalle regole base) e le foto usano quasi tutta la
   larghezza → diventano vincolate dall'altezza (grandi). Container a piena
   larghezza, gap stretti → foto più larghe possibile; niente shift ottico. */
.bg-caro__slide--tavola .bg-tavola--trittico.bg-tavola--vert {
	max-width: min(1980px, 98%);
	column-gap: clamp(16px, 2vw, 36px);
}

/* Cella clonata su mobile (.bg-compo--part): niente subgrid, colonna a sinistra
   dimensionata sulla foto così la didascalia ne segue il bordo sinistro. */
.bg-compo--part .bg-tavola__cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
}

.bg-compo--part .bg-tavola__img {
	max-height: calc(var(--caro-h) - 80px);
}

.bg-compo--part .bg-tavola__cap {
	margin-top: 1.25rem;
	overflow-wrap: anywhere;
}

/* ── Pagina foto ─────────────────────────────────────────────── */
/* display: table → la "stampa" si dimensiona sulla foto; la didascalia
   (table-caption) eredita esattamente la larghezza dell'immagine, così
   resta allineata al bordo sinistro e va a capo senza mai sforare. */
.bg-caro__inner {
	display: table;
	margin: 0 auto;
	/* Tetto al lato lungo orizzontale: sul CONTENITORE (non sull'img), così la
	   "stampa" si restringe col cap e resta centrata da margin auto + flex slide.
	   Cappare l'img dentro la table la lascerebbe appoggiata a sinistra. */
	max-width: min(100%, var(--caro-img-max-w));
}

.bg-caro__frame {
	display: block;
}

/* Foto nuda, mai ritagliata: grande quanto la pagina consente. La riserva sotto
   la foto è DINAMICA: progetto.js misura l'altezza reale della didascalia e la
   scrive in --cap-reserve sull'.bg-caro__inner. Didascalia corta → foto più grande;
   nessun JS → fallback 100px (caso peggiore: didascalia ricca su 3-4 righe). */
.bg-caro__frame img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(var(--caro-h) - var(--cap-reserve, 100px));
	object-fit: contain;
	border-radius: var(--radius-img);
	pointer-events: none; /* il drag lo gestisce il track */
}

/* Consuma il token .bg-figcaption (FIGURE.md): Manrope dati, tondo,
   --text-3 sigillo, rule 1px --text-2, gap fissi 1.25rem (eredità WP).
   Scope .bg-caro per vincere su `body.single figcaption` (custom-style.css). */
.bg-caro .bg-caro__caption {
	display: table-caption;
	caption-side: bottom;
	margin-top: 1.25rem;
	padding-inline-start: 16px;
	border-inline-start: 1px solid var(--border-hover);
	font-family: var(--f-sans);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--text-3);
	text-align: left;
	font-synthesis: none; /* mai italic sintetico su Manrope */
}

/* ── Foto singola VERTICALE: didascalia a lato (a destra) ──────────
   Stesso schema del dittico verticale. La figure passa da table (foto
   sopra / cap sotto) a flex row: foto a piena altezza a sinistra,
   didascalia a destra allineata al fondo. La foto non riserva più spazio
   sotto per la cap → riempie l'altezza utile (caro-h − 16px). Il modifier
   .bg-caro__inner--vert lo mette single-progetto.php quando ar < 0.95. */
/* Griglia simmetrica 1fr · foto · 1fr: la foto (colonna auto centrale) resta
   al CENTRO dello schermo; la didascalia vive nella colonna destra e la colonna
   sinistra vuota la bilancia. minmax(0,1fr) impedisce alla cap di allargare la
   sua colonna e sfasare il centro. */
.bg-caro__slide--photo .bg-caro__inner--vert {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	gap: 18px;
	width: 100%;
	max-width: min(1880px, 96%);
}

.bg-caro__inner--vert .bg-caro__frame {
	grid-column: 2;
}

.bg-caro__inner--vert .bg-caro__frame img {
	max-height: min(calc(var(--caro-h) - 16px), var(--caro-img-max-h));
}

/* Cap nella colonna destra: larghezza propria limitata (32ch), allineata a
   sinistra della sua colonna e al fondo della foto, sigillo a barra ereditato. */
.bg-caro .bg-caro__inner--vert .bg-caro__caption {
	grid-column: 3;
	justify-self: start;
	align-self: end;
	display: block;
	width: auto;
	min-width: 0;
	max-width: 32ch;
	margin: 0 0 0.25rem;
	overflow-wrap: anywhere;
}

/* ── Pagina modello 3D (<model-viewer>) ──────────────────────────
   model-viewer non si auto-dimensiona sul contenuto come <img>: gli
   serve un box con altezza esplicita. Riempie la pagina lasciando
   spazio alla didascalia, come la foto singola. */
/* Full-width: il 3D usa tutta la larghezza dello schermo (no limite --caro-page,
   no padding laterale dello slide). Navbar sopra e didascalia sotto restano. */
.bg-caro__slide--model {
	padding-inline: 0;
}

.bg-caro__slide--model .bg-caro__inner:not(.bg-caro__inner--mt) {
	position: relative; /* contesto per la didascalia in overlay */
	display: block;
	height: var(--caro-h);
	width: 100%;
	max-width: 100%;
}

.bg-caro__model {
	display: block;
	width: 100%;
	height: 100%; /* il modello riempie tutto il box; la didascalia gli sta sopra in overlay */
	background-color: transparent;
	--poster-color: transparent;
	border-radius: var(--radius-img);
	touch-action: none; /* tutti i gesti vanno all'orbita del modello */
	cursor: grab;
}

.bg-caro__model:active {
	cursor: grabbing;
}

/* In modalità due colonne (3D + testo) il model NON è fullscreen: gli serve
   un'altezza esplicita nella colonna media, altrimenti height:100% lo
   farebbe collassare a 0 (la grid non gli dà un'altezza di riferimento). */
.bg-caro__inner--mt .bg-caro__model {
	height: var(--caro-h);
}

/* La didascalia non eredita più il table-caption della foto: blocco normale. */
.bg-caro__slide--model .bg-caro__caption,
.bg-caro__slide--video .bg-caro__caption,
.bg-caro__slide--pano .bg-caro__caption,
.bg-caro__slide--mappa .bg-caro__caption,
.bg-caro__slide--confronto .bg-caro__caption {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* Didascalia 3D: centrata e in overlay sul fondo del modello, su un gradiente
   nero→trasparente per la leggibilità. pointer-events:none → i gesti (orbita,
   drag) passano al modello sotto. Resta dentro il viewport: non copre i
   controlli < / > che stanno sotto. */
.bg-caro__slide--model:not(:has(.bg-caro__inner--mt)) .bg-caro__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	margin: 0;
	padding: 0 var(--caro-pad);
	border-inline-start: none;
	text-align: center;
	pointer-events: none;
}
.bg-caro__slide--model:not(:has(.bg-caro__inner--mt)) .bg-caro__caption::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 250%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 100%);
	z-index: -1;
	pointer-events: none;
}

/* 3D a tutto schermo: la slide 3D si estende oltre il riquadro del viewport ma
   resta ANCORATA al viewport (position:absolute), così scorre con la pagina
   come le altre tavole — niente più modello "incollato" allo schermo. Il top
   negativo (= offset del viewport dal bordo finestra) la porta su fino al bordo
   superiore, dietro la navbar (sfondo trasparente + z-index basso → la navbar
   resta sopra); l'altezza la spinge giù fin poco sopra le frecce, che restano
   nel flusso a 6px dal fondo. Sempre absolute (non solo da attiva) → resta a
   pieno schermo anche durante il fade-out (da inattiva è opacity:0/hidden).
   Richiede overflow:visible sul viewport (regola sotto), che altrimenti
   taglierebbe la parte sbordante. --bg-3d-top: offset desktop, mobile più giù. */
.bg-caro__slide--model:not(:has(.bg-caro__inner--mt)) {
	position: absolute;
	top: calc(-1 * var(--bg-3d-top, 100px));
	left: 0;
	right: 0;
	height: calc(100svh - 46px); /* bordo finestra → striscia sottile per le frecce */
	z-index: 1;
}

/* Il viewport non deve ritagliare la slide 3D che sborda. Si applica solo ai
   progetti che hanno almeno una tavola 3D; le altre slide sono comunque
   inset:0 + visibility:hidden, quindi non sbordano. */
.bg-caro__viewport:has(.bg-caro__slide--model) {
	overflow: visible;
}

.bg-caro__slide--model .bg-caro__inner:not(.bg-caro__inner--mt) {
	height: 100%; /* riempie la slide a tutto schermo, non più --caro-h fissa */
}

/* Mobile: 3D singolo = stesso layout del 3D+testo per continuità visiva.
   Su mobile il 3D+testo viene collassato dal JS in due slide separate
   (--mtpart-text e --mtpart-model); il --mtpart-model ha height:var(--caro-h)
   e la didascalia in overlay. Uniformiamo il 3D singolo (senza testo) allo
   stesso layout: contenuto nel viewport del carosello, non a tutto schermo.
   NOTA: deve venire DOPO le regole desktop per sovrascriverle su mobile. */
@media (max-width: 1023px) {
	/* Slide: rimuove l'offset negativo e l'altezza a tutto schermo */
	.bg-caro__slide--model:not(:has(.bg-caro__inner--mt)) {
		top: 0;
		height: var(--caro-h);
	}
	/* Ripristina il padding della slide 3D singolo su mobile per uniformare
	   le distanze della didascalia al 3D+testo (--mtpart-model). */
	.bg-caro__slide--model:not(:has(.bg-caro__inner--mt)) {
		padding-inline: var(--caro-pad);
	}
	/* Inner: stessa altezza del container 3D+testo */
	.bg-caro__slide--model:not(:has(.bg-caro__inner--mt)) .bg-caro__inner {
		height: var(--caro-h);
	}
	/* Didascalia 3D singolo: identica al 3D+testo (--mtpart-model).
	   Copia tutte le proprietà per garantire lo stesso stile e posizionamento.
	   Le proprietà text-align, border-inline-start e pointer-events devono
	   essere dichiarate esplicitamente per sovrascrivere i valori desktop
	   (text-align:center, border-inline-start:none, pointer-events:none).
	   padding-inline-start: 16px uniforma lo spazio tra testo e sigillo a barra
	   con il 3D+testo (entrambi ereditano dal base .bg-caro .bg-caro__caption). */
	.bg-caro__slide--model:not(:has(.bg-caro__inner--mt)) .bg-caro__caption {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 1.25rem;
		margin: 0;
		padding: 0 var(--caro-pad);
		padding-inline-start: 16px;
		text-align: left;
		pointer-events: auto;
		border-inline-start: 1px solid var(--border-hover);
	}
	/* 3D più alto su mobile: aumenta l'altezza del modello per centrarlo meglio.
       Si applica sia al 3D singolo che al 3D+testo (entrambi usano .bg-caro__model). */
	.bg-caro__slide--model .bg-caro__model,
	.bg-caro__slide--mtpart-model .bg-caro__model {
		height: calc(100lvh - 100px);
	}
	.bg-caro__slide--model:not(:has(.bg-caro__inner--mt)) .bg-caro__inner,
	.bg-caro__slide--mtpart-model .bg-caro__mt-media {
		height: calc(100lvh - 100px);
	}
	/* UX mobile: riduce l'area del modello 3D per lasciare spazio ai lati
	   dove lo swipe passa al carosello. Senza questo, il model-viewer cattura
	   tutti i touch (touch-action:none) e rende difficile sfogliare le tavole. */
	.bg-caro__slide--model .bg-caro__model,
	.bg-caro__slide--mtpart-model .bg-caro__model {
		width: calc(100% - 60px);
		margin: 0 auto;
	}
}

/* Didascalia ricca: titolo (forte) · descrizione · riga meta (anno · luogo).
   I tre pezzi vanno su righe distinte all'interno del figcaption. */
.bg-caro__cap-titolo,
.bg-caro__cap-desc,
.bg-caro__cap-meta {
	display: block;
}

.bg-caro__cap-titolo {
	font-weight: 600;
	color: var(--text-2);
	letter-spacing: 0.005em;
}

.bg-caro__cap-meta {
	margin-top: 0.15rem;
	font-size: 0.9em;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

/* ── Pagine video · panoramica 360° · mappa: cornice del 3D ──── */
.bg-caro__slide--video .bg-caro__inner,
.bg-caro__slide--pano .bg-caro__inner,
.bg-caro__slide--confronto .bg-caro__inner {
	display: block;
	width: var(--caro-page);
	max-width: 100%;
}

/* ── Confronto prima/dopo: due livelli sovrapposti + manico a tendina ──
   Il livello "dopo" sta nel flusso e detta l'altezza; il "prima" è ritagliato
   da sinistra fino a --pos. Lo slider (range) invisibile pilota --pos. */
.bg-caro__compare {
	position: relative;
	width: 100%;
	max-height: calc(var(--caro-h) - 56px);
	overflow: hidden;
	border-radius: var(--radius-img);
	background: #000;
	--pos: 50%;
	touch-action: none;
}

.bg-caro__compare-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bg-caro__compare-after {
	position: relative;
	max-height: calc(var(--caro-h) - 56px);
}

.bg-caro__compare-after .bg-caro__compare-img {
	max-height: calc(var(--caro-h) - 56px);
}

.bg-caro__compare-before {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.bg-caro__compare-before .bg-caro__compare-img {
	object-fit: cover;
	height: 100%;
}

/* Linea + manico in corrispondenza di --pos. */
.bg-caro__compare-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 2px;
	margin-left: -1px;
	background: rgba(255, 255, 255, 0.9);
	z-index: 3;
	pointer-events: none;
}

.bg-caro__compare-handle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	transform: translate(-50%, -50%);
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(2px);
}

.bg-caro__compare-lbl {
	position: absolute;
	top: 12px;
	z-index: 3;
	padding: 3px 8px;
	font-family: var(--f-sans);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 2px;
	pointer-events: none;
}

.bg-caro__compare-lbl--before { left: 12px; }
.bg-caro__compare-lbl--after  { right: 12px; }

/* Lo slider copre tutta l'area: trascini ovunque, tastiera inclusa. Il pollice
   nativo è invisibile, il manico visivo è disegnato sopra a --pos. */
.bg-caro__compare-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 4;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

.bg-caro__compare-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 44px;
	height: 100%;
}

.bg-caro__compare-range::-moz-range-thumb {
	width: 44px;
	height: 100%;
	border: 0;
	background: transparent;
}

/* ── Pagina di testo narrativo: colonna editoriale centrata ────── */
.bg-caro__slide--testo .bg-caro__testo {
	max-width: var(--caro-page);
	margin-inline: auto;
}

.bg-caro__testo-titolo {
	margin: 0 0 0.9rem;
	font-family: var(--f-serif);
	font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--white);
}

/* Stesso registro della pagina di testo a due colonne (.bg-progetto-testo). */
.bg-caro__testo p {
	margin: 0 0 1rem;
	font-family: var(--f-sans);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	line-height: 1.6;
	color: rgba(240, 240, 240, 0.82);
}

.bg-caro__testo p:last-child { margin-bottom: 0; }

/* Mappa: formato orizzontale, più larga della colonna di lettura. */
.bg-caro__slide--mappa .bg-caro__inner {
	display: block;
	width: min(1280px, 100%);
	max-width: 100%;
}

.bg-caro__video {
	display: block;
	width: 100%;
	max-height: calc(var(--caro-h) - 56px);
	object-fit: contain;
	background: #000;
	border-radius: var(--radius-img);
}

/* Mappa: iframe della pagina /mappa (modalità embed). Formato 4:5 ruotato:
   desktop orizzontale 5:4, mobile verticale 4:5 (vedi @media sotto).
   La LARGHEZZA è definita e già limitata a "il più grande box col rapporto
   voluto che entra anche in altezza": min(100%, altezza_utile × rapporto).
   aspect-ratio deriva l'altezza → niente max-height che tagli, e nessun quirk
   da width:auto su elemento replaced. I gesti restano dentro l'iframe, quindi
   non confliggono con lo swipe del carosello. */
.bg-caro__mapframe {
	display: block;
	margin: 0 auto;
	width: min(100%, calc((var(--caro-h) - 56px) * 5 / 4));
	aspect-ratio: 5 / 4;
	height: auto;
	border: 0;
	background: #0a0a0a;
	border-radius: var(--radius-img);
}

/* ════════════════════════════════════════════════════════════════
   MEDIA + TESTO AFFIANCATI (mappa · 3D · video · audio · pano)
   Quando una tavola media porta un testo, la figure diventa due colonne:
   il media conserva il suo formato (la mappa resta 5:4), il testo riempie
   l'altra colonna. L'ordine media/testo è scelto nell'editor (drag&drop);
   su mobile le due colonne si impilano nello stesso ordine.
   Selettore a 2 classi (0,2,0) per battere `.bg-caro__slide--mappa .bg-caro__inner`
   e il base `.bg-caro__inner` (display:table), essendo anche più avanti nel file.
   ════════════════════════════════════════════════════════════════ */
.bg-caro__inner.bg-caro__inner--mt {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* media 2/3 · testo 1/3 */
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	width: 100%;
	max-width: min(1500px, 94%);
	margin: 0 auto;
}

/* text-first: inverte le colonne su desktop. Il DOM resta media→testo, così
   bastano gli `order`; le tracce si invertono (1/3 testo · 2/3 media) perché
   il media finisca sempre nei 2/3. Su mobile lo stesso swap mette il testo in cima. */
.bg-caro__inner--mt.bg-caro__inner--text-first { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.bg-caro__inner--mt.bg-caro__inner--text-first .bg-caro__mt-media { order: 2; }
.bg-caro__inner--mt.bg-caro__inner--text-first .bg-caro__mt-text  { order: 1; }

/* Allineamento verticale del testo rispetto al media (default: centrato). */
.bg-caro__inner--mt.bg-caro__inner--text-top    .bg-caro__mt-text { align-self: start; }
.bg-caro__inner--mt.bg-caro__inner--text-bottom .bg-caro__mt-text { align-self: end; }

.bg-caro__mt-media { min-width: 0; }
.bg-caro__mt-text  { min-width: 0; max-height: calc(var(--caro-h) - 16px); overflow-y: auto; }

/* ── Colonna testo: ruoli tipografici + ritmo verticale (FONT_STACK + VERTICAL_RHYTHM) ──
   Flusso a margin-top con i token --rhythm-* (em, scalano col font). Corpo in
   --text-2 (grigio), come .body del DS — NON bianco. Titolo in --text. */
.bg-caro__inner--mt .bg-caro__text { max-width: 46ch; }

/* Ruoli IDENTICI alla home (home-sections.css): eyebrow · titolo .h2 · lead
   .body-lead · body. Stesso size/peso/colore/tracking/line-height + stesso ritmo
   (--rhythm-xs eyebrow→titolo, --rhythm-s il resto). */
.bg-caro__inner--mt .bg-caro__text-label {            /* = .bg-home-eyebrow */
	display: block;
	font-family: var(--f-sans);
	font-weight: 600;
	font-size: 0.68rem;
	line-height: 1.4;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--text-3);
	margin: 0 0 var(--rhythm-xs, 0.5em); /* eyebrow → titolo: gap sull'eyebrow, come la home */
}
.bg-caro__inner--mt .bg-caro__text-title {            /* = .bg-home-section__title (.h2) */
	font-family: var(--f-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.8vw, 2.2rem);
	line-height: 1.15;
	letter-spacing: var(--track-tight);
	color: var(--text);
	margin: 0;
	text-wrap: balance;
}
.bg-caro__inner--mt .bg-caro__text-lead {             /* = home __lead (.body-lead, Lora italic) */
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.65;
	letter-spacing: var(--track-normal);
	color: var(--text);
	margin: var(--rhythm-s, 1em) 0 0; /* titolo → lead */
}
.bg-caro__inner--mt .bg-caro__text-body { margin-top: var(--rhythm-s, 1em); } /* lead/titolo → corpo */
.bg-caro__inner--mt .bg-caro__text-body p {           /* = .bg-home-prose p (.body) */
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: 1rem;
	line-height: var(--lh-body);
	letter-spacing: var(--track-body, 0);
	color: var(--text-2);
	margin: 0;
}
.bg-caro__inner--mt .bg-caro__text-body p + p { margin-top: var(--rhythm-s, 1em); }

/* Media + testo su schermo stretto: una colonna sola, impilata nell'ordine
   scelto (gli `order` del text-first valgono anche qui). Il media è capato in
   altezza per lasciare spazio al testo; se l'insieme sfora, la figure scorre. */
@media (max-width: 1023px) {
	.bg-caro__inner.bg-caro__inner--mt {
		grid-template-columns: 1fr;
		gap: clamp(18px, 5vw, 28px);
		align-items: start;
		align-content: start;
		max-width: 100%;
		max-height: calc(var(--caro-h) - 8px);
		overflow-y: auto;
	}
	.bg-caro__inner--mt .bg-caro__mt-text { max-height: none; overflow: visible; }
	/* La mappa resta 4:5 ma capata in altezza (largh. = 46vh × 4/5). */
	.bg-caro__inner--mt .bg-caro__mapframe { width: min(100%, calc(46vh * 4 / 5)); }
	.bg-caro__inner--mt .bg-caro__video,
	.bg-caro__inner--mt .bg-caro__model,
	.bg-caro__inner--mt .bg-caro__pano-stage { max-height: 46vh; }
}

/* Lo "stage" porta l'altezza esplicita; la sfera la riempie al 100%. */
.bg-caro__slide--pano .bg-caro__pano-stage {
	position: relative;
	width: 100%;
	height: calc(var(--caro-h) - 56px);
	border-radius: var(--radius-img);
	overflow: hidden;
	background: #000;
}

/* Specificità a 2 classi: Pannellum applica `.pnlm-container { height:100% }`
   all'elemento e la sua CSS viene caricata dopo progetto.css; a pari specificità
   vincerebbe, collassando l'altezza a 100% del genitore. */
.bg-caro__slide--pano .bg-caro__pano {
	width: 100%;
	height: 100%;
}

/* Poster di anteprima: immagine equirettangolare piatta che copre lo stage
   finché Pannellum non è pronto, poi dissolve (niente rettangolo grigio). */
.bg-caro__pano-poster {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 2;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.6s ease;
}

.bg-caro__pano-poster.is-hidden {
	opacity: 0;
}

/* ── Fotografia sonora: foto centrata, onda verticale a sinistra ──────
   Griglia 1fr · foto · 1fr (come singola--vert): la foto vive nella colonna
   centrale → resta centrata sullo schermo. Player e didascalia stanno nella
   stessa colonna → allineati al bordo sinistro della foto. L'onda è assoluta
   a sinistra della foto (fuori flusso): decorativa, non sposta la centratura. */
.bg-caro__slide--audio .bg-caro__audiobox {
	display: grid;
	/* Colonna centrale cappata col tetto via fit-content(): si dimensiona sulla
	   foto ma non supera --caro-img-max-w. Così foto e player (entrambi width:100%
	   della colonna) restano legati alla stessa larghezza e centrati tra le 1fr. */
	grid-template-columns: minmax(0, 1fr) fit-content(var(--caro-img-max-w)) minmax(0, 1fr);
	justify-items: start;
	gap: 6px 0;
	width: 100%;
	max-width: min(1880px, 96%);
	margin: 0 auto;
}

.bg-caro__audio-photo {
	position: relative;
	grid-column: 2;
	display: block;
	cursor: pointer; /* clic sulla foto = play/pausa */
}

.bg-caro__audio-photo .bg-caro__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	/* spazio sotto a player (~24px) + didascalia (~80px); il tetto in larghezza
	   è sulla colonna (fit-content) → foto e player legati e centrati. */
	max-height: calc(var(--caro-h) - 116px);
	object-fit: contain;
	border-radius: var(--radius-img);
}

/* Player: sotto la foto, stessa colonna → allineato al suo bordo sinistro,
   largo quanto la foto. */
.bg-caro__slide--audio .bg-caro__sound {
	grid-column: 2;
	justify-self: stretch;
}

/* Onda di sfondo: oscilloscopio orizzontale full-bleed (da bordo a bordo del
   viewport, oltre i margini del contenuto), DIETRO la foto e tenue. La fascia
   è centrata sul centro della foto: la posizione verticale (top) la calcola
   progetto.js; qui un fallback al centro della slide. pointer-events:none così
   non intercetta i clic del player. */
.bg-caro__wave {
	position: absolute;
	left: 0;
	top: calc(50% - 110px);
	width: 100%;
	height: 220px;
	display: block;
	z-index: 0;
	opacity: 0.24;
	pointer-events: none;
	/* Dissolvenza ai bordi: la linea emerge dal nero verso il centro e svanisce
	   ai lati dello schermo → non è una sbarra netta da bordo a bordo. */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

/* La figure (foto + player + didascalia) sta SOPRA l'onda di sfondo. */
.bg-caro__slide--audio .bg-caro__audiobox {
	position: relative;
	z-index: 1;
}

/* ── Foto verticale: didascalia a lato (colonna destra), player sotto la foto.
   La foto resta centrata (colonna 2), la didascalia vive nel gutter destro. */
.bg-caro__audiobox--vert .bg-caro__audio-photo {
	grid-row: 1;
}

.bg-caro__audiobox--vert .bg-caro__audio-photo .bg-caro__img {
	/* verticale: grande come la singola, meno la sola striscia del player sotto
	   (pulsante 22px + gap 6px). La didascalia è a lato, non riserva spazio. */
	max-height: min(calc(var(--caro-h) - 28px), var(--caro-img-max-h));
}

.bg-caro__slide--audio .bg-caro__audiobox--vert .bg-caro__sound {
	grid-row: 2;
}

/* Player: barra orizzontale SOPRA la foto — glifo nudo + barra di
   riproduzione (seek) + tempo. */
.bg-caro__sound {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	color: #fff;
}

/* Barra di riproduzione: traccia tenue + riempimento bianco, cliccabile. */
.bg-caro__progress {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.22);
	cursor: pointer;
}

.bg-caro__progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	background: #fff;
}

.bg-caro__sound-media {
	display: none;
}

/* Glifo nudo: niente sfondo/bordo/ombra in nessuno stato. Gli !important
   battono gli override di Astra su button:hover/:focus/:active (background
   e box-shadow), che altrimenti coprirebbero il glifo con un riquadro. */
.bg-caro__sound-btn,
.bg-caro__sound-btn:hover,
.bg-caro__sound-btn:focus,
.bg-caro__sound-btn:focus-visible,
.bg-caro__sound-btn:active {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	color: #fff !important;
}

.bg-caro__sound-btn {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bg-caro__sound-btn:hover,
.bg-caro__sound-btn:focus-visible {
	opacity: 0.7;
}

.bg-caro__sound-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.bg-caro__sound-pause { display: none; }
.bg-caro__sound.is-playing .bg-caro__sound-play { display: none; }
.bg-caro__sound.is-playing .bg-caro__sound-pause { display: block; }

.bg-caro__sound-time {
	flex: none;
	white-space: nowrap;
	font-family: var(--f-mono, ui-monospace, monospace);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.7);
}

/* Didascalia: stessa identica formattazione di .bg-caro__caption (foto singola).
   Lo scope .bg-caro è indispensabile per vincere su `body.single figcaption`
   (custom-style.css), che altrimenti ne altera font-size e famiglia. */
.bg-caro .bg-caro__audio-cap {
	box-sizing: border-box;
	grid-column: 2; /* sotto la foto, allineata al suo bordo sinistro */
	width: 100%;
	margin: 0.4rem 0 0;
	padding-inline-start: 16px;
	border-inline-start: 1px solid var(--border-hover);
	font-family: var(--f-sans);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--text-3);
	text-align: left;
	font-synthesis: none;
}

/* Verticale: didascalia a lato, nel gutter destro (colonna 3), allineata al
   fondo della foto; la foto resta centrata e il player le sta sotto. */
.bg-caro .bg-caro__audiobox--vert .bg-caro__audio-cap {
	grid-column: 3;
	grid-row: 1 / 3;
	justify-self: start;
	align-self: end;
	width: auto;
	max-width: 32ch;
	margin: 0 0 0.25rem;
	margin-inline-start: 18px;
}

/* ── Navigazione minimale: barra centrata sotto le pagine ───────── */
.bg-caro__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 32px;
	/* Terzo tempo dello svelamento: la navigazione entra per ultima. */
	animation: bg-progetto-fadein 0.9s var(--caro-ease) var(--caro-front-nav-delay) both;
}

.bg-caro__counter {
	font-family: var(--f-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var(--text-3);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bg-caro__btn {
	border: 0;
	padding: 4px;
	line-height: 1;
	cursor: pointer;
	color: var(--text-3);
	transition: color var(--dur-s) var(--ease-out), opacity var(--dur-s) var(--ease-out);
}

/* Sempre senza superficie: neutralizza il background che Astra applica su
   button:focus / :active (specificità 0,1,1 batterebbe .bg-caro__btn). */
.bg-caro__btn,
.bg-caro__btn:hover,
.bg-caro__btn:focus,
.bg-caro__btn:active {
	background: transparent;
	box-shadow: none;
}

/* :focus residuo dopo il click: Astra lo vira al nero → lo riportiamo al
   grigio di default (l'SVG usa currentColor). Il bianco resta riservato a
   hover e active: queste regole vengono dopo, quindi vincono sul focus. */
.bg-caro__btn:focus:not(:disabled) {
	color: var(--text-3);
}

.bg-caro__btn:hover:not(:disabled),
.bg-caro__btn:active:not(:disabled) {
	color: var(--text);
}

.bg-caro__btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

.bg-caro__btn:disabled {
	opacity: 0.25;
	cursor: default;
}

.bg-caro__btn:focus-visible {
	outline: none;
}

/* Invito a scorrere: la freccia avanti fa un piccolo "nudge" ricorrente.
   Si spegne quando l'utente naviga (classe .is-navigated dal JS) e
   sull'ultima pagina (bottone disabled). Parte dopo lo svelamento. */
.bg-caro__btn--next:not(:disabled) svg {
	animation: bg-caro-nudge 2.4s var(--caro-ease) var(--caro-front-nav-delay) infinite;
}

.bg-caro.is-navigated .bg-caro__btn--next svg {
	animation: none;
}

@keyframes bg-caro-nudge {
	0%, 70%, 100% { transform: translateX(0); }
	85%           { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
	.bg-progetto,
	.bg-caro__front .bg-progetto-meta,
	.bg-caro__front .bg-progetto-title,
	.bg-caro__front .bg-progetto-statement,
	.bg-caro__controls,
	.bg-caro__btn--next svg {
		animation: none !important;
	}

	.bg-caro__slide,
	.bg-caro__slide.is-active {
		transition: none !important;
	}
}

/* =================================================================
   FALLBACK VERTICALE — progetti senza foto
   ================================================================= */
.bg-progetto:not(.bg-progetto--book) {
	padding: 40px var(--pad-x) 0 !important;
	max-width: var(--max-width, 1280px);
}

.bg-progetto:not(.bg-progetto--book) .bg-progetto-meta {
	margin: 0 0 20px;
}

.bg-progetto:not(.bg-progetto--book) .bg-progetto-title {
	font-size: clamp(2.6rem, 6vw, 5rem);
	max-width: 16ch;
}

.bg-progetto:not(.bg-progetto--book) .bg-progetto-testo {
	margin-top: 40px;
	max-width: var(--max-width-text, 720px);
}

/* ── Navigazione prev/next ───────────────────────────────────── */
.bg-progetto-nav {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 2px;
	margin-top: 100px;
	width: 100%;
}

.bg-progetto-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-top: 48px;
	padding-bottom: 48px;
	text-decoration: none;
	transition: color 0.25s ease;
	min-width: 0;
}

.bg-progetto-nav__item--prev {
	align-items: flex-start;
	padding-left: clamp(20px, 2.5vw, 40px);
	padding-right: 20px;
}

.bg-progetto-nav__item--next {
	align-items: flex-end;
	text-align: right;
	padding-right: clamp(20px, 2.5vw, 40px);
	padding-left: 20px;
}

/* Area interattiva ristretta al solo testo (label + titolo): hover e clic
   non coprono più l'intera metà della riga. */
.bg-progetto-nav__link {
	display: inline-flex;
	flex-direction: column;
	width: fit-content;
	max-width: 100%;
	text-decoration: none;
	color: inherit;
}

.bg-progetto-nav__label {
	font-family: var(--f-sans, "Manrope", "Helvetica Neue", Arial, sans-serif);
	font-size: 0.72rem;
	letter-spacing: var(--track-wide, 0.1em);
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 2px;
	display: block;
	transition: color 0.25s ease;
}

.bg-progetto-nav__title {
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 1.3;
	display: block;
	overflow: visible;
	padding-bottom: 0.1em;
	color: var(--text);
	transition: color 0.25s ease;
}

.bg-progetto-nav__link:hover .bg-progetto-nav__title {
	color: var(--text-2);
}

/* ── Mobile / schermi stretti ────────────────────────────────── */
@media (max-width: 1023px) {
	.bg-caro {
		/* Le tavole si prendono lo spazio: i controlli ora sono ancorati al fondo dal
		   flex, quindi --caro-h non deve più riservare spazio per loro (era −210). */
		--caro-h: max(300px, calc(100lvh - 130px));
		/* Carosello ad altezza schermo (sotto la navbar, ~80px): le tavole restano in
		   alto con la loro altezza fissa, le frecce si ancorano al fondo.
		   lvh (non dvh/svh): dimensione FISSA sul caso "barra browser nascosta" → niente
		   resize allo scroll. Al caricamento (barra visibile) il blocco sfora un po' e le
		   frecce restano sotto la barra; appena si scrolla la barra si nasconde e il
		   contenuto riempie lo schermo a filo → immersione piena. */
		display: flex;
		flex-direction: column;
		/* Offset = altezza navbar (80px), così navbar + blocco = 100lvh esatto: a barra
		   nascosta il carosello riempie esattamente lo schermo, frecce a filo del fondo. */
		min-height: calc(100lvh - 80px);
	}

	/* Viewport delle tavole: altezza invariata (--caro-h), non si comprime. */
	.bg-caro__viewport {
		flex: 0 0 auto;
	}

	/* Barra di navigazione tavole ancorata al fondo dello schermo: posizione fissa
	   su ogni slide, indipendente dalla lunghezza del contenuto. */
	.bg-caro__controls {
		margin-top: auto;
		margin-bottom: 12px;
	}

	/* Margine laterale UNIFORME (8px) per TUTTE le tavole su mobile — ogni tipologia,
	   non solo le foto: singola, tavole, composizioni, confronto, audio, panorama,
	   3D, video, mappa, 3D+testo. Solo le pagine di testo/frontespizio restano col
	   loro margine di lettura. */
	.bg-caro__slide--photo,
	.bg-caro__slide--tavola,
	.bg-caro__slide--compo,
	.bg-caro__slide--compo-part,
	.bg-caro__slide--confronto,
	.bg-caro__slide--audio,
	.bg-caro__slide--pano,
	.bg-caro__slide--model,
	.bg-caro__slide--mtpart-model,
	.bg-caro__slide--mtpart-text,
	.bg-caro__slide--video,
	.bg-caro__slide--mappa {
		--caro-pad: 8px;
	}


	/* Verticale singola: spesso è limitata dall'ALTEZZA (tetto caro-h − 96px),
	   quindi ridurre i margini non basta. Alzo il tetto (−96 → −64) recuperando
	   parte dello spazio sotto: la foto ritratto riempie quasi tutta l'altezza
	   utile, restando centrata con la sua didascalia. Solo .bg-compo__img →
	   orizzontali (.bg-tavola__img) e griglie non toccate. */
	.bg-caro__slide--compo .bg-compo__img,
	.bg-caro__slide--compo-part .bg-compo__img {
		max-height: calc(var(--caro-h) - 64px);
	}

	/* Testo a una sola colonna su mobile */
	.bg-caro__slide--text .bg-progetto-testo {
		column-count: 1;
	}

	/* Misura stretta: la sillabazione evita i buchi bianchi e le parole isolate
	   che `text-wrap: pretty` da solo non riesce a riassorbire. Richiede lang="it"
	   sull'<html> (WordPress lo scrive da sé). */
	.bg-caro__slide--text .bg-progetto-testo p {
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	/* Mappa: 4:5 verticale su schermo stretto. Stessa formula del desktop,
	   rapporto invertito: width = min(100%, altezza_utile × 4/5). */
	.bg-caro__mapframe {
		width: min(100%, calc((var(--caro-h) - 56px) * 4 / 5));
		aspect-ratio: 4 / 5;
		height: auto;
	}

	.bg-caro__front .bg-progetto-title {
		font-size: clamp(2.4rem, 9vw, 3.6rem);
	}

	/* Foto singola su mobile — REGOLA UNICA per orizzontali E verticali: layout
	   UNIFORME come la tavola di riferimento. Piena larghezza dentro il padding della
	   slide, contenuto centrato verticalmente, foto sempre INTERA (object-fit:contain).
	   Le verticali troppo alte restano intere riducendosi un filo in larghezza, mai
	   tagliate. Annulla il grid 3-colonne desktop (didascalia a lato) → cap sotto. */
	.bg-caro .bg-caro__slide--photo .bg-caro__inner {
		display: block;
		width: 100%;
		max-width: 100%;
		max-height: var(--caro-h);
		margin: 0 auto;
	}
	.bg-caro__slide--photo .bg-caro__frame {
		grid-column: auto;
	}
	.bg-caro__slide--photo .bg-caro__frame img {
		width: 100%;
		height: auto;
		max-height: calc(var(--caro-h) - var(--cap-reserve, 100px));
		object-fit: contain;
		margin: 0 auto;
	}
	/* Verticale: mai tagliata. L'inner si stringe sulla larghezza REALE della foto
	   (altezza utile × aspect-ratio --s-ar, scritto dal PHP), centrato. Frame e
	   didascalia ne ereditano la larghezza → la didascalia resta allineata al bordo
	   sinistro dell'immagine. Su telefono stretto vince il 100% → full-width; su
	   tablet (iPad Mini 768px) vince l'altezza → foto INTERA, più stretta, centrata. */
	/* Specificità 0-4-0: deve battere `.bg-caro .bg-caro__slide--photo
	   .bg-caro__inner { width:100% }` (0-3-0) qui sopra, altrimenti l'inner resta
	   a piena larghezza e la didascalia non si allinea al bordo della foto. */
	.bg-caro .bg-caro__slide--photo .bg-caro__inner.bg-caro__inner--vert {
		width: min(100%, calc((var(--caro-h) - var(--cap-reserve, 100px)) * var(--s-ar, 0.7)));
		margin-inline: auto;
	}
	.bg-caro__inner--vert .bg-caro__frame {
		max-height: calc(var(--caro-h) - var(--cap-reserve, 100px));
		border-radius: var(--radius-img);
	}
	.bg-caro__inner--vert .bg-caro__frame img {
		width: 100%;
		height: auto;
		max-height: calc(var(--caro-h) - var(--cap-reserve, 100px));
		object-fit: contain;
		border-radius: var(--radius-img);
	}
	.bg-caro .bg-caro__slide--photo .bg-caro__caption {
		display: block;
		width: 100%;
		max-width: none;
		align-self: auto;
		margin: 1.25rem 0 0;
	}

	/* Fotografia sonora verticale: su schermo stretto niente spazio a lato →
	   la didascalia torna SOTTO il player (colonna 2), come la foto orizzontale. */
	.bg-caro .bg-caro__audiobox--vert .bg-caro__audio-cap {
		grid-column: 2;
		grid-row: auto;
		justify-self: start;
		align-self: auto;
		width: 100%;
		max-width: none;
		margin: 0.4rem 0 0;
		margin-inline-start: 0;
	}
	.bg-caro__audiobox--vert .bg-caro__audio-photo .bg-caro__img {
		max-height: calc(var(--caro-h) - 116px);
	}
	/* Paesaggio sonoro: annullo max-width:96% e margin:auto — margini extra
	   dentro il padding già presente sulla slide. */
	.bg-caro__slide--audio .bg-caro__audiobox {
		max-width: 100%;
		margin: 0;
	}
	/* Verticale: collasso le 3 colonne a 1 → foto full-width mantenendo display:grid
	   (il JS posiziona la wave in base alla griglia; display:block la rompeva).
	   Annullo i grid-column:2 desktop su tutti i figli per evitare layout strani
	   con una sola colonna dichiarata. */
	.bg-caro__slide--audio .bg-caro__audiobox--vert {
		grid-template-columns: 1fr;
	}
	.bg-caro__slide--audio .bg-caro__audiobox--vert .bg-caro__audio-photo,
	.bg-caro__slide--audio .bg-caro__audiobox--vert .bg-caro__sound,
	.bg-caro__slide--audio .bg-caro__audiobox--vert .bg-caro__audio-cap {
		grid-column: 1;
		grid-row: auto;
	}
	.bg-caro__audiobox--vert .bg-caro__audio-photo .bg-caro__img {
		width: 100%;
		height: auto;
		max-height: none;
	}

	/* Waveform verticale su mobile: il JS la posiziona male con il layout a colonna
	   unica (appare brevemente sotto la foto invece che sopra). Nascosta su mobile. */
	.bg-caro__slide--audio:has( .bg-caro__audiobox--vert ) .bg-caro__wave {
		display: none;
	}
	/* Onda SOPRA la foto su mobile SOLO per le verticali: allineo il contenuto
	   in basso così lo spazio libero si raccoglie in alto (l'onda la posiziona
	   progetto.js, senza ridurre la foto né sovrapporsi). Le orizzontali restano
	   centrate, identiche all'immagine singola. */
	.bg-caro__slide--audio:has( .bg-caro__audiobox--vert ) {
		align-items: flex-end;
	}

	/* Dittico / Trittico: su mobile il JS separa le celle in slide singole.
	   Annullo la griglia multi-colonna → la cella occupa tutta la larghezza
	   disponibile (padding 8px della slide). */
	.bg-caro__slide--tavola .bg-tavola--dittico,
	.bg-caro__slide--tavola .bg-tavola--trittico {
		display: block;
	}
	.bg-caro__slide--tavola .bg-tavola > .bg-tavola__cell {
		display: block;
		width: 100%;
		max-width: 100%;
		justify-self: auto;
	}
	/* Dittico verticale: annullo il flex-row desktop → cap torna sotto la foto */
	.bg-caro__slide--tavola .bg-tavola--dittico.bg-tavola--vert > .bg-tavola__cell {
		flex-direction: column;
		align-items: flex-start;
	}
	/* Img: piena larghezza con max-height di sicurezza */
	.bg-caro__slide--tavola .bg-tavola__img {
		width: 100%;
		height: auto;
		max-height: calc(var(--caro-h) - 96px);
	}
	/* Verticali nel dittico/trittico: frame overflow:hidden taglia il sforamento in basso */
	.bg-caro__slide--tavola .bg-tavola--vert .bg-tavola__frame {
		overflow: hidden;
		max-height: calc(var(--caro-h) - 96px);
		border-radius: var(--radius-img);
	}
	.bg-caro__slide--tavola .bg-tavola--vert .bg-tavola__img {
		width: 100%;
		height: auto;
		max-height: none;
	}

	/* Celle del dittico/trittico nelle slide create dal JS (.bg-caro__slide--compo-part):
	   align-self:stretch porta la cella a piena larghezza senza toccare le composizioni. */
	.bg-caro__slide--compo-part .bg-tavola__cell {
		align-self: stretch;
		width: auto;
		max-width: 100%;
	}
	.bg-caro__slide--compo-part .bg-tavola__frame {
		overflow: hidden;
		max-height: calc(var(--caro-h) - 96px);
		border-radius: var(--radius-img);
	}
	.bg-caro__slide--compo-part .bg-tavola__img {
		width: 100%;
		height: auto;
		max-height: none;
	}
}

@media (max-width: 600px) {
	/* Affiancati anche su mobile: prev a sinistra, next a destra.
	   Titolo ridotto e label più compatta per farli convivere. */
	.bg-progetto-nav__item--prev {
		padding-left: clamp(16px, 4vw, 40px);
		padding-right: 12px;
	}

	.bg-progetto-nav__item--next {
		padding-right: clamp(16px, 4vw, 40px);
		padding-left: 12px;
	}

	.bg-progetto-nav__label {
		font-size: 0.62rem;
	}

	.bg-progetto-nav__title {
		font-size: clamp(1.05rem, 4.5vw, 1.4rem);
	}
}