/* ============================================================
   Case Bianche v3 — Home: mappa dei servizi "Dove siamo"  (18/10/2026; la mappa di sfondo e' stata tolta il 21/10/2026)
   Stile D "Acquerello leggero" (scelto da Luca), colori ancora piu' chiari.
   Usato solo da index.html. Script: js/mappa-servizi.js (mappa interattiva, Leaflet).
   ============================================================ */

/* ---------- 2. "Dove siamo": la mappa interattiva e' il PROSEGUIMENTO della mappa di sfondo ---------- */
/* Come funziona (18/10/2026, richiesta di Luca: niente riquadro, niente seconda mappa):
   - la sezione e' alta come lo schermo e ha un "taglio" (clip-path) uguale al suo rettangolo;
   - dentro c'e' la mappa a tutto schermo, FISSA rispetto allo schermo (position: fixed) ma visibile solo attraverso il taglio:
     scorrendo, la sezione sale e "scopre" la mappa, come una finestra che si allarga;
   - dietro la finestra c'e' la mappa di sfondo (fissa anche lei): stessa immagine, stesso punto, stessa scala, stesso
     marcatore di Case Bianche (vista finale condivisa, vedi CB_MAPPA_VISTA in js/mappa-sfondo.js): nessuno stacco;
   - testi, filtri e comandi stanno sopra e lasciano passare clic e tocchi alla mappa (pointer-events: none), tranne i pulsanti.
   Dove clip-path non c'e' (browser molto vecchi) la mappa resta dentro la sezione e scorre con essa: nessun guaio, solo lo stacco. */
.loc-servizi{
  position: relative; z-index: 1; min-height: 100vh; min-height: 100svh;
  background: none;
}
.loc-mappa-box{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; background: transparent; }
@supports (clip-path: inset(0)){
  .loc-servizi{ -webkit-clip-path: inset(0); clip-path: inset(0); }
  .loc-mappa-box{ position: fixed; }   /* dopo la regola sopra: deve vincere */
}
.loc-mappa-box.pronta{ background: #FCFBFC; }       /* prima che la mappa sia pronta si vede lo sfondo che c'e' dietro: nessun lampo */
.loc-leaflet{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; isolation: isolate; font-family: inherit; outline-offset: -3px; }
.loc-stato{
  position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%); text-align: center; padding: 0 24px;
  font-size: 15px; color: #41546A; pointer-events: none;
}
.loc-stato[hidden]{ display: none; }

/* Strato dei testi: occupa lo schermo, non prende i tocchi (li lascia alla mappa) */
.loc-sopra{
  position: relative; z-index: 2; box-sizing: border-box; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 80px 0 24px; pointer-events: none;
}
.loc-testa, .loc-piede{ width: 100%; box-sizing: border-box; }

/* Testo: un velo bianco morbido (senza bordo ne' riquadro) lo tiene leggibile sopra la mappa */
.loc-area-testo{ position: relative; isolation: isolate; width: fit-content; max-width: 100%; }
.loc-area-testo::before{
  content: ''; position: absolute; z-index: -1; left: -64px; right: -80px; top: -44px; bottom: -36px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 52%, rgba(255,255,255,0) 80%);
}
.loc-area-testo h2{ margin-bottom: 6px; }
.loc-area-testo .intro-pagina{ margin: 0; }

/* Filtri: una fila di pulsanti piccoli (a capo sul computer, scorre di lato sul telefono) */
.loc-area-filtri{ margin-top: 14px; }
.loc-filtri{
  display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; pointer-events: none;
  margin: 0 -20px; padding: 2px 20px;
}
.loc-filtri::-webkit-scrollbar{ display: none; }
.loc-chip{
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px;
  font: inherit; font-size: 13.5px; line-height: 1.2; white-space: nowrap; cursor: pointer; pointer-events: auto;
  color: #2E3F4F; background: #FBFAF8; border: 1px solid #4D5A66;
  transition: background-color var(--t-rapido, 160ms) ease, color var(--t-rapido, 160ms) ease;
}
.loc-chip svg{ flex: none; }
.loc-chip__n{ display: none; }
.loc-chip[aria-pressed="true"]{ background: #2E3F4F; color: #fff; }
.loc-chip:hover{ background: #EEF1F2; }
.loc-chip[aria-pressed="true"]:hover{ background: #2E3F4F; }
.loc-chip:focus-visible, .loc-comando:focus-visible, .loc-hint:focus-visible, .loc-scheda__chiudi:focus-visible, .loc-scheda__link:focus-visible,
.loc-elenco summary:focus-visible, .loc-elenco__lista button:focus-visible, .loc-area-bottone .btn:focus-visible{ outline: 3px solid var(--blu-pieno, #041729); outline-offset: 2px; }

/* Zona dei comandi: copre lo schermo, non prende i tocchi; i figli si'. */
.loc-comandi-zona{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; }
.loc-comandi{ position: absolute; right: 12px; bottom: 184px; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.loc-comando{
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  color: #2E3F4F; background: #FBFAF8; border: 1px solid #4D5A66;
}
.loc-comando:hover{ background: #EEF1F2; }
.loc-comando:disabled{ opacity: .45; cursor: default; }
.loc-comando--casa{ margin-top: 6px; }

/* Indicazione "Trascina per esplorare" / "Tocca per esplorare" */
.loc-hint{
  position: absolute; left: 12px; bottom: 184px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  font: inherit; font-size: 13px; letter-spacing: .04em; color: #2E3F4F; background: #FBFAF8; border: 1px solid #4D5A66; cursor: default;
  max-width: calc(100% - 80px); text-align: left; transition: opacity .4s ease; pointer-events: auto;
}
.loc-hint.is-nascosta{ opacity: 0; pointer-events: none; }
.loc-mappa-box.e-tocco ~ .loc-sopra .loc-hint{ cursor: pointer; }
.loc-hint[aria-pressed="true"]{ background: #2E3F4F; color: #fff; }

/* Telefono con la mappa "a riposo": il dito scorre la pagina (il trascinamento e le due dita si attivano toccando "Tocca per esplorare") */
/* telefono: un dito scorre la pagina (pan-y); il pizzico non e' del browser ma della mappa (due dita muovono/ingrandiscono) */
.loc-mappa-box.is-inattiva .leaflet-container{ touch-action: pan-y !important; }

/* Scheda del servizio */
.loc-scheda{
  position: absolute; z-index: 6; left: 12px; right: 12px; bottom: 16px; padding: 12px 16px 2px; pointer-events: auto;
  background: #FBFAF8; border: 1px solid #4D5A66; color: #041729;
}
.loc-scheda[hidden]{ display: none; }
.loc-scheda__testa{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.loc-scheda__cat{ display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #4E5A66; }
.loc-scheda__chiudi{ width: 44px; height: 36px; margin: -6px -12px 0 0; display: grid; place-items: center; padding: 0; background: none; border: 0; color: #4E5A66; cursor: pointer; }
.loc-scheda__nome{ margin: 4px 0 4px; font-family: 'Bodoni Moda', Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: .01em; color: #041729; }
.loc-scheda__riga{ margin: 0; font-size: 14px; line-height: 1.45; color: #3A3F44; }
.loc-scheda__link{ display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 14px; color: var(--blu-piccolo, #163F6B); text-decoration: none; }
.loc-scheda__link:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* Parte bassa: "Apri in Google Maps" e "Elenco dei servizi" (due pulsanti sullo stesso stile dei filtri) */
.loc-piede{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.loc-area-bottone{ margin: 0; display: block; }
.loc-area-bottone .btn{ min-height: 44px; padding: 8px 18px; font-size: 14.5px; background: #FBFAF8; pointer-events: auto; }
.loc-area-bottone .btn:hover{ background: #EEF1F2; }
.loc-elenco{ position: relative; pointer-events: none; }
.loc-elenco summary{
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; cursor: pointer; pointer-events: auto;
  font-size: 14.5px; color: #041729; background: #FBFAF8; border: 1px solid #4D5A66; list-style-position: inside;
}
.loc-elenco summary:hover{ background: #EEF1F2; }
.loc-elenco__lista{
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 8; width: min(360px, calc(100vw - 40px)); max-height: min(50vh, 340px); overflow-y: auto;
  margin: 0; padding: 0; list-style: none; pointer-events: auto; background: #FBFAF8; border: 1px solid #4D5A66;
}
.loc-elenco__lista li{ border-bottom: 1px solid var(--bordo, #EEECE8); }
.loc-elenco__lista li:last-child{ border-bottom: 0; }
.loc-elenco__lista button{
  width: 100%; min-height: 44px; display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; text-align: left; cursor: pointer;
  font: inherit; font-size: 15px; color: #041729; background: none; border: 0;
}
.loc-elenco__lista .c{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #4E5A66; }
.loc-elenco__lista .d{ margin-left: auto; font-size: 13px; color: #4E5A66; white-space: nowrap; }
.loc-elenco__lista button:hover{ background: #F3F5F6; }

/* ---------- 3. Elementi disegnati da Leaflet ---------- */
.leaflet-container{ background: transparent; font-family: inherit; }
.loc-leaflet.leaflet-container{ background: transparent; }   /* leaflet.css arriva DOPO (caricamento pigro) e rimetterebbe #ddd: con la mappa sbiadita si vedrebbe */
.leaflet-container a{ color: #163F6B; }
.leaflet-control-attribution{ font: 9.5px/1.4 Questrial, Arial, sans-serif !important; background: rgba(255,255,255,.88) !important; color: #41546A; padding: 1px 5px !important; margin: 0 6px 4px 0 !important; max-width: calc(100vw - 12px); }  /* come la didascalia della mappa di sfondo (.mappa-credito): al passaggio non cambia */
/* Segnaposto dei servizi: compaiono con una dissolvenza quando la sezione e' in primo piano (la classe "pins-on" la mette js/mappa-servizi.js);
   prima restano nascosti (e non prendono i tocchi), cosi' dietro alle foto della Home non si vede nulla di piu' dello sfondo. */
.loc-mappa-box .leaflet-marker-pane{ opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.loc-mappa-box.pins-on .leaflet-marker-pane{ opacity: 1; visibility: visible; transition: opacity .6s ease; }
/* 21/10/2026, richiesta di Luca: i servizi sulla mappa sono un punto piccolo pieno (11 px, blu del sito, bordo bianco sottile).
   Il contenitore .loc-pin (posizionato da Leaflet) e' un'area di tocco trasparente di 32 px; il punto sta al centro.
   Ingrandimento e contorno di focus stanno sul punto, perche' Leaflet usa "transform" sul contenitore per posizionarlo. */
.loc-pin, .leaflet-marker-icon.loc-pin{ display: grid; place-items: center; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.loc-punto{ display: block; box-sizing: border-box; width: 11px; height: 11px; border-radius: 50%; background: var(--blu-piccolo, #163F6B); border: 1.5px solid #fff; transition: transform .15s ease, background-color .15s ease; }
.loc-pin:hover .loc-punto{ transform: scale(1.25); }
.loc-pin.is-sel .loc-punto{ transform: scale(1.35); background: #041729; }
.loc-pin:focus-visible .loc-punto{ box-shadow: 0 0 0 3px #fff, 0 0 0 5px #041729; }
/* Case Bianche sulla mappa interattiva: il centro del cerchio e' esattamente il punto (il contenitore e' 40 x 40, ancora 20,20) */
.loc-casa{ display: flex; align-items: center; width: 240px; height: 40px; }
.loc-casa__tondo{ box-sizing: border-box; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #041729; color: #fff; border: 2.4px solid #fff; box-shadow: 0 0 0 .5px #041729; }
.loc-casa__nome{ margin-left: 8px; white-space: nowrap; font-family: 'Bodoni Moda', 'Bodoni MT', Georgia, serif; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: #041729;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #fff; }

/* ---------- 4. Computer ---------- */
@media (min-width: 900px){
  .loc-sopra{ padding-top: 96px; padding-bottom: 32px; }
  .loc-filtri{ flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; }
  .loc-comandi{ right: 24px; bottom: auto; top: 108px; }
  .loc-hint{ left: auto; right: 80px; bottom: auto; top: 108px; }
  .loc-scheda{ left: auto; right: 24px; bottom: 36px; width: 330px; }
}

/* Chi ha chiesto meno animazioni: niente dissolvenze della scheda */
@media (prefers-reduced-motion: reduce){
  .loc-hint, .loc-pin, .loc-punto, .loc-chip{ transition: none; }
}

/* ---- Bianco e nero sotto le foto (Luca, 18/10/2026) ----
   Prima era un filtro CSS (grayscale + opacity) sull'intero sfondo e sui pannelli di Leaflet, rifatto a ogni fotogramma: la cosa piu'
   pesante della Home sui computer vecchi (18/10/2026 sera, richiesta di Luca: sito troppo lento sul Mac vecchio). Ora il bianco e nero
   "tenue" e' GIA' dentro le immagini (strato-N-bn.webp, fatte da strumenti/mappa/converti-webp.py: grigio + 55% verso il colore del mare,
   stesso risultato del vecchio filtro) e il ritorno ai colori e' una dissolvenza di sola opacita' (la fa la scheda grafica):
   - sullo sfondo: js/mappa-sfondo.js tiene strato-4-bn.webp sotto e strato-4.webp (a colori) sopra, con opacita' (1 - bn);
   - sulla mappa interattiva: sopra il fondo a colori (strato-4.webp) c'e' lo stesso strato-4-bn.webp (classe .loc-bn-img, messo da
     js/mappa-servizi.js) con opacita' = bn.
   --mappa-bn va da 1 (mappa dietro le foto: bianco e nero e tenue) a 0 (sezione "Dove siamo": colori pieni); la scrive js/mappa-sfondo.js
   allo scorrimento. Quanto e' tenue: il numero TENUE in strumenti/mappa/converti-webp.py (0,55). */
.loc-leaflet .loc-bn-img{ opacity: var(--mappa-bn, 0); pointer-events: none; }

/* ---- Modalita' leggera (apparecchi vecchi o lenti: classe "leggero" su <html>, js/leggero.js) ----
   Lo sfondo resta fermo (js/mappa-sfondo.js: nessuno zoom, una sola immagine) e la mappa interattiva non cambia. */
html.leggero .loc-pin, html.leggero .loc-punto{ transition: none; }
html.leggero .loc-mappa-box .leaflet-marker-pane{ transition: none; }