/* Colori ripresi dal Kit globale del sito: primary #F55D3E (arancione
   istituzionale, era #C3200F fino al 18/09), text #1B1B1B. Hover #97ABB1 è
   il colore "secondary" del Kit, non il custom color "pulsanti_hover"
   (#C2E434) — è il mouse over usato dal bottone iscrizione newsletter nel
   footer (widget HTML, id 3bda3ff7 su Footer2024/4239: sfondo
   var(--e-global-color-primary), hover var(--e-global-color-secondary) +
   testo #1b1b1b) e dal menu del sito, per coerenza. */
.na-mappa-wrapper {
	--na-mappa-pulsante: #F55D3E;
	--na-mappa-pulsante-hover: #97ABB1;
	--na-mappa-testo: #1B1B1B;

	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.na-mappa-mappa {
	width: 100%;
	height: 600px;
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

/* Testo introduttivo del luogo (widget Elementor "nmintro" sul template
   Singolo Luogo, id stabile assegnato apposta per poterlo referenziare da
   qui) — issue #7: i paragrafi multipli (es. Nuovo Armenia, 4 paragrafi)
   con la spaziatura di default sembravano troppo staccati. Selettore
   scoperto perché questo CSS carica solo su is_singular('luogo'), non
   tocca altri widget text-editor sul resto del sito. */
.elementor-element-nmintro p {
	margin-bottom: 0.6em;
	line-height: 1.6;
}

.elementor-element-nmintro p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.na-mappa-mappa {
		height: 420px;
	}
}

.na-mappa-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.na-mappa-filtri button.na-mappa-filtro {
	display: inline-block;
	width: auto;
	padding: 0.6em 1.4em;
	border: 2px solid var(--na-mappa-pulsante) !important;
	background: transparent !important;
	color: var(--na-mappa-pulsante) !important;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.na-mappa-filtri button.na-mappa-filtro:hover {
	background: var(--na-mappa-pulsante-hover) !important;
	border-color: var(--na-mappa-pulsante-hover) !important;
	color: var(--na-mappa-testo) !important;
}

.na-mappa-filtri button.na-mappa-filtro.is-attivo {
	background: var(--na-mappa-pulsante) !important;
	border-color: var(--na-mappa-pulsante) !important;
	color: #FFFFFF !important;
}

.na-mappa-filtri button.na-mappa-filtro.is-attivo:hover {
	background: var(--na-mappa-pulsante) !important;
	border-color: var(--na-mappa-pulsante) !important;
	color: #FFFFFF !important;
}

/* Popup dei pin: font/colore coerenti col testo del sito */
.leaflet-popup-content a {
	color: var(--na-mappa-testo);
	font-weight: 600;
	text-decoration: none;
}

.leaflet-popup-content a:hover {
	color: var(--na-mappa-pulsante);
}

/* Popup dei pin */
.na-mappa-popup {
	--na-mappa-pulsante: #F55D3E;
	--na-mappa-pulsante-hover: #97ABB1;
	--na-mappa-testo: #1B1B1B;
	color: var(--na-mappa-testo);
}

.na-mappa-popup-meta {
	margin: 0.2rem 0 0.6rem;
	font-size: 0.8rem;
	opacity: 0.75;
}

/* Specificità maggiore di ".leaflet-popup-content a" (colore/hover di
   default per i link nel popup), altrimenti quella regola vince e il
   bottone perde il testo bianco. */
.leaflet-popup-content a.na-mappa-popup-btn {
	display: inline-block;
	padding: 0.4em 1em;
	background: var(--na-mappa-pulsante);
	color: #FFFFFF;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.leaflet-popup-content a.na-mappa-popup-btn:hover {
	background: var(--na-mappa-pulsante-hover);
	color: var(--na-mappa-testo);
}

.na-mappa-popup-storie {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.5rem;
	max-height: 220px;
	overflow-y: auto;
}

.na-mappa-popup-storia .na-mappa-storia-testo {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
}

.na-mappa-popup-storia .na-mappa-storia-firma {
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
	font-style: italic;
	opacity: 0.75;
}

.na-mappa-storie {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	--na-mappa-pulsante: #F55D3E;
	--na-mappa-pulsante-hover: #97ABB1;
	--na-mappa-testo: #1B1B1B;
}

.na-mappa-storia {
	box-sizing: border-box;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--na-mappa-pulsante);
	background: rgba(0, 0, 0, 0.02);
}

/* Carosello storie (issue #10): su luoghi con molte storie (Bodio 13,
   Jenner 10, Livigno 9) la lista impilata rendeva la pagina lunghissima.
   Costruito su Swiper (già vendorizzato da Elementor, handle WP "swiper"),
   qui solo le regole di layout — struttura/animazione sono nel CSS di
   Swiper stesso, caricato come dipendenza in storie.php. Una storia per
   volta a tutta larghezza (issue #22, niente più peek delle adiacenti):
   che sia scorrevole lo dicono frecce e contatore "1 di N" sotto. */
.na-mappa-storie-carosello {
	--na-mappa-pulsante: #F55D3E;
	--na-mappa-pulsante-hover: #97ABB1;
	--na-mappa-testo: #1B1B1B;
}

/* Tutte le slide alte quanto la storia più lunga: il wrapper di Swiper è
   flex, con height:auto (invece del 100% di default) le slide si
   stirano sull'altezza della più alta. */
.na-mappa-storie-carosello .swiper-slide {
	height: auto;
}

.na-mappa-storie-nav {
	/* Fratello di .na-mappa-storie-carosello, non figlio: le custom
	   property non si ereditano tra elementi allo stesso livello, vanno
	   ridichiarate qui (stesso pattern già usato per
	   .na-mappa-popup/.na-mappa-media). */
	--na-mappa-pulsante: #F55D3E;
	--na-mappa-pulsante-hover: #97ABB1;
	--na-mappa-testo: #1B1B1B;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

/* Selettore "button.classe" + !important: il widget HTML della newsletter
   nel footer (presente in ogni pagina) applica `button { width: 100%; ... }`
   globalmente, altrimenti questi bottoni diventano enormi invece che un
   cerchio piccolo — stesso problema già risolto con !important sui bottoni
   filtro della mappa. */
button.na-mappa-storie-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: var(--na-mappa-pulsante);
	color: #FFFFFF;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.na-mappa-storie-btn:hover {
	background: var(--na-mappa-pulsante-hover);
	color: var(--na-mappa-testo);
}

.na-mappa-storie-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.na-mappa-storie-contatore {
	font-size: 0.85rem;
	color: var(--na-mappa-testo);
	opacity: 0.75;
	min-width: 4.5em;
	text-align: center;
}

.na-mappa-storia-tipo {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.2em 0.8em;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #FFFFFF;
	background: var(--na-mappa-pulsante);
}

.na-mappa-storia-tipo--avventura {
	background: #1B1B1B;
}

.na-mappa-storia-testo {
	margin: 0 0 0.5rem;
	color: var(--na-mappa-testo);
}

.na-mappa-storia-firma {
	margin: 0;
	font-size: 0.85rem;
	font-style: italic;
	opacity: 0.75;
}

.na-mappa-media {
	--na-mappa-pulsante: #F55D3E;
	--na-mappa-pulsante-hover: #97ABB1;
	--na-mappa-testo: #1B1B1B;
}

/* Box delle pagine tappa, stesso stile delle sezioni della pagina
   principale (Elementor, pagina podcast): fascia a tutta larghezza,
   contenuto a 1140px centrato, bianco e salmone alternati (la classe
   --colorato la decide media.php in base alla posizione). Colori presi
   dalle variabili globali del kit Elementor, così seguono il sito. */
.na-mappa-box {
	padding: 40px 0;
	text-align: center;
}

.na-mappa-box--colorato {
	background-color: var(--e-global-color-8983136);
	border-bottom: 2px solid var(--e-global-color-b42acd1);
}

/* Blocco, non flex: il CSS di Swiper dà margin auto al carosello, e in un
   flex column i margini auto vincono su align-self: stretch — il carosello
   prendeva la larghezza del contenuto e Swiper calcolava slide sbagliate. */
.na-mappa-box-interno {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 10px;
	box-sizing: border-box;
}

.na-mappa-box-interno > * + * {
	margin-top: 0.75rem;
}

.na-mappa-box .na-mappa-media-titolo {
	margin: 0 0 0.5rem;
	font-family: "Plain", sans-serif;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--e-global-color-secondary);
}

.na-mappa-box--colorato .na-mappa-media-titolo {
	color: var(--e-global-color-text);
}

.na-mappa-media-intro {
	font-family: "Plain", sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: var(--e-global-color-2791737);
}

.na-mappa-media-intro p {
	margin: 0 0 0.75em;
}

.na-mappa-media-intro p:last-child {
	margin-bottom: 0;
}

/* Embed YouTube dei box podcast/intervista: 16:9, centrato, non a tutta
   la larghezza del box (a 1140px il video sovrastava il testo). */
.na-mappa-media-video {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	aspect-ratio: 16 / 9;
}

.na-mappa-box-interno > .na-mappa-media-video {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.na-mappa-media-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Link nel testo ("Ascolta il podcast completo"): il fucsia del kit sul
   salmone non si legge, scuri e in grassetto come i link della pagina
   podcast. Prefisso .na-mappa-media per battere `.elementor-kit-5 a`. */
.na-mappa-media .na-mappa-media-intro a,
.na-mappa-media .na-mappa-media-intro a:hover {
	color: var(--na-mappa-testo);
	font-size: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* Storie dentro il box: card più stretta del box (a 1140px una storia di
   due righe restava su una riga sola, dispersiva), centrata, tipografia
   del sito invece del bordo arancione laterale usato fuori dai box. */
.na-mappa-box .na-mappa-storie-carosello,
.na-mappa-box .na-mappa-storie {
	max-width: 760px;
	margin: 1.5rem auto 0;
}

.na-mappa-box .na-mappa-storia {
	padding: 2rem 2.5rem;
	border-left: none;
	border-radius: 4px;
	text-align: center;
}

.na-mappa-box .na-mappa-storia-testo {
	font-family: "Plain", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

.na-mappa-box .na-mappa-storia-firma {
	font-family: "Plain", sans-serif;
}

.na-mappa-box--colorato button.na-mappa-storie-btn {
	background: #FFFFFF;
	color: var(--na-mappa-testo);
}

.na-mappa-box--colorato button.na-mappa-storie-btn:hover {
	background: var(--na-mappa-testo);
	color: #FFFFFF;
}

/* Prefisso .na-mappa-media: il kit Elementor colora tutti i link
   (`.elementor-kit-5 a`, specificità più alta di una classe sola) e il
   testo del bottone diventava arancione su arancione. */
.na-mappa-media .na-mappa-media-btn {
	display: inline-block;
	padding: 0.6em 1.4em;
	background: var(--na-mappa-pulsante);
	color: #FFFFFF;
	border-radius: 4px;
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

/* Anche l'hover del kit (`.elementor-kit-5 a:hover`) reimposta font-size
   e peso: senza fissarli qui il bottone cresceva di 1-2px al passaggio
   del mouse e spingeva giù il resto della pagina. */
.na-mappa-media a.na-mappa-media-btn:hover,
.na-mappa-media a.na-mappa-media-btn:focus {
	font-size: 0.85rem;
	font-weight: 500;
	line-height: inherit;
}

.na-mappa-media .na-mappa-media-btn:hover {
	background: var(--na-mappa-pulsante-hover);
	color: var(--na-mappa-testo);
}

/* Sul salmone l'arancione non si legge (stesso problema dei link della
   pagina podcast): bottoni e card bianchi nelle fasce colorate. */
.na-mappa-box--colorato .na-mappa-media-btn {
	background: #FFFFFF;
	color: var(--na-mappa-testo);
}

.na-mappa-box--colorato .na-mappa-media-btn:hover {
	background: var(--na-mappa-testo);
	color: #FFFFFF;
}

.na-mappa-box--colorato .na-mappa-storia {
	background: #FFFFFF;
}

/* Pin numerato delle tappe podcast (divIcon, non l'icona raster).
   Cerchio pieno invece della forma a goccia: evita il problema di dover
   contro-ruotare il numero per tenerlo dritto dentro un pin ruotato. */
.na-mappa-pin-tappa {
	display: flex;
	align-items: center;
	justify-content: center;
}

.na-mappa-pin-ordinario {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #1B1B1B;
	border: 2px solid #FFFFFF;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.na-mappa-pin-tappa-plain {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #F55D3E;
	border: 2px solid #FFFFFF;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.na-mappa-pin-tappa-numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #F55D3E;
	border: 2px solid #FFFFFF;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	color: #FFFFFF;
	font-size: 0.9rem;
	font-weight: 700;
}

/* Navigazione precedente/successiva tra le tappe podcast */
.na-mappa-tappa-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.na-mappa-tappa-nav-link {
	color: #1B1B1B;
	font-weight: 600;
	text-decoration: none;
}

.na-mappa-tappa-nav-link:hover {
	color: #F55D3E;
}

.na-mappa-tappa-nav-next {
	margin-left: auto;
	text-align: right;
}

/* Link alla pagina principale sopra il titolo del luogo (#35): stesso
   stile della nav tappe, più piccolo, allineato a sinistra. */
.na-mappa-torna {
	/* La colonna Elementor è un flex wrap: senza 100% il link finirebbe
	   sulla stessa riga del titolo. */
	width: 100%;
	margin-bottom: 1rem;
	text-align: left;
}

.single-luogo .na-mappa-torna a.na-mappa-torna-link,
.single-luogo .na-mappa-torna a.na-mappa-torna-link:hover {
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.single-luogo .na-mappa-torna a.na-mappa-torna-link {
	color: #1B1B1B;
}

.single-luogo .na-mappa-torna a.na-mappa-torna-link:hover {
	color: #F55D3E;
}

/* Box newsletter del footer nascosto sulle pagine luogo (issue #9): per
   Virginia era troppo invasivo sotto le storie. È la prima sezione del
   footer globale Elementor "Footer2024" (template 4239, sezione 4eb3a8ba),
   quindi niente footer alternativo da tenere allineato — solo questa
   regola, e il resto del footer (social, crediti) resta. Se il footer
   viene rifatto in Elementor l'ID sezione cambia e il box ricompare. */
.single-luogo .elementor-4239 .elementor-element-4eb3a8ba {
	display: none !important;
}

/* Slideshow cartoline nel box "Immagina che..." (media.php): una cartolina
   per volta, il testo compare in una fascia scura sopra la parte bassa
   dell'immagine dopo qualche secondo (classe is-testo-visibile messa da
   storie-carosello.js). Col mouse sopra la cartolina il testo si nasconde,
   per vedere il disegno intero, e ricompare quando il mouse esce. */
.na-mappa-cartoline {
	--na-mappa-pulsante: #F55D3E;
	--na-mappa-pulsante-hover: #97ABB1;
	--na-mappa-testo: #1B1B1B;

	max-width: 900px;
	margin: 1.5rem auto 0;
}

.na-mappa-cartolina {
	margin: 0;
}

.na-mappa-cartolina-media {
	position: relative;
	overflow: hidden;
	/* Larga quanto l'immagine, così la fascia del testo non sborda sulle
	   cartoline verticali (più strette dello slideshow). */
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	border-radius: 4px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

/* Le verticali (Scamamù) a tutta larghezza sarebbero alte ~1270px: tetto
   all'80% dello schermo, la larghezza segue il rapporto. Le orizzontali
   restano a 900px. */
.na-mappa-cartolina-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80vh;
}

.na-mappa-cartolina-testo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25rem 1.75rem;
	background: rgba(27, 27, 27, 0.78);
	color: #FFFFFF;
	font-family: "Plain", sans-serif;
	/* 32px a 900px di slideshow, scala sotto per non coprire metà disegno. */
	font-size: clamp(20px, 3.5vw, 32px);
	font-weight: 300;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.na-mappa-cartolina.is-testo-visibile .na-mappa-cartolina-testo {
	opacity: 1;
	transform: none;
}

/* Solo con un mouse vero e fascia sovrapposta: su touch :hover resta
   "appiccicato" dopo un tap, e sotto i 600px il testo sta già sotto
   l'immagine (vedi media query più giù). */
@media (hover: hover) and (min-width: 601px) {
	.na-mappa-cartolina.is-testo-visibile .na-mappa-cartolina-media:hover .na-mappa-cartolina-testo {
		opacity: 0;
		transform: translateY(12px);
	}
}

.na-mappa-cartolina-pdf {
	margin-top: 1rem;
}

/* Su schermi stretti la fascia coprirebbe mezzo disegno: testo sotto
   l'immagine, stessa comparsa ritardata. */
@media (max-width: 600px) {
	.na-mappa-cartolina-media {
		overflow: visible;
		box-shadow: none;
	}

	.na-mappa-cartolina-img {
		border-radius: 4px;
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
	}

	.na-mappa-cartolina-testo {
		position: static;
		margin-top: 0.75rem;
		padding: 0;
		background: none;
		color: var(--e-global-color-2791737);
		font-size: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.na-mappa-cartolina-testo {
		transition: none;
	}
}

/* Gallery del box "Il tour" (media.php): stesso formato delle cartoline. */
.na-mappa-foto-tour {
	max-width: 900px;
	margin: 1.5rem auto 0;
}

.na-mappa-foto-tour-slide {
	margin: 0;
}

.na-mappa-foto-tour-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

/* Foto verticali affiancate (luoghi ordinari, issue #34). */
.na-mappa-foto-tour--verticali {
	max-width: 1100px;
	margin-top: 3rem; /* staccate dalle frecce delle storie */
	padding-bottom: 18px; /* spazio per l'ombra, Swiper taglia l'overflow */
}

.na-mappa-foto-tour--verticali .na-mappa-foto-tour-img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.na-mappa-foto-tour--verticali .na-mappa-foto-tour-singola {
	max-width: 420px;
	margin: 0 auto;
}