/**
 * Mappa dei punti — [punti_mappa]
 *
 * Aspetto allineato alla reference MAPPA.png (2026-09-25).
 *
 * SOLO DESKTOP, per ora. Il telefono si decide dopo, e il markup e' fatto
 * perche' basti questo foglio: mappa, pin, pannello e legenda sono fratelli
 * dentro .kb-punti, e nessuno dipende dalla posizione degli altri. La
 * scheda dal basso sara' una regola in una media query su
 * .kb-punti__pannello, non un markup nuovo.
 *
 * IL TEMA. Hello Elementor stila per tag - button, a, h3, p, ul, img - con
 * specificita' fino a (0,2,0) sui pulsanti ([type=button]:hover,
 * [type=button]:not(:disabled)); Elementor aggiunge .elementor a,
 * .elementor img e .elementor *. L'ordine in cui arrivano i fogli NON e'
 * garantito: questo va in <head> o in fondo alla pagina a seconda di dove
 * la classe base trova lo shortcode. Quindi qui non si conta mai sul
 * pareggio vinto per ordine:
 *
 *  - ogni elemento del componente ha un selettore (0,2,0): .kb-punti piu'
 *    la sua classe. La radice e' .kb-punti[data-kb-punti], anche lei
 *    (0,2,0), perche' .elementor * la tocca a (0,1,0);
 *  - i due pulsanti (il pin e il comando della legenda) stanno a (0,3,0),
 *    passando per il loro contenitore, e i loro stati a (0,4,0);
 *  - l'azzeramento qui sotto viene PRIMA delle regole vere, che lo
 *    sovrascrivono a pari specificita' dentro questo stesso foglio.
 *
 * Nessun !important, nessuna regola fuori da .kb-punti. Il banco di prova
 * mette questo foglio in cascata con quelli veri del tema, di Elementor e
 * di MapLibre, nell'ordine peggiore, e controlla che il tema non vinca su
 * nessuna proprieta' di nessun elemento, in nessuno stato.
 *
 * Niente position: sticky: body { overflow: hidden } nel Customizer lo
 * rende inservibile su tutto il sito. Cio' che sta fermo sulla mappa e'
 * absolute dentro .kb-punti.
 *
 * Impilamento: tutti gli z-index sono SOTTO 34 e valgono solo dentro
 * .kb-punti, che ha il suo contesto (isolation). La pagina vede il riquadro
 * come un blocco solo, sotto header (99), menu (100), banner dei cookie
 * (99999) e preloader (999999).
 */

.kb-punti[data-kb-punti] {
	/* I colori del sito, e nessun altro. */
	--kb-punti-nero: #0C0C0C;
	--kb-punti-bianco: #FFFFFF;
	--kb-punti-accento: #F86036;

	/* Il nero con trasparenza: grigio scuro del sottotitolo, ombre, segnaposto. */
	--kb-punti-grigio: rgba( 12, 12, 12, 0.72 );
	--kb-punti-ombra-netta: 0 1px 4px rgba( 12, 12, 12, 0.18 );
	--kb-punti-ombra-morbida: 0 6px 24px rgba( 12, 12, 12, 0.14 );

	/*
	 * Il fondo e' il "background" dello stile bright della mappa: si vede
	 * mentre arrivano le tessere, o se non arrivano, al posto di un bianco
	 * che lampeggia.
	 */
	--kb-punti-fondo: #F8F4F0;

	/* Il font del sito, caricato da Adobe Fonts. */
	--kb-punti-font: "acumin-variable", sans-serif;

	/* Distanze dai bordi del riquadro, prese dalla reference. */
	--kb-punti-bordo-x: 64px;
	--kb-punti-bordo-y: 40px;

	--kb-punti-icona: 28px;
	--kb-punti-icona-legenda: 20px;
	--kb-punti-pannello: 445px;

	position: relative;
	display: block;
	box-sizing: border-box;
	height: var( --kb-punti-altezza, 900px );
	margin: 0;
	padding: 0;
	overflow: hidden;
	overflow: clip;
	background: var( --kb-punti-fondo );

	/*
	 * Tutto cio' che si eredita e' fissato qui: dalla pagina (body del tema,
	 * widget di Elementor) non deve entrare niente.
	 */
	color: var( --kb-punti-nero );
	font-family: var( --kb-punti-font );
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;

	/*
	 * Contesto di impilamento proprio, come .kb-mappa nella vecchia mappa
	 * (mappa.css, dove il perche' e' raccontato per esteso). Il velo di
	 * cooperativeGestures (z-index 99999, acceso solo fino a 1024px) nasce
	 * dentro la tela, che ha z-index 0 e quindi un contesto suo: copre la
	 * mappa, non pannello, legenda e zoom. Pannello, legenda, pulsanti
	 * dello zoom e controlli di MapLibre competono solo fra loro, mai con
	 * la pagina.
	 */
	isolation: isolate;
}

/* ------------------------------------------------------------------ */
/* Azzeramento                                                         */
/* ------------------------------------------------------------------ */

/*
 * Ogni elemento del componente, riportato a zero contro il tema. Le regole
 * vere vengono dopo e lo sovrascrivono.
 */
.kb-punti .kb-punti__tela,
.kb-punti .kb-punti__pin,
.kb-punti .kb-punti__marcatore,
.kb-punti .kb-punti__icona,
.kb-punti .kb-punti__etichetta,
.kb-punti .kb-punti__pannello,
.kb-punti .kb-punti__scheda,
.kb-punti .kb-punti__testa,
.kb-punti .kb-punti__foto,
.kb-punti .kb-punti__immagine,
.kb-punti .kb-punti__categoria,
.kb-punti .kb-punti__corpo,
.kb-punti .kb-punti__titolo,
.kb-punti .kb-punti__descrizione,
.kb-punti .kb-punti__descrizione *,
.kb-punti .kb-punti__pulsante,
.kb-punti .kb-punti__nascosto,
.kb-punti .kb-punti__legenda,
.kb-punti .kb-punti__legenda-elenco,
.kb-punti .kb-punti__voce,
.kb-punti .kb-punti__voce-nome,
.kb-punti .kb-punti__legenda-chiudi,
.kb-punti .kb-punti__legenda-apri,
.kb-punti .kb-punti__frecce,
.kb-punti .kb-punti__freccia-segno,
.kb-punti .kb-punti__freccia-segno *,
.kb-punti .kb-punti__zoom {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	outline: 0;
	font-size: inherit;
	vertical-align: baseline;
	text-decoration: none;
}

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

.kb-punti .kb-punti__tela {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/*
 * overflow: clip e non solo hidden: un elemento hidden si puo' ancora far
 * scorrere da codice, e il browser lo fa da solo quando un pin vicino al
 * bordo riceve il focus. Con clip no. Il JS ha una rete per i browser che
 * clip non lo conoscono (bloccaScorrimento in mappa-punti.js).
 */
.kb-punti .maplibregl-map,
.kb-punti .maplibregl-canvas-container {
	overflow: hidden;
	overflow: clip;
}

/*
 * La mappa si trascina: il cursore e' quello di MapLibre, la manina aperta
 * (grab) e chiusa mentre si trascina (grabbing), dal suo foglio
 * (.maplibregl-canvas-container.maplibregl-interactive). Qui non si
 * sovrascrive.
 */

/* ------------------------------------------------------------------ */
/* Pin                                                                 */
/* ------------------------------------------------------------------ */

/*
 * La lista dei pin non si vede finche' non si sa dove metterla: senza
 * JavaScript resta nascosta; con la mappa i
 * marcatori finiscono sulla mappa; senza mappa il JS aggiunge
 * --senza-mappa e la lista compare in alto a sinistra.
 */
.kb-punti .kb-punti__pin {
	display: none;
}

.kb-punti.kb-punti--senza-mappa .kb-punti__pin {
	position: absolute;
	top: var( --kb-punti-bordo-y );
	left: var( --kb-punti-bordo-x );
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: calc( 100% - 2 * var( --kb-punti-bordo-y ) );
	overflow: auto;
}

/*
 * Il marcatore sta dentro .maplibregl-map, che dichiara il suo font
 * (Helvetica 12px): qui si rimette quello del sito, esplicitamente.
 */
.kb-punti .kb-punti__marcatore {
	color: var( --kb-punti-nero );
	font-family: var( --kb-punti-font );
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 0;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
}

/* Il pin attivo e quello sotto il puntatore stanno sopra agli altri. */
.kb-punti .kb-punti__marcatore.is-attivo,
.kb-punti .kb-punti__marcatore:hover,
.kb-punti .kb-punti__marcatore:focus-within {
	z-index: 1;
}

.kb-punti .kb-punti__marcatore .kb-punti__bottone {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	position: relative;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: 0;
	letter-spacing: inherit;
	text-align: inherit;
	text-decoration: none;
	text-transform: inherit;
	white-space: inherit;
	transition: none;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.kb-punti .kb-punti__marcatore .kb-punti__bottone:hover,
.kb-punti .kb-punti__marcatore .kb-punti__bottone:focus,
.kb-punti .kb-punti__marcatore .kb-punti__bottone:active {
	border: 0;
	background: none;
	color: inherit;
	outline: none;
	text-decoration: none;
}

.kb-punti .kb-punti__marcatore .kb-punti__bottone:focus-visible {
	outline: 2px solid var( --kb-punti-accento );
	outline-offset: 3px;
}

.kb-punti .kb-punti__icona {
	display: block;
	width: auto;
	max-width: none;
	height: var( --kb-punti-icona );
}

/*
 * I pin sulla mappa staccati dal fondo, come i riquadri bianchi. Gli SVG
 * sono <img>: box-shadow disegnerebbe un rettangolo attorno all'immagine,
 * drop-shadow segue la sagoma della goccia (e del segnaposto, che e'
 * disegnato in CSS). E' la stessa ombra dei riquadri, dalla stessa
 * variabile: drop-shadow accetta la sua forma, senza spread.
 *
 * Solo sui pin: le icone della legenda hanno gia' il riquadro bianco.
 * Il filtro non cambia misure ne' punto di aggancio: l'ombra si disegna
 * fuori dal riquadro dell'icona, senza occupare spazio.
 */
.kb-punti .kb-punti__marcatore .kb-punti__icona {
	filter: drop-shadow( var( --kb-punti-ombra-netta ) );
}

/*
 * Il segnaposto: quando l'SVG della categoria non c'e' (un punto senza
 * categoria non va sulla mappa). Disegnato qui, senza file: una goccia con la punta in basso
 * al centro, dove MapLibre aggancia il marcatore (anchor: 'bottom').
 */
.kb-punti .kb-punti__icona--segnaposto {
	position: relative;
	width: calc( var( --kb-punti-icona ) * 0.7 );
}

.kb-punti .kb-punti__icona--segnaposto::before {
	content: "";
	position: absolute;
	/*
	 * Il quadrato ruotato e' alto 0.7 x radice di 2 = 0.99 volte l'icona:
	 * spostato giu' di 0.155, la punta tocca il fondo del riquadro.
	 */
	top: calc( var( --kb-punti-icona ) * 0.155 );
	left: 50%;
	width: calc( var( --kb-punti-icona ) * 0.7 );
	height: calc( var( --kb-punti-icona ) * 0.7 );
	border-radius: 50% 50% 50% 0;
	background: rgba( 12, 12, 12, 0.45 );
	box-shadow: inset 0 0 0 3px var( --kb-punti-bianco );
	transform: translateX( -50% ) rotate( -45deg );
}

/*
 * L'etichetta col nome breve: a SINISTRA del pin, come nella reference,
 * centrata sulla testa della goccia.
 *
 * Testo a 14px. Padding e distanza dal pin sono in em, cioe'
 * proporzionali al testo: 1em x 0.889em (a 14px, 14 x 12.4px) sono le
 * proporzioni dei 18 x 16px originali, cosi' il riquadro segue il testo
 * da solo invece di restare della misura di prima.
 *
 * Nascosta alla vista ma NON agli screen reader: e' lei a dare il nome al
 * pulsante. Per questo opacity e non display: none o visibility. Si vede
 * in hover, col focus da tastiera, e fissa sul pin attivo.
 */
.kb-punti .kb-punti__etichetta {
	position: absolute;
	top: calc( var( --kb-punti-icona ) * 0.4 );
	right: 100%;
	left: auto;
	margin: 0 0.556em 0 0;
	padding: 1em 0.889em;
	border: 0;
	border-radius: 0;
	background: var( --kb-punti-bianco );
	box-shadow: var( --kb-punti-ombra-netta );
	color: var( --kb-punti-nero );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateY( -50% );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.kb-punti .kb-punti__bottone:hover .kb-punti__etichetta,
.kb-punti .kb-punti__bottone:focus-visible .kb-punti__etichetta,
.kb-punti .kb-punti__marcatore.is-attivo .kb-punti__etichetta {
	opacity: 1;
}

/* Senza mappa la lista e' una lista: i nomi si leggono sempre, accanto. */
.kb-punti.kb-punti--senza-mappa .kb-punti__marcatore .kb-punti__bottone {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.3;
}

.kb-punti.kb-punti--senza-mappa .kb-punti__etichetta {
	position: static;
	margin: 0;
	padding: 6px 10px;
	transform: none;
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Pannello                                                            */
/* ------------------------------------------------------------------ */

/*
 * Nessun padding: il pannello comincia con la foto, a filo dei bordi. Il
 * testo ha il suo spazio in .kb-punti__corpo.
 */
.kb-punti .kb-punti__pannello {
	position: absolute;
	top: var( --kb-punti-bordo-y );
	right: var( --kb-punti-bordo-x );
	z-index: 3;
	width: min( var( --kb-punti-pannello ), calc( 100% - 2 * var( --kb-punti-bordo-x ) ) );
	max-height: calc( 100% - 2 * var( --kb-punti-bordo-y ) );

	/*
	 * Colonna flex che NON scorre: le frecce escono per meta' dal bordo di
	 * sopra e non vanno tagliate. Scorre la scheda, che si stringe
	 * (min-height: 0) dentro il max-height del pannello.
	 */
	display: flex;
	flex-direction: column;
	overflow: visible;
	background: var( --kb-punti-bianco );
	box-shadow: var( --kb-punti-ombra-morbida );
}

.kb-punti .kb-punti__scheda {
	display: block;
	flex: 0 1 auto;
	min-height: 0;
	overflow: auto;
}

/*
 * Frecce precedente/successivo: due pulsanti tondi in alto a destra,
 * centrati sul bordo di sopra (meta' fuori), a 20px dal bordo destro, 8px
 * fra loro. Sopra foto e chip; la chip scende sotto di loro (vedi sotto).
 * Ogni stato e' scritto, perche' Hello Elementor colora i button in hover
 * e col focus.
 */
.kb-punti .kb-punti__frecce {
	position: absolute;
	top: 0;
	right: 20px;
	z-index: 2;
	display: flex;
	gap: 8px;
	transform: translateY( -50% );
}

.kb-punti .kb-punti__frecce .kb-punti__freccia {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0;
	padding: 0;
	border: 1px solid var( --kb-punti-nero );
	overflow: visible;
	border-radius: 50%;
	background: var( --kb-punti-bianco );
	box-shadow: none;
	color: var( --kb-punti-nero );
	font-family: inherit;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kb-punti .kb-punti__frecce .kb-punti__freccia:focus,
.kb-punti .kb-punti__frecce .kb-punti__freccia:active {
	border: 1px solid var( --kb-punti-nero );
	background: var( --kb-punti-bianco );
	box-shadow: none;
	color: var( --kb-punti-nero );
	outline: none;
}

.kb-punti .kb-punti__frecce .kb-punti__freccia:hover {
	border-color: var( --kb-punti-nero );
	background: var( --kb-punti-nero );
	color: var( --kb-punti-bianco );
}

.kb-punti .kb-punti__frecce .kb-punti__freccia:focus-visible {
	outline: 2px solid var( --kb-punti-accento );
	outline-offset: 2px;
}

.kb-punti .kb-punti__freccia-segno {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/*
 * Con le frecce la chip scende sotto la loro meta' interna (32px) piu' 8px:
 * altrimenti una categoria lunga ci finisce sotto.
 */
.kb-punti .kb-punti__frecce ~ .kb-punti__scheda .kb-punti__categoria {
	top: 40px;
}

.kb-punti .kb-punti__frecce ~ .kb-punti__scheda--senza-immagine .kb-punti__testa {
	padding-top: 40px;
}

/* La testa: la foto, e sopra la chip della categoria. */
.kb-punti .kb-punti__testa {
	position: relative;
}

.kb-punti .kb-punti__foto {
	display: block;
}

/*
 * Altezza fissa, larga quanto il pannello: qualunque sia il formato della
 * foto caricata, cover la ritaglia invece di deformarla, tenendo il centro.
 */
.kb-punti .kb-punti__immagine {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center;
}

/*
 * La chip: sovrapposta alla foto in alto a sinistra, testo maiuscolo
 * piccolo, a pillola. Il fondo e' il colore del pin della categoria, che il
 * PHP legge dall'SVG e passa in --kb-punti-chip; il testo e' bianco o nero
 * secondo data-testo (il piu' contrastato, scelto dal PHP). Senza colore:
 * fondo nero e testo bianco.
 */
.kb-punti .kb-punti__categoria {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	display: inline-block;
	padding: 6px 10px;
	border-radius: 100px;
	background: var( --kb-punti-chip, var( --kb-punti-nero ) );
	color: var( --kb-punti-bianco );
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kb-punti .kb-punti__categoria[data-testo="nero"] {
	color: var( --kb-punti-nero );
}

.kb-punti .kb-punti__corpo {
	display: block;
	padding: 30px 24px 28px;
}

/* Titolo grande, regular, interlinea stretta. */
.kb-punti .kb-punti__titolo {
	color: var( --kb-punti-nero );
	font-family: inherit;
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: none;
}

/* Sottotitolo: piu' piccolo, stesso peso, grigio scuro. */
.kb-punti .kb-punti__descrizione {
	margin: 16px 0 0;
	color: var( --kb-punti-grigio );
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
}

.kb-punti .kb-punti__descrizione p {
	margin: 0 0 8px;
}

.kb-punti .kb-punti__descrizione p:last-child {
	margin-bottom: 0;
}

/* Il pulsante della scheda (testo_pulsante): pillola trasparente, bordo sottile scuro. */
.kb-punti .kb-punti__pulsante {
	display: inline-block;
	margin: 20px 0 0;
	padding: 10px 40px;
	border: 1px solid var( --kb-punti-nero );
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var( --kb-punti-nero );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kb-punti .kb-punti__pulsante:hover,
.kb-punti .kb-punti__pulsante:focus-visible {
	border-color: var( --kb-punti-accento );
	background: var( --kb-punti-accento );
	color: var( --kb-punti-bianco );
	text-decoration: none;
}

.kb-punti .kb-punti__pulsante:focus:not( :focus-visible ) {
	outline: none;
}

.kb-punti .kb-punti__pulsante:focus-visible {
	outline: 2px solid var( --kb-punti-nero );
	outline-offset: 3px;
}

/*
 * Schede a cui manca un pezzo. Il pezzo non c'e' nel DOM (il PHP non lo
 * stampa): qui si sistemano solo le spaziature di quello che resta.
 *
 * Senza immagine la chip della categoria non ha piu' una foto su cui
 * stare: torna nel flusso, in cima alla scheda, allineata al testo, e il
 * corpo le sta sotto un po' piu' vicino.
 */
.kb-punti .kb-punti__scheda--senza-immagine .kb-punti__testa {
	padding: 24px 24px 0;
}

.kb-punti .kb-punti__scheda--senza-immagine .kb-punti__categoria {
	position: static;
}

.kb-punti .kb-punti__scheda--senza-immagine .kb-punti__corpo {
	padding-top: 20px;
}

/* Senza pulsante la scheda finisce con la descrizione: sotto lo stesso respiro che sopra al titolo. */
.kb-punti .kb-punti__scheda--senza-pulsante .kb-punti__corpo {
	padding-bottom: 30px;
}

/* Testo per gli screen reader, invisibile a schermo. */
.kb-punti .kb-punti__nascosto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Legenda                                                             */
/* ------------------------------------------------------------------ */

/*
 * Una striscia in basso larga quanto il riquadro: la riga dei riquadri a
 * sinistra, il comando a destra. La striscia in se' e' trasparente ai
 * click - sotto c'e' la mappa, e un pin che ci cade deve restare
 * cliccabile -: li prendono solo i riquadri e il comando.
 */
.kb-punti .kb-punti__legenda {
	position: absolute;
	right: var( --kb-punti-bordo-x );
	bottom: var( --kb-punti-bordo-y );
	left: var( --kb-punti-bordo-x );
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	pointer-events: none;
}

.kb-punti .kb-punti__legenda-elenco {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 9px;
	row-gap: 9px;
	list-style: none;
}

/*
 * Testo a 16px. Come per l'etichetta del pin, le misure del riquadro sono
 * in em: 1.125em sopra e sotto e 1em ai lati sono i 18px di prima riferiti
 * al testo, e la larghezza minima (10.333em, cioe' 186px a 18px) scala con
 * lui. Niente altezza fissa: il riquadro e' alto quanto testo e padding.
 */
.kb-punti .kb-punti__voce {
	/* Tutte le misure dell'icona, segnaposto compreso, seguono questa. */
	--kb-punti-icona: var( --kb-punti-icona-legenda );

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625em;
	min-width: 10.333em;
	padding: 1.125em 1em;
	background: var( --kb-punti-bianco );
	box-shadow: var( --kb-punti-ombra-netta );
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	list-style-type: none;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: auto;
}

.kb-punti .kb-punti__voce .kb-punti__icona {
	flex: 0 0 auto;
}

/*
 * "CHIUDI LA LEGENDA X" e, a legenda chiusa, "MOSTRA LA LEGENDA +": nello
 * stesso riquadro bianco delle voci - forma, padding, ombra, tipografia -
 * perche' testo nudo sulla mappa non si legge. Il padding a destra fa posto
 * alla X, disegnata qui (due tratti) cosi' non e' un carattere da tradurre;
 * a legenda chiusa i tratti ruotano e fanno un +.
 */
.kb-punti .kb-punti__legenda .kb-punti__legenda-comando {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	margin: 0 0 0 auto;
	padding: 1.125em 3.125em 1.125em 1em;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: var( --kb-punti-bianco );
	box-shadow: var( --kb-punti-ombra-netta );
	color: var( --kb-punti-nero );
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: none;
	cursor: pointer;
	pointer-events: auto;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.kb-punti .kb-punti__legenda .kb-punti__legenda-comando:hover,
.kb-punti .kb-punti__legenda .kb-punti__legenda-comando:focus,
.kb-punti .kb-punti__legenda .kb-punti__legenda-comando:active {
	border: 0;
	background: var( --kb-punti-bianco );
	box-shadow: var( --kb-punti-ombra-netta );
	color: var( --kb-punti-nero );
	outline: none;
	text-decoration: none;
}

.kb-punti .kb-punti__legenda .kb-punti__legenda-comando:hover {
	color: var( --kb-punti-accento );
}

.kb-punti .kb-punti__legenda .kb-punti__legenda-comando:focus-visible {
	outline: 2px solid var( --kb-punti-accento );
	outline-offset: 4px;
}

.kb-punti .kb-punti__legenda-comando::before,
.kb-punti .kb-punti__legenda-comando::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.125em;
	width: 0.875em;
	height: 2px;
	background: currentColor;
	transition: transform 0.15s ease;
}

.kb-punti .kb-punti__legenda-comando::before {
	transform: translateY( -50% ) rotate( 45deg );
}

.kb-punti .kb-punti__legenda-comando::after {
	transform: translateY( -50% ) rotate( -45deg );
}

.kb-punti .kb-punti__legenda-comando[aria-expanded="false"]::before {
	transform: translateY( -50% ) rotate( 0deg );
}

.kb-punti .kb-punti__legenda-comando[aria-expanded="false"]::after {
	transform: translateY( -50% ) rotate( 90deg );
}

/* Delle due etichette del comando se ne vede una, secondo lo stato. */
.kb-punti .kb-punti__legenda-comando[aria-expanded="true"] .kb-punti__legenda-apri,
.kb-punti .kb-punti__legenda-comando[aria-expanded="false"] .kb-punti__legenda-chiudi {
	display: none;
}

/*
 * Desktop (oltre i 1024px, lo stesso confine di timeline-onda ed
 * etichetta-laterale): voci e comando a 15px, peso 600, padding 16px su
 * tutti i lati. Anche sul comando il padding e' uguale da tutti e
 * quattro i lati: lo spazio per la X lo fa il margine dell'etichetta, in em
 * come prima (3.125em dal bordo destro, meno i 16px del padding). L'icona
 * resta a 20px; spazio fra icona e nome e larghezza minima sono in em e
 * scalano col testo. Sotto i 1025px resta tutto com'era.
 */
@media ( min-width: 1025px ) {
	.kb-punti .kb-punti__voce,
	.kb-punti .kb-punti__legenda .kb-punti__legenda-comando {
		padding: 16px;
		font-size: 15px;
		font-weight: 600;
	}

	.kb-punti .kb-punti__legenda-comando .kb-punti__legenda-chiudi,
	.kb-punti .kb-punti__legenda-comando .kb-punti__legenda-apri {
		margin-right: calc( 3.125em - 16px );
	}
}

/* ------------------------------------------------------------------ */
/* Comandi di zoom                                                     */
/* ------------------------------------------------------------------ */

/*
 * In alto a sinistra, due riquadri come quelli della legenda: fondo
 * bianco, la stessa ombra netta, angoli vivi, font del sito, e la stessa
 * altezza delle voci (1.125em sopra e sotto piu' 1.2em di riga = 3.45em a
 * 16px), qui quadrati. I segni + e - sono due tratti di CSS, come la X
 * della legenda: nessun carattere da tradurre. Il nome del pulsante e'
 * nel testo nascosto, tradotto dal PHP.
 *
 * Solo con la mappa: senza, il gruppo resta [hidden] e in quell'angolo
 * compare la lista dei pin.
 */
.kb-punti .kb-punti__zoom {
	position: absolute;
	top: var( --kb-punti-bordo-y );
	left: var( --kb-punti-bordo-x );
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.kb-punti .kb-punti__zoom .kb-punti__zoom-comando {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 3.45em;
	height: 3.45em;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: var( --kb-punti-bianco );
	box-shadow: var( --kb-punti-ombra-netta );
	color: var( --kb-punti-nero );
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	transition: none;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.kb-punti .kb-punti__zoom .kb-punti__zoom-comando:hover,
.kb-punti .kb-punti__zoom .kb-punti__zoom-comando:focus,
.kb-punti .kb-punti__zoom .kb-punti__zoom-comando:active {
	border: 0;
	background: var( --kb-punti-bianco );
	box-shadow: var( --kb-punti-ombra-netta );
	color: var( --kb-punti-nero );
	outline: none;
	text-decoration: none;
}

.kb-punti .kb-punti__zoom .kb-punti__zoom-comando:hover {
	color: var( --kb-punti-accento );
}

.kb-punti .kb-punti__zoom .kb-punti__zoom-comando:focus-visible {
	outline: 2px solid var( --kb-punti-accento );
	outline-offset: 4px;
}

/* Al limite: resta raggiungibile col Tab (aria-disabled, non disabled), ma si vede spento e non promette niente. */
.kb-punti .kb-punti__zoom .kb-punti__zoom-comando[aria-disabled="true"],
.kb-punti .kb-punti__zoom .kb-punti__zoom-comando[aria-disabled="true"]:hover {
	color: var( --kb-punti-grigio );
	opacity: 0.4;
	cursor: default;
}

.kb-punti .kb-punti__zoom-comando::before,
.kb-punti .kb-punti__zoom-comando::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.875em;
	height: 2px;
	background: currentColor;
	transform: translate( -50%, -50% );
}

.kb-punti .kb-punti__zoom-comando--piu::after {
	transform: translate( -50%, -50% ) rotate( 90deg );
}

.kb-punti .kb-punti__zoom-comando--meno::after {
	content: none;
}

/* ------------------------------------------------------------------ */
/* Telefono e tablet (fino a 1024px)                                   */
/* ------------------------------------------------------------------ */

/*
 * Stesso confine di timeline-onda ed etichetta-laterale; da 1025px in su
 * vale solo quanto sopra.
 *
 * Legenda: niente comando, le voci sempre visibili su una riga in basso,
 * da un bordo all'altro, che scorre di lato col dito. La riga e' sorella
 * della tela, non sua figlia: il dito che la scorre non arriva a MapLibre
 * e la mappa resta ferma. Il padding verticale lascia vedere l'ombra delle
 * voci, che overflow-x taglierebbe; quello laterale tiene le voci a 16px
 * dai bordi.
 *
 * Scheda: in basso, sopra la riga della legenda, a 16px da sinistra e
 * larga al piu' 480px (sotto i 512px, a 16px da tutti e due i lati); mai piu'
 * alta dello spazio fra la legenda e i pulsanti dello zoom (se serve,
 * scorre dentro). Senza foto: la chip torna nel flusso, come nelle schede
 * senza immagine.
 */
@media ( max-width: 1024.98px ) {
	.kb-punti[data-kb-punti] {
		--kb-punti-margine: 16px;
		/* Voce della legenda: 16px sopra e sotto piu' 1.2em di riga, a 14px. */
		--kb-punti-alta-voce: calc( 2 * 16px + 1.2 * 14px );
		--kb-punti-sotto-scheda: calc( var( --kb-punti-margine ) + var( --kb-punti-alta-voce ) + 12px );
		/* Fine dei pulsanti dello zoom: due da 3.45em a 16px e 9px fra loro. */
		--kb-punti-sopra-scheda: calc( var( --kb-punti-margine ) + 2 * 40px + 9px + 12px );

		/* Altezza fissa su telefono e tablet: qui l'attributo altezza dello shortcode non conta. */
		height: 700px;
	}

	/* Zoom: stessa distanza dai bordi di scheda e legenda; pulsanti da 40px, segni in proporzione (14px su 55px). */
	.kb-punti .kb-punti__zoom {
		top: var( --kb-punti-margine );
		left: var( --kb-punti-margine );
	}

	.kb-punti .kb-punti__zoom .kb-punti__zoom-comando {
		width: 40px;
		height: 40px;
	}

	/*
	 * L'avviso dei gesti a due dita (cooperativeGestures, acceso solo qui):
	 * sempre il testo per il tocco, tradotto dal PHP. Quello per il mouse
	 * (Ctrl + rotella) non serve: la rotella non fa zoom su questa mappa.
	 */
	.kb-punti .maplibregl-cooperative-gesture-screen .maplibregl-desktop-message {
		display: none;
	}

	.kb-punti .maplibregl-cooperative-gesture-screen .maplibregl-mobile-message {
		display: block;
	}

	.kb-punti .kb-punti__zoom-comando::before,
	.kb-punti .kb-punti__zoom-comando::after {
		width: 10px;
	}

	.kb-punti .kb-punti__legenda {
		right: 0;
		bottom: calc( var( --kb-punti-margine ) - 6px );
		left: 0;
		display: block;
	}

	.kb-punti .kb-punti__legenda .kb-punti__legenda-comando {
		display: none;
	}

	.kb-punti .kb-punti__legenda-elenco,
	.kb-punti .kb-punti__legenda-elenco[hidden] {
		display: flex;
		flex-wrap: nowrap;
		padding: 6px var( --kb-punti-margine );
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		touch-action: pan-x;
		pointer-events: auto;
	}

	.kb-punti .kb-punti__legenda-elenco::-webkit-scrollbar {
		display: none;
	}

	.kb-punti .kb-punti__voce {
		flex: 0 0 auto;
		padding: 16px;
		font-size: 14px;
	}

	.kb-punti .kb-punti__pannello {
		top: auto;
		bottom: var( --kb-punti-sotto-scheda );
		left: var( --kb-punti-margine );
		/* Larga al piu' 480px, a sinistra; sotto i 512px resta bordo a bordo meno i margini. */
		right: auto;
		width: calc( 100% - 2 * var( --kb-punti-margine ) );
		max-width: 480px;
		/*
		 * Niente overscroll-behavior: finito il suo contenuto (o se non ne ha
		 * da scorrere) il dito passa alla pagina. La mappa sotto non si muove
		 * comunque: la scheda e' sorella della tela.
		 */
		max-height: calc( 100% - var( --kb-punti-sotto-scheda ) - var( --kb-punti-sopra-scheda ) );
	}

	.kb-punti .kb-punti__foto {
		display: none;
	}

	/*
	 * 20px da tutti i lati della scheda; fra chip e titolo i 20px di prima.
	 * Selettori anche con le varianti --senza-*, che su desktop hanno
	 * padding propri e specificita' piu' alta.
	 */
	.kb-punti .kb-punti__testa,
	.kb-punti .kb-punti__scheda--senza-immagine .kb-punti__testa {
		padding: 20px 20px 0;
	}

	.kb-punti .kb-punti__categoria {
		position: static;
	}

	.kb-punti .kb-punti__corpo,
	.kb-punti .kb-punti__scheda--senza-immagine .kb-punti__corpo,
	.kb-punti .kb-punti__scheda--senza-pulsante .kb-punti__corpo {
		padding: 20px;
	}

	.kb-punti .kb-punti__titolo {
		font-size: 28px;
	}

	/* Frecce da 48px; la chip scende sotto la loro meta' interna (24px) piu' 8px. */
	.kb-punti .kb-punti__frecce .kb-punti__freccia {
		width: 48px;
		height: 48px;
		font-size: 16px;
	}

	.kb-punti .kb-punti__frecce ~ .kb-punti__scheda .kb-punti__testa {
		padding-top: 32px;
	}

	.kb-punti .kb-punti__descrizione {
		font-size: 18px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.kb-punti .kb-punti__etichetta,
	.kb-punti .kb-punti__pulsante,
	.kb-punti .kb-punti__frecce .kb-punti__freccia,
	.kb-punti .kb-punti__legenda-comando::before,
	.kb-punti .kb-punti__legenda-comando::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Nascosto                                                            */
/* ------------------------------------------------------------------ */

/*
 * Ultima regola del foglio, senza !important: a pari specificita' con le
 * regole che danno display a schede ed elenco vince perche' viene dopo, e
 * il tema ([hidden], 0,1,0) e' comunque piu' debole.
 */
.kb-punti [hidden] {
	display: none;
}