/* ==========================================================================
   MAPPA immersiva — Dashboard (Fase 1 design)
   Masthead in cima, sotto: pannello "tray" a sinistra + mappa a destra.
   Token dal design system (variables.css). Scope: body.bg-mappa.
   ========================================================================== */

/* --- Override navbar/layout, solo su questa pagina ---------------------- */
body.bg-mappa { overflow-x: hidden; } /* footer resta accessibile scorrendo */
body.bg-mappa #custom-sticky-header { display: none !important; } /* sticky disattivato qui */

/* Neutralizza il contenitore Astra: la mappa va a tutta larghezza/altezza */
body.bg-mappa #content,
body.bg-mappa #content > .ast-container,
body.bg-mappa #primary,
body.bg-mappa .site-main,
body.bg-mappa .entry-content { margin: 0; padding: 0; max-width: 100%; }

/* --- Contenitore app (in flusso, non overlay) -------------------------- */
.bg-map-app {
	/* Larghezza del tray: di default lo schermo è diviso a metà esatta tra
	   pannello e mappa. 15px = padding 5 + gap 5 + padding 5 di questo
	   contenitore flex, sottratti perché le due metà risultino identiche.
	   Sovrascritto inline da map-maplibre.js (wireTrayResize) quando l'utente
	   trascina la maniglia; il clamp replica i limiti min/max di quel codice. */
	--bg-tray-w: clamp(280px, (100vw - 15px) / 2, 60vw);
	position: relative;
	/* Stacking context proprio: gli overlay interni (modale intro z-index 1300,
	   tasto ⓘ 1250) sono numerati per stare in ordine fra loro, non rispetto al
	   sito. Senza questo z-index il contenitore non crea contesto e quei valori
	   si confrontano con #masthead (z-index 1000), che su mobile è sticky: allo
	   scorrimento il pannello passava sopra l'header. Con z-index:0 tutto il
	   contenuto della mappa resta confinato sotto. */
	z-index: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw); /* breakout dal contenitore centrato */
	height: calc(100vh - var(--bg-masthead-h, 80px));
	/* dvh: su mobile 100vh non tiene conto della barra indirizzi, che entra e
	   esce durante lo scorrimento e taglia il fondo della mappa. */
	height: calc(100dvh - var(--bg-masthead-h, 80px));
	display: flex;
	gap: 5px;
	padding: 5px;
	box-sizing: border-box;
	background: var(--bg, #000);
}

.bg-tray-list[hidden],
.bg-tray-filters[hidden],
.bg-tray-detail[hidden] { display: none; } /* l'attributo hidden vince sul display:flex */

/* --- Tray (pannello sinistro) ------------------------------------------ */
.bg-map-tray {
	position: relative;
	flex: 0 0 var(--bg-tray-w, 360px);
	width: var(--bg-tray-w, 360px);
	background: var(--bg-elev-1, #111);
	border: 1px solid var(--border, rgba(242, 242, 242, 0.08));
	border-radius: var(--radius-card, 16px);
	overflow-y: auto;   /* il pannello scorre come un unico flusso */
	overflow-x: hidden;
	transition: flex-basis var(--dur-sm, 280ms) var(--ease-out), width var(--dur-sm, 280ms) var(--ease-out), opacity var(--dur-s, 200ms);
}

.bg-map-app.is-collapsed .bg-map-tray {
	flex-basis: 0;
	width: 0;
	border-width: 0;
	opacity: 0;
	pointer-events: none;
}

/* --- Maniglia di ridimensionamento del tray ----------------------------- */
/* Posizionata in absolute sopra il gap di 5px tra pannello e mappa: così non
   entra nel flusso flex e non raddoppia il gap. Larga 11px (area di presa
   comoda), a riposo invisibile: appare un filo verticale in hover/focus/drag. */
.bg-tray-resizer {
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: calc(var(--bg-tray-w, 360px) + 2px);
	width: 11px;
	z-index: 1100; /* sopra la mappa, sotto il toggle (1200) */
	cursor: col-resize;
	touch-action: none; /* i pointer events gestiscono il drag anche da touch */
	background: transparent;
	transition: left var(--dur-sm, 280ms) var(--ease-out);
}
.bg-tray-resizer::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 5px;
	width: 1px;
	background: var(--text, #F2F2F2);
	opacity: 0;
	transition: opacity var(--dur-s, 200ms) var(--ease-out);
}
.bg-tray-resizer:hover::before,
.bg-tray-resizer:focus-visible::before,
.bg-map-app.is-resizing .bg-tray-resizer::before { opacity: 0.55; }
.bg-tray-resizer:focus-visible { outline: none; }

/* Durante il drag: nessuna transizione (il pannello deve seguire il puntatore
   1:1) e nessuna selezione di testo accidentale nel pannello. */
.bg-map-app.is-resizing { user-select: none; }
.bg-map-app.is-resizing .bg-map-tray,
.bg-map-app.is-resizing .bg-tray-toggle,
.bg-map-app.is-resizing .bg-tray-resizer { transition: none; }

/* Canvas congelato durante il drag: ridimensionare il canvas WebGL a ogni
   pointermove obbliga MapLibre a cancellare il framebuffer e ridisegnare da zero
   (confini + 6900 comuni + collision detection delle etichette) — il ridisegno
   non sta in un frame e la mappa lampeggia. Qui il canvas viene invece portato
   alla massima larghezza che l'area mappa può assumere e lasciato lì, mentre
   .bg-map-canvas (overflow:hidden) lo clippa: un solo map.resize() al rilascio.
   Resta CENTRATO sul contenitore, non ancorato a un lato: così il centro
   geografico non si muove e la mappa viene rifilata simmetricamente sui due
   lati — lo stesso effetto del resize continuo, che il centro lo conserva. */
.bg-map-app.is-resizing #bg-map {
	left: calc((100% - var(--bg-map-frozen-w, 100%)) / 2);
	right: auto;
	width: var(--bg-map-frozen-w, 100%);
}

/* Stato in cui la larghezza manuale non si applica: pannello chiuso. */
.bg-map-app.is-collapsed .bg-tray-resizer { display: none; }

/* --- Canvas mappa ------------------------------------------------------- */
.bg-map-canvas {
	position: relative;          /* ancora gli overlay (breadcrumb) */
	flex: 1 1 auto;
	border-radius: var(--radius-card, 16px);
	overflow: hidden;
	border: 1px solid var(--border, rgba(242, 242, 242, 0.08));
}
#bg-map { width: 100%; height: 100%; background: var(--bg-elev-1, #111); }

/* Trattamento colore dei tile satellitari: il valore di `filter` è calcolato
   e applicato inline da map-app.js (refreshTileTreatment), graduato sullo zoom.
   Qui resta solo la transizione, per una dissolvenza morbida al cambio zoom. */
/* Trattamento colore satellite: ora interamente nel WebGL (assets/js/map-app.js,
   fragment shader + processTile). Nessun filtro CSS sulle tile → pan/zoom fluidi. */

/* --- Badge livello di zoom (sviluppo) ---------------------------------- */
.bg-zoom-badge {
	font-family: var(--f-mono, monospace);
	font-size: 0.72rem;
	color: #fff;
	background: rgba(17, 17, 17, 0.8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--border-hover, rgba(242, 242, 242, 0.38));
	border-radius: 6px;
	padding: 3px 8px;
	font-variant-numeric: tabular-nums;
}

/* --- Nome regione su hover (etichetta grande, dentro l'area, ruotata) ---
   font-size e transform (rotazione + centratura) sono calcolati per regione
   da map-app.js e applicati inline. */
.bg-region-hover-name {
	display: inline-block;
	font-family: var(--f-sans, sans-serif);
	line-height: 1;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	text-indent: 0.18em; /* compensa il tracking finale per centrare il testo */
	white-space: nowrap;
	color: #fff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

/* --- Breadcrumb sulla mappa (gerarchia cliccabile) --------------------- */
.bg-breadcrumb {
	position: absolute;
	bottom: 16px;
	left: 16px;
	z-index: 1100;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 66px); /* lascia spazio all'attribuzione "i" a destra */
	flex-wrap: nowrap;
	padding: 7px 14px;
	background: rgba(17, 17, 17, 0.65);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--border-hover, rgba(242, 242, 242, 0.38));
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	/* Nomi lunghi: scorre orizzontalmente invece di tagliare/fuoriuscire. */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.bg-breadcrumb::-webkit-scrollbar { display: none; }
.bg-breadcrumb .bg-ml-crumb,
.bg-breadcrumb .bg-ml-crumb-sep { flex: 0 0 auto; white-space: nowrap; }
.bg-breadcrumb__item {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--f-sans, sans-serif);
	font-size: 0.8rem;
	color: var(--text-2, rgba(242, 242, 242, 0.6));
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--dur-s, 200ms) var(--ease-out);
}
.bg-breadcrumb .bg-breadcrumb__item:hover,
.bg-breadcrumb .bg-breadcrumb__item:focus,
.bg-breadcrumb .bg-breadcrumb__item:active {
	background: transparent;   /* annulla l'eventuale sfondo bianco di Astra sui button */
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	box-shadow: none;
	outline: none;
}
.bg-breadcrumb__item.is-current {
	color: var(--text, #F2F2F2);
	font-weight: 600;
}
.bg-breadcrumb__sep {
	color: var(--text-3, rgba(242, 242, 242, 0.35));
	font-size: 0.8rem;
}

/* --- Toggle comprimi/espandi ------------------------------------------- */
.bg-tray-toggle {
	position: absolute;
	top: 17px; /* 5px padding + 12px: margine simmetrico al left, incassato nell'angolo */
	/* Dentro la mappa, in alto a sinistra: segue il bordo destro del tray
	   (5px padding + larghezza + 5px gap + 12px di margine interno). */
	left: calc(var(--bg-tray-w, 360px) + 22px);
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	padding: 0;
	background: rgba(17, 17, 17, 0.65);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--text, #F2F2F2);
	border: 1px solid var(--border-hover, rgba(242, 242, 242, 0.38));
	border-radius: 50%;
	cursor: pointer;
	z-index: 1200; /* sopra i layer Leaflet */
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	transition: left var(--dur-sm, 280ms) var(--ease-out), background var(--dur-s), color var(--dur-s), border-color var(--dur-s);
}
.bg-tray-toggle:hover {
	background: rgba(30, 30, 30, 0.92);
	border-color: var(--text, #F2F2F2);
	color: #fff;
}
/* Da collassato: +8px per compensare l'offset del breakout (.bg-map-app width:100vw
   margin-left:calc(50% - 50vw) parte ~7,5px fuori dal bordo per la scrollbar) → ~16px reali. */
.bg-map-app.is-collapsed .bg-tray-toggle { left: 24px; }
/* translateX(-1px) = compensazione ottica: il chevron è geometricamente centrato ma la
   punta acuminata sposta il baricentro percepito verso i bracci. La rotate() lo ribalta
   così da chiuso (›) lo shift resta verso la punta. rotate(0) esplicito per animare solo l'angolo. */
.bg-tray-toggle__icon { width: 16px; height: 16px; display: block; transform: rotate(0deg) translateX(-1px); transition: transform var(--dur-sm) var(--ease-out); }
.bg-map-app.is-collapsed .bg-tray-toggle__icon { transform: rotate(180deg) translateX(-1px); }

/* --- Torna all'elenco (in cima al pannello, sopra i filtri) ------------- */
.bg-tray-back[hidden] { display: none; }
/* Margine più stretto in basso: qui il bottone precede la barra dei filtri,
   non la copertina della scheda. */
.bg-tray-back .bg-ml-detail__back { margin: 14px 20px 4px; }

/* --- Barra superiore: toggle Filtri + conteggio ------------------------ */
.bg-tray-top {
	/* Non più sticky: la barra filtri scorre insieme al contenuto del pannello. */
	background: var(--bg-elev-1, #111);
}
.bg-tray-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;  /* con molti filtri attivi la riga va a capo */
	gap: 12px;
	padding: 12px 20px 10px;
}

/* --- Chip dei filtri attivi (rimovibili) ------------------------------- */
/* Stanno nella stessa riga del pulsante Filtri, tra questo e il conteggio. */
.bg-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
}
.bg-active-filters[hidden] { display: none; } /* l'attributo vince sul display:flex */
.bg-active-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--f-sans, sans-serif);
	font-size: 0.72rem;
	color: #fff;
	background: var(--accent, #E63929);
	border: 0;
	border-radius: 999px;
	padding: 4px 10px;
	cursor: pointer;
	transition: filter var(--dur-s, 200ms);
}
.bg-active-chip:hover { filter: brightness(1.1); }
.bg-active-chip__x { font-size: 0.95rem; line-height: 1; opacity: 0.85; }
.bg-active-clear {
	font-family: var(--f-sans, sans-serif);
	font-size: 0.72rem;
	color: var(--text-2, rgba(242, 242, 242, 0.5));
	background: transparent;
	border: 0;
	padding: 4px 6px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--dur-s, 200ms);
}
.bg-active-clear:hover { color: var(--text, #F2F2F2); }
.bg-filtri-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--f-sans, sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: var(--track-link-s, 0.02em);
	color: var(--text, #F2F2F2);
	background: transparent;
	border: 1px solid var(--border-hover, rgba(242, 242, 242, 0.38));
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
	transition: background var(--dur-s, 200ms) var(--ease-out), border-color var(--dur-s);
}
.bg-filtri-toggle:hover { border-color: var(--text, #F2F2F2); }
.bg-filtri-toggle.is-on {
	background: var(--bg-elev-2, #1A1A1A);
	border-color: var(--text, #F2F2F2);
}
/* --- Toggle luoghi / schede (segmented) -------------------------------- */
/* Due segmenti dentro un unico anello: dice a colpo d'occhio che sono i due
   stati di una stessa lista, non due pulsanti indipendenti. */
.bg-tray-mode {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--border-hover, rgba(242, 242, 242, 0.38));
	border-radius: 999px;
	overflow: hidden;
	flex: 0 0 auto;
}
.bg-tray-mode__btn {
	font-family: var(--f-sans, sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: var(--track-meta, 0.03em);
	text-transform: uppercase;
	color: var(--text-2, rgba(242, 242, 242, 0.5));
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 6px 12px;
	cursor: pointer;
	transition: background var(--dur-s, 200ms) var(--ease-out), color var(--dur-s, 200ms);
}
.bg-tray-mode__btn + .bg-tray-mode__btn {
	border-left: 1px solid var(--border, rgba(242, 242, 242, 0.18));
}
.bg-tray-mode__btn:hover { color: var(--text, #F2F2F2); }
.bg-tray-mode__btn.is-active {
	color: var(--text, #F2F2F2);
	background: var(--bg-elev-2, #1A1A1A);
}

.bg-tray-count {
	font-family: var(--f-sans, sans-serif);
	font-size: 0.72rem;
	letter-spacing: var(--track-meta, 0.03em);
	text-transform: uppercase;
	color: var(--text-2, rgba(242, 242, 242, 0.5));
}

/* --- Filtri (pannello a toggle, integrato nel flusso) ------------------ */
.bg-tray-filters {
	padding: 2px 20px 10px;
}
.bg-filter-group { margin-bottom: 14px; }
.bg-filter-group__label {
	font-family: var(--f-sans, sans-serif);
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-wide, 0.14em);
	color: var(--text-3, rgba(242, 242, 242, 0.35));
	margin: 0 0 8px;
}
.bg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--f-sans, sans-serif);
	font-size: 0.75rem;
	color: var(--text, #F2F2F2);
	background: transparent;
	border: 1px solid var(--border-hover, rgba(242, 242, 242, 0.38));
	border-radius: 999px;
	padding: 5px 12px;
	cursor: pointer;
	transition: background var(--dur-s, 200ms) var(--ease-out), border-color var(--dur-s), opacity var(--dur-s);
}
.bg-chip:hover { border-color: var(--text, #F2F2F2); }
.bg-chip.is-on {
	background: var(--accent, #E63929);
	border-color: var(--accent, #E63929);
	color: #fff;
}
.bg-chip__count {
	font-size: 0.68rem;
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}
.bg-chip.is-on .bg-chip__count { opacity: 0.85; }
.bg-chip.is-disabled {
	opacity: 0.28;
	cursor: default;
	pointer-events: none;
}

/* Sotto-livelli del Luogo: etichetta tier + chip rientrati */
.bg-tier-label {
	font-family: var(--f-sans, sans-serif);
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-wide, 0.14em);
	color: var(--text-3, rgba(242, 242, 242, 0.35));
	margin: 12px 0 6px;
}
.bg-chips--sub {
	padding-left: 10px;
	border-left: 1px solid var(--border, rgba(242, 242, 242, 0.08));
}
.bg-chip--sub { font-size: 0.72rem; padding: 4px 10px; }

/* Confini cliccabili sulla mappa */
.bg-mappa .leaflet-interactive { cursor: pointer; }

/* Aree (figli di una regione): rientrate, più piccole, stato attivo chiaro */
.bg-chips--areas {
	width: 100%;
	margin-top: 6px;
	padding-left: 10px;
	border-left: 1px solid var(--border, rgba(242, 242, 242, 0.08));
}
.bg-chip--area { font-size: 0.7rem; padding: 4px 10px; }
.bg-chip--area.is-on {
	background: var(--text, #F2F2F2);
	border-color: var(--text, #F2F2F2);
	color: var(--bg, #000);
}

/* --- Elenco punti ------------------------------------------------------- */
.bg-tray-list {
	padding: 6px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bg-list-card {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 8px;
	cursor: pointer;
	transition: background var(--dur-s, 200ms) var(--ease-out), border-color var(--dur-s);
}
.bg-list-card:hover { background: var(--bg-elev-2, #1A1A1A); border-color: var(--border, rgba(242, 242, 242, 0.08)); }
.bg-list-card__thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-color: var(--bg-elev-2, #1A1A1A);
}
.bg-list-card__thumb.is-empty { background-image: none; }
.bg-list-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bg-list-card__title {
	font-family: var(--f-sans, sans-serif);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text, #F2F2F2);
	line-height: 1.25;
}
.bg-list-card__meta {
	font-family: var(--f-sans, sans-serif);
	font-size: 0.72rem;
	letter-spacing: var(--track-meta, 0.03em);
	text-transform: uppercase;
	color: var(--text-2, rgba(242, 242, 242, 0.5));
}
.bg-tray-empty {
	font-family: var(--f-sans, sans-serif);
	font-size: 0.85rem;
	color: var(--text-2, rgba(242, 242, 242, 0.5));
	padding: 16px 10px;
}

/* --- Dettaglio singolo punto ------------------------------------------- */
.bg-tray-detail {
	padding: 14px 22px 28px;
}
.bg-detail__back {
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--f-sans, sans-serif);
	font-size: 0.78rem;
	color: var(--text-2, rgba(242, 242, 242, 0.5));
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 4px 0 14px;
	cursor: pointer;
	transition: color var(--dur-s);
}
.bg-detail__back:hover,
.bg-detail__back:focus {
	color: var(--text, #F2F2F2);
	background: transparent;
	box-shadow: none;
}
/* Navigazione prec/succ tra i punti della selezione corrente */
.bg-detail__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 14px;
}
.bg-detail__navbtn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 4px;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--text-2, rgba(242, 242, 242, 0.5));
	background: none;
	border: 0;
	cursor: pointer;
	transition: color var(--dur-s, 200ms), opacity var(--dur-s);
}
.bg-detail__navbtn:hover { color: var(--text, #F2F2F2); }
.bg-detail__navbtn:disabled { opacity: 0.28; cursor: default; pointer-events: none; }
.bg-detail__navpos {
	font-family: var(--f-mono, monospace);
	font-size: 0.78rem;
	letter-spacing: var(--track-meta, 0.03em);
	color: var(--text-2, rgba(242, 242, 242, 0.5));
	font-variant-numeric: tabular-nums;
}

.bg-detail__img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-img, 5px);
	display: block;
	margin-bottom: 16px;
}
.bg-detail__title {
	font-family: var(--f-serif, Georgia, serif);
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: var(--track-tight, -0.015em);
	color: var(--text, #F2F2F2);
	margin: 0 0 6px;
}
.bg-detail__year {
	display: inline-block;
	font-family: var(--f-mono, monospace);
	font-size: 0.78rem;
	color: var(--text-2, rgba(242, 242, 242, 0.5));
	margin-bottom: 12px;
}
.bg-detail__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bg-detail__tag {
	font-family: var(--f-sans, sans-serif);
	font-size: 0.68rem;
	letter-spacing: var(--track-caption, 0.01em);
	color: var(--text-2, rgba(242, 242, 242, 0.5));
	border: 1px solid var(--border, rgba(242, 242, 242, 0.08));
	border-radius: 999px;
	padding: 3px 10px;
}
.bg-detail__text {
	font-family: var(--f-sans, sans-serif);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--text, #F2F2F2);
	margin: 0 0 18px;
}
.bg-detail__zoom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	font-family: var(--f-sans, sans-serif);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: var(--track-link-s, 0.02em);
	color: var(--text, #F2F2F2);
	background: transparent;
	border: 1px solid var(--border-hover, rgba(242, 242, 242, 0.38));
	border-radius: 999px;
	padding: 9px 14px;
	margin-bottom: 14px;
	cursor: pointer;
	transition: background var(--dur-s, 200ms) var(--ease-out), border-color var(--dur-s);
}
.bg-detail__zoom:hover {
	background: var(--bg-elev-2, #1A1A1A);
	border-color: var(--text, #F2F2F2);
}

.bg-detail__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--f-sans, sans-serif);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: var(--track-link-s, 0.02em);
	color: var(--text, #F2F2F2);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--text-2, rgba(242, 242, 242, 0.5));
	text-decoration-thickness: 1px;
	transition: color var(--dur-s, 200ms), text-decoration-color var(--dur-s);
}
.bg-detail__link:hover {
	color: var(--accent, #E63929);
	text-decoration-color: var(--accent, #E63929);
}

/* --- Segnaposto custom + stato attivo ---------------------------------- */
.bg-pin-icon { display: grid; place-items: center; } /* centra il dot nel box icona */
.bg-pin {
	display: block;
	width: 7px;             /* piccolo */
	height: 7px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
	transition: background var(--dur-s, 200ms) var(--ease-out), transform var(--dur-s), box-shadow var(--dur-s);
}
/* hover: resta rosso, cresce un filo */
.bg-pin-icon:hover .bg-pin {
	transform: scale(1.25);
}
/* selezionato (uno alla volta): bianco, senza contorno */
.bg-pin-icon.is-active .bg-pin {
	width: 10px;
	height: 10px;
	background: var(--accent, #E63929);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* --- Cluster (gruppo di punti vicini) ---------------------------------- */
.bg-cluster {
	display: grid;
	place-items: center;
	width: 16px;            /* un po' più grande del dot da 7px */
	height: 16px;
	border-radius: 50%;
	background: #fff;
	color: #000;
	font-family: var(--f-sans, sans-serif);
	font-size: 0.58rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
	transition: background var(--dur-s, 200ms) var(--ease-out), color var(--dur-s);
}
.bg-cluster-icon:hover .bg-cluster {
	background: #000;
	color: #fff;
}
/* Raggruppamento che contiene il punto selezionato dalla scheda: rosso */
.bg-cluster-icon.is-active .bg-cluster {
	background: var(--accent, #E63929);
	color: #fff;
}

/* --- Capoluoghi di provincia (riferimento, stile mappa classica) ------- */
.bg-capoluogo { position: relative; display: block; width: 14px; height: 14px; }
.bg-capoluogo__dot {
	display: none;          /* solo i nomi: niente cerchi/quadrato accanto a citta'/paesi */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	/* capoluogo di provincia: solo pallino (contorno scuro sottile per leggibilità) */
	box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.6);
}
/* Capoluogo di provincia: pallino un filo più grande */
.bg-capoluogo--provincia .bg-capoluogo__dot { width: 7px; height: 7px; }
/* Comune (centro minore): pallino più piccolo e tenue */
.bg-capoluogo--comune .bg-capoluogo__dot {
	width: 4px;
	height: 4px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.bg-capoluogo--comune .bg-capoluogo__name { font-size: 0.6rem; font-weight: 400; opacity: 0.9; }
/* Paese (comune minore): pallino minuscolo, nome ancora più piccolo */
.bg-capoluogo--paese .bg-capoluogo__dot {
	width: 3px;
	height: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.bg-capoluogo--paese .bg-capoluogo__name { font-size: 0.54rem; font-weight: 400; opacity: 0.8; }
/* Frazione (hamlet OSM): la più minuta */
.bg-capoluogo--frazione .bg-capoluogo__dot {
	width: 3px;
	height: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.bg-capoluogo--frazione .bg-capoluogo__name { font-size: 0.5rem; font-weight: 400; opacity: 0.72; }
/* Capoluogo di regione: pallino cerchiato (anello scuro + anello bianco + stacco) */
.bg-capoluogo--regione .bg-capoluogo__dot {
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 0 3px #fff, 0 0 0 4px rgba(0, 0, 0, 0.4);
}
/* Roma capitale: pin quadrato netto (angoli vivi), più grande */
.bg-capoluogo--capitale .bg-capoluogo__dot {
	width: 11px;
	height: 11px;
	border-radius: 0;
	box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.6);
}
.bg-capoluogo__name {
	position: absolute;
	left: calc(50% + 8px);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--f-sans, sans-serif);
	font-size: 0.66rem;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
}
.bg-capoluogo--capitale .bg-capoluogo__name { font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* --- Territori storico-geografici: etichetta d'area, centrata, non un punto - */
.bg-territorio-name {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--f-sans, sans-serif);
	font-size: 0.62rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(242, 242, 242, 0.82);
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
	pointer-events: none;
}

/* --- Scrollbar discreta ------------------------------------------------- */
/* Il thumb è un filo di 4px che galleggia nella corsia: i bordi trasparenti
   (invisibili grazie a background-clip) fanno da margine. Asimmetrici di
   proposito — a destra il pannello ha già 1px di bordo + 5px di gap prima
   della mappa, quindi 2px bastano perché il filo risulti otticamente al
   centro dello spazio tra il contenuto della scheda e la mappa. */
.bg-map-tray {
	scrollbar-width: thin;                                        /* Firefox */
	scrollbar-color: rgba(242, 242, 242, 0.28) transparent;
}
.bg-map-tray::-webkit-scrollbar { width: 12px; background: transparent; }
.bg-map-tray::-webkit-scrollbar-track { background: transparent; }
.bg-map-tray::-webkit-scrollbar-thumb {
	background: rgba(242, 242, 242, 0.28);
	background-clip: padding-box;
	border: 2px solid transparent;
	border-left-width: 6px;
	border-radius: 99px;
}
.bg-map-tray::-webkit-scrollbar-thumb:hover {
	background: rgba(242, 242, 242, 0.5);
	background-clip: padding-box;
}

/* --- Fix override Astra sui controlli del tray ------------------------- */
/* Il parent applica background e color su button:hover/:focus/:active
   (specificità 0,1,1): sui bottoni piatti del tray, che dichiarano il colore
   solo sulla classe base (0,1,0), il testo diventa scuro su superficie scura e
   il pulsante sparisce. Pin di superficie e colore con classe+pseudo (0,2,0).
   `:not(.is-on)` dove esiste lo stato attivo, che ha già colori suoi. */
.bg-filtri-toggle:hover, .bg-filtri-toggle:focus, .bg-filtri-toggle:active,
.bg-tray-mode__btn:not(.is-active):hover,
.bg-tray-mode__btn:not(.is-active):focus,
.bg-tray-mode__btn:not(.is-active):active,
.bg-chip:not(.is-on):hover, .bg-chip:not(.is-on):focus, .bg-chip:not(.is-on):active,
.bg-breadcrumb .bg-breadcrumb__item:hover,
.bg-breadcrumb .bg-breadcrumb__item:focus,
.bg-breadcrumb .bg-breadcrumb__item:active,
.bg-active-clear:hover, .bg-active-clear:focus, .bg-active-clear:active,
.bg-detail__back:hover, .bg-detail__back:focus, .bg-detail__back:active,
.bg-detail__navbtn:hover, .bg-detail__navbtn:focus, .bg-detail__navbtn:active {
	color: var(--text, #F2F2F2);
	background: transparent;
	box-shadow: none;
}
/* Filtri aperto e chip attivo conservano la loro superficie. */
.bg-filtri-toggle.is-on:hover, .bg-filtri-toggle.is-on:focus { background: var(--bg-elev-2, #1A1A1A); }
.bg-chip.is-on:hover, .bg-chip.is-on:focus { background: var(--accent, #E63929); color: #fff; box-shadow: none; }
.bg-tray-mode__btn.is-active:hover, .bg-tray-mode__btn.is-active:focus {
	color: var(--text, #F2F2F2); background: var(--bg-elev-2, #1A1A1A); box-shadow: none;
}
.bg-active-chip:hover, .bg-active-chip:focus, .bg-active-chip:active {
	color: #fff; background: var(--accent, #E63929); box-shadow: none;
}
.bg-tray-toggle:focus, .bg-tray-toggle:active {
	color: #fff; background: rgba(30, 30, 30, 0.92); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* --- Leaflet: zoom control intonato ------------------------------------ */
.bg-mappa .leaflet-control-zoom a {
	background: var(--bg-elev-2, #1A1A1A);
	color: var(--text, #F2F2F2);
	border-color: var(--border, rgba(242, 242, 242, 0.08));
}
.bg-mappa .leaflet-control-zoom a:hover { background: var(--accent, #E63929); }

/* --- Responsive: pannello come drawer sopra la mappa ------------------- */
@media (max-width: 760px) {
	/* Pagina unica che scorre: mappa e card sono due blocchi in flusso,
	   non un viewport fisso con scroll interno della card. */
	.bg-map-app {
		flex-direction: column;
		height: auto;            /* niente più 100vh: cresce col contenuto */
		min-height: calc(100vh - var(--bg-masthead-h, 80px));
		/* svh e non dvh: dvh si ricalcola mentre la barra indirizzi entra/esce
		   allo scroll, facendo pulsare l'altezza della mappa. svh è il valore
		   stabile (barra visibile) e non cambia durante lo scorrimento. */
		min-height: calc(100svh - var(--bg-masthead-h, 80px));
	}
	/* Mappa: blocco con altezza propria, in cima — altezza stabile allo scroll */
	.bg-map-canvas { order: 0; flex: 0 0 auto; height: 60vh; height: 60svh; }
	/* Card/elenco: blocco sotto, in flusso, senza scroll interno */
	.bg-map-tray {
		order: 1;
		flex: 0 0 auto;
		width: 100%;
		max-height: none;
		overflow-y: visible;     /* scorre la pagina, non il pannello */
	}
	.bg-tray-top { position: static; }   /* la barra non resta sticky dentro il pannello */
	/* Niente comprimi/espandi né ridimensionamento su mobile: il layout è a
	   colonna e il pannello occupa già tutta la larghezza. */
	.bg-tray-toggle { display: none; }
	.bg-tray-resizer { display: none; }
}