/**
 * DevSign · Territorio — stile del blocco.
 *
 * Migrato dal concept D2 (assets/css/concept-logomappa.css): la regola del
 * progetto e' che lo stile di un concept scelto viva nel blocco che nasce.
 * Solo ruoli semantici (--ds-text/--ds-bg/--ds-card/--ds-line/--ds-soft/
 * --ds-accent-text), mai i token grezzi: qui il dark deve reggere come
 * ovunque. Lo smeraldo come colore di testo o di confine e' sempre
 * --ds-accent-text, mai --ds-lime (2.42:1 in light, sotto il 3:1 di WCAG
 * 1.4.11 per i confini dei controlli).
 */

.ds-terr {
	padding-block: var(--ds-space-3xl, 6rem);
}

.ds-terr__inner {
	width: 100%;
	max-width: var(--ds-content, 1280px);
	margin-inline: auto;
	padding-inline: var(--ds-space-m, 1.5rem);
}

/* --- le due righe ------------------------------------------------------ */
.ds-terr__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: center;
}

.ds-terr__row + .ds-terr__row {
	margin-top: clamp(2rem, 5vw, 4rem);
	padding-top: clamp(2rem, 5vw, 4rem);
	border-top: 1px solid var(--ds-line, #e2dfd9);
}

/* La riga della mappa vuole piu' spazio all'immagine: il Veneto a sei province
   e' largo, e in mezza colonna le etichette diventano illeggibili. */
.ds-terr__row--map { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

.ds-terr__txt { min-width: 0; }
.ds-terr__fig { margin: 0; min-width: 0; }
/* la mappa resta sopra il suo testo anche incolonnata */
.ds-terr__fig--map { order: -1; }

.ds-terr__kicker {
	margin: 0 0 0.5rem;
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* marcatore smeraldo dell'eyebrow: motivo gia' del tema (confronto, process) */
.ds-terr__kicker::before {
	content: "";
	flex: 0 0 auto;
	width: 1.75rem;
	height: 2px;
	border-radius: 2px;
	background: var(--ds-lime, #20b07a);
}

.ds-terr__h2 {
	margin: 0 0 var(--ds-space-s, 1rem);
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ds-terr__p {
	margin: 0 0 var(--ds-space-m, 1.5rem);
	font-size: 0.9375rem;
	line-height: 1.6;
	max-width: 46ch;
	color: var(--ds-text, #292929);
}

/* --- Italia ------------------------------------------------------------ */
.ds-terr__italia { width: 100%; max-width: 440px; height: auto; display: block; margin-inline: auto; }

/* Tutte le regioni accese: da remoto si lavora ovunque, e la sagoma piena lo
   dice. Evidenziare solo le province direbbe l'opposto. */
.ds-terr__reg {
	fill: color-mix(in srgb, var(--ds-lime, #20b07a) 24%, transparent);
	stroke: var(--ds-accent-text, #0d6f4a);
	stroke-width: 0.6;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.ds-terr__reg--home {
	fill: color-mix(in srgb, var(--ds-lime, #20b07a) 62%, transparent);
	stroke: var(--ds-text, #292929);
	stroke-width: 1.2;
}

/* Su fondo scuro il differenziale di fill (62% vs 24%) si percepisce meno: il
   confine reggeva da solo il colpo d'occhio "questo e' il Veneto" (critique
   impeccable, 03/09). Alzato il mix per ridare peso anche al riempimento. */
:root[data-theme="dark"] .ds-terr__reg--home { fill: color-mix(in srgb, var(--ds-lime, #20b07a) 78%, transparent); }
@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"] .ds-terr__reg--home { fill: color-mix(in srgb, var(--ds-lime, #20b07a) 78%, transparent); }
}

.ds-terr__studio {
	fill: var(--ds-text, #292929);
	stroke: var(--ds-bg, #f1efeb);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

/* Linea dal pallino all'etichetta in mare (29/09/2026). */
.ds-terr__studiolead {
	stroke: var(--ds-text, #292929);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.ds-terr__studiolab {
	fill: var(--ds-text, #292929);
	font-family: var(--ds-font-mono, monospace);
	font-size: 11px;
	letter-spacing: 0.04em;
	/* L'etichetta esce dal profilo della regione e finisce meta' sul verde e
	   meta' sul fondo: senza alone stecca. `paint-order` disegna prima il
	   contorno color carta, poi il riempimento. */
	stroke: var(--ds-bg, #f1efeb);
	stroke-width: 3px;
	stroke-linejoin: round;
	paint-order: stroke fill;
}

/* --- Veneto ------------------------------------------------------------ */
.ds-terr__plot {
	width: 100%;
	height: auto;
	/* Il viewBox e' calcolato sui punti estremi: senza margine il lato ovest di
	   Verona tocca il bordo e sembra tagliato. */
	padding: 3%;
	box-sizing: border-box;
	overflow: visible;
}

/* In SVG la sottolineatura si eredita dall'<a> che avvolge il gruppo. */
/* ⚠️ Dal 21/09/2026 il pin è un <a> solo per le province con una pagina propria;
   le altre sono un <g role="button" tabindex="0"> che apre e basta il pannello.
   Le due forme devono reagire uguale: stesso cursore, stesso hover, stesso
   anello di focus. */
.ds-terr__pin a,
.ds-terr__pin [role="button"] { text-decoration: none; cursor: pointer; }

.ds-terr__prov {
	fill: color-mix(in srgb, var(--ds-lime, #20b07a) 16%, transparent);
	stroke: var(--ds-accent-text, #0d6f4a);
	stroke-width: 2;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill 0.25s var(--ds-ease, ease);
}

.ds-terr__pin a:hover .ds-terr__prov,
.ds-terr__pin a:focus-visible .ds-terr__prov,
.ds-terr__pin [role="button"]:hover .ds-terr__prov,
.ds-terr__pin [role="button"]:focus-visible .ds-terr__prov { fill: color-mix(in srgb, var(--ds-lime, #20b07a) 55%, transparent); }

/* ⚠️ Il selettore tiene dentro il gruppo: una `.ds-terr__pin text` scritta piu'
   in basso vincerebbe sulla sola classe. */
.ds-terr__pin .ds-terr__provlabel {
	fill: var(--ds-text, #292929);
	font-family: var(--ds-font-mono, monospace);
	font-size: 30px;
	letter-spacing: 0.06em;
	pointer-events: none;
	text-decoration: none;
}

.ds-terr__base { fill: var(--ds-accent-text, #0d6f4a); stroke: var(--ds-bg, #f1efeb); stroke-width: 3; vector-effect: non-scaling-stroke; }

.ds-terr__baselabel {
	/* Era --ds-soft su un'area verde: grigio su verde, e la stringa lunga
	   attraversava le etichette di Verona e Venezia. Ora testo pieno con
	   alone color carta, e la stringa e' corta (la provenienza completa la
	   dice gia' la didascalia sotto la mappa). */
	fill: var(--ds-text, #292929);
	font-family: var(--ds-font-mono, monospace);
	font-size: 20px;
	font-weight: 600;
	stroke: var(--ds-bg, #f1efeb);
	stroke-width: 5px;
	stroke-linejoin: round;
	paint-order: stroke fill;
}

/* --- controlli --------------------------------------------------------- */
/* Chip ripristinati (03/09, revisione di Riccardo dopo la critique): rendono
   visibile ed esplicito che le province si possono cliccare — la mappa da
   sola non lo comunicava. Aprono lo stesso pannello del pin, non un filtro:
   nessuno stato "premuto" persistente da segnare. */
.ds-terr__controls {
	margin-top: var(--ds-space-m, 1.5rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ds-terr__chip {
	appearance: none;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	padding: 0.7rem 1rem;
	min-height: 44px;
	border-radius: var(--ds-radius-md, 12px);
	/* confine di un CONTROLLO: --ds-line non arriva a 3:1 (WCAG 1.4.11) */
	border: 1px solid var(--ds-line-strong, #8a857c);
	background: var(--ds-card, #fff);
	color: var(--ds-text, #292929);
	cursor: pointer;
	transition: background-color 0.2s var(--ds-ease, ease), color 0.2s var(--ds-ease, ease);
}

/* Gesto unico del sito: inversione di colore, nessun movimento. */
.ds-terr__chip:hover,
.ds-terr__chip:focus-visible {
	background: var(--ds-text, #292929);
	color: var(--ds-bg, #f1efeb);
	border-color: var(--ds-text, #292929);
}

.ds-terr__credit {
	margin: var(--ds-space-l, 2rem) 0 0;
	font-size: 0.75rem;
	color: var(--ds-soft, #6b6862);
}

/* L'argomento di fiducia ("0 richieste esterne") non e' solo un obbligo di
   licenza: e' coerente col "in codice, non template". Un peso in piu' del
   resto della didascalia legale, senza diventare un badge (critique
   impeccable, 03/09). */
.ds-terr__credit-note {
	display: block;
	margin-top: 0.2rem;
	color: var(--ds-text, #292929);
	font-weight: 500;
}

/* --- stretto ----------------------------------------------------------- */
@media (max-width: 860px) {
	.ds-terr__row,
	.ds-terr__row--map { grid-template-columns: 1fr; }

	.ds-terr__italia { max-width: 220px; }

	/* ⚠️ L'etichetta dello studio scala con l'SVG: a 220px di mappa scende a 8px
	   resi, illeggibile. Il pin resta, il nome no — e' gia' nel testo accanto. */
	.ds-terr__studiolab,
	.ds-terr__studiolead { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ds-terr__prov,
	.ds-terr__chip { transition: none; }
}

/* ============================================================================
 * Pannello di dettaglio provincia (<dialog>) — stessa struttura di
 * `.ds-pv` (portfolio/style.css): pannello, chiusura, testa, corpo, piede.
 * Qui piu' piccolo perche' il contenuto e' un nome, un badge opzionale, una
 * riga di comuni (o l'invito "di persona su appuntamento") e un CTA solo.
 * ========================================================================= */
.ds-terr-dlg {
	width: min(440px, calc(100vw - 2rem));
	padding: 0;
	border: 1px solid var(--ds-line, #e2dfd9);
	border-radius: var(--ds-radius-lg, 12px);
	background: var(--ds-card, #fff);
	color: var(--ds-text, #292929);
	overflow: hidden;
	box-shadow: 0 24px 60px -12px rgba(16, 24, 20, 0.45), 0 6px 16px -6px rgba(16, 24, 20, 0.28);
}

.ds-terr-dlg::backdrop { background: rgba(18, 20, 19, 0.62); }

.ds-terr-dlg__panel {
	position: relative;
	padding: clamp(1.5rem, 4vw, 2rem);
}

.ds-terr-dlg__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	/* --ds-line è un filetto decorativo (1.33:1): come unico confine di un
	   controllo non raggiunge il 3:1 di WCAG 1.4.11. --ds-soft sta a 5.55:1
	   in light e 6.09:1 in dark. */
	border: 1px solid var(--ds-soft, #6b6862);
	border-radius: var(--ds-radius-pill, 999px);
	background: var(--ds-card, #fff);
	color: var(--ds-text, #292929);
	cursor: pointer;
	transition: background-color var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

/* Lo stile globale di :focus-visible impone un radius piccolo: un controllo
   tondo deve restarlo anche in focus. */
.ds-terr-dlg__close:focus-visible { border-radius: var(--ds-radius-pill, 999px); }

.ds-terr-dlg__close svg { width: 1rem; height: 1rem; }

.ds-terr-dlg__close:hover,
.ds-terr-dlg__close:focus-visible { background: var(--ds-inset, #f1efeb); }

.ds-terr-dlg__head { padding-right: 2.5rem; }

.ds-terr-dlg__title {
	margin: 0;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.375rem, 3vw, 1.625rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.ds-terr-dlg__badge {
	display: inline-block;
	margin-top: 0.4rem;
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--ds-accent-text, #0d6f4a);
}

.ds-terr-dlg__comuni {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ds-soft, #6b6862);
}

.ds-terr-dlg__comuni--empty { font-style: italic; }

.ds-terr-dlg__foot { margin-top: var(--ds-space-l, 2rem); }

.ds-terr-dlg__cta svg {
	width: 1em;
	height: 1em;
	transition: transform var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

.ds-terr-dlg__cta:hover svg,
.ds-terr-dlg__cta:focus-visible svg { transform: translateX(3px); }

@media (prefers-reduced-motion: no-preference) {
	.ds-terr-dlg[open] { animation: ds-terr-dlg-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
	.ds-terr-dlg[open]::backdrop { animation: ds-terr-dlg-fade 320ms cubic-bezier(0.16, 1, 0.3, 1); }

	@keyframes ds-terr-dlg-in {
		from { opacity: 0; transform: translateY(12px) scale(0.985); filter: blur(3px); }
	}
	@keyframes ds-terr-dlg-fade {
		from { opacity: 0; }
	}

	/* La chiusura chiude il cerchio: senza, il pannello spariva di scatto. */
	.ds-terr-dlg {
		transition: opacity 200ms var(--ds-ease, ease), transform 200ms var(--ds-ease, ease),
			overlay 200ms allow-discrete, display 200ms allow-discrete;
	}
	.ds-terr-dlg:not([open]) { opacity: 0; transform: translateY(8px) scale(0.99); }
}

@media (max-width: 560px) {
	.ds-terr-dlg {
		width: 100%;
		max-width: 100%;
		margin: auto auto 0;
		border-radius: var(--ds-radius-lg, 12px) var(--ds-radius-lg, 12px) 0 0;
	}
}