/**
 * "I luoghi" — mappa a due livelli + schede per frazione.
 *
 * Palette e tipografia: quelle del sito, non altre. Accento = colore della sezione
 * (`--f2-acc` / `--f2-acc-scuro`, qui il redbrown della sezione Scuola), testo #17324d,
 * testo secondario #5c6f82, hairline #d9dadb, raggio 4px. Sono gli stessi valori del
 * calendario e del resto del tema: la pagina deve sembrare la stessa mano.
 */

.f2-luoghi { padding-top: 1rem; padding-bottom: 3rem; }

/* ---------- introduzione ---------- */
.f2-luoghi-intro { max-width: 62ch; margin: 0 0 1.1rem; }
.f2-luoghi-titolo { font-size: 1.35rem; font-weight: 700; color: #17324d; margin: 0 0 .35rem; line-height: 1.25; }
.f2-luoghi-testo { color: #5c6f82; font-size: 1rem; line-height: 1.5; margin: 0; }
.f2-luoghi-testo strong { color: #17324d; }
.f2-luoghi-testo a { color: var(--f2-acc-scuro, #af2127); font-weight: 600; }

/* ---------- pastiglie delle frazioni: stessa grammatica dei bottoni del calendario ---------- */
.f2-luoghi-chips { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.f2-chip {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: inherit; font-size: .88rem; line-height: 1;
	background: #fff; border: 1px solid #d9dadb; border-radius: 4px;
	padding: .4rem .7rem .4rem .4rem; cursor: pointer; color: #17324d;
	transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}
.f2-chip:hover, .f2-chip:focus-visible { background: var(--f2-acc, #d8333a); border-color: var(--f2-acc, #d8333a); color: #fff; outline: 0; }
.f2-chip:hover .f2-chip-conta, .f2-chip:focus-visible .f2-chip-conta { color: rgba(255, 255, 255, .85); }
.f2-chip:hover .f2-chip-num, .f2-chip:focus-visible .f2-chip-num { background: #fff; color: var(--f2-acc-scuro, #af2127); }
.f2-chip[aria-current="true"] { border-color: var(--f2-acc-scuro, #af2127); box-shadow: inset 0 0 0 1px var(--f2-acc-scuro, #af2127); }
.f2-chip-num {
	width: 1.4rem; height: 1.4rem; border-radius: 50%;
	background: var(--f2-acc, #d8333a); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: .74rem; font-weight: 700; flex: 0 0 auto;
}
.f2-chip-nome { font-weight: 600; }
.f2-chip-conta { color: #5c6f82; font-size: .8rem; }

/* ---------- mappa ---------- */
.f2-luoghi-mapwrap { position: relative; margin: 0 0 2rem; }
.f2-luoghi-map {
	height: min(60vh, 520px); width: 100%;
	border: 1px solid #d9dadb; border-radius: 4px; z-index: 0;
	background: #f5f6f7;
	font-family: inherit;
}
/* La base della mappa e' gia' chiara (CARTO Positron). Un filo di desaturazione toglie i
   residui di colore delle strade: cosi' gli unici colori veri sono quelli dei segnaposti. */
.f2-luoghi-map .leaflet-tile-pane { filter: saturate(.35); }
/* Rete di sicurezza: un tile "caricato" resta visibile anche se il fade di Leaflet
   lasciasse un inline opacity:0 (l'!important batte lo stile inline). */
.f2-luoghi-map .leaflet-tile-loaded { opacity: 1 !important; }
@media (max-width: 767.98px) { .f2-luoghi-map { height: 60vh; min-height: 320px; } }

/* I comandi di Leaflet vestiti come i bottoni del sito (bianco, hairline, accento). */
.f2-luoghi-map .leaflet-bar { border: 0; box-shadow: none; }
.f2-luoghi-map .leaflet-bar a,
.f2-luoghi-map .leaflet-bar a:hover {
	width: 2rem; height: 2rem; line-height: 2rem;
	background: #fff; border: 1px solid #d9dadb; border-radius: 4px;
	color: var(--f2-acc-scuro, #af2127); font-weight: 700;
}
.f2-luoghi-map .leaflet-bar a:first-child { margin-bottom: .25rem; }
.f2-luoghi-map .leaflet-bar a:hover { background: var(--f2-acc, #d8333a); border-color: var(--f2-acc, #d8333a); color: #fff; }
.f2-luoghi-map .leaflet-control-attribution {
	background: rgba(255, 255, 255, .88); color: #5c6f82; font-size: .68rem; border-radius: 4px 0 0 0;
}
.f2-luoghi-map .leaflet-control-attribution a { color: #5c6f82; }

.f2-luoghi-sotto { display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-content: space-between; align-items: baseline; margin-top: .6rem; }
.f2-luoghi-aiuto { margin: 0; font-size: .84rem; color: #5c6f82; max-width: 62ch; }
.f2-luoghi-legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: #5c6f82; }
.f2-luoghi-lg { display: inline-flex; align-items: center; gap: .35rem; }
.f2-luoghi-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* segnaposto di frazione: pastiglia numerata nel colore della sezione + nome sempre scritto */
.f2-pin-frz, .f2-pin-sede { background: none; border: 0; }
.f2-pin-frz b {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--f2-acc, #d8333a); color: #fff;
	font-family: inherit; font-size: .92rem; font-weight: 700;
	border: 2px solid #fff; box-shadow: 0 1px 4px rgba(23, 50, 77, .3);
}
.f2-pin-sede b { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(23, 50, 77, .3); }

.leaflet-tooltip.f2-tt {
	background: #fff; border: 1px solid #d9dadb; border-radius: 4px; box-shadow: none;
	color: #17324d; font-family: inherit; font-size: .8rem; font-weight: 600;
	padding: .2rem .45rem; white-space: nowrap;
}
.leaflet-tooltip.f2-tt::before { display: none; }
.leaflet-tooltip.f2-tt em { font-style: normal; font-weight: 400; color: #5c6f82; }

.f2-luoghi-map .leaflet-popup-content-wrapper { border-radius: 4px; box-shadow: 0 2px 10px rgba(23, 50, 77, .18); }
.f2-pop { font-family: inherit; min-width: 200px; display: flex; flex-direction: column; gap: .5rem; }
.f2-pop-s { display: flex; flex-direction: column; gap: .05rem; }
.f2-pop-s + .f2-pop-s { border-top: 1px solid #e8eaed; padding-top: .5rem; }
.f2-pop-ty { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: #5c6f82; font-weight: 700; }
.f2-pop-s strong a { color: var(--f2-acc-scuro, #af2127); text-decoration: none; font-size: .92rem; }
.f2-pop-s strong a:hover { text-decoration: underline; }
.f2-pop-r { font-size: .82rem; color: #5c6f82; }
.f2-pop-dir { font-size: .82rem; font-weight: 600; color: var(--f2-acc-scuro, #af2127); }
.leaflet-popup-content { margin: .8rem .9rem; }

/* ---------- gruppi per frazione ---------- */
.f2-frz { margin: 0 0 1.8rem; padding-top: 1.1rem; border-top: 1px solid #d9dadb; scroll-margin-top: 5rem; }
.f2-frz-titolo { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 700; color: #17324d; margin: 0 0 .8rem; }
.f2-frz-num { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--f2-acc, #d8333a); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 700; flex: 0 0 auto; }

.f2-frz-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .f2-frz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Da tablet in su il nome della frazione sta a sinistra e le sedi a destra: le frazioni con
   una sola sede non lasciano piu' due caselle vuote, e la pagina si legge come un indice. */
@media (min-width: 768px) {
	.f2-frz { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0 2rem; }
	.f2-frz-titolo { margin: 0; align-self: start; position: sticky; top: 5rem; }
	.f2-frz-cards { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
}

.f2-card { min-width: 0; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid #d9dadb; border-radius: 4px; overflow: hidden; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.f2-card:hover, .f2-card:focus-within { border-color: var(--f2-acc, #d8333a); box-shadow: 0 2px 12px rgba(23, 50, 77, .1); }

/* La fotografia di ogni sede ha SEMPRE la stessa forma.
   Perche' serve la gabbia assoluta e non basta `aspect-ratio` sul contenitore: le foto vere
   dei plessi arrivano dal loro archivio e hanno proporzioni tutte diverse (misurate: 1586x992,
   1280x720, 1000x563, 600x546, 320x240, e una copertina quadrata 1254x1254). Il tema padre
   dichiara `img { height: auto }`, che vince su `height: 100%` e lascia all'immagine la sua
   altezza naturale: il contenitore si allungava e ogni scheda della stessa riga aveva un
   ritaglio di altezza diversa. Con `position: absolute; inset: 0` l'immagine non decide piu'
   nulla: la forma la impone il riquadro, e `object-fit: cover` ritaglia. */
.f2-card-fig { position: relative; display: block; background: #eef0f2; aspect-ratio: 16 / 10; overflow: hidden; }
.f2-card-fig img, .f2-card-noimg {
	position: absolute; inset: 0;
	display: block;
	width: 100% !important; height: 100% !important; max-width: none;
	object-fit: cover; object-position: center;
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.f2-card:hover .f2-card-fig img, .f2-card:focus-within .f2-card-fig img { transform: scale(1.04); }
.f2-card-noimg { background: repeating-linear-gradient(135deg, #eef0f2 0 10px, #f5f6f7 10px 20px); }
/* Il corpo si allunga per pareggiare le schede della riga: i pulsanti restano allineati. */
.f2-card-body { padding: .75rem .85rem .9rem; display: flex; flex-direction: column; flex: 1 1 auto; }
/* `align-self` perche' il corpo della scheda ora e' una colonna flessibile: senza, la
   pastiglia della tipologia si stirava per tutta la larghezza della scheda. */
.f2-card-badge { display: inline-block; align-self: flex-start; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--f2c, #5c6f82); border: 1px solid currentColor; border-radius: 2px; padding: .05rem .3rem; }
.f2-card-nome { font-size: .98rem; line-height: 1.3; font-weight: 700; margin: .4rem 0 .2rem; }
.f2-card-nome a { color: #17324d; text-decoration: none; }
.f2-card-nome a:hover, .f2-card-nome a:focus { color: var(--f2-acc-scuro, #af2127); text-decoration: underline; }
.f2-card-ind { font-size: .84rem; color: #5c6f82; margin: 0 0 .5rem; }
.f2-card-azioni { margin: auto 0 0; padding-top: .2rem; display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: .82rem; }
.f2-card-locate, .f2-card-dir { color: var(--f2-acc-scuro, #af2127); font-weight: 600; }
.f2-card-locate { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font-family: inherit; font-size: inherit; }
.f2-card-locate:hover { text-decoration: none; }

/* ---------- ritorno alla vista d'insieme ----------
   Chi ingrandiva su una frazione restava incastrato li': l'unico modo per tornare a vedere
   tutte le scuole era rimpicciolire a mano col «-». Ora c'e' un comando esplicito, che compare
   solo quando serve (cioe' quando la mappa e' stretta su un posto) e sparisce quando la vista
   e' gia' d'insieme: un comando che non fa niente e' peggio che non averlo. */
.f2-luoghi-map .f2-reset {
	background: #fff; border: 1px solid #d9dadb; border-radius: 4px;
	color: var(--f2-acc-scuro, #af2127); font-family: inherit; font-size: .82rem; font-weight: 600;
	line-height: 1; padding: .45rem .6rem; cursor: pointer;
	display: inline-flex; align-items: center; gap: .35rem;
	box-shadow: 0 1px 4px rgba(23, 50, 77, .18);
	opacity: 0; transform: translateY(-4px); pointer-events: none;
	transition: opacity .2s ease-in-out, transform .2s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out;
}
.f2-luoghi-map .f2-reset.is-on { opacity: 1; transform: none; pointer-events: auto; }
.f2-luoghi-map .f2-reset:hover, .f2-luoghi-map .f2-reset:focus-visible { background: var(--f2-acc, #d8333a); border-color: var(--f2-acc, #d8333a); color: #fff; outline: 0; }
.f2-luoghi-map .f2-reset svg { width: .8em; height: .8em; fill: currentColor; flex: 0 0 auto; }

/* ---------- movimento dei segnaposti ----------
   I segnaposti entrano scalando dal centro quando la mappa cambia livello: senza, il passaggio
   fra vista d'insieme e vista per indirizzo era uno scatto secco e sembrava un errore di carico.
   Solo transform/opacity: non tocca il layout, gira liscio anche su macchine modeste. */
@keyframes f2-pin-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.f2-pin-frz b, .f2-pin-sede b { animation: f2-pin-in .34s cubic-bezier(.16, 1, .3, 1) both; transition: transform .2s ease-in-out, box-shadow .2s ease-in-out; }
.leaflet-marker-icon.f2-pin-frz:hover b, .leaflet-marker-icon.f2-pin-sede:hover b { transform: scale(1.14); box-shadow: 0 2px 8px rgba(23, 50, 77, .38); }

/* Frazione scelta: un anello attorno al segnaposto, per non perdere di vista dove si e' andati. */
.f2-pin-frz.is-attiva b { box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 6px var(--f2-acc, #d8333a), 0 1px 4px rgba(23, 50, 77, .3); }

/* Un solo battito quando si arriva su una sede: segnala l'arrivo e poi si ferma, non lampeggia. */
@keyframes f2-pin-batti { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }
.f2-pin-sede.is-arrivo b { animation: f2-pin-batti .7s cubic-bezier(.16, 1, .3, 1) 2; }

@media (prefers-reduced-motion: reduce) {
	.f2-chip, .f2-card, .f2-card-fig img, .f2-luoghi-map .f2-reset { transition: none; }
	.f2-pin-frz b, .f2-pin-sede b, .f2-pin-sede.is-arrivo b { animation: none; }
	.f2-luoghi-map .f2-reset { opacity: 1; transform: none; }
}