/* Far Overland — /destinazioni/: mappa interattiva + lista + griglia.
   Da Figma "Mappa — Design v1" + "Mappa — Mobile v1" (10/09). */

.dest-wrap {
	background: var(--sabbia);
}

.dest-header {
	padding: 72px 64px 8px;
	text-align: center;
}
.dest-kicker {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--terracotta);
}
.dest-title {
	margin-top: 14px;
	font-family: 'DM Serif Display', serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(28px, 4vw, 46px);
	color: var(--inchiostro);
}
.dest-sub {
	margin: 12px auto 0;
	font-family: 'Urbanist', sans-serif;
	font-size: 18px;
	color: color-mix(in srgb, var(--inchiostro) 75%, transparent);
	max-width: none;
	white-space: nowrap;
}

/* ---- Mappa ---- */

.fo-map {
	position: relative;
	margin: 24px 64px 0;
	overflow: hidden;
	touch-action: pan-y; /* un dito solo scrolla la pagina; il pan a due dita lo gestisce il JS */
}
.fo-map-stage {
	position: relative;
	transform-origin: 0 0;
	will-change: transform;
}
.fo-map.is-zoomed { cursor: grab; }
.fo-map.is-dragging { cursor: grabbing; touch-action: none; }

/* Sfumatura sopra/sotto: la mappa si fonde nello sfondo Sabbia invece di finire di netto. */
.fo-map::before,
.fo-map::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 64px;
	pointer-events: none;
	z-index: 3;
}
.fo-map::before { top: 0; background: linear-gradient(to bottom, var(--sabbia), transparent); }
.fo-map::after { bottom: 0; background: linear-gradient(to top, var(--sabbia), transparent); }
.fo-map-svg {
	display: block;
	width: 100%;
	height: auto;
}
.fo-map-svg path {
	fill: var(--carta);
	stroke: rgba(43, 35, 32, 0.3);
	stroke-width: 0.9;
}
.fo-map-svg path.fo-map-visited {
	fill: var(--caramello);
	stroke: var(--inchiostro);
	stroke-width: 1.1;
	transition: fill 0.2s ease;
}
.fo-map-svg a { cursor: pointer; }
.fo-map-svg a:hover path.fo-map-visited,
.fo-map-svg a:focus-visible path.fo-map-visited,
.fo-map-svg path.fo-map-visited:hover,
.fo-map-svg path.fo-map-visited:focus-visible {
	fill: var(--terracotta);
}
/* Niente outline di default del browser sui confini/pin cliccati col mouse
   (SVG disegna un riquadro enorme e brutto) — solo :focus-visible da tastiera. */
.fo-map-svg a:focus,
.fo-map-svg path:focus,
.fo-map-pin:focus {
	outline: none;
}
.fo-map-svg a:focus-visible,
.fo-map-svg path:focus-visible {
	outline: 2px solid var(--terracotta);
	outline-offset: 2px;
}
.fo-map-pin:focus-visible {
	outline: 2px solid var(--terracotta);
	outline-offset: 4px;
	border-radius: 50%;
}

/* Pin: HTML sopra lo stage, posizione in % dello spazio SVG. Compaiono solo
   da zoomati (paesi vicini si accavallano alla vista mondo intero) — sul
   world tap/hover restano comunque sul confine colorato del paese stesso. */
.fo-map-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	z-index: 2;
	opacity: 0;
	visibility: hidden; /* fuori dal tab order da nascosti, non solo invisibili */
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.fo-map.is-zoomed .fo-map-pin {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.fo-map-pin::before {
	/* hit-area più larga del puntino visibile, per hover/tap precisi — via
	   pseudo-elemento e non padding/margin, altrimenti il box cresce e
	   translate(-50%,-50%) sposta il pallino fuori dal punto giusto */
	content: '';
	position: absolute;
	inset: -10px;
}
.fo-map-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--terracotta);
	border: 2px solid var(--carta);
	box-shadow: 0 1px 3px rgba(43, 35, 32, 0.25);
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}
.fo-map-pin--soon .fo-map-dot { background: color-mix(in srgb, var(--caramello) 55%, var(--sabbia)); }
.fo-map-pin:hover .fo-map-dot,
.fo-map-pin:focus-visible .fo-map-dot { transform: scale(1.3); }

/* Polaroid al click su un paese — stesso pattern del blocco "Foto polaroid"
   articolo (fo-polaroid-frame/tape in blocks.css): cornice bianca, nastro
   washi Ocra, leggera rotazione. Qui però è un popup posizionato via JS. */
.fo-map-polaroid {
	position: absolute;
	z-index: 4;
	background: #fff;
	padding: 12px 12px 14px;
	border-radius: 4px;
	width: 208px;
	box-shadow: 0 18px 45px -20px rgba(43, 35, 32, 0.35), 0 6px 18px rgba(43, 35, 32, 0.18);
	transform: rotate(-1.2deg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.fo-map-polaroid.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.fo-map-polaroid-tape {
	position: absolute;
	top: -14px;
	left: 50%;
	width: 84px;
	height: 30px;
	transform: translateX(-50%) rotate(-4deg);
	background: rgba(217, 164, 65, 0.55);
	border: 1px solid rgba(217, 164, 65, 0.3);
	box-shadow: 0 2px 6px rgba(43, 35, 32, 0.15);
}
.fo-map-polaroid-close {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 22px;
	height: 22px;
	border: 0;
	background: none;
	font-size: 16px;
	line-height: 1;
	color: color-mix(in srgb, var(--inchiostro) 55%, transparent);
	cursor: pointer;
}
.fo-map-polaroid-photo {
	display: block;
	width: 100%;
	aspect-ratio: 180 / 126;
	border-radius: 2px;
	background-color: var(--sabbia);
	background-size: cover;
	background-position: center;
}
.fo-map-polaroid-photo.is-empty { background-image: none !important; }
.fo-map-polaroid-nome {
	display: block;
	margin-top: 12px;
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--inchiostro);
}
.fo-map-polaroid-cta {
	display: block;
	margin-top: 4px;
	font-family: 'Urbanist', sans-serif;
	font-size: 13px;
	color: var(--terracotta);
	text-decoration: none;
}
.fo-map-polaroid-cta:hover { text-decoration: underline; }
.fo-map-polaroid-cta.is-soon {
	color: color-mix(in srgb, var(--inchiostro) 60%, transparent);
	cursor: default;
}

.fo-map-hint {
	position: absolute;
	left: 16px;
	bottom: 12px;
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 11px;
	color: color-mix(in srgb, var(--inchiostro) 50%, transparent);
	display: none;
	z-index: 2;
}
.fo-map.is-zoomed .fo-map-hint,
.fo-map.is-mobile-cropped .fo-map-hint { display: block; }
.fo-map-hint-touch { display: none; }
@media (pointer: coarse) {
	.fo-map-hint-touch { display: inline; }
	.fo-map-hint-mouse { display: none; }
}

/* Zoom control */
.fo-map-zoom {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	background: var(--carta);
	border: 1px solid rgba(43, 35, 32, 0.15);
	border-radius: 10px;
	box-shadow: 0 3px 10px rgba(43, 35, 32, 0.12);
	overflow: hidden;
}
.fo-map-zoom button {
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--inchiostro);
	cursor: pointer;
}
.fo-map-zoom button:first-child { border-bottom: 1px solid rgba(43, 35, 32, 0.12); }
.fo-map-zoom button:hover { background: var(--sabbia); }
.fo-map-zoom button:disabled { opacity: 0.35; cursor: default; }

/* ---- Lista paesi (solo mobile) ---- */

.dest-list {
	display: none;
	list-style: none;
	margin: 20px;
	background: var(--carta);
	border: 1px solid rgba(43, 35, 32, 0.08);
	border-radius: 14px;
	overflow: hidden;
}
.dest-list li + li { border-top: 1px solid rgba(43, 35, 32, 0.06); }
.dest-list-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 8px 16px;
	text-decoration: none;
}
.dest-list-thumb {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--sabbia);
}
.dest-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dest-list-row--soon .dest-list-thumb { filter: saturate(0.4); opacity: 0.7; }
.dest-list-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--terracotta);
	flex: 0 0 auto;
}
.dest-list-row--soon .dest-list-dot { background: color-mix(in srgb, var(--caramello) 40%, var(--carta)); }
.dest-list-nome {
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--inchiostro);
}
.dest-list-row--soon .dest-list-nome { opacity: 0.55; }
.dest-list-conteggi {
	margin-left: auto;
	font-family: 'Urbanist', sans-serif;
	font-size: 12px;
	color: color-mix(in srgb, var(--inchiostro) 60%, transparent);
}
.dest-list-freccia {
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--terracotta);
}
.dest-badge-soon {
	margin-left: auto;
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 9px;
	letter-spacing: 1px;
	color: #996b1f;
	background: color-mix(in srgb, var(--ocra) 18%, transparent);
	border-radius: 6px;
	padding: 3px 8px;
}

/* ---- Mobile ---- */

@media (max-width: 900px) {
	.dest-header { padding: 48px 24px 8px; }
	.dest-sub { font-size: 14px; white-space: normal; max-width: 420px; margin-left: auto; margin-right: auto; }

	/* Viewport croppato: altezza fissa, il JS imposta lo zoom iniziale sulla fascia dei visitati.
	   Edge-to-edge, niente margine laterale (era così prima del cambio margini desktop). */
	.fo-map { margin: 16px 0 0; height: 320px; }
	.fo-map::before,
	.fo-map::after { height: 32px; }
	.fo-map-zoom button { width: 36px; height: 36px; font-size: 18px; }

	.dest-list { display: block; margin-top: 20px; }

	/* Polaroid pensata per desktop (posizionamento assoluto largo 208px può
	   uscire dal viewport stretto) — su mobile resta solo la lista sotto. */
	.fo-map-polaroid { display: none; }
}

/* ============================================================
   Hub destinazione — mappa del paese (template-parts/country-map.php)
   Stesso linguaggio della mappa mondo: paese pieno Caramello, pin,
   polaroid al click (classi .fo-map-pin/.fo-map-polaroid riusate).
   All'apertura la mappa "zooma dentro" dal mondo (keyframe una volta).
   ============================================================ */
.fo-cmap {
	position: relative;
	max-width: min(420px, 78vw);
	margin: 0 auto 56px;
}
.fo-cmap-stage { position: relative; }
.fo-cmap-svg {
	display: block;
	width: 100%;
	height: auto;
}
.fo-cmap-country {
	fill: var(--caramello);
	fill-opacity: 0.9;
	stroke: var(--inchiostro);
	stroke-width: 2;
	stroke-opacity: 0.55;
}
/* mappa a province: chiare di default, piene quelle attraversate
   (marcate da country-map.js col point-in-fill dei pin) */
.fo-cmap-prov {
	fill: var(--caramello);
	fill-opacity: 0.28;
	stroke: var(--inchiostro);
	stroke-width: 1;
	stroke-opacity: 0.35;
	transition: fill-opacity 0.5s ease;
}
.fo-cmap-prov--visited { fill-opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
	.fo-cmap-stage { animation: fo-cmap-zoom 0.9s cubic-bezier(.22,.8,.35,1) both; }
	@keyframes fo-cmap-zoom {
		from { transform: scale(0.55); opacity: 0; }
		to   { transform: scale(1); opacity: 1; }
	}
}
/* sui pin dell'hub niente logica zoom: sempre visibili */
.fo-cmap .fo-map-pin {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* etichetta sempre visibile sotto il pin (sulla mappa mondo il nome vive
   solo nella polaroid; qui le aree sono poche e l'etichetta orienta) */
.fo-cmap-pin { text-decoration: none; }
.fo-cmap-pin-label {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Caveat', cursive;
	font-weight: 600;
	font-size: 19px;
	color: var(--inchiostro);
	white-space: nowrap;
	pointer-events: none;
}
.fo-map-pin--soon .fo-cmap-pin-label { opacity: 0.55; }

/* sezioni contenuti hub */
.dest-hub-sezione {
	max-width: 880px;
	margin: 40px auto 0;
	padding: 0 32px 8px;
}
/* la .dest-list della pagina /destinazioni/ è la lista mobile (nascosta su
   desktop): nell'hub è la lista contenuti, visibile sempre */
.dest-hub-sezione .dest-list {
	display: block;
	margin: 0;
}
.dest-hub-titolo {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 24px;
	color: var(--inchiostro);
	margin-bottom: 16px;
}
.dest-breadcrumb {
	color: var(--caramello);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.06em;
}
.dest-breadcrumb:hover { color: var(--terracotta); }
.dest-hub-vuoto {
	font-family: 'Caveat', cursive;
	font-size: 24px;
	color: var(--caramello);
	text-align: center;
	padding: 40px 0 20px;
}

/* H1 dell'hub solo per SEO/screen reader (il visivo è la mappa) */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Hub destinazione: intro editoriale + card grid (redesign 27/09) ----
   Sostituisce la dest-list nell'hub: card editoriali con lo stesso linguaggio
   visivo delle card Journal della homepage (cover grande, meta, titolo serif).
   La dest-list resta per la lista mobile di /destinazioni/. */

.dest-hub-intro {
	max-width: 640px;
	margin: 18px auto 0;
	font-family: 'Urbanist', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: color-mix(in srgb, var(--inchiostro) 80%, transparent);
}
.dest-hub-intro p { margin: 0 0 10px; }
.dest-hub-intro p:last-child { margin-bottom: 0; }

.dest-card-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px 24px;
}
.dest-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
}
.dest-card-img {
	position: relative;
	width: 100%;
	aspect-ratio: 420 / 280;
	border-radius: 8px;
	overflow: hidden;
}
.dest-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.dest-card:hover .dest-card-img img { transform: scale(1.04); }
.dest-card-meta {
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1px;
	color: #736e66;
}
.dest-card-title {
	font-family: 'DM Serif Display', serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.25;
	color: var(--inchiostro);
}
.dest-card:hover .dest-card-title { color: var(--terracotta); }

/* più aria fra mappa e sezioni contenuti, e fra le sezioni */
.dest-hub-sezione { margin-top: 64px; }
.dest-hub-sezione + .dest-hub-sezione { margin-top: 56px; }
.dest-hub-sezione:last-of-type { padding-bottom: 72px; }

@media (max-width: 700px) {
	.dest-card-row { grid-template-columns: 1fr; gap: 32px; }
	.dest-card-title { font-size: 20px; }
	.dest-hub-intro { font-size: 16px; padding: 0 4px; }
	.dest-hub-sezione { margin-top: 48px; }
}