/**
 * Stili del blocco "Mappa clienti".
 * Riusa le variabili del tema quando ci sono, con valori di ripiego perché il
 * plugin deve restare utilizzabile anche con un tema diverso.
 */

/*
 * L'Italia è stretta e alta: dentro un riquadro largo e basso, l'inquadratura
 * automatica deve allargare fino a far entrare tutta la latitudine e il resto
 * diventa mare. Diamo quindi alla mappa una forma verticale e mettiamo i
 * conteggi di fianco, così lo spazio orizzontale serve a qualcosa.
 */
.tmc-mappa {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--40, 2rem);
	align-items: start;
}

@media (min-width: 60rem) {
	.tmc-mappa {
		grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr);
	}
}

.tmc-mappa__tela {
	inline-size: 100%;
	border-radius: var(--wp--custom--radius--lg, 12px);
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-alt, #f0f4f7);
}

/*
 * Riquadro con il nome del cliente. Stessa grammatica delle card del sito —
 * fondo chiaro, bordo tenue, ombra — invece del riquadro scuro predefinito
 * di Leaflet, che su una mappa chiara stacca troppo.
 *
 * `width: max-content` fa sì che il riquadro sia largo quanto il testo e vada
 * a capo solo oltre il massimo: senza, i nomi lunghi si incolonnano in una
 * striscia stretta e alta.
 */
.leaflet-tooltip.tmc-suggerimento {
	inline-size: max-content;
	max-inline-size: min(22rem, 60vw);
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--wp--preset--color--border-soft, #dfe3e6);
	border-radius: var(--wp--custom--radius--md, 8px);
	background-color: var(--wp--preset--color--base, #ffffff);
	color: var(--wp--preset--color--body, #3e484d);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.35;
	white-space: normal;
	box-shadow: 0 6px 20px rgba(23, 28, 30, 0.16);
}

/* La punta del riquadro deve seguire il fondo chiaro. */
.leaflet-tooltip.tmc-suggerimento.leaflet-tooltip-top::before {
	border-top-color: var(--wp--preset--color--base, #ffffff);
}

.leaflet-tooltip.tmc-suggerimento.leaflet-tooltip-bottom::before {
	border-bottom-color: var(--wp--preset--color--base, #ffffff);
}

.tmc-suggerimento__nome,
.tmc-suggerimento__conteggio {
	display: block;
	color: var(--wp--preset--color--contrast, #171c1e);
	font-weight: 600;
	/* I nomi in archivio sono a volte tutti maiuscoli: così si leggono meglio. */
	letter-spacing: 0.01em;
}

.tmc-suggerimento__zona {
	display: block;
	margin-block-start: 0.125rem;
	color: var(--wp--preset--color--muted, #6e797e);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

.tmc-suggerimento__elenco {
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
}

.tmc-suggerimento__elenco li {
	padding-block: 0.125rem;
}

.tmc-suggerimento__elenco li + li {
	border-block-start: 1px solid var(--wp--preset--color--border-soft, #dfe3e6);
}

.tmc-suggerimento__altri {
	display: block;
	margin-block-start: 0.375rem;
	color: var(--wp--preset--color--primary, #00647d);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 600;
}

/*
 * Segnaposto: alone traslucido esterno e disco pieno dentro. Le tonalità
 * stanno qui e non nel JavaScript, così si cambiano senza toccare il codice.
 */
.tmc-punto,
.tmc-gruppo {
	--tmc-tinta: var(--wp--preset--color--primary-strong, #007f9d);
	--tmc-bordo: var(--wp--preset--color--primary, #00647d);
	--tmc-testo: #ffffff;

	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(0, 127, 157, 0.25);
	background-color: color-mix(in srgb, var(--tmc-tinta) 25%, transparent);
}

.tmc-punto > span,
.tmc-gruppo > span {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: calc(100% - 12px);
	block-size: calc(100% - 12px);
	border: 1.5px solid var(--tmc-bordo);
	border-radius: 50%;
	background-color: var(--tmc-tinta);
	color: var(--tmc-testo);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Il cliente singolo è più piccolo e non porta numero: alone più sottile. */
.tmc-punto > span {
	inline-size: calc(100% - 8px);
	block-size: calc(100% - 8px);
}

.tmc-gruppo {
	cursor: pointer;
}

/*
 * Tre scaglioni: la dimensione dice a colpo d'occhio dove si concentrano i
 * clienti, senza dover leggere i numeri.
 */
.tmc-gruppo--medio {
	--tmc-tinta: var(--wp--preset--color--primary, #00647d);
}

.tmc-gruppo--medio > span {
	font-size: 0.875rem;
}

/*
 * Tonalità più cupa della stessa famiglia, non il nero del testo: un pallino
 * quasi nero sulla mappa legge come un buco invece che come un accento.
 */
.tmc-gruppo--grande {
	--tmc-tinta: #00485a;
	--tmc-bordo: #003644;
}

.tmc-gruppo--grande > span {
	font-size: 0.9375rem;
}

/*
 * I segnaposto si ridisegnano a ogni zoom: la comparsa accompagna lo stacco.
 * L'animazione sta sul cerchio interno e non sulla radice: quella la posiziona
 * Leaflet con una transform, e animarla la sovrascriverebbe facendo saltare i
 * segnaposto in alto a sinistra per tutta la durata.
 */
.tmc-punto > span,
.tmc-gruppo > span {
	animation: tmc-comparsa 180ms ease-out;
}

@keyframes tmc-comparsa {
	from {
		opacity: 0;
		transform: scale(0.6);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Il contenitore della mappa deve stare sotto l'header appiccicato del tema. */
.tmc-mappa .leaflet-pane,
.tmc-mappa .leaflet-top,
.tmc-mappa .leaflet-bottom {
	z-index: 1;
}

.tmc-mappa .leaflet-container {
	font: inherit;
}

.tmc-mappa__conteggi {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmc-mappa__conteggio {
	display: inline-flex;
	align-items: baseline;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	border-radius: var(--wp--custom--radius--pill, 9999px);
	background-color: var(--wp--preset--color--primary-soft, rgba(0, 127, 157, 0.1));
	color: var(--wp--preset--color--primary, #00647d);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.tmc-mappa__numero {
	font-weight: 700;
}

/* Di fianco alla mappa i conteggi diventano un elenco leggibile. */
@media (min-width: 60rem) {
	.tmc-mappa__conteggi {
		display: block;
	}

	.tmc-mappa__conteggio {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.4rem 0;
		border-radius: 0;
		border-bottom: 1px solid var(--wp--preset--color--border-soft, #dfe3e6);
		background-color: transparent;
		color: inherit;
	}

	.tmc-mappa__conteggio:last-child {
		border-bottom: 0;
	}

	.tmc-mappa__regione {
		color: var(--wp--preset--color--body, #3e484d);
	}

	.tmc-mappa__numero {
		color: var(--wp--preset--color--primary, #00647d);
		font-variant-numeric: tabular-nums;
	}
}

.tmc-avviso {
	padding: 1rem 1.25rem;
	border-radius: var(--wp--custom--radius--md, 8px);
	border: 1px dashed var(--wp--preset--color--border, #bdc8ce);
	color: var(--wp--preset--color--muted, #6e797e);
}

/* Segnaposto e riquadro non hanno bisogno di animazioni per chi le evita. */
@media (prefers-reduced-motion: reduce) {
	.tmc-punto > span,
	.tmc-gruppo > span {
		animation: none;
	}

	.leaflet-tooltip.tmc-suggerimento {
		transition: none;
	}
}

/* --------------------------------------------- Fascia con mappa di sfondo */

/*
 * Mappa, velo e contenuto occupano tutti la stessa cella di griglia: si
 * sovrappongono senza posizionamento assoluto e la fascia prende in altezza
 * il più alto dei tre, così un testo lungo non finisce mai fuori.
 */
.tmc-fascia {
	display: grid;
	min-block-size: var(--tmc-fascia-altezza, 520px);
	overflow: hidden;
	background-color: var(--wp--preset--color--surface, #f6fafd);
	isolation: isolate;
}

/* Il riquadro della mappa non deve stampare il proprio fondo sopra la fascia. */
.tmc-fascia__mappa .tmc-mappa__tela {
	background-color: transparent;
}

.tmc-fascia > * {
	grid-area: 1 / 1;
}

.tmc-fascia__mappa,
.tmc-fascia__mappa .tmc-mappa__tela {
	block-size: 100%;
	inline-size: 100%;
	border-radius: 0;
}

/*
 * Da fondale la griglia a due colonne del blocco interattivo non serve.
 *
 * La maschera è il punto chiave: in una fascia larga e bassa l'inquadratura
 * che fa entrare tutta l'Italia lascia in vista anche Francia, Balcani e
 * Nordafrica. Dissolvendo i lati resta visibile solo la penisola e il resto
 * sfuma nel fondo della sezione.
 *
 * Il raggio orizzontale è legato all'altezza della fascia, non alla sua
 * larghezza: è l'altezza a decidere quanto grande viene disegnata l'Italia,
 * quindi la maschera la segue su qualsiasi schermo.
 */
.tmc-fascia__mappa {
	--tmc-fuoco: calc(var(--tmc-fascia-altezza, 520px) * 0.55);

	display: block;
	gap: 0;
	pointer-events: none;
	-webkit-mask-image:
		radial-gradient(
			ellipse var(--tmc-fuoco) 92% at var(--tmc-fuoco-x, 50%) 50%,
			#000 42%,
			rgba(0, 0, 0, 0.5) 70%,
			transparent 100%
		),
		linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		radial-gradient(
			ellipse var(--tmc-fuoco) 92% at var(--tmc-fuoco-x, 50%) 50%,
			#000 42%,
			rgba(0, 0, 0, 0.5) 70%,
			transparent 100%
		),
		linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
	mask-composite: intersect;
}

/*
 * Fuoco e raggio qui sono solo un ripiego per il breve istante prima che la
 * mappa si disegni: appena è pronta li sovrascrive il JavaScript con la
 * posizione reale della penisola.
 */

/*
 * Velo. Su schermo stretto il testo sta sopra la mappa e serve una copertura
 * piena; su schermo largo il testo sta a sinistra e la mappa a destra, quindi
 * il velo sfuma da sinistra a destra e la mappa resta nitida dove si vede.
 * La copertura arriva dall'attributo del blocco, così si regola dall'editor.
 */
.tmc-fascia__velo {
	background: linear-gradient(
		180deg,
		rgba(246, 250, 253, calc(var(--tmc-velo, 0.85) * 0.92)) 0%,
		rgba(246, 250, 253, var(--tmc-velo, 0.85)) 45%,
		rgba(255, 255, 255, var(--tmc-velo, 0.85)) 100%
	);
	pointer-events: none;
}

@media (min-width: 60rem) {
	.tmc-fascia__velo {
		background: linear-gradient(
			90deg,
			rgba(246, 250, 253, 0.97) 0%,
			rgba(246, 250, 253, 0.94) 28%,
			rgba(246, 250, 253, 0.72) 40%,
			rgba(246, 250, 253, 0.34) 55%,
			rgba(246, 250, 253, 0.1) 72%,
			rgba(246, 250, 253, 0) 90%
		);
	}
}

/*
 * Il contenuto sta nella stessa colonna delle altre sezioni della pagina, così
 * titolo e pulsanti si allineano alle card sopra. Su schermo largo la colonna
 * si divide in due: a sinistra il testo, a destra il riquadro di mira, vuoto,
 * che dice al JavaScript dove disegnare l'Italia.
 */
.tmc-fascia__contenuto {
	display: grid;
	align-items: center;
	inline-size: min(var(--wp--style--global--content-size, 1216px), 100% - 3rem);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--70, 4rem);
	position: relative;
	z-index: 1;
}

.tmc-fascia__testo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--30, 1.5rem);
}

.tmc-fascia__mira {
	display: none;
}

@media (min-width: 60rem) {
	.tmc-fascia__contenuto {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40, 2rem);
	}

	.tmc-fascia__mira {
		display: block;
		block-size: 100%;
		min-block-size: 1px;
	}
}

/* L'attribuzione va vista comunque: la licenza dei dati la richiede. */
.tmc-fascia .leaflet-control-attribution {
	pointer-events: auto;
}

.tmc-fascia.is-tmc-senza-mappa {
	min-block-size: 0;
}

/* Nell'editor si modifica il contenuto, non serve simulare la mappa. */
.tmc-fascia--editor {
	min-block-size: 0;
	padding: var(--wp--preset--spacing--40, 2rem);
	border: 1px dashed var(--wp--preset--color--border, #bdc8ce);
	background-color: var(--wp--preset--color--surface-alt, #f0f4f7);
}

.tmc-fascia--editor > * {
	grid-area: auto;
}

.tmc-fascia__nota {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--muted, #6e797e);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-align: center;
}