/* Blocco Percorso: mappa vettoriale scura, percorso lime, servizi colorati come nella mappa ufficiale. */
.bolzarun-percorso {
	--bpr-lime: var(--wp--preset--color--lime, #7DC242);
	--bpr-lime2: var(--wp--preset--color--lime-schermo, #A8D83A);
	--bpr-asfalto: var(--wp--preset--color--asfalto, #1E1C1A);
	--bpr-carta: var(--wp--preset--color--carta, #F2F0EA);
	--bpr-grigio: #CFCAC0;
	--bpr-display: var(--wp--preset--font-family--display, "Arial Narrow", sans-serif);
	--bpr-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--bpr-pettorali: #B98CF5;
	--bpr-borse: #45C08A;
	--bpr-pasta: #5B9BF8;
	--bpr-docce: #EE6A62;
	--bpr-acqua: #5B9BF8;
	--bpr-parcheggio: #1D5FB8;
	--bpr-morbido: cubic-bezier(.22, 1, .36, 1);
	--bpr-verde: #4E8A23;
	color: var(--bpr-carta);
	display: grid;
	gap: 0;
}
.bolzarun-percorso p, .bolzarun-percorso dl, .bolzarun-percorso dd { margin: 0; }
.bolzarun-percorso [hidden] { display: none !important; }
.bolzarun-percorso :focus-visible { outline: 3px solid var(--bpr-lime); outline-offset: 3px; }

/* Mappa */
.bpr-mappa { position: relative; background: #252321; border: 1px solid #3A3734; overflow: hidden; }
.bpr-mappa svg { display: block; width: 100%; height: auto; aspect-ratio: auto; max-height: 78vh; touch-action: pan-y; }
.bpr-fondo { fill: #252321; }
.bpr-area-verde { fill: #2C3A26; }
.bpr-area-acqua { fill: #22313D; }
.bpr-base path { fill-rule: evenodd; }
.bpr-strada-p, .bpr-strada-s, .bpr-strada-v, .bpr-strada-f, .bpr-strada-a { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bpr-strada-p { stroke: #5A5650; stroke-width: 4; }
.bpr-strada-s { stroke: #4A4642; stroke-width: 3; }
.bpr-strada-v { stroke: #3D3A36; stroke-width: 2; }
.bpr-strada-f { stroke: #4B5E43; stroke-width: 1.5; stroke-dasharray: 3 4; }
.bpr-strada-a { stroke: #2F4A5E; stroke-width: 3; }

.bpr-bordo { fill: none; stroke: #1E1C1A; stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bpr-linea { fill: none; stroke: var(--bpr-lime); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Durante il disegno lo spessore segue lo zoom: il tratteggio non funziona con lo spessore fisso */
.is-da-disegnare:not(.is-finito) .bpr-linea { vector-effect: none; stroke-width: calc(var(--u, 2) * 6); stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-da-disegnare.is-disegnato:not(.is-finito) .bpr-linea { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.4, 0, .2, 1); }

/* Segni in pixel: il gruppo .bpr-s si scala con --u (metri per pixel) */
.bpr-s { transform: scale(var(--u, 2)); }
.bpr-frecce path { fill: none; stroke: #1E1C1A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bpr-vie text { font: 600 11px var(--bpr-mono); letter-spacing: .04em; text-transform: uppercase; fill: var(--bpr-carta); paint-order: stroke; stroke: #252321; stroke-width: 4px; stroke-linejoin: round; }
.bpr-km circle { fill: var(--bpr-asfalto); stroke: var(--bpr-lime); stroke-width: 2; }
.bpr-km text { font: 800 12px var(--bpr-display); fill: var(--bpr-carta); }
.bpr-runner circle { fill: var(--bpr-carta); stroke: var(--bpr-asfalto); stroke-width: 4; }
.bpr-runner { opacity: 0; transition: opacity .35s var(--bpr-morbido); }
.is-corsa .bpr-runner, .bpr-runner.is-visibile { opacity: 1; }

.bpr-voce { cursor: pointer; }
/* Spostamento dei segni troppo vicini alla partenza (calcolato da view.js) e linea verso il punto vero */
.bpr-voci .bpr-s { transform: scale(var(--u, 2)) translate(var(--ox, 0px), var(--oy, 0px)); }
.bpr-guida { stroke: var(--bpr-carta); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 4; }
.bpr-voce circle { fill: var(--bpr-carta); stroke: #1E1C1A; stroke-width: 3; transition: r .3s var(--bpr-morbido), stroke .3s; }
.bpr-voce.is-pettorali circle { fill: var(--bpr-pettorali); }
.bpr-voce.is-borse circle { fill: var(--bpr-borse); }
.bpr-voce.is-pasta circle { fill: var(--bpr-pasta); }
.bpr-voce.is-docce circle { fill: var(--bpr-docce); }
.bpr-voce.is-acqua circle { fill: var(--bpr-acqua); }
.bpr-voce text:not(.bpr-etichetta) { font: 800 12px var(--bpr-display); fill: #1E1C1A; pointer-events: none; }
/* Parcheggi: la classica P bianca su quadrato blu */
.bpr-p rect { fill: var(--bpr-parcheggio); stroke: #FFFFFF; stroke-width: 2.5; transition: transform .3s var(--bpr-morbido); }
.bpr-voce .bpr-p text { font: 900 17px var(--bpr-display); fill: #FFFFFF; }
.bpr-voce.is-parcheggio.is-attiva .bpr-p, .bpr-voce.is-parcheggio:hover .bpr-p { transform: scale(1.25); }
.bpr-voce.is-parcheggio:focus-visible rect { stroke: var(--bpr-lime); stroke-width: 3.5; }
.bpr-etichetta.is-sinistra { text-anchor: end; }
.bpr-etichetta.is-sotto { text-anchor: middle; }
.bpr-voce:focus { outline: none; }
.bpr-voce:focus-visible circle, .bpr-voce:focus-visible rect { stroke: var(--bpr-lime); stroke-width: 4; }
.bpr-etichetta { font: 700 13px var(--wp--preset--font-family--testo, sans-serif); fill: var(--bpr-carta); paint-order: stroke; stroke: #1E1C1A; stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity .3s var(--bpr-morbido); pointer-events: none; }
.is-zoom .bpr-etichetta, .bpr-voce.is-partenza .bpr-etichetta, .bpr-voce.is-attiva .bpr-etichetta, .bpr-voce:hover .bpr-etichetta, .bpr-voce:focus .bpr-etichetta { opacity: 1; }
.bpr-voce.is-attiva circle, .bpr-voce:hover circle { r: 15; stroke: var(--bpr-carta); }
/* Servizi nello stesso punto: un solo segno a spicchi che si apre nei pallini dei singoli servizi.
   Aperto al passaggio del mouse, al tocco (is-aperto), da tastiera, con un servizio scelto e con lo zoom. */
.bpr-pallino { transition: transform .45s var(--bpr-morbido); }
.bpr-gruppo-area { fill: transparent; pointer-events: none; }
.bpr-spicchi { transition: transform .35s var(--bpr-morbido), opacity .25s; }
.bpr-spicchi circle { fill: none; stroke: #1E1C1A; stroke-width: 3; }
.bpr-spicchi .is-pettorali { fill: var(--bpr-pettorali); }
.bpr-spicchi .is-borse { fill: var(--bpr-borse); }
.bpr-spicchi .is-pasta { fill: var(--bpr-pasta); }
.bpr-spicchi .is-docce { fill: var(--bpr-docce); }
.bpr-spicchi .is-acqua { fill: var(--bpr-acqua); }
.bpr-gruppo-segno { cursor: pointer; }
.bpr-gruppo-segno:hover .bpr-spicchi { transform: scale(1.25); }
.bpr-gruppo:hover .bpr-pallino, .bpr-gruppo.is-aperto .bpr-pallino, .bpr-gruppo:has(:focus-visible) .bpr-pallino { transform: translateX(var(--dx)); }
.bpr-gruppo:hover .bpr-spicchi, .bpr-gruppo.is-aperto .bpr-spicchi, .bpr-gruppo:has(:focus-visible) .bpr-spicchi { transform: scale(0); opacity: 0; }
.bpr-gruppo:hover .bpr-gruppo-area, .bpr-gruppo.is-aperto .bpr-gruppo-area { pointer-events: all; }
.bpr-gruppo:hover .bpr-etichetta, .bpr-gruppo.is-aperto .bpr-etichetta, .bpr-gruppo:has(:focus-visible) .bpr-etichetta, .bpr-gruppo:has(.is-attiva) .bpr-etichetta { opacity: 1; }
/* Da chiuso l'etichetta sta accanto al segno a spicchi; da aperto si sposta oltre i pallini */
.bpr-gruppo .bpr-etichetta { transition: opacity .3s var(--bpr-morbido), transform .45s var(--bpr-morbido); }
.bpr-gruppo .bpr-etichetta.is-sinistra { transform: translateX(var(--largo, 0px)); }
.bpr-gruppo .bpr-etichetta:not(.is-sinistra):not(.is-sotto) { transform: translateX(calc(-1 * var(--largo, 0px))); }
.bpr-gruppo:hover .bpr-etichetta, .bpr-gruppo.is-aperto .bpr-etichetta, .bpr-gruppo:has(:focus-visible) .bpr-etichetta { transform: none; }
/* Nel gruppo aperto il nome cambia: "Palestra" in generale, il nome del servizio sul pallino sotto il mouse o scelto */
.bpr-gruppo .bpr-etichetta.is-nome { opacity: 0 !important; }
.bpr-gruppo .bpr-voce:is(:hover, :focus-visible, .is-attiva) .bpr-etichetta.is-nome { opacity: 1 !important; }
.bpr-gruppo:has(.bpr-voce:is(:hover, :focus-visible, .is-attiva)) .bpr-etichetta.is-gruppo { opacity: 0 !important; }
/* Con il mouse il gruppo si apre solo passandoci sopra; un servizio scelto ingrandisce il segno a spicchi */
.bpr-gruppo:has(.is-attiva) .bpr-spicchi { transform: scale(1.25); }
/* Al tocco non c'è il passaggio del mouse: resta aperto con un servizio scelto e con lo zoom */
@media (hover: none) {
	.bpr-gruppo:has(.is-attiva) .bpr-pallino, .is-zoom .bpr-gruppo .bpr-pallino { transform: translateX(var(--dx)); }
	.bpr-gruppo:has(.is-attiva) .bpr-spicchi, .is-zoom .bpr-gruppo .bpr-spicchi { transform: scale(0); opacity: 0; }
	.bpr-gruppo:has(.is-attiva) .bpr-etichetta, .is-zoom .bpr-gruppo .bpr-etichetta { transform: none; }
}
.is-zoom .bpr-km, .is-zoom .bpr-frecce { opacity: .9; }

/* Segnalino "Sei qui" sulla partenza */
.bpr-qui rect { fill: var(--bpr-lime); stroke: #1E1C1A; stroke-width: 2; }
.bpr-qui path { fill: var(--bpr-lime); stroke: #1E1C1A; stroke-width: 2; stroke-linejoin: round; }
.bpr-qui text { font: 800 15px var(--bpr-display); text-transform: uppercase; letter-spacing: .04em; fill: #1E1C1A; }
.bpr-qui-onda { fill: none; stroke: var(--bpr-lime); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: bpr-onda 1.8s ease-out infinite; }
@keyframes bpr-onda { from { transform: scale(.7); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.bpr-voce.is-partenza { cursor: zoom-in; }

/* Scheda con la foto della partenza */
.bpr-foto { position: absolute; z-index: 3; width: min(320px, calc(100% - 16px)); margin: 0; background: var(--bpr-asfalto); border: 2px solid var(--bpr-lime); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); animation: bpr-foto .32s var(--bpr-morbido); transition: opacity .22s ease-in, transform .22s ease-in; }
.bpr-foto.is-uscita { opacity: 0; transform: translateY(6px) scale(.98); }
.bpr-foto-chiudi { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 2px solid var(--bpr-carta); background: rgba(30, 28, 26, .85); color: var(--bpr-carta); font: 400 24px/1 sans-serif; cursor: pointer; }
.bpr-foto:not(.is-fissa) .bpr-foto-chiudi { display: none; }
.bpr-foto-chiudi:hover { background: var(--bpr-carta); color: var(--bpr-asfalto); }
.bpr-foto img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 376; object-fit: cover; }
.bpr-foto figcaption { padding: 10px 12px 12px; font-size: 14px; line-height: 1.4; color: var(--bpr-carta); }
.bpr-foto strong { display: block; font: 800 18px/1 var(--bpr-display); text-transform: uppercase; color: var(--bpr-lime); margin-bottom: 4px; }
.bpr-foto.is-parcheggio { border-color: #5B9BF8; }
.bpr-strada { display: flex; width: max-content; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 10px 6px; background: var(--bpr-parcheggio); color: #FFFFFF !important; font: 600 12px/1 var(--bpr-mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.bpr-strada::after { content: "↗"; }
.bpr-strada:hover { background: #2A72D6; }
.bpr-riepilogo li a { color: var(--bpr-carta); font: 600 12px/1 var(--bpr-mono); text-transform: uppercase; text-underline-offset: 3px; }
@keyframes bpr-foto { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* Comandi sopra la mappa */
.bpr-comandi { position: absolute; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bpr-comandi button { font: 800 17px/1 var(--bpr-display); text-transform: uppercase; letter-spacing: .03em; padding: 11px 14px 10px; cursor: pointer; border: 2px solid var(--bpr-carta); background: rgba(30, 28, 26, .85); color: var(--bpr-carta); transition: background-color .25s, color .25s, border-color .25s; }
.bpr-comandi button:hover, .bpr-comandi button[aria-pressed="true"] { background: var(--bpr-carta); color: var(--bpr-asfalto); }
.bpr-comandi .bpr-play { background: var(--bpr-lime); border-color: var(--bpr-lime); color: var(--bpr-asfalto); }
.bpr-comandi .bpr-play:hover { background: var(--bpr-lime2); border-color: var(--bpr-lime2); }
.bpr-play::before { content: "▶ "; }
.bpr-play[aria-pressed="true"]::before { content: "❚❚ "; }
.bpr-hud { position: absolute; left: 12px; bottom: 12px; padding: 8px 10px; background: rgba(30, 28, 26, .85); font: 600 12px var(--bpr-mono); letter-spacing: .04em; text-transform: uppercase; opacity: 0; transition: opacity .35s var(--bpr-morbido); }
.is-corsa .bpr-hud, .bpr-hud.is-visibile { opacity: 1; }
.bpr-hud [data-bpr="km"] { color: var(--bpr-lime); }

/* Sotto la mappa */
.bpr-sotto { display: grid; gap: 18px; padding-top: 22px; }
.bpr-dati { display: flex; flex-wrap: wrap; gap: 10px 36px; border-top: 2px solid var(--bpr-carta); padding-top: 14px; }
.bpr-dati > div { display: grid; gap: 4px; }
.bpr-dati dt { font: 600 12px/1.3 var(--bpr-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bpr-grigio); }
.bpr-dati dd { font: 900 clamp(30px, 3.6vw, 44px)/.9 var(--bpr-display); font-variant-numeric: tabular-nums; }
.bpr-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bpr-voce-btn { transition: background-color .25s, color .25s, border-color .25s; display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px 9px 10px; background: transparent; color: inherit; border: 1px solid #45423E; cursor: pointer; font: 600 15px/1.2 var(--wp--preset--font-family--testo, sans-serif); }
.bpr-voce-btn:hover { border-color: var(--bpr-carta); }
.bpr-voce-btn[aria-pressed="true"] { background: var(--bpr-carta); color: var(--bpr-asfalto); border-color: var(--bpr-carta); }
.bpr-punto { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #1E1C1A; flex: none; background: var(--bpr-carta); }
.bpr-voce-btn.is-partenza .bpr-punto { border-radius: 0; background: repeating-conic-gradient(#1E1C1A 0 25%, #FFFFFF 0 50%) 0 0 / 8px 8px; border-color: var(--bpr-carta); }
.bpr-voce-btn.is-pettorali .bpr-punto { background: var(--bpr-pettorali); }
.bpr-voce-btn.is-borse .bpr-punto { background: var(--bpr-borse); }
.bpr-voce-btn.is-pasta .bpr-punto { background: var(--bpr-pasta); }
.bpr-voce-btn.is-docce .bpr-punto { background: var(--bpr-docce); }
.bpr-voce-btn.is-acqua .bpr-punto { background: var(--bpr-acqua); }
.bpr-voce-btn.is-parcheggio .bpr-punto { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; border: 1.5px solid #FFFFFF; background: var(--bpr-parcheggio); color: #FFFFFF; font: 900 12px/1 var(--bpr-display); }
.bpr-info { min-height: 26px; font-size: 16px; line-height: 1.5; max-width: 70ch; }
.bpr-info strong { color: var(--bpr-lime); font-weight: 700; margin-right: 4px; }
/* Riepilogo testuale: i dati della mappa senza dover toccare nulla */
.bpr-riepilogo { border-top: 1px solid #45423E; padding-top: 20px; }
.bpr-riepilogo .bpr-riepilogo-titolo { font: 600 13px/1.3 var(--bpr-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bpr-grigio); margin: 0 0 18px; }
.bpr-riepilogo ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px 40px; }
.bpr-riepilogo li { font-size: 15px; line-height: 1.55; color: var(--bpr-carta); }
/* Il nome si "accende" con una fascia verde che entra da sinistra quando la voce arriva sullo schermo */
.bpr-riepilogo li strong { display: table; margin-bottom: 8px; padding: 6px 10px 4px; font: 800 18px/1.1 var(--bpr-display); text-transform: uppercase; color: #FFFFFF; background: linear-gradient(var(--bpr-verde), var(--bpr-verde)) left / 100% 100% no-repeat; }
.bpr-riepilogo ul.is-da-accendere li strong { background-size: 0% 100%; transition: background-size .7s var(--bpr-morbido); transition-delay: var(--bpr-ritardo, 0ms); }
.bpr-riepilogo ul.is-da-accendere li.is-acceso strong { background-size: 100% 100%; }
@media (max-width: 781px) { .bpr-riepilogo ul { gap: 20px; } }
.bpr-riepilogo li span { font: 600 12px/1 var(--bpr-mono); text-transform: uppercase; color: var(--bpr-lime); }
.bpr-crediti { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 400 13px/1.5 var(--bpr-mono); color: var(--bpr-grigio); }
.bpr-crediti a { color: var(--bpr-carta); }
.bpr-prova { color: #F0A05A; }

@media (max-width: 781px) {
	.bpr-mappa svg { max-height: none; }
	.bpr-comandi { top: 8px; right: 8px; left: 8px; }
	.bpr-comandi button { font-size: 15px; padding: 10px 11px 9px; flex: 1 1 auto; }
	.bpr-dati { gap: 10px 24px; }
	.bpr-voce-btn { font-size: 14px; }
	.bpr-foto { width: min(240px, calc(100% - 16px)); }
	.bpr-foto figcaption { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.bpr-voce circle, .bpr-etichetta, .bpr-runner, .bpr-hud, .bpr-pallino, .bpr-spicchi, .bpr-foto, .bpr-voce-btn { transition: none; }
	.bpr-qui-onda, .bpr-foto { animation: none; }
}