/* =========================================================================
   EMME-CI — Sezione 08 · Mappa dei cantieri
   File: ec-map.css
   Versione: 1.2.0
   Data: 2026-08-26
   Dipende da: ec-core.css
   Collocazione: child theme /assets/css/ec-map.css
   Asset:        child theme /assets/img/ec-italia.svg

   IDEA
   Il claim "operiamo in tutta Italia" diventa dimostrazione. I pin si
   accendono in sequenza allo scroll, dal sud verso il nord, e il raggio
   è proporzionale alla superficie: FIAT Cassino e un condominio non
   possono avere lo stesso peso visivo.

   I cantieri vicini vengono raggruppati: senza aggregazione la Lombardia
   diventa un grumo illeggibile di quindici pin sovrapposti.

   CHANGELOG
   1.2.0 — 2026-08-26 — Stati per l'autoplay: pin attivo evidenziato con
                        alone singolo e riquadro che scivola da un pin
                        all'altro.
   1.1.0 — 2026-08-26 — Variante ec-map--nuda per l'uso dentro una
                        colonna Divi, senza fondo né spaziature.
   1.0.0 — 2026-08-26 — Prima release.
   ========================================================================= */

:root {
	--ec-map-bg:        #0E1B2B;
	--ec-map-ink:       #FFFFFF;
	--ec-map-ink-soft:  rgba(255, 255, 255, .66);
	--ec-map-ink-dim:   rgba(255, 255, 255, .40);
	--ec-map-line:      rgba(255, 255, 255, .16);
	--ec-map-reg:       rgba(127, 163, 201, .07);
	--ec-map-reg-attiva:rgba(127, 163, 201, .16);
	--ec-map-pin:       #7FA3C9;
	--ec-map-pin-on:    #FFFFFF;
}

/* -------------------------------------------------------------------------
   1. LAYOUT
   ---------------------------------------------------------------------- */

.ec-map {
	position: relative;
	background: var(--ec-map-bg);
	color: var(--ec-map-ink);
	padding-block: clamp(4rem, 9vw, 9rem);
}

.ec-map__wrap {
	width: 100%;
	max-width: var(--ec-wrap-max, 1560px);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 5rem);
}

.ec-map__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
}

/* --- Solo la figura ---------------------------------------------------
   Con layout="mappa" lo shortcode emette il solo contenitore: niente
   fondo, niente spaziatura, niente colonne. Serve a metterla dentro una
   colonna Divi e comporre il testo con i moduli del builder. */

.ec-map--nuda {
	background: none;
	padding-block: 0;
	color: inherit;
}

/* -------------------------------------------------------------------------
   2. TESTO
   ---------------------------------------------------------------------- */

.ec-map__eyebrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
	color: var(--ec-map-ink);
}
.ec-map__eyebrow::before {
	content: "";
	width: 2.5rem;
	height: 1px;
	background: currentColor;
	flex: none;
}

.ec-map__title {
	font-family: var(--ec-font-display, inherit);
	font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	font-weight: 500;
	margin: 0;
	color: var(--ec-map-ink) !important;
}
.ec-map__title em {
	font-family: var(--ec-font-voice, Georgia, serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1.06em;
	color: var(--ec-map-pin) !important;
}

.ec-map__text {
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--ec-map-ink-soft) !important;
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	max-width: 44ch;
}

/* --- Numeri ---------------------------------------------------------- */

.ec-map__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 2.5rem);
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding-top: clamp(1.25rem, 3vw, 2rem);
	border-top: 1px solid var(--ec-map-line);
}

.ec-map__num {
	font-family: var(--ec-font-display, inherit);
	font-variant-numeric: tabular-nums;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	line-height: 1;
	letter-spacing: -.03em;
	font-weight: 500;
	display: block;
	color: var(--ec-map-ink);
}
.ec-map__num small {
	font-size: .34em;
	letter-spacing: .02em;
	vertical-align: super;
	color: var(--ec-map-ink-dim);
	margin-left: .15em;
}
.ec-map__num-label {
	display: block;
	margin-top: .5rem;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--ec-map-ink-soft);
	max-width: 20ch;
}

/* -------------------------------------------------------------------------
   3. MAPPA
   ---------------------------------------------------------------------- */

.ec-map__figura {
	position: relative;
}

.ec-map__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* --- Regioni --------------------------------------------------------- */

.ec-map__reg {
	fill: var(--ec-map-reg);
	stroke: var(--ec-map-line);
	stroke-width: .8;
	stroke-linejoin: round;
	transition: fill 420ms var(--ec-ease, ease);
}

/* Regione che ospita almeno un cantiere: la marca il JS */
.ec-map__reg.is-attiva {
	fill: var(--ec-map-reg-attiva);
}

/* --- Pin -------------------------------------------------------------
   Raggio e posizione li scrive il JS. Qui solo stati e movimento. */

.ec-map__pin {
	cursor: pointer;
	opacity: 0;
	transform: scale(.2);
	transform-origin: center;
	transform-box: fill-box;
	transition: opacity 420ms var(--ec-ease, ease),
	            transform 520ms var(--ec-ease, ease);
	transition-delay: calc(var(--ec-i, 0) * 45ms);
}

.ec-map.is-in .ec-map__pin {
	opacity: 1;
	transform: scale(1);
}

.ec-map__pin circle {
	fill: var(--ec-map-pin);
	fill-opacity: .28;
	stroke: var(--ec-map-pin);
	stroke-width: 1.4;
	transition: fill-opacity 260ms var(--ec-ease, ease),
	            stroke 260ms var(--ec-ease, ease);
}

.ec-map__pin:hover circle,
.ec-map__pin:focus-visible circle {
	fill: var(--ec-map-pin-on);
	fill-opacity: .9;
	stroke: var(--ec-map-pin-on);
}

.ec-map__pin:focus-visible {
	outline: none;
}
.ec-map__pin:focus-visible circle {
	stroke-width: 2.6;
}

/* Numero dentro i raggruppamenti */
.ec-map__pin text {
	font-family: var(--ec-font-mono, monospace);
	font-size: 13px;
	font-weight: 500;
	fill: var(--ec-map-ink);
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
	user-select: none;
}

/* --- Pin aperto dall'autoplay -----------------------------------------
   Deve leggersi come il pin puntato, altrimenti il riquadro sembra
   comparire da solo senza un'origine. */

.ec-map__pin.is-auto circle {
	fill: var(--ec-map-pin-on);
	fill-opacity: .9;
	stroke: var(--ec-map-pin-on);
}

/* Cerchio che si espande a ogni cambio: segnala il salto senza bisogno
   di una barra di avanzamento. */
.ec-map__pin.is-auto::after { content: none; }

.ec-map__pin.is-auto .ec-map__alone {
	animation: ec-map-alone 1.6s var(--ec-ease, ease);
	animation-iteration-count: 1;
}

/* Alone pulsante: solo sui tre cantieri più grandi, per non fare
   discoteca con quaranta pin che lampeggiano tutti. */
.ec-map__alone {
	fill: none;
	stroke: var(--ec-map-pin);
	stroke-width: 1;
	opacity: 0;
	transform-origin: center;
	transform-box: fill-box;
}
.ec-map.is-in .ec-map__pin--grande .ec-map__alone {
	animation: ec-map-alone 3.2s var(--ec-ease, ease) infinite;
	animation-delay: calc(1s + var(--ec-i, 0) * 45ms);
}

@keyframes ec-map-alone {
	0%   { opacity: .5; transform: scale(1); }
	70%  { opacity: 0;   transform: scale(2.4); }
	100% { opacity: 0;   transform: scale(2.4); }
}

/* -------------------------------------------------------------------------
   4. TOOLTIP
   Elemento HTML sovrapposto: dentro l'SVG il testo non si impagina
   e non si può usare la tipografia del sito.
   ---------------------------------------------------------------------- */

.ec-map__tip {
	position: absolute;
	z-index: 4;
	min-width: 11rem;
	max-width: 16rem;
	padding: .75rem .875rem;
	background: rgba(14, 27, 43, .94);
	border: 1px solid var(--ec-map-line);
	border-radius: 3px;
	backdrop-filter: blur(8px);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, calc(-100% - .75rem)) translateY(.35rem);
	transition: opacity 200ms var(--ec-ease, ease),
	            transform 280ms var(--ec-ease, ease);
}

.ec-map__tip.is-on {
	opacity: 1;
	transform: translate(-50%, calc(-100% - .75rem)) translateY(0);
}

/* In autoplay il riquadro scivola da un pin all'altro. La transizione su
   left e top si accende solo qui: sull'hover renderebbe il riquadro
   pigro e in ritardo sul puntatore. */
.ec-map__tip.is-auto {
	transition: opacity 200ms var(--ec-ease, ease),
	            transform 280ms var(--ec-ease, ease),
	            left 560ms var(--ec-ease, ease),
	            top 560ms var(--ec-ease, ease);
}

.ec-map__tip-cat {
	display: block;
	font-family: var(--ec-font-mono, monospace);
	font-size: .5625rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ec-map-ink-dim);
	margin-bottom: .25rem;
}

.ec-map__tip-nome {
	display: block;
	font-family: var(--ec-font-display, inherit);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ec-map-ink);
}

.ec-map__tip-spec {
	display: block;
	margin-top: .25rem;
	font-family: var(--ec-font-mono, monospace);
	font-size: .6875rem;
	color: var(--ec-map-ink-soft);
}

.ec-map__tip-extra {
	display: block;
	margin-top: .5rem;
	padding-top: .5rem;
	border-top: 1px solid var(--ec-map-line);
	font-family: var(--ec-font-mono, monospace);
	font-size: .625rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ec-map-ink-dim);
}

/* -------------------------------------------------------------------------
   5. RESPONSIVE
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ec-map__grid {
		grid-template-columns: 1fr;
		gap: clamp(2rem, 6vw, 3rem);
	}
	.ec-map__figura {
		max-width: 28rem;
		margin-inline: auto;
	}
	.ec-map__text { max-width: none; }
}

@media (max-width: 600px) {
	.ec-map__stats { grid-template-columns: 1fr; }
	.ec-map__pin text { font-size: 16px; }
}

/* -------------------------------------------------------------------------
   6. MOVIMENTO RIDOTTO
   I pin ci sono comunque: quello che sparisce è la sequenza.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ec-map__pin {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.ec-map .ec-map__pin--grande .ec-map__alone,
	.ec-map__pin.is-auto .ec-map__alone {
		animation: none;
	}
	.ec-map__tip.is-auto { transition: opacity 100ms linear; }
	.ec-map__tip { transition: opacity 100ms linear; }
}

/* -------------------------------------------------------------------------
   7. VISUAL BUILDER
   ---------------------------------------------------------------------- */

body.et-fb .ec-map__pin {
	opacity: 1 !important;
	transform: none !important;
}