/*
 * MAPPA — Fase 5c: stile immersivo del frontend MapLibre.
 * Additivo: il LAYOUT del guscio (tray, toggle, body.bg-mappa) resta in
 * map-app.css. Qui: canvas, pin/popup, lista, dettaglio «foto protagonista»,
 * breadcrumb glass, chip filtri. Direzione: scuro, vetro, immersivo.
 */

/* Canvas MapLibre. */
#bg-map { position: absolute; inset: 0; width: 100%; height: 100%; background: #05070a; }
#bg-map .maplibregl-canvas { outline: none; }
/* Allineo la "i" allo stesso centro orizzontale degli altri controlli in basso. */
#bg-map .maplibregl-ctrl-bottom-right { bottom: 16px; }
#bg-map .maplibregl-ctrl-attrib { background: rgba(0,0,0,.5); }
#bg-map .maplibregl-ctrl-attrib a { color: #cfcfcf; }
/* Attribuzione sempre compatta: di default solo l'icona "i"; il testo
   (obbligatorio per MapTiler/OSM/Esri) compare al passaggio del mouse, così non
   copre i controlli al centro-basso anche quando MapLibre la apre da sola. */
#bg-map .maplibregl-ctrl-attrib.maplibregl-compact-show:not(:hover) { padding: 0; }
#bg-map .maplibregl-ctrl-attrib.maplibregl-compact-show:not(:hover) .maplibregl-ctrl-attrib-inner { display: none; }
#bg-map .maplibregl-ctrl-group { background: rgba(10,12,16,.8); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); }
#bg-map .maplibregl-ctrl-group button + button { border-top-color: rgba(255,255,255,.12); }
#bg-map .maplibregl-ctrl-group button span { filter: invert(1); }
/* Bussola visibile solo con il Rilievo 3D attivo (classe bg-3d-on sul container). */
#bg-map .maplibregl-ctrl-compass { display: none; }
#bg-map.bg-3d-on .maplibregl-ctrl-compass { display: block; }
#bg-map .maplibregl-ctrl-compass { cursor: pointer; }

/* Selettore basemap (Auto / Satellite / Mappa) — segmented glass. */
.bg-ml-basemap {
	display: flex; overflow: hidden;
	background: rgba(10,12,16,.8); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.bg-ml-basemap__btn {
	border: 0; background: none; color: #cdd3da; cursor: pointer;
	font-size: 12px; letter-spacing: .02em; padding: 6px 11px; line-height: 1.2;
	transition: background .15s, color .15s;
}
.bg-ml-basemap__btn + .bg-ml-basemap__btn { border-left: 1px solid rgba(255,255,255,.12); }
.bg-ml-basemap__btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.bg-ml-basemap__btn.is-active { background: #fff; color: #111; font-weight: 600; }

/* Controlli mappa (toggle Strati → basemap/3D/vista): in alto a destra, sotto i
   pulsanti zoom, impilati in colonna. Così non coprono mai breadcrumb e
   attribuzione, su desktop come su mobile. */
#bg-map .maplibregl-ctrl-top-left {
	top: 78px; bottom: auto; left: auto; right: 10px; transform: none;
	display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
#bg-map .maplibregl-ctrl-top-left .maplibregl-ctrl { margin: 0; float: none; clear: none; }
/* In 3D la bussola compare in fondo al gruppo zoom (in alto a destra): spingo giù
   lo stack "Strati" così non gli finisce sotto. */
#bg-map.bg-3d-on .maplibregl-ctrl-top-left { top: 108px; }

/* Toggle Rilievo 3D (affiancato allo switcher). */
.bg-ml-3d { margin-top: 0; }
.bg-ml-3d__btn {
	display: block; border: 1px solid rgba(255,255,255,.12); cursor: pointer;
	background: rgba(10,12,16,.8); backdrop-filter: blur(8px); color: #cdd3da;
	font-size: 12px; letter-spacing: .02em; padding: 6px 11px; line-height: 1.2;
	border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.35);
	transition: background .15s, color .15s;
}
.bg-ml-3d__btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.bg-ml-3d__btn.is-active { background: #fff; color: #111; font-weight: 600; }
/* Disabilitato sotto zoom 10: il Rilievo 3D non ha senso a scala nazionale. */
.bg-ml-3d__btn:disabled { opacity: .4; cursor: not-allowed; }
.bg-ml-3d__btn:disabled:hover { background: none; color: inherit; }

/* Toggle "Strati": icona che apre/chiude basemap + 3D + vista pulita. */
.bg-ml-layers-toggle__btn {
	display: grid; place-items: center; width: 31px; height: 31px; padding: 0;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,.12); border-radius: 4px; cursor: pointer;
	background: rgba(10,12,16,.8); backdrop-filter: blur(8px); color: #cdd3da;
	box-shadow: 0 2px 8px rgba(0,0,0,.35);
	transition: background .15s, color .15s;
}
.bg-ml-layers-toggle__btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.maplibregl-ctrl-top-left.is-layers-open .bg-ml-layers-toggle__btn { background: #fff; color: #111; }
/* Chiuso: resta solo l'icona; gli altri controlli compaiono all'apertura. */
#bg-map .maplibregl-ctrl-top-left:not(.is-layers-open) > .maplibregl-ctrl:not(.bg-ml-layers-toggle) { display: none; }

/* Popup scuro/glass (sostituisce le label di testo). */
.bg-ml-popup .maplibregl-popup-content {
	background: rgba(12,14,18,.92); backdrop-filter: blur(10px);
	color: #fff; border: 1px solid rgba(255,255,255,.14);
	border-radius: 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.4;
	box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.bg-ml-popup .maplibregl-popup-content strong { font-weight: 600; }
.bg-ml-popup .maplibregl-popup-tip { display: none; }

/* Loader. */
.bg-ml-loading {
	position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
	z-index: 5; padding: 6px 14px; border-radius: 999px;
	background: rgba(0,0,0,.65); backdrop-filter: blur(6px); color: #fff;
	font-size: 12px; letter-spacing: .03em; opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.bg-ml-loading.is-on { opacity: 1; }

/* Avviso di errore: stessa pillola del loader, un gradino più in basso per non
   sovrapporsi quando una richiesta fallisce mentre un'altra è in corso. */
.bg-ml-error {
	position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
	z-index: 6; display: flex; align-items: center; gap: 10px;
	max-width: min(92%, 460px);
	padding: 8px 14px; border-radius: 999px;
	background: rgba(12,14,18,.9); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.16);
	color: #f2f2f2; font-size: 13px; line-height: 1.35;
	box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.bg-ml-error[hidden] { display: none; }
/* Libreria mancante: l'avviso è l'unico contenuto del contenitore mappa. */
.bg-ml-error--fatal { top: 50%; transform: translate(-50%, -50%); }
.bg-ml-error__retry {
	flex: 0 0 auto; font: inherit; font-size: 12px; letter-spacing: .03em;
	color: #0b0d10; background: #fff; border: 0; border-radius: 999px;
	min-height: 32px; padding: 0 14px; cursor: pointer;
}
.bg-ml-error__retry:hover, .bg-ml-error__retry:focus { background: #e6e6e6; box-shadow: none; }
.bg-ml-error__retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Il titolo della scheda riceve il fuoco all'apertura (tabindex="-1"): il
   contorno serve solo a chi naviga da tastiera, non dopo un click col mouse. */
.bg-ml-detail__title:focus { outline: none; }
.bg-ml-detail__title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* -------------------------------------------------- BREADCRUMB (glass, basso) */
.bg-breadcrumb {
	position: absolute; left: 16px; bottom: 14px; z-index: 5;
	display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
	background: rgba(12,14,18,.78); backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
	padding: 6px 12px; box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.bg-ml-crumb {
	background: none; border: 0; color: #cdd3da; cursor: pointer;
	font-size: 13px; padding: 2px 4px; border-radius: 6px; transition: color .15s;
}
.bg-ml-crumb:hover { color: #fff; }
.bg-ml-crumb[aria-current="page"] { color: #fff; font-weight: 600; cursor: default; }
.bg-ml-crumb-sep { color: #8a929c; font-size: 12px; }

/* -------------------------------------------------- FILTRI (chip) */
.bg-ml-facet { margin-bottom: 18px; }
.bg-ml-facet__title { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: #7d858f; margin: 0 0 8px; }
.bg-ml-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-ml-chip {
	border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03);
	color: #dde2e7; border-radius: 999px; padding: 5px 12px; font-size: 12px;
	cursor: pointer; transition: background .15s, border-color .15s, color .15s; line-height: 1.4;
}
.bg-ml-chip:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.07); }
.bg-ml-chip.is-active { background: #fff; color: #111; border-color: #fff; }
.bg-ml-chip__count { opacity: .5; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* Niente padding: i chip vivono dentro .bg-tray-bar, accanto al pulsante
   Filtri, e prendono da lì l'allineamento (vedi map-app.css). */
#bg-active-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
#bg-active-filters[hidden] { display: none; }
.bg-ml-activechip {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,.14); color: #fff; border: 0;
	border-radius: 999px; padding: 4px 8px 4px 12px; font-size: 12px; cursor: pointer; text-transform: capitalize;
}
.bg-ml-activechip::after { content: "×"; font-size: 15px; line-height: 1; opacity: .75; }
.bg-ml-activechip:hover { background: rgba(255,255,255,.22); }

/* -------------------------------------------------- RICERCA (barra tray) */
/* Riga propria sopra .bg-tray-bar: non comprime Filtri e toggle Luoghi/Schede,
   e tiene la gerarchia leggibile — cerco, poi filtro, poi scorro la lista. */
.bg-tray-search { position: relative; display: flex; align-items: center; padding: 12px 20px 0; }
.bg-tray-search__icon {
	position: absolute; left: 32px; color: #8b929b; pointer-events: none;
}
/* Selettore con #id: il parent Astra veste gli input di suo (fondo bianco,
   padding 16px, radius 4px, font 16px) con specificità che batte la sola
   classe. Stesso rimedio già usato qui per #bg-active-filters. */
#bg-tray-search .bg-tray-search__input {
	width: 100%; box-sizing: border-box; height: auto; margin: 0;
	padding: 9px 34px 9px 36px;
	background: rgba(255,255,255,.06); color: #fff;
	border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
	box-shadow: none;
	font-family: var(--f-sans, sans-serif); font-size: 13.5px; line-height: 1.4;
	transition: border-color .15s, background .15s;
}
#bg-tray-search .bg-tray-search__input::placeholder { color: #8b929b; opacity: 1; }
#bg-tray-search .bg-tray-search__input:hover { border-color: rgba(255,255,255,.24); }
#bg-tray-search .bg-tray-search__input:focus {
	outline: none; background: rgba(255,255,255,.09);
	border-color: var(--accent, #E63929); color: #fff; box-shadow: none;
}
#bg-tray-search .bg-tray-search__clear {
	position: absolute; right: 28px; display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: #8b929b; cursor: pointer;
}
#bg-tray-search .bg-tray-search__clear:hover { color: #fff; }
/* Override Astra su button:focus/:active (fondo chiaro): stesso rimedio di
   .bg-ml-item più sotto. */
#bg-tray-search .bg-tray-search__clear:focus,
#bg-tray-search .bg-tray-search__clear:active { background: transparent; box-shadow: none; color: #fff; }
#bg-tray-search .bg-tray-search__clear:focus-visible { outline: 2px solid var(--accent, #E63929); outline-offset: 1px; }
.bg-tray-search__clear[hidden] { display: none; }

/* Dropdown dei risultati: sovrapposto al pannello, non spinge la lista. */
.bg-tray-search__results {
	position: absolute; top: calc(100% + 6px); left: 20px; right: 20px; z-index: 20;
	max-height: 58vh; overflow-y: auto;
	padding: 6px; box-sizing: border-box;
	background: var(--bg-elev-2, #16191d);
	border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.bg-tray-search__results[hidden] { display: none; }
.bg-ml-search__group {
	margin: 6px 0 2px; padding: 0 8px;
	color: #8b929b; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
/* .bg-ml-item porta già card, thumb e tipografia della lista: qui serve solo
   l'evidenziazione da tastiera, che è uno stato in più rispetto a :hover. */
.bg-ml-search__hit.is-cursor {
	background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16);
}

/* -------------------------------------------------- LISTA (card moderne) */
.bg-ml-empty { color: #9aa3ad; font-size: 13px; padding: 16px 8px; }
/* Il <button> è avvolto in un role="listitem": il wrapper non deve alterare
   il layout a colonna del tray. */
.bg-ml-item-wrap { display: block; }
/* Coda della lista quando i risultati superano il tetto di rendering. */
.bg-ml-more {
	margin: 10px 8px 4px; padding: 10px 12px;
	border-top: 1px solid rgba(255,255,255,.1);
	color: #9aa3ad; font-size: 12px; line-height: 1.5;
}
.bg-ml-item {
	display: flex; gap: 12px; align-items: center; width: 100%;
	padding: 8px; margin-bottom: 4px; border: 1px solid transparent; background: transparent;
	cursor: pointer; text-align: left; border-radius: 12px; transition: background .15s, border-color .15s;
}
.bg-ml-item:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
/* Fix override Astra: su button:focus/:active (0,1,1) il parent applica un
   background chiaro → la card diventa bianca col titolo bianco e sparisce per
   un istante dopo il clic. Classe+pseudo (0,2,0) batte il parent: negli stati
   interattivi la card resta trasparente (col mouse l'hover sopra è comunque
   attivo) e il testo resta pinnato al bianco. Stesso rimedio del blocco a fondo
   file per .bg-ml-crumb / .bg-ml-correl / .bg-ml-detail__navbtn. */
.bg-ml-item:focus, .bg-ml-item:active { background: transparent; box-shadow: none; color: #fff; }
.bg-ml-item:hover:focus, .bg-ml-item:hover:active { background: rgba(255,255,255,.05); }
.bg-ml-item:focus-visible { outline: 2px solid var(--accent, #E63929); outline-offset: 2px; }
.bg-ml-item__thumb {
	width: 58px; height: 58px; flex: 0 0 58px; border-radius: 10px;
	object-fit: cover; background: #1a1d22;
}
.bg-ml-item__body { min-width: 0; }
.bg-ml-item__title { display: block; color: #fff; font-size: 14.5px; font-weight: 500; margin: 0 0 3px; }
.bg-ml-item__meta { display: block; color: #8b929b; font-size: 12px; text-transform: capitalize; }

/* -------------------------------------------------- DETTAGLIO (foto protagonista) */
.bg-tray-detail { padding: 0 !important; }

/* Passando a una scheda correlata il pannello si svuota e si riempie di colpo
   con contenuto di altezza diversa. Su smartphone — dove a scorrere è la PAGINA,
   non il tray — lo scroll anchoring di Chrome compensa il cambio di altezza
   spostando la vista verso il basso: sembra che la schermata scenda da sola.
   Qui il contenuto viene sostituito per intero ogni volta, quindi non c'è nulla
   di utile da ancorare. Nessun effetto su desktop (lì scorre il tray). */
#bg-map-tray,
#bg-tray-detail,
.bg-ml-detail { overflow-anchor: none; }
.bg-ml-detail__back {
	position: relative; z-index: 2; margin: 14px 20px 12px; align-self: flex-start;
	background: rgba(0,0,0,.45); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.16);
	color: #fff; cursor: pointer; font-size: 13px; padding: 6px 12px; border-radius: 999px; transition: background .15s;
}
.bg-ml-detail__back:hover { background: rgba(0,0,0,.7); }
/* Copertina: prima immagine a tutta larghezza, proporzioni naturali, no bande nere. */
.bg-ml-detail__hero { position: relative; width: 100%; margin: 0; }
/* La foto di copertina rientra come il testo (20px); video e 3D no — il primo
   resta immersivo, il secondo rientra più del testo (32px). */
/* Tetto d'altezza: una foto verticale a piena larghezza sforerebbe il viewport.
   Con max-height + contain si rimpicciolisce e resta centrata. */
.bg-ml-detail__hero .bg-ml-media-img {
	width: 100%; height: auto; display: block;
	max-height: 70vh; object-fit: contain;
	padding: 0 20px; box-sizing: border-box;
}
.bg-ml-detail__hero .bg-ml-media-video { width: 100%; height: auto; display: block; background: #000; }
.bg-ml-detail__hero .bg-ml-media-3dviewer {
	width: 100%; height: 56vh; display: block; background: #0b0d10;
	padding: 0 32px; box-sizing: border-box;
}
.bg-ml-detail__head { padding: 16px 20px 0; }
.bg-ml-detail__title { color: #fff; font-size: 24px; line-height: 1.15; margin: 0 0 4px; letter-spacing: -.01em; }
.bg-ml-detail__place { color: #9fb0c0; font-size: 13px; margin: 0; text-transform: capitalize; }
/* Gerarchia luogo: antenati tenui, città (foglia) in evidenza */
.bg-ml-detail__place .bg-ml-place-lvl { color: #9fb0c0; }
.bg-ml-detail__place .bg-ml-place-lvl.is-leaf { color: #fff; font-weight: 600; }
.bg-ml-detail__place .bg-ml-place-sep { color: #5a6571; margin: 0 5px; }
.bg-ml-detail__metasep { color: #5a6571; margin: 0 6px; }
/* Corpo editoriale (Gutenberg): testo + immagini + 3D + video alternati. */
.bg-ml-detail__body { padding: 16px 20px 0; color: #c6ccd3; font-size: 14.5px; line-height: 1.65; }
.bg-ml-detail__body > *:first-child { margin-top: 0; }
.bg-ml-detail__body p { margin: 0 0 12px; }
.bg-ml-detail__body a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.bg-ml-detail__body h2, .bg-ml-detail__body h3, .bg-ml-detail__body h4 {
	color: #fff; line-height: 1.25; margin: 28px 0 10px; font-weight: 600;
}
.bg-ml-detail__body h2 { font-size: 20px; }
.bg-ml-detail__body h3 { font-size: 17px; }
.bg-ml-detail__body h4 { font-size: 15px; }
.bg-ml-detail__body ul, .bg-ml-detail__body ol { margin: 0 0 12px; padding-left: 1.25em; }
.bg-ml-detail__body li { margin: 0 0 4px; }
/* Citazione: pattern del sito (Lora serif italic, barra-token) come /scheda/. */
.bg-ml-detail__body blockquote {
	margin: 28px 0; padding: 6px 0 6px 18px; border-left: 2px solid var(--text, #fff);
	font-family: var(--f-serif, Georgia, serif); font-style: italic; font-size: 17px;
	line-height: 1.45; color: var(--text, #fff);
}
.bg-ml-detail__body blockquote p { margin: 0; font: inherit; color: inherit; }
.bg-ml-detail__body blockquote cite {
	display: block; margin-top: 8px; font-family: var(--f-sans, sans-serif);
	font-style: normal; font-size: 12px; letter-spacing: .04em; color: #9fb0c0;
}
/* Media a tutta larghezza del pannello (oltre il padding di 20px): restano
   immersivi solo i formati "a schermo" — video ed embed, più carosello e
   panorama 360° che hanno regole proprie più sotto. */
.bg-ml-detail__body .wp-block-video,
.bg-ml-detail__body .wp-block-embed {
	margin: 22px -20px; width: calc(100% + 40px); max-width: none;
}
/* Foto e gallerie: incolonnate col testo, stesso margine laterale. */
.bg-ml-detail__body figure,
.bg-ml-detail__body .wp-block-image,
.bg-ml-detail__body .wp-block-gallery,
.bg-ml-detail__body > img {
	margin: 22px 0; width: 100%; max-width: none;
}
/* 3D: rientra più del testo (32px contro 20px). Il modello galleggia nel suo
   spazio, staccato dal resto della colonna. */
.bg-ml-detail__body model-viewer {
	margin: 22px 12px; width: auto; max-width: none;
}
/* Il panorama 360° è una <figure>: va riportato a tutta larghezza. */
.bg-ml-detail__body .bg-scheda-pano-wrap {
	margin: 22px -20px; width: calc(100% + 40px);
}
.bg-ml-detail__body img { display: block; width: 100%; height: auto; }
/* Stesso tetto per le verticali nel corpo editoriale. Escluse le slide di
   carosello e galleria (.bg-ml-media-img), che hanno già altezza propria. */
.bg-ml-detail__body img:not(.bg-ml-media-img) { max-height: 70vh; object-fit: contain; }
.bg-ml-detail__body figure img { margin: 0; }
.bg-ml-detail__body figcaption {
	margin: 8px 0 0; font-size: 12px; color: #9fb0c0; line-height: 1.5; text-align: left;
}
/* Dentro i media a tutta larghezza la didascalia rientra da sola, per restare
   incolonnata col testo. */
.bg-ml-detail__body .wp-block-video figcaption,
.bg-ml-detail__body .wp-block-embed figcaption,
.bg-ml-detail__body .bg-scheda-pano-wrap figcaption { margin: 8px 20px 0; }
.bg-ml-detail__body model-viewer { position: relative; height: 56vh; background: #0c0e11; }
.bg-ml-detail__body video,
.bg-ml-detail__body iframe { display: block; width: 100%; border: 0; }
/* Il <video> arriva con height="720" + aspect-ratio inline: senza height:auto
   l'attributo vince → box verticale e video 16:9 in mezzo a bande nere. */
.bg-ml-detail__body video { height: auto; }
/* Embed (YouTube): nel pannello (render via REST) Astra avvolge l'oembed in
   .ast-oembed-container (con height:100% inline), DENTRO lo spacer responsive di
   block-library (.wp-embed-responsive … ::before{padding-top:56.25%}). Quel
   riquadro restava riservato e vuoto SOPRA il video. Annullo entrambi i wrapper
   e lo spacer con !important (batte anche lo stile inline) e lascio l'iframe
   dimensionarsi da solo via aspect-ratio. */
.bg-ml-detail__body .wp-block-embed__wrapper,
.bg-ml-detail__body .ast-oembed-container {
	position: static !important; height: auto !important; padding: 0 !important; max-width: none !important;
}
.bg-ml-detail__body .wp-block-embed__wrapper::before,
.bg-ml-detail__body .ast-oembed-container::before {
	display: none !important; content: none !important; padding-top: 0 !important;
}
.bg-ml-detail__body .wp-block-embed iframe {
	position: static !important; display: block !important;
	width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;
}
/* Galleria Gutenberg: griglia a 3 colonne, come /scheda/.
   `:not(.carosello)` come nella pagina scheda: senza, queste regole colpivano
   anche le gallerie destinate al carosello, che invece il JS sostituisce con
   .bg-ml-media-group (una foto per volta). */
.bg-ml-detail__body .wp-block-gallery:not(.carosello) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bg-ml-detail__body .wp-block-gallery:not(.carosello) figure { margin: 0; width: auto; }
.bg-ml-detail__body .wp-block-gallery:not(.carosello) figure img { aspect-ratio: 1 / 1; object-fit: cover; }
/* Pre-JS il carosello è nascosto, come su /scheda/: evita il lampo della
   griglia prima che il JS la trasformi. */
.bg-ml-detail__body .wp-block-gallery.carosello { visibility: hidden; }
/* Zoom della griglia (single-scheda.js initGridZoom): clic su una miniatura →
   foto singola a piena larghezza/intera; nuovo clic → torna alla griglia. */
.bg-ml-detail__body .wp-block-gallery.bg-grid-zoomable figure.wp-block-image { cursor: zoom-in; }
.bg-ml-detail__body .wp-block-gallery.is-single { display: block; }
.bg-ml-detail__body .wp-block-gallery.is-single figure.wp-block-image { display: none; }
.bg-ml-detail__body .wp-block-gallery.is-single figure.wp-block-image.is-zoomed { display: block; cursor: zoom-out; }
.bg-ml-detail__body .wp-block-gallery.is-single figure.wp-block-image.is-zoomed img {
	aspect-ratio: auto; width: 100%; height: auto; max-height: 70vh; object-fit: contain;
}

/* Galleria marcata "carosello": single-scheda.js (buildCarousel) la converte in
   .bg-scheda__carousel con slide in CROSSFADE (assolute + opacità). Nel pannello
   senza queste regole cadrebbe sul carosello a scorrimento generico (slide 56vh
   object-fit:contain → bande nere) e le frecce SVG resterebbero a misura naturale.
   Qui: a tutta larghezza del pannello, immagini che riempiono il riquadro
   (cover, niente bande), frecce piccole e minimali. */
.bg-ml-detail__body .bg-scheda__carousel { position: relative; margin: 22px -20px; width: calc(100% + 40px); }
.bg-ml-detail__body .bg-scheda__carousel .bg-ml-media-carousel {
	display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; cursor: default;
}
.bg-ml-detail__body .bg-scheda__carousel .bg-ml-media-slide {
	position: absolute; inset: 0; flex: none; height: auto;
	opacity: 0; transition: opacity .6s ease; background: #0b0d10; pointer-events: none;
}
.bg-ml-detail__body .bg-scheda__carousel .bg-ml-media-slide.is-active { opacity: 1; pointer-events: auto; }
.bg-ml-detail__body .bg-scheda__carousel .bg-ml-media-slide .bg-ml-media-img {
	width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; display: block;
}
.bg-ml-detail__body .bg-scheda__carousel .bg-ml-media-arrow { width: 30px; height: 30px; font-size: 0; }
.bg-ml-detail__body .bg-scheda__carousel .bg-ml-media-arrow svg { width: 20px; height: 20px; }
.bg-ml-detail__body .bg-scheda__carousel .bg-ml-media-caption {
	margin: 8px 20px 0; font-size: 12px; line-height: 1.5; color: #9fb0c0; transition: opacity .4s ease;
}

/* Panorama 360° (Pannellum). La <figure> .bg-scheda-pano-wrap eredita la
   larghezza piena dalla regola "media" sopra; il div interno ha altezza zero
   di default → senza questa regola il visore collassa (spazio vuoto) e l'hint
   resta sospeso. Inizializzato da window.bgSchedaInit() (single-scheda.js). */
.bg-ml-detail__body .bg-scheda-pano-wrap { position: relative; }
.bg-ml-detail__body .bg-scheda-pano {
	position: relative; height: 56vh; overflow: hidden; background: #0c0e11;
}

/* Hint "trascina…" sopra modello 3D e panorama: senza queste regole l'SVG
   sarebbe a grandezza naturale (le frecce/arco giganti). Sparisce alla 1ª
   interazione (classe is-hidden aggiunta dal JS). */
.bg-ml-detail__body .bg-3d-hint {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px; border-radius: 999px; white-space: nowrap;
	background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	color: #fff; font-size: 13px; letter-spacing: .04em;
	pointer-events: none; opacity: 1; transition: opacity .3s ease;
	animation: bg-ml-hint-pulse 2.6s ease-in-out infinite;
}
.bg-ml-detail__body .bg-3d-hint svg { width: 18px; height: 18px; display: block; }
.bg-ml-detail__body .bg-3d-hint.is-hidden { opacity: 0; animation: none; }
@keyframes bg-ml-hint-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.bg-ml-detail__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 4px; }
.bg-ml-detail__tag {
	font: inherit; font-size: 11px; color: #c6ccd3; background: none; cursor: pointer;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px; padding: 2px 10px; line-height: 1.4; text-transform: capitalize;
	transition: border-color .15s, color .15s;
}
.bg-ml-detail__tag:hover { color: #fff; border-color: rgba(255,255,255,.5); }

/* --- Navigazione prev/next tra schede della selezione --- */
.bg-ml-detail__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px 18px; }
.bg-ml-detail__navbtn {
	font: inherit; font-size: 20px; line-height: 1; width: 30px; height: 30px;
	background: none; color: #fff; border: 0; cursor: pointer; opacity: .8; transition: opacity .15s;
}
.bg-ml-detail__navbtn[disabled] { opacity: .25; cursor: default; }
.bg-ml-detail__navbtn:not([disabled]):hover { opacity: 1; }
.bg-ml-detail__navpos { font-size: 12px; color: #9fb0c0; }

/* --- Media divisi per tipo --- */
.bg-ml-media-group { position: relative; }
.bg-ml-media-tag {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	background: rgba(0,0,0,.55); color: #fff; border-radius: 4px; padding: 3px 7px;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none;
}
.bg-ml-media-carousel {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; cursor: grab;
	scrollbar-width: none; -ms-overflow-style: none;
}
.bg-ml-media-carousel::-webkit-scrollbar { display: none; }
.bg-ml-media-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.bg-ml-media-slide {
	flex: 0 0 100%; scroll-snap-align: center; height: 56vh; position: relative;
	display: flex; align-items: center; justify-content: center; background: #000;
}
.bg-ml-media-slide .bg-ml-media-img {
	max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
	user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.bg-ml-media-slide .bg-ml-media-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.bg-ml-media-slide .bg-ml-media-3dviewer { width: 100%; height: 100%; background: #0b0d10; }
.bg-ml-media-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 4px; }
.bg-ml-media-dot {
	width: 6px; height: 6px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
	background: rgba(255,255,255,.3); transition: background .15s;
}
.bg-ml-media-dot.is-active { background: #fff; }
/* Galleria dopo il testo: slide coprono il riquadro (object-fit: cover) → niente bande nere. */
.bg-ml-detail__gallery { margin: 8px 0 0; }
.bg-ml-detail__gallery .bg-ml-media-slide { background: #0b0d10; }
.bg-ml-detail__gallery .bg-ml-media-slide .bg-ml-media-img {
	width: 100%; height: 100%; max-width: none; max-height: none;
	object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none;
}
/* Frecce minimali sovrapposte, centrate sull'immagine. Niente ovale: solo il glifo. */
.bg-ml-media-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 34px; line-height: 1;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
	opacity: .8; transition: opacity .15s;
}
/* Sempre senza superficie: neutralizza il background che Astra applica su
   button:focus / :active (specificità 0,1,1 batterebbe .bg-ml-media-arrow). */
.bg-ml-media-arrow,
.bg-ml-media-arrow:hover,
.bg-ml-media-arrow:focus,
.bg-ml-media-arrow:active {
	background: transparent;
	box-shadow: none;
}
.bg-ml-media-arrow:hover { opacity: 1; }
.bg-ml-media-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.bg-ml-media-arrow--prev { left: 8px; }
.bg-ml-media-arrow--next { right: 8px; }
.bg-ml-media-video { width: 100%; display: block; background: #000; }
.bg-ml-media-audio { width: 100%; display: block; padding: 12px 20px; box-sizing: border-box; }
.bg-ml-media-3d {
	display: inline-flex; align-items: center; gap: 8px; margin: 12px 20px; padding: 8px 12px;
	color: #fff; font-size: 13px; text-decoration: none;
	border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
}
.bg-ml-media-3d:hover { border-color: rgba(255,255,255,.5); }
.bg-ml-media-badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; background: #fff; color: #0b0d10; border-radius: 4px; padding: 1px 5px; }
.bg-ml-media-3dviewer { width: 100%; height: 56vh; display: block; background: #0b0d10; --poster-color: #0b0d10; }

/* --- Dati del bene (datazione, stato, riferimenti) --- */
.bg-ml-detail__bene { margin: 8px 0 0; padding: 12px 20px; display: grid; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.bg-ml-bene-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; }
.bg-ml-bene-row dt { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #98a2ad; }
.bg-ml-bene-row dd { margin: 0; font-size: 13.5px; color: #c6ccd3; }
.bg-ml-bene-row dd a { color: #fff; }
.bg-ml-stato { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); }

/* --- Approfondimento progetto --- */
.bg-ml-detail__progetto {
	display: block; margin: 12px 20px 0; padding: 12px 14px;
	border: 1px solid rgba(255,255,255,.15); border-radius: 10px;
	color: #c6ccd3; font-size: 13.5px; text-decoration: none; background: rgba(255,255,255,.03);
}
.bg-ml-detail__progetto strong { color: #fff; }
.bg-ml-detail__progetto:hover { border-color: rgba(255,255,255,.4); }

/* --- Schede correlate --- */
.bg-ml-detail__correlate { padding: 16px 20px 0; }
.bg-ml-detail__correlate-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #98a2ad; margin: 0 0 10px; }
.bg-ml-correl-grid { display: grid; gap: 8px; }
.bg-ml-correl { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.bg-ml-correl__thumb { width: 48px; height: 48px; border-radius: 8px; background-size: cover; background-position: center; background-color: #1a1d22; flex: 0 0 auto; }
.bg-ml-correl__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bg-ml-correl__title { color: #e7ecf0; font-size: 13.5px; line-height: 1.25; }
.bg-ml-correl__meta { color: #9fb0c0; font-size: 11.5px; }
.bg-ml-correl:hover .bg-ml-correl__title { color: #fff; }

/* --- Fonte --- */
/* (La barra azioni Inquadra/Espandi/Vai alla scheda è stata rimossa: inquadratura
   automatica, resizer del tray e corpo Gutenberg già reso nel pannello.) */

/* ── Fix override Astra: il parent applica un background chiaro su
   button:hover/:focus/:active (specificità 0,1,1). Sui bottoni "piatti" del tray
   (testo chiaro, superficie trasparente) diventa bianco-su-bianco → il testo
   sparisce. Li forzo trasparenti su tutti gli stati interattivi; gli hover voluti
   (colore testo, bordo) restano nelle regole dedicate sopra. Classe+pseudo (0,2,0)
   batte button:focus (0,1,1). Stesso rimedio già usato per .bg-ml-media-arrow. */
.bg-ml-crumb:hover, .bg-ml-crumb:focus, .bg-ml-crumb:active,
.bg-ml-correl:hover, .bg-ml-correl:focus, .bg-ml-correl:active,
.bg-ml-detail__tag:hover, .bg-ml-detail__tag:focus, .bg-ml-detail__tag:active,
.bg-ml-detail__navbtn:hover, .bg-ml-detail__navbtn:focus, .bg-ml-detail__navbtn:active {
	background: transparent; box-shadow: none;
}
/* La freccia "‹ Torna all'elenco" resta una pillola scura anche su focus/active. */
.bg-ml-detail__back:focus, .bg-ml-detail__back:active { background: rgba(0,0,0,.45); box-shadow: none; }

/* ── Stesso override, lato testo: Astra imposta anche `color` su
   button:hover/:focus/:active (0,1,1) → sui bottoni piatti del tray il testo
   diventa scuro su superficie scura e il pulsante sparisce. Pin del colore
   voluto con classe+pseudo (0,2,0). `:not(.is-active)` dove esiste lo stato
   attivo invertito (testo scuro su bianco), che deve restare tale. */
.bg-ml-crumb:hover, .bg-ml-crumb:focus, .bg-ml-crumb:active,
.bg-ml-detail__tag:hover, .bg-ml-detail__tag:focus, .bg-ml-detail__tag:active,
.bg-ml-detail__navbtn:hover, .bg-ml-detail__navbtn:focus, .bg-ml-detail__navbtn:active,
.bg-ml-detail__back:hover, .bg-ml-detail__back:focus, .bg-ml-detail__back:active,
.bg-ml-activechip:hover, .bg-ml-activechip:focus, .bg-ml-activechip:active,
.bg-ml-media-arrow:hover, .bg-ml-media-arrow:focus, .bg-ml-media-arrow:active,
.bg-ml-basemap__btn:not(.is-active):hover, .bg-ml-basemap__btn:not(.is-active):focus, .bg-ml-basemap__btn:not(.is-active):active,
.bg-ml-3d__btn:not(.is-active):not(:disabled):hover, .bg-ml-3d__btn:not(.is-active):focus, .bg-ml-3d__btn:not(.is-active):active,
.bg-ml-layers-toggle__btn:hover, .bg-ml-layers-toggle__btn:focus, .bg-ml-layers-toggle__btn:active {
	color: #fff;
}
/* I chip filtro non schiariscono in hover: conservano il grigio chiaro di base. */
.bg-ml-chip:not(.is-active):hover, .bg-ml-chip:not(.is-active):focus, .bg-ml-chip:not(.is-active):active {
	color: #dde2e7;
}
/* Stati attivi invertiti (testo scuro su bianco): non devono essere sbiancati. */
.bg-ml-chip.is-active:hover, .bg-ml-chip.is-active:focus,
.bg-ml-basemap__btn.is-active:hover, .bg-ml-basemap__btn.is-active:focus,
.bg-ml-3d__btn.is-active:hover, .bg-ml-3d__btn.is-active:focus { color: #111; background: #fff; }
.maplibregl-ctrl-top-left.is-layers-open .bg-ml-layers-toggle__btn:hover,
.maplibregl-ctrl-top-left.is-layers-open .bg-ml-layers-toggle__btn:focus { color: #111; background: #fff; }
/* Il 3D disabilitato resta spento anche al passaggio del mouse. */
.bg-ml-3d__btn:disabled:hover, .bg-ml-3d__btn:disabled:focus { color: #cdd3da; background: rgba(10,12,16,.8); }
.bg-ml-detail__fonte { padding: 0 20px; margin: 12px 0 0; font-size: 11.5px; color: #98a2ad; }

/* ── Modalità EMBED (iframe nelle tavole progetto) ───────────────
   Resta solo la mappa: il tray e tutto il guscio del sito (masthead,
   footer) restano nel DOM ma sono coperti dalla mappa a tutto schermo.
   Il tray va nascosto perché map-maplibre.js lo popola comunque. */
body.bg-map-embed { overflow: hidden; }
body.bg-map-embed .bg-map-app {
	position: fixed;
	inset: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	margin: 0;
}
body.bg-map-embed #bg-map-tray,
body.bg-map-embed .bg-tray-toggle,
body.bg-map-embed #bg-breadcrumb { display: none !important; }
/* height:auto annulla il `height:60vh` mobile di map-app.css: in embed il canvas
   deve riempire TUTTO l'iframe (proporzione dettata dalla tavola, non da 60vh).
   Senza, top:0+bottom:0+height:60vh è sovra-vincolato e l'altezza esplicita vince. */
body.bg-map-embed .bg-map-canvas { position: absolute; inset: 0; height: auto; }
body.bg-map-embed #bg-map { position: absolute; inset: 0; }

/* ---------------------------------------------- PRESENTAZIONE PROGETTO (modale)
   Compare alla prima visita (localStorage), riapribile dal pulsante info.
   Ancorato a .bg-map-app (position:relative): copre l'area mappa, non il masthead. */
.bg-ml-intro {
	position: absolute; inset: 0; z-index: 1300;
	/* Cornice sottile: ogni pixel qui è tolto al pannello, che deve entrare
	   intero senza scorrere. */
	display: flex; align-items: center; justify-content: center; padding: 10px;
	opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.bg-ml-intro.is-open { opacity: 1; pointer-events: auto; }
.bg-ml-intro__veil {
	position: absolute; inset: 0; background: rgba(0, 0, 0, .72);
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.bg-ml-intro__panel {
	position: relative; z-index: 1; width: 100%; max-width: 620px;
	background: #0b0b0b; border: 1px solid rgba(255, 255, 255, .12); border-radius: 5px;
	/* Stessa spalla sopra e ai lati: il riquadro dell'immagine si appoggia a una
	   cornice uniforme. Sotto un filo meno, perché i crediti sono già leggeri. */
	padding: 24px 24px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
	/* Con la guida all'uso il pannello è più alto: su schermi bassi scorre al
	   proprio interno invece di sbordare oltre l'area mappa.
	   overflow-x esplicito: con overflow-y:auto il browser porta l'asse
	   orizzontale ad auto da solo, e portando in vista un tab fuori schermo
	   trascinava di lato l'intero pannello, titolo compreso. */
	max-height: 100%; overflow-y: auto; overflow-x: hidden;
	overscroll-behavior: contain;
	transform: translateY(8px); transition: transform .3s ease;
}
.bg-ml-intro.is-open .bg-ml-intro__panel { transform: none; }
/* Riceve il fuoco all'apertura (tabindex="-1"): non deve mostrare contorno,
   è un punto di ingresso, non un comando. */
.bg-ml-intro__panel:focus { outline: none; }
.bg-ml-intro__eyebrow {
	margin: 0 0 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	font-weight: 600; color: #8a96a3;
}
.bg-ml-intro__title {
	margin: 0 0 18px; font-family: 'Lora', Georgia, serif; font-weight: 500;
	font-size: 28px; line-height: 1.2; color: #fff;
}
.bg-ml-intro__body { margin: 0 0 26px; }
.bg-ml-intro__body p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: #c7ced6; }
.bg-ml-intro__body p:last-child { margin-bottom: 0; }

/* ---- Presentazione a pagine.
   Una pagina per volta, come le guide al primo avvio di un programma: pagina 1
   il progetto, pagine 2-5 una funzionalità ciascuna. L'altezza minima è tarata
   sulla pagina più lunga, così passando avanti il pannello non si ridimensiona
   sotto le dita. */
/* L'altezza minima pareggia le pagine: hanno testi di lunghezza diversa e
   senza questa soglia il pannello si ridimensionerebbe a ogni passaggio.
   Il riquadro è 9/16 della larghezza del pannello; il resto è la pagina più
   lunga (tre punti elenco). */
/* Segue il riquadro: se quello si accorcia sugli schermi bassi, scende anche
   la soglia, altrimenti resterebbe un vuoto sotto il testo. 148px = la parte
   non-immagine della pagina più lunga (tre punti elenco). */
.bg-ml-intro__deck {
	min-height: calc(min(321px, 100vh - 430px) + 148px);
	margin: 0 0 14px;
	/* Tutte le pagine nella stessa cella: il blocco è alto quanto la più lunga e
	   non cambia altezza al cambio pagina. Senza, la barra sotto e il fondo del
	   pannello si spostavano a ogni «Avanti». */
	display: grid;
}
.bg-ml-intro__deck > .bg-ml-slide { grid-area: 1 / 1; }
/* Le pagine non correnti restano nella griglia a fare da calibro dell'altezza:
   tolte dal flusso con display:none, l'altezza tornerebbe a essere quella della
   pagina visibile. visibility:hidden le esclude da fuoco e lettori di schermo. */
.bg-ml-intro__deck > .bg-ml-slide[hidden] {
	display: block; visibility: hidden; pointer-events: none;
}

/* Il posto dell'immagine di riferimento: finché non c'è, un riquadro grigio
   che ne tiene la forma e lo spazio.
   L'altezza non è fissa ma legata a quella della finestra: tutto il resto
   della pagina (titolo, testo, barra, crediti) occupa ~390px, quindi è il
   riquadro a cedere spazio sugli schermi bassi. Così la presentazione entra
   sempre intera e non si scorre mai. A 306px il riquadro è 16:9 sul pannello
   largo 620px; sotto i ~1000px di finestra si accorcia. */
.bg-ml-slide__visual {
	/* Proporzione fissa 16:9, sempre. Sugli schermi bassi non si schiaccia:
	   rimpicciolisce per intero — cala l'altezza e la larghezza la segue —
	   restando centrata. Così la presentazione entra tutta senza scorrimento
	   e l'immagine non viene mai deformata. */
	/* Piena larghezza e 16:9 finché c'è spazio. Il max-height è la valvola: su
	   finestre basse il riquadro si accorcia (ritaglio più stretto, l'immagine
	   dentro non si deforma perché è in `cover`) invece di far scorrere il
	   pannello. Meglio un po' meno cielo che una barra di scorrimento. */
	width: 100%; aspect-ratio: 16 / 9;
	max-height: calc(100vh - 430px);
	margin: 0 0 14px;
	background: #26292e;
	border: 1px solid rgba(255, 255, 255, .07); border-radius: 5px;
	overflow: hidden;
}
.bg-ml-slide__visual img {
	display: block; width: 100%; height: 100%;
	object-fit: cover; border-radius: 5px;
}

/* Manrope su tutte le pagine, apertura compresa: la presentazione è uno
   strumento, non una pagina editoriale. */
.bg-ml-slide__title {
	margin: 0 0 9px;
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 17px; font-weight: 700; line-height: 1.25;
	letter-spacing: .01em; color: #fff;
}
.bg-ml-slide__text p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.55; color: #c7ced6; }
.bg-ml-slide__text p:last-child { margin-bottom: 0; }
.bg-ml-slide__text strong { color: #fff; font-weight: 600; }
.bg-ml-slide__points { margin: 12px 0 0; padding: 0; list-style: none; }
.bg-ml-slide__points li {
	position: relative; margin: 0 0 7px; padding-left: 14px;
	font-size: 12.5px; line-height: 1.5; color: #a8b0ba;
}
.bg-ml-slide__points li:last-child { margin-bottom: 0; }
.bg-ml-slide__points li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 4px; height: 1px; background: #6d7783;
}
.bg-ml-slide__points strong { color: #dfe4ea; font-weight: 600; }

/* Entrata in sola dissolvenza, uguale nei due sensi di marcia. Prima erano due
   animazioni speculari con una traslazione di 14px: lo scarto laterale, sommato
   al testo che cambia lunghezza da una pagina all'altra, si leggeva come uno
   scatto invece che come un passaggio. La direzione la dicono già i pallini. */
@keyframes bg-ml-slide-in { from { opacity: 0; } }
.bg-ml-slide.is-enter,
.bg-ml-slide.is-enter-back { animation: bg-ml-slide-in .26s ease both; }

/* ---- Barra di navigazione: Salta/Indietro · pallini · Avanti. */
/* Tre colonne: comando a sinistra · pallini · comando a destra. I pallini
   stanno al centro della barra senza posizionamento assoluto, che su schermo
   stretto finiva sopra il pulsante. Delle due voci di sinistra (Salta /
   Indietro) una è sempre display:none, quindi le colonne restano tre. */
.bg-ml-intro__nav {
	display: grid; grid-template-columns: 1fr auto 1fr;
	align-items: center; gap: 12px;
}
#bg-ml-skip { justify-self: start; }
/* Indietro e Avanti stanno insieme a destra: sono i due passi del percorso,
   mentre a sinistra resta l'uscita. */
.bg-ml-intro__steps { display: flex; align-items: center; gap: 14px; justify-self: end; }
/* margin-right: 0 azzera l'`auto` che .bg-ml-intro__cta si porta dietro da
   quando era il pulsante isolato in fondo al pannello: dentro la barra
   quell'auto lo spingeva a sinistra, contro i pallini, lasciando un vuoto sul
   bordo destro. */
/* Il pulsante detta l'altezza della barra: due pixel di padding in meno qui
   sono due pixel in più per l'immagine. */
.bg-ml-intro__nav .bg-ml-intro__cta {
	margin-right: 0; padding: 10px 22px;
	/* Larghezza fissa: «Avanti» ed «Esplora» hanno lunghezze diverse e senza
	   questa il pulsante cambierebbe taglia all'ultima pagina. */
	min-width: 132px; justify-content: center;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
/* L'hover del pulsante bianco: Astra veste button:hover di suo, serve un
   selettore almeno altrettanto specifico perché il grigio si veda. */
.bg-ml-intro__nav .bg-ml-intro__cta:hover { background: #d9d9d9; color: #000; box-shadow: none; }
.bg-ml-intro__nav .bg-ml-intro__cta:active { background: #c9c9c9; box-shadow: none; }
/* Il fuoco NON scurisce il fondo: all'apertura il pulsante è già a fuoco e
   sarebbe partito col colore dell'hover, rendendo l'hover invisibile. Il fuoco
   si segnala con il contorno. */
.bg-ml-intro__nav .bg-ml-intro__cta:focus { background: #fff; color: #000; box-shadow: none; }
.bg-ml-intro__nav .bg-ml-intro__cta:focus:hover { background: #d9d9d9; }
.bg-ml-intro__nav .bg-ml-intro__cta:focus-visible {
	outline: 2px solid var(--accent, #E63929); outline-offset: 3px;
}
/* Con "Salta" nascosto all'ultima pagina la prima colonna resta vuota: la
   griglia la tiene comunque, così i pallini non si spostano. */
.bg-ml-intro__nav > .bg-ml-intro__navbtn--ghost[hidden] { display: block; visibility: hidden; }
.bg-ml-intro__navbtn[hidden] { display: none; }
.bg-ml-intro__navbtn--ghost {
	padding: 10px 2px; margin: 0;
	background: none; border: none; border-radius: 0; box-shadow: none;
	color: #8a96a3; cursor: pointer;
	font-family: inherit; font-size: 12.5px; font-weight: 600;
	letter-spacing: .03em;
}
/* Astra veste button:hover/:focus di suo (fondo chiaro): stesso rimedio già
   usato per .bg-ml-item e .bg-tray-search__clear. */
.bg-ml-intro__navbtn--ghost:hover,
.bg-ml-intro__navbtn--ghost:focus,
.bg-ml-intro__navbtn--ghost:active { background: none; box-shadow: none; color: #fff; }
.bg-ml-intro__navbtn--ghost:focus-visible { outline: 2px solid var(--accent, #E63929); outline-offset: 3px; }

.bg-ml-intro__dots { display: flex; align-items: center; gap: 6px; }
.bg-ml-intro__dot {
	width: 5px; height: 5px; padding: 0; margin: 0;
	background: rgba(255, 255, 255, .22); border: none; border-radius: 50%;
	box-shadow: none; cursor: pointer;
	transition: background .15s, transform .15s;
}
.bg-ml-intro__dot:hover, .bg-ml-intro__dot:focus, .bg-ml-intro__dot:active {
	background: rgba(255, 255, 255, .45); box-shadow: none;
}
.bg-ml-intro__dot.is-on { background: #fff; transform: scale(1.25); }
.bg-ml-intro__dot.is-on:hover, .bg-ml-intro__dot.is-on:focus { background: #fff; }
.bg-ml-intro__dot:focus-visible { outline: 2px solid var(--accent, #E63929); outline-offset: 3px; }

.bg-ml-intro__cta {
	display: flex; align-items: center; width: fit-content; margin-right: auto;
	padding: 12px 24px;
	background: #fff; color: #000; border: none; border-radius: 5px; cursor: pointer;
	font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.bg-ml-intro__cta:hover, .bg-ml-intro__cta:focus { background: #e6e6e6; box-shadow: none; }
/* Paternità + crediti cartografici (ex attributionControl nativo): una sola
   riga in coda al pannello, discreta. Ogni riga qui è spazio tolto
   all'immagine, per questo stanno insieme. */
.bg-ml-intro__credits {
	margin: 12px 0 0;
	padding: 9px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 9.5px; line-height: 1.5; letter-spacing: .01em; font-weight: 400; color: #8a96a3;
	/* Niente text-wrap:balance, che distribuiva il testo su due righe anche
	   quando ne bastava una. Dove non basta (telefono) va a capo da sé. */
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* I link sono grigi come il testo: solo l'hover li porta a bianco. */
.bg-ml-intro__credits a {
	color: inherit; font-weight: 400; text-decoration: underline;
	text-decoration-thickness: .5px; text-underline-offset: 2px;
}
.bg-ml-intro__credits a:hover, .bg-ml-intro__credits a:focus {
	color: #fff; text-decoration-thickness: .5px;
}
.bg-ml-intro__credits a:focus-visible { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: 2px; }
/* Pulsante che riapre la presentazione */
.bg-ml-infobtn {
	/* 10px = lo stesso margine dal bordo che MapLibre dà ai suoi controlli: il
	   tasto si allinea alla colonna zoom/Strati/3D sul lato destro. */
	position: absolute; z-index: 1250; bottom: 10px; right: 10px;
	width: 31px; height: 31px; padding: 0; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	background: rgba(10, 12, 16, .8); border: 1px solid rgba(255, 255, 255, .12); color: #cdd3da;
	border-radius: 50%; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: background .15s, color .15s;
}
.bg-ml-infobtn:hover, .bg-ml-infobtn:focus { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
body.bg-map-embed .bg-ml-intro,
body.bg-map-embed .bg-ml-infobtn { display: none !important; }
@media (max-width: 600px) {
	/* Su telefono la modale è ancorata in alto, non centrata: l'area mappa è
	   alta quanto lo schermo e un pannello centrato finiva sotto la piega,
	   invisibile finché non si scorreva. */
	/* Spalla superiore più generosa dei lati: staccata dall'header invece di
	   sembrarne incollata. */
	.bg-ml-intro { align-items: flex-start; padding: 28px 8px 8px; }
	.bg-ml-intro__panel { padding: 20px 20px 18px; }
	.bg-ml-intro__title { font-size: 24px; }
	/* I crediti sono un obbligo di licenza: su schermo stretto tornano a capo
	   invece di essere troncati dai puntini. */
	.bg-ml-intro__credits { white-space: normal; overflow: visible; text-overflow: clip; }
	.bg-ml-slide__title { font-size: 16px; }
	/* Il min-height è tarato su un pannello largo 620px: qui lascerebbe un vuoto
	   sotto le pagine corte. L'altezza costante la garantisce già l'impilamento
	   delle pagine nella stessa cella (regola base del deck). */
	.bg-ml-intro__deck { min-height: 0; }
	/* Le tre colonne laterali della barra devono valere esattamente la stessa
	   frazione perché i pallini stiano al centro: `1fr` da solo cede alla colonna
	   con più contenuto (a destra Indietro + Avanti) e spinge i pallini di lato,
	   `minmax(0, 1fr)` no. Perché la colonna destra ci stia dentro senza sfondare,
	   sotto si stringe tutto ciò che la compone. */
	.bg-ml-intro__nav { gap: 8px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
	.bg-ml-intro__steps { gap: 8px; }
	/* Una riga sola: il testo spezzato in due alzerebbe la barra. min-width uguale
	   per «Avanti» ed «Esplora», così il pulsante non cambia taglia all'ultima
	   pagina — cambiarla sposterebbe di nuovo i pallini. */
	.bg-ml-intro__nav .bg-ml-intro__cta { padding: 11px 8px; font-size: 11px; white-space: nowrap; min-width: 64px; }
	/* «Indietro» sparisce solo alla prima pagina: se lo si toglie dal flusso la
	   colonna destra si stringe e i pallini scivolano di lato al primo «Avanti».
	   Qui resta al suo posto, invisibile — stesso trattamento già usato per
	   «Salta» sul lato sinistro. */
	.bg-ml-intro__steps > #bg-ml-prev[hidden] { display: block; visibility: hidden; }
	.bg-ml-intro__navbtn--ghost { font-size: 11px; }
	.bg-ml-intro__dots { gap: 6px; }
}

/* -------------------------------------------------- MOVIMENTO RIDOTTO
   Chi ha chiesto meno animazioni al sistema operativo: niente transizioni né
   scorrimenti fluidi. I voli della camera sono neutralizzati lato JS
   (NO_MOTION in map-maplibre.js), qui resta l'interfaccia. */
@media (prefers-reduced-motion: reduce) {
	.bg-map-app *,
	.bg-map-app *::before,
	.bg-map-app *::after,
	.bg-ml-intro,
	.bg-ml-intro * {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}