/* Visit Bomba – Mappa interattiva  v1.1.7
   Palette ripresa dall'illustrazione originale. */

.vbm {
	--vbm-crema: #f1efe1;
	--vbm-carta: #fbfaf4;
	--vbm-inchiostro: #3c2a1c;
	--vbm-tenue: #7d6b59;
	--vbm-bordo: #ded8c4;
	--vbm-ombra: 0 2px 6px rgba(60, 42, 28, .12);
	--vbm-ombra-alta: 0 -6px 34px rgba(60, 42, 28, .2);
	--vbm-r: 14px;
	--vbm-inv: 1;                /* 1 / scala, aggiornato da JS */
	--vbm-h: var(--vbm-h-desktop, 76vh);
	--vbm-accento: #50a4a5;

	font-family: inherit;
	color: var(--vbm-inchiostro);
	line-height: 1.5;
	max-width: 100%;
	/* il tema puo' centrare il contenuto della riga che ospita lo shortcode */
	text-align: left;
}

.vbm-scheda-body,
.vbm-popup-inner,
.vbm-scheda h3,
.vbm-scheda p {
	text-align: left;
}

.vbm-cta {
	text-transform: none;
	letter-spacing: normal;
}

.vbm *,
.vbm *::before,
.vbm *::after {
	box-sizing: border-box;
}

/* Elenco statico: resta nell'HTML per i motori di ricerca ma non si vede mai,
   così non lampeggia in attesa del JavaScript. Chi il JavaScript non ce l'ha
   lo rivede grazie allo <style> dentro il <noscript> del plugin. */
.vbm-seo-list {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------- toolbar */

.vbm-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 12px;
}

.vbm-search {
	position: relative;
	flex: 1 1 240px;
	min-width: 0;
}

.vbm-search input {
	width: 100%;
	font: inherit;
	font-size: 16px;              /* evita lo zoom automatico su iOS */
	padding: 11px 38px 11px 40px;
	border: 1px solid var(--vbm-bordo);
	border-radius: 999px;
	background: var(--vbm-carta);
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.vbm-search input:focus {
	outline: 2px solid var(--vbm-accento);
	outline-offset: 1px;
}

.vbm-search svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	opacity: .5;
	pointer-events: none;
}

.vbm-search-clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--vbm-tenue);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	display: none;
}

.vbm-search.has-value .vbm-search-clear {
	display: block;
}

.vbm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.vbm-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: inherit;
	font-size: .86em;
	line-height: 1;
	padding: 9px 14px;
	min-height: 38px;
	border: 1px solid var(--vbm-bordo);
	border-radius: 999px;
	background: var(--vbm-carta);
	color: var(--vbm-tenue);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.vbm-chip::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--c, var(--vbm-tenue));
	flex: none;
}

.vbm-chip[data-cat="tutti"]::before {
	display: none;
}

.vbm-chip[aria-pressed="true"] {
	background: var(--c, var(--vbm-inchiostro));
	border-color: var(--c, var(--vbm-inchiostro));
	color: #fff;
}

.vbm-chip[aria-pressed="true"]::before {
	background: rgba(255, 255, 255, .85);
}

.vbm-chip:focus-visible {
	outline: 2px solid var(--vbm-inchiostro);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ aiuto */

.vbm-aiuto {
	margin: -2px 0 12px;
	font-size: .84em;
	line-height: 1.4;
	color: var(--vbm-tenue);
}

/* Il testo giusto lo decide il tipo di puntatore, non la larghezza:
   un portatile con schermo stretto usa comunque il mouse. */
.vbm-aiuto-mouse {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.vbm-aiuto-tocco { display: none; }
	.vbm-aiuto-mouse { display: inline; }
}

/* ------------------------------------------------------------------ corpo */

.vbm-corpo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}

/* ------------------------------------------------------------------ stage */

.vbm-stage {
	position: relative;
	height: var(--vbm-h);
	min-height: 300px;
	border-radius: var(--vbm-r);
	overflow: hidden;
	background: var(--vbm-sfondo, var(--vbm-crema));
	border: 1px solid var(--vbm-bordo);
	touch-action: none;           /* la mappa gestisce da sé tutti i gesti */
	overscroll-behavior: contain;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.vbm-stage.is-panning {
	cursor: grabbing;
}

.vbm-stage.is-sopra-pin {
	cursor: pointer;
}

.vbm-canvas {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	will-change: transform;
}

.vbm-canvas.is-animating {
	transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.vbm-canvas img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	-webkit-user-drag: none;
}

.vbm-img-lq {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.vbm-img-hq {
	position: relative;
	opacity: 0;
	transition: opacity .4s;
}

.vbm-img-hq.is-loaded {
	opacity: 1;
}

/* ------------------------------------------------------------------- pin  */

/* I pin vivono nello spazio dell'illustrazione: l'anello resta sempre
   incollato all'icona disegnata, a qualunque ingrandimento.
   Il tocco non passa da qui: lo gestisce lo stage scegliendo il pin più
   vicino al dito, così gli anelli vicini non si rubano il clic. */
.vbm-pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--vbm-pin, 176px);
	height: var(--vbm-pin, 176px);
	margin: calc(var(--vbm-pin, 176px) / -2) 0 0 calc(var(--vbm-pin, 176px) / -2);
	padding: 0;
	border: 0;
	background: none;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.vbm-pin span {
	display: block;
	width: var(--vbm-pin, 176px);
	height: var(--vbm-pin, 176px);
	border-radius: 30%;
	border: calc(2px * var(--vbm-inv)) solid var(--c);
	box-shadow: 0 0 0 calc(2px * var(--vbm-inv)) rgba(255, 255, 255, .6);
	opacity: .55;
	transition: opacity .15s, transform .15s;
}

.vbm-pin.is-servizio span {
	border-radius: 50%;
}

.vbm-pin.is-hover span {
	opacity: 1;
	transform: scale(1.1);
}

.vbm-pin.is-active span,
.vbm-pin:focus-visible span {
	opacity: 1;
	background: rgba(255, 255, 255, .22);
	box-shadow: 0 0 0 calc(3px * var(--vbm-inv)) rgba(255, 255, 255, .95),
	            0 0 0 calc(6px * var(--vbm-inv)) var(--c);
	transform: scale(1.16);
}

.vbm-pin.is-dim {
	opacity: .1;
}

/* pulsazione al primo caricamento, per far capire che i simboli si toccano */
.vbm.is-hinting .vbm-pin:not(.is-dim) span {
	animation: vbm-pulse 1.7s ease-out 2;
}

@keyframes vbm-pulse {
	0%, 100% { opacity: .5; transform: scale(1); }
	50%      { opacity: 1;  transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
	.vbm.is-hinting .vbm-pin span { animation: none; }
	.vbm-canvas.is-animating,
	.vbm-popup.is-animating { transition: none; }
}

/* --------------------------------------------------------------- comandi  */

.vbm-controls {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 7;
}

.vbm-ctrl {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--vbm-bordo);
	border-radius: 11px;
	background: rgba(251, 250, 244, .94);
	color: var(--vbm-inchiostro);
	box-shadow: var(--vbm-ombra);
	cursor: pointer;
	padding: 0;
	backdrop-filter: blur(4px);
}

.vbm-ctrl:hover {
	background: #fff;
}

.vbm-ctrl:focus-visible {
	outline: 2px solid var(--vbm-inchiostro);
	outline-offset: 2px;
}

.vbm-ctrl svg {
	width: 19px;
	height: 19px;
}

/* --------------------------------------------------------------- pannello */

.vbm-pannello {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* --------------------------------------------------------------- scheda   */

.vbm-scheda {
	position: relative;
	background: var(--vbm-carta);
	border: 1px solid var(--vbm-bordo);
	border-radius: var(--vbm-r);
	overflow: hidden;
}

.vbm-scheda[hidden] {
	display: none;
}

.vbm-scheda-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(251, 250, 244, .9);
	color: var(--vbm-inchiostro);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--vbm-ombra);
}

.vbm-scheda-close:focus-visible {
	outline: 2px solid var(--vbm-inchiostro);
	outline-offset: 2px;
}

.vbm-scheda-body {
	padding: 16px 18px 18px;
}

.vbm-scheda-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--vbm-crema);
}

/* frecce per passare da un luogo all'altro senza tornare all'elenco */
.vbm-nav {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 11px;
	padding-right: 38px;
}

/* se il contenuto deve scorrere, le frecce restano comunque in vista */
.vbm-popup .vbm-nav {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--vbm-carta);
	padding-top: 13px;
	margin-top: -13px;
}

.vbm-nav-btn {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--vbm-bordo);
	border-radius: 50%;
	background: var(--vbm-carta);
	color: var(--vbm-inchiostro);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.vbm-nav-btn svg {
	width: 16px;
	height: 16px;
}

.vbm-nav-btn:hover {
	background: #fff;
	border-color: var(--vbm-inchiostro);
}

.vbm-nav-btn:focus-visible {
	outline: 2px solid var(--vbm-inchiostro);
	outline-offset: 2px;
}

.vbm-nav span {
	font-size: .78em;
	color: var(--vbm-tenue);
	font-variant-numeric: tabular-nums;
}

.vbm-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .75em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--c, var(--vbm-tenue));
	padding: 5px 11px;
	border-radius: 999px;
	margin-bottom: 9px;
}

.vbm-badge b {
	display: grid;
	place-items: center;
	min-width: 19px;
	height: 19px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .28);
	font-size: .95em;
}

.vbm-scheda h3 {
	margin: 0 0 4px;
	font-size: 1.2em;
	line-height: 1.25;
}

.vbm-scheda .vbm-sub {
	margin: 0 0 10px;
	color: var(--vbm-tenue);
	font-size: .9em;
}

.vbm-scheda p.vbm-testo {
	margin: 0 0 14px;
	font-size: .94em;
}

.vbm-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	min-height: 44px;
	border-radius: 999px;
	background: var(--c, var(--vbm-inchiostro));
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: .93em;
	box-shadow: var(--vbm-ombra);
}

.vbm-cta:hover {
	filter: brightness(1.06);
}

/* --------------------------------------------------------------- popup    */

/* Su desktop la scheda compare attaccata al pin, dove sta guardando l'occhio.
   Su mobile resta il foglio dal basso: un fumetto sarebbe troppo stretto. */
.vbm-popup {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 6;
	width: 292px;
	max-width: calc(100% - 24px);
	background: var(--vbm-carta);
	border: 1px solid var(--vbm-bordo);
	border-radius: 14px;
	box-shadow: 0 14px 38px rgba(60, 42, 28, .26);
	transform: translate3d(var(--px, 0), var(--py, 0), 0);
}

/* quando la mappa scorre verso il punto scelto, il fumetto la segue */
.vbm-popup.is-animating {
	transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.vbm-popup[hidden] {
	display: none;
}

/* il contenuto scorre se la mappa e' bassa, così il fumetto non esce mai */
.vbm-popup-inner {
	position: relative;
	max-height: var(--maxh, 70vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 13px;
}

/* La punta insegue il pin: resta puntata sul simbolo anche quando il
   riquadro viene accostato a un bordo della mappa. */
.vbm-popup::after {
	content: "";
	position: absolute;
	width: 13px;
	height: 13px;
	background: var(--vbm-carta);
	border: 1px solid var(--vbm-bordo);
	transform: rotate(45deg);
}

.vbm-popup.is-sopra::after {
	bottom: -7px;
	left: var(--freccia, 50%);
	margin-left: -7px;
	border-width: 0 1px 1px 0;
}

.vbm-popup.is-sotto::after {
	top: -7px;
	left: var(--freccia, 50%);
	margin-left: -7px;
	border-width: 1px 0 0 1px;
}

.vbm-popup.is-destra::after {
	left: -7px;
	top: var(--frecciaY, 50%);
	margin-top: -7px;
	border-width: 0 0 1px 1px;
}

.vbm-popup.is-sinistra::after {
	right: -7px;
	top: var(--frecciaY, 50%);
	margin-top: -7px;
	border-width: 1px 1px 0 0;
}

.vbm-popup .vbm-scheda-img {
	border-radius: 13px 13px 0 0;
	aspect-ratio: 2 / 1;
}

.vbm-popup .vbm-scheda-body {
	padding: 13px 15px 15px;
}

.vbm-popup h3 {
	font-size: 1.05em;
}

.vbm-popup p.vbm-testo {
	font-size: .88em;
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vbm-popup .vbm-cta {
	padding: 9px 15px;
	min-height: 40px;
	font-size: .88em;
}

/* --------------------------------------------------------------- elenco   */

.vbm-list-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
}

.vbm-list-head h3 {
	margin: 0;
	font-size: 1em;
	font-weight: 700;
}

.vbm-list-head span {
	font-size: .82em;
	color: var(--vbm-tenue);
	font-variant-numeric: tabular-nums;
}

.vbm-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
	grid-template-columns: 1fr;
}

.vbm-list li {
	margin: 0;
}

.vbm-item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	text-align: left;
	font: inherit;
	padding: 10px 12px;
	min-height: 50px;
	border: 1px solid var(--vbm-bordo);
	border-radius: 10px;
	background: var(--vbm-carta);
	color: inherit;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.vbm-item:hover,
.vbm-item.is-active {
	border-color: var(--c);
	background: #fff;
}

.vbm-item.is-active {
	box-shadow: inset 3px 0 0 var(--c);
}

.vbm-item:focus-visible {
	outline: 2px solid var(--vbm-inchiostro);
	outline-offset: 2px;
}

.vbm-item i {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--c);
	color: #fff;
	font-style: normal;
	font-size: .78em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* i servizi non hanno un numero: al suo posto un simbolo */
.vbm-item i svg {
	width: 15px;
	height: 15px;
}

.vbm-item .vbm-item-txt {
	min-width: 0;
}

.vbm-item strong {
	display: block;
	font-weight: 600;
	font-size: .93em;
	line-height: 1.3;
}

.vbm-item small {
	color: var(--vbm-tenue);
	font-size: .8em;
}

.vbm-empty {
	padding: 14px 2px;
	color: var(--vbm-tenue);
	font-size: .92em;
	margin: 0;
}

/* ------------------------------------------------------- schermo intero   */

.vbm.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: var(--vbm-sfondo, var(--vbm-crema));
	padding: 10px;
	margin: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.vbm.is-fullscreen .vbm-toolbar,
.vbm.is-fullscreen .vbm-pannello {
	display: none;
}

.vbm.is-fullscreen .vbm-corpo {
	flex: 1;
	min-height: 0;
	grid-template-columns: 1fr;
}

.vbm.is-fullscreen .vbm-stage {
	height: 100%;
	min-height: 0;
}

/* a schermo intero su telefono la scheda resta un foglio dal basso.
   La scheda e' figlia di .vbm, non del pannello: cosi' non sparisce
   insieme a lui. */
@media (max-width: 999px) {
	.vbm.is-fullscreen .vbm-scheda:not([hidden]) {
		z-index: 100000;
	}

	/* qui sotto non c'e' piu' niente della pagina da scansare: il pieno
	   schermo copre badge privacy e pulsanti fluttuanti */
	.vbm.is-fullscreen .vbm-scheda:not([hidden]) .vbm-scheda-body {
		padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	}
}

/* -------------------------------------------------------------- mobile    */

@media (max-width: 999px) {
	.vbm {
		--vbm-h: var(--vbm-h-mobile, 60vh);
	}

	.vbm-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		width: 100%;
		margin: 0 -4px;
		padding: 0 4px 2px;
	}

	.vbm-chips::-webkit-scrollbar {
		display: none;
	}

	.vbm-chip {
		flex: none;
	}

	.vbm-popup {
		display: none !important;
	}

	/* Il foglio lascia spazio a quello che sta gia' in fondo allo schermo:
	   badge privacy, pulsanti fluttuanti, barra di sistema del telefono.
	   La misura arriva da JS in --vbm-basso. */
	.vbm-scheda:not([hidden]) .vbm-scheda-body {
		padding-bottom: calc(18px + var(--vbm-basso, 0px) + env(safe-area-inset-bottom, 0px));
	}

	/* su schermo stretto la scheda sale dal basso sopra tutto il resto */
	.vbm-scheda:not([hidden]) {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		border-radius: 18px 18px 0 0;
		border-width: 1px 0 0;
		max-height: 72vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: var(--vbm-ombra-alta);
		animation: vbm-su .26s cubic-bezier(.22, .61, .36, 1);
	}

	@keyframes vbm-su {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}
}

/* -------------------------------------------------------------- desktop   */

@media (min-width: 1000px) {
	.vbm-corpo {
		grid-template-columns: minmax(0, 1fr) 340px;
	}

	.vbm-pannello {
		height: var(--vbm-h);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 4px;
	}

	.vbm-pannello::-webkit-scrollbar {
		width: 8px;
	}

	.vbm-pannello::-webkit-scrollbar-thumb {
		background: var(--vbm-bordo);
		border-radius: 4px;
	}

	/* su desktop parla il fumetto sulla mappa, non la colonna di destra */
	.vbm-scheda {
		display: none;
	}
}

/* ------------------------------------------------------------ murales */

/* il pulsante «Vedi la foto» è un <button>: via bordi e font del tema */
button.vbm-cta {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	line-height: inherit;
}

/* il bordo beige della mappa turistica stonerebbe attorno all'azzurro */
.vbm-dati-murales .vbm-stage {
	border-color: #b8dada;
}

/* sull'illustrazione dei murales i numeri sono dischi, non quadrati */
.vbm-dati-murales .vbm-pin span {
	border-radius: 50%;
}

/* molte foto dei murales sono verticali: una scheda meno schiacciata */
.vbm-dati-murales .vbm-scheda-img,
.vbm-dati-murales .vbm-popup .vbm-scheda-img {
	aspect-ratio: 4 / 3;
}