/* =====================================================================
   ic-hero-pro.css — Banner comunale notturno (12/09/2026)

   Regola unica del blocco: il banner e' scuro, quindi ogni cosa che ci
   entra deve essere ridichiarata qui.

   13/09/2026: le regole non aspettano piu' la classe .ic-hero--pro
   aggiunta dallo script, ma agganciano .comune-hero--map, gia' presente
   nell'HTML. Prima, per circa 300ms si vedeva il vecchio banner (pulsanti a
   pillola, dati su tre colonne, riquadro chiaro) e poi scattava questo.
   Il foglio si carica solo nelle pagine che hanno scelto questo banner. Le classi del banner chiaro danno
   per scontato un fondo chiaro e su questo diventerebbero invisibili.

   Sotto c'e' la mappa del centro storico in tono notturno; sopra passa una
   velatura che garantisce il contrasto del testo. Nessun testo poggia
   sulla mappa nuda.
   ===================================================================== */

.comune-hero.comune-hero--map{
  --h-bg:      #08172A;
  --h-bg-2:    #0E2A47;
  --h-ink:     #EDF4FB;
  --h-ink-2:   rgba(237,244,251,.74);
  --h-ink-3:   rgba(237,244,251,.54);
  --h-azure:   #5BC4FF;
  --h-azure-2: #9BDCFF;
  --h-gold:    #F0C669;
  --h-line:    rgba(91,196,255,.26);
  --h-ease:    cubic-bezier(.16,.84,.28,1);

  position:relative;
  isolation:isolate;
  background:
    radial-gradient(120% 90% at 76% 12%, #143A5E 0%, rgba(20,58,94,0) 62%),
    linear-gradient(168deg, var(--h-bg-2) 0%, var(--h-bg) 58%, #06111F 100%);
  color:var(--h-ink);
  min-height:520px;
  border-bottom:1px solid var(--h-azure);
  overflow:hidden;
}

/* ---- il centro storico ------------------------------------------------- */

.comune-hero.comune-hero--map .ic-hero__canvas{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
}
/* stesso stile delle altre citta' (tessere Voyager con il filtro blu
   ardesia del sito), ma senza etichette e un grado piu' scuro */
.ic-hero__street{
  position:absolute; inset:0; z-index:0;
  background:transparent !important;
  opacity:0; transition:opacity 350ms var(--h-ease);
}
.ic-hero__street.is-ready{ opacity:1; }
.ic-hero__street::after{
  content:""; position:absolute; inset:0; z-index:500; pointer-events:none;
  background:rgba(6,17,31,.30);
}

/* ---- velatura: il testo non poggia mai sulla mappa nuda ---------------- */

.comune-hero.comune-hero--map .comune-hero__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,17,31,.94) 0%, rgba(6,17,31,.78) 38%, rgba(6,17,31,.12) 74%),
    linear-gradient(0deg, rgba(6,17,31,.55) 0%, rgba(6,17,31,0) 46%);
  opacity:1 !important;
}

.comune-hero.comune-hero--map .comune-hero__content{
  position:relative; z-index:2;
  padding-top:34px; padding-bottom:38px;
}

/* ---- testo ------------------------------------------------------------- */

.comune-hero.comune-hero--map .breadcrumb,
.comune-hero.comune-hero--map .breadcrumb a,
.comune-hero.comune-hero--map .breadcrumb span{
  color:var(--h-ink-3) !important; -webkit-text-fill-color:var(--h-ink-3) !important;
}
.comune-hero.comune-hero--map .breadcrumb a:hover{
  color:var(--h-azure) !important; -webkit-text-fill-color:var(--h-azure) !important;
}

.comune-hero.comune-hero--map #comune-title{
  color:var(--h-ink) !important; -webkit-text-fill-color:var(--h-ink) !important;
  margin:14px 0 6px;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.comune-hero.comune-hero--map .comune-hero__subtitle{
  color:var(--h-ink-2) !important; -webkit-text-fill-color:var(--h-ink-2) !important;
  max-width:52ch;
}

/* i due distintivi: stessa lingua grafica, non due sistemi affiancati */
.comune-hero.comune-hero--map .comune-hero__badge{
  background:rgba(91,196,255,.10) !important;
  border:1px solid var(--h-line) !important;
  color:var(--h-azure-2) !important; -webkit-text-fill-color:var(--h-azure-2) !important;
  border-radius:0 !important;
}
.comune-hero.comune-hero--map .comune-hero__badge svg{ fill:var(--h-azure-2); }
.comune-hero.comune-hero--map .ic-pro-badge__name{
  color:var(--h-ink-2) !important; -webkit-text-fill-color:var(--h-ink-2) !important;
}

/* ---- dati: la popolazione e' una statistica, il CAP e' una rubrica ----- */

.comune-hero.comune-hero--map .comune-hero__meta{
  gap:0 !important; margin-top:22px;
  border-top:1px solid var(--h-line);
  border-bottom:1px solid var(--h-line);
}
.comune-hero.comune-hero--map .comune-hero__meta-item{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:14px 26px 14px 0 !important;
}
.comune-hero.comune-hero--map .comune-hero__meta-item + .comune-hero__meta-item{
  padding-left:26px !important;
  border-left:1px solid var(--h-line) !important;
}
.comune-hero.comune-hero--map .comune-hero__meta-label{
  color:var(--h-ink-3) !important; -webkit-text-fill-color:var(--h-ink-3) !important;
  letter-spacing:.16em; text-transform:uppercase;
}
.comune-hero.comune-hero--map .comune-hero__meta-value{
  color:var(--h-ink) !important; -webkit-text-fill-color:var(--h-ink) !important;
  font-variant-numeric:tabular-nums;
}
.comune-hero.comune-hero--map .ic-fonte,
.comune-hero.comune-hero--map .ic-fonte a{
  color:var(--h-ink-3) !important; -webkit-text-fill-color:var(--h-ink-3) !important;
}

/* ---- azioni: una sola piena, le altre a contorno ----------------------- */

.comune-hero.comune-hero--map .ms-hero-buttons{ gap:10px; margin-top:22px; }
.comune-hero.comune-hero--map .ms-hero-btn{
  border-radius:0 !important;
  border:1px solid var(--h-line) !important;
  background:rgba(91,196,255,.07) !important;
  color:var(--h-ink) !important; -webkit-text-fill-color:var(--h-ink) !important;
  box-shadow:none !important;
  transition:background .18s var(--h-ease), border-color .18s var(--h-ease);
}
.comune-hero.comune-hero--map .ms-hero-btn svg{ stroke:currentColor; }
.comune-hero.comune-hero--map .ms-hero-btn:hover{
  background:rgba(91,196,255,.17) !important;
  border-color:var(--h-azure) !important;
}
/* il telefono e' l'unica azione piena: e' quella che la gente cerca */
.comune-hero.comune-hero--map .ms-hero-btn.ms-btn-phone{
  background:var(--h-azure) !important; border-color:var(--h-azure) !important;
  color:#06111F !important; -webkit-text-fill-color:#06111F !important;
  box-shadow:0 12px 28px -16px rgba(91,196,255,.95) !important;
}
.comune-hero.comune-hero--map .ms-hero-btn.ms-btn-phone:hover{
  background:var(--h-azure-2) !important; border-color:var(--h-azure-2) !important;
}

/* ---- il riquadro "sei qui come..." resta dov'e', ma deve leggersi ------ */

.comune-hero.comune-hero--map .ic-profilo{
  background:rgba(8,23,42,.80) !important;
  border:1px solid var(--h-line) !important;
  border-radius:0 !important;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.8) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.comune-hero.comune-hero--map .ic-profilo *{
  color:var(--h-ink) !important; -webkit-text-fill-color:var(--h-ink) !important;
}
.comune-hero.comune-hero--map .ic-profilo__btn{
  background:rgba(91,196,255,.08) !important;
  border:1px solid var(--h-line) !important; border-radius:0 !important;
}
.comune-hero.comune-hero--map .ic-profilo__btn:hover{
  background:rgba(91,196,255,.2) !important; border-color:var(--h-azure) !important;
}
.comune-hero.comune-hero--map .ic-profilo__btn[aria-pressed="true"]{
  background:var(--h-azure) !important; border-color:var(--h-azure) !important;
}
.comune-hero.comune-hero--map .ic-profilo__btn[aria-pressed="true"] *{
  color:#06111F !important; -webkit-text-fill-color:#06111F !important;
}

/* ---- superfici del browser: anche quelle che non disegniamo ----------- */

.comune-hero.comune-hero--map ::selection{ background:rgba(91,196,255,.34); color:#fff; }
.comune-hero.comune-hero--map :focus-visible{
  outline:3px solid var(--h-azure); outline-offset:3px; border-radius:0;
}

/* ---- adattamento ------------------------------------------------------- */

@media (max-width:860px){
  .comune-hero.comune-hero--map{ min-height:430px; }
  .comune-hero.comune-hero--map .comune-hero__overlay{
    background:
      linear-gradient(180deg, rgba(6,17,31,.86) 0%, rgba(6,17,31,.62) 44%, rgba(6,17,31,.92) 100%);
  }
  .comune-hero.comune-hero--map .comune-hero__meta-item{ padding-right:18px !important; }
  .comune-hero.comune-hero--map .comune-hero__meta-item + .comune-hero__meta-item{ padding-left:18px !important; }
}

@media (prefers-reduced-motion:reduce){
  .ic-hero__street{ transition:none; }
}

/* =====================================================================
   Correzioni dopo la prima ispezione — 12/09/2026
   ===================================================================== */

/* 1. I pulsanti restavano a pillola: le regole del sito hanno la stessa
      forza della nostra, quindi serve piu' specificita', non un altro
      !important. */
.comune-hero.comune-hero--map .ms-hero-buttons .ms-hero-btn{
  border-radius:2px !important;
  padding:12px 18px !important;
  font-weight:700 !important;
}
.comune-hero.comune-hero--map .ms-hero-buttons .ms-hero-btn.ms-btn-phone{
  background:var(--h-azure) !important;
  color:#06111F !important; -webkit-text-fill-color:#06111F !important;
}
.comune-hero.comune-hero--map .ms-hero-buttons .ms-hero-btn.ms-btn-phone svg{
  stroke:#06111F !important;
}

/* 2. Su telefono i pulsanti occupano la riga intera, centrati. */
@media (max-width:860px){
  .comune-hero.comune-hero--map{ min-height:0; }
  .comune-hero.comune-hero--map .ms-hero-buttons .ms-hero-btn{ justify-content:center; }
}

/* =====================================================================
   Guerra di specificita' — nota per chi legge fra sei mesi

   Tre fogli del sito impongono la forma dei pulsanti del banner con
   selettori lunghissimi e !important:

     ic-comune-redesign.css  :root.force-light body section.comune-hero
                             .comune-hero--map .ms-hero-btn  -> pillola
     ic-kiosk-skin.css       stesso schema                   -> 3px
     comune-restyle.css      .restyle-2026 .ms-hero-btn      -> 999px

   Con tre regole cosi' non basta un !important in piu': serve un selettore
   piu' specifico del loro. Da qui il prefisso lungo che segue. Non e' una
   bella cosa da scrivere, ed e' il sintomo di un problema piu' grande: la
   forma dei pulsanti del banner e' dichiarata in quattro punti diversi.
   Andrebbe tenuta in uno solo.
   ===================================================================== */

html:root body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons .ms-hero-btn{
  border-radius:2px !important;
  border:1px solid var(--h-line) !important;
  background:rgba(91,196,255,.07) !important;
  color:var(--h-ink) !important; -webkit-text-fill-color:var(--h-ink) !important;
  box-shadow:none !important;
  padding:13px 18px !important;
  font-weight:700 !important;
}
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons .ms-hero-btn:hover{
  background:rgba(91,196,255,.18) !important;
  border-color:var(--h-azure) !important;
}
/* una sola azione piena: il telefono, che e' quello che la gente cerca */
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons .ms-hero-btn.ms-btn-phone{
  background:var(--h-azure) !important;
  border-color:var(--h-azure) !important;
  color:#06111F !important; -webkit-text-fill-color:#06111F !important;
  box-shadow:0 12px 30px -16px rgba(91,196,255,.95) !important;
}
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons .ms-hero-btn.ms-btn-phone svg{
  stroke:#06111F !important;
}
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons .ms-hero-btn.ms-btn-phone:hover{
  background:var(--h-azure-2) !important; border-color:var(--h-azure-2) !important;
}

/* gli stessi fogli arrotondano anche i distintivi e i riquadri dei dati */
html:root body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__badge,
html:root body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta-item,
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ic-profilo,
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ic-profilo__btn{
  border-radius:2px !important;
}
html:root body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta-item{
  background:transparent !important; border:0 !important;
}
html:root body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta-item + .comune-hero__meta-item{
  border-left:1px solid var(--h-line) !important;
}

/* =====================================================================
   Centro storico come fondo — 13/09/2026

   Tono uguale a quello delle altre citta': il foglio del sito applica alle
   tessere "saturate(1.35) brightness(.85) hue-rotate(182deg) contrast(1.08)"
   sia al pannello sia alla singola tessera. Qui lo si dichiara in chiaro,
   cosi' il banner non dipende da quel foglio, e si scurisce di un grado.
   Il velo del sito (main.css / ic-kiosk-skin.css, con !important) era
   pensato per la mappa chiara: va sostituito con uno piu' specifico.
   ===================================================================== */

/* 13/09/2026 (night9): niente reticolato. Con lo zoom del browser diverso
   dal 100% ogni 256px compariva una riga tra le tessere. Cause: Leaflet 1.9.4
   fonde le tessere con mix-blend-mode:plus-lighter (i bordi sovrapposti si
   schiariscono) e il filtro applicato tessera per tessera. Rimedio: fusione
   normale, filtro (stesso tono, due volte come prima) solo sul pannello,
   ogni tessera sborda di 1px sulla vicina. */
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ic-hero__street .leaflet-tile-pane:not(#ic-hero-z1):not(#ic-hero-z2){
  filter:saturate(1.35) brightness(.78) hue-rotate(182deg) contrast(1.1) saturate(1.35) brightness(.78) hue-rotate(182deg) contrast(1.1) !important;
  opacity:1 !important;
}
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ic-hero__street img.leaflet-tile:not(#ic-hero-z1):not(#ic-hero-z2){
  filter:none !important;
  mix-blend-mode:normal !important;
  width:257px !important; height:257px !important;
  opacity:1 !important;
}
/* un grado piu' scuro delle altre citta': velo uniforme sulla mappa */
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ic-hero__street::after{
  content:"" !important; position:absolute !important; inset:0 !important;
  z-index:500 !important; pointer-events:none !important;
  background:rgba(8,22,40,.46) !important;
}
html:root body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__overlay{
  background:
    linear-gradient(90deg, rgba(6,17,31,.86) 0%, rgba(6,17,31,.66) 40%, rgba(6,17,31,.30) 72%, rgba(6,17,31,.20) 100%),
    linear-gradient(0deg, rgba(6,17,31,.50) 0%, rgba(6,17,31,0) 42%) !important;
  opacity:1 !important;
}
@media (max-width:860px){
  html:root body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__overlay{
    background:
      linear-gradient(180deg, rgba(6,17,31,.62) 0%, rgba(6,17,31,.72) 45%, rgba(6,17,31,.90) 100%) !important;
  }
}

/* =====================================================================
   Banner fino al menu delle schede — 13/09/2026

   La fascia azzurrina tra banner e menu era il fondo della barra
   nav.comune-tabs. Il banner si allunga della stessa altezza della barra
   (misurata in JS, --ic-tabs-h) e con un margine inferiore negativo
   uguale lascia risalire la barra sopra di se': il resto della pagina non
   si sposta di un pixel, ma dietro la barra ora c'e' il banner. Il fondo
   della barra torna solo da agganciata (.ic-tabs--solid).

   Il margine sta sul banner e non sulla barra di proposito: due regole
   del sito (ic-kiosk-skin.css e uno stile inline con :not(#ic-zz))
   forzano "margin:0 !important" sulla barra con specificita' di ID.
   ===================================================================== */

/* valori di partenza gia' al primo disegno (misurati su desktop: barra
   94px, scheda a 66px dal suo bordo alto, 56px di respiro), cosi' il
   banner non nasce corto per poi allungarsi quando arriva lo script */
@media (min-width:861px){
  html:root body section.comune-hero.comune-hero--map.comune-hero--map.comune-hero--map{
    padding-bottom:var(--ic-hero-pb, 84px) !important;
    margin-bottom:calc(var(--ic-tabs-h, 94px) * -1) !important;
    border-bottom:0 !important;
  }
}
/* con lo script, i valori misurati davvero (a pari specificita' vince
   questa, che viene dopo) */
html:root body section.comune-hero.comune-hero--map.ic-hero--under-tabs{
  /* --ic-hero-pb: spazio tra pulsanti e scheda del menu, calcolato in JS */
  padding-bottom:var(--ic-hero-pb, 0px) !important;
  margin-bottom:calc(var(--ic-tabs-h, 0px) * -1) !important;
  border-bottom:0 !important;
}
/* i due :not(#...) servono solo ad arrivare alla specificita' di ID di uno
   stile inline del sito che ridisegna bordo e fondo della barra */
html:root body nav.comune-tabs.ic-tabs--on-hero:not(.ic-tabs--solid):not(#ic-hero-z1):not(#ic-hero-z2),
html:root body section.comune-hero.comune-hero--map ~ nav.comune-tabs:not(.ic-tabs--solid):not(#ic-hero-z1):not(#ic-hero-z2){
  /* senza dissolvenza verso il trasparente: al caricamento si vedrebbe
     la fascia comparire e sparire */
  transition:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-top-color:transparent !important;
  border-bottom-color:transparent !important;
  /* la fascia trasparente della barra si sovrappone al fondo del banner:
     i clic devono passare, tranne sulla scheda del menu */
  pointer-events:none !important;
}
html:root body nav.comune-tabs.ic-tabs--on-hero:not(.ic-tabs--solid) .comune-tabs__scroll,
html:root body section.comune-hero.comune-hero--map ~ nav.comune-tabs:not(.ic-tabs--solid) .comune-tabs__scroll{
  pointer-events:auto !important;
}


/* =====================================================================
   Armonizzazione — 13/09/2026

   Una griglia sola a quattro colonne regge dati e azioni: i due dati
   occupano due colonne ciascuno, i quattro pulsanti una ciascuno, cosi'
   Popolazione sta sopra Telefono+PEC e CAP sopra Sito web+Dove siamo, con
   bordi allineati. Pulsanti tutti uguali, alti 52px (bersaglio comodo
   anche su schermi touch grandi), etichette centrate.
   Il vuoto sotto i pulsanti non e' piu' "quello che avanza": lo fissa JS
   a 56px dalla scheda del menu.
   I :not(#...) portano i selettori alla specificita' di ID degli stili
   inline del sito (:not(#ic-zz)) che impongono griglia e forma.
   ===================================================================== */

@media (min-width:861px){
  /* l'altezza la decidono contenuto e spazio calcolato, non un minimo fisso */
  html:root body section.comune-hero.comune-hero--map.comune-hero--map.comune-hero--map{
    min-height:0 !important; height:auto !important;
  }
  html:root body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__content{
    --hero-grid:760px;
    padding-top:40px !important;
    padding-bottom:0 !important;
  }
  html:root body section.comune-hero.comune-hero--map.comune-hero--map #comune-title{
    margin:16px 0 8px !important;
  }
  html:root body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta:not(#ic-hero-z1):not(#ic-hero-z2){
    display:grid !important;
    /* !important: un foglio del sito impone "230px 230px" */
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    column-gap:12px !important;
    max-width:var(--hero-grid);
    margin-top:30px !important;
  }
  html:root body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta-item:not(#ic-hero-z1):not(#ic-hero-z2),
  html:root body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta-item + .comune-hero__meta-item:not(#ic-hero-z1):not(#ic-hero-z2){
    grid-column:span 2;
    min-width:0 !important; width:auto !important;
    padding:16px 20px 15px !important;
    border-left:1px solid var(--h-line) !important;
  }
  html:root body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons:not(#ic-hero-z1):not(#ic-hero-z2){
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:12px !important;
    max-width:var(--hero-grid);
    margin-top:24px !important;
  }
  html:root body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons .ms-hero-btn:not(#ic-hero-z1):not(#ic-hero-z2){
    width:100% !important; min-width:0 !important; margin:0 !important;
    height:52px !important; min-height:52px !important;
    padding:0 14px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    gap:10px !important;
    font-size:15px !important; line-height:1 !important; letter-spacing:.005em;
    white-space:nowrap;
  }
  html:root body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons .ms-hero-btn:not(#ic-hero-z1):not(#ic-hero-z2) svg{
    width:18px !important; height:18px !important; flex:0 0 18px;
  }
}

/* stati: tastiera e pressione, non solo il passaggio del mouse */
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons .ms-hero-btn:focus-visible{
  outline:2px solid var(--h-azure-2) !important; outline-offset:3px !important;
}
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons .ms-hero-btn:active{
  transform:translateY(1px);
}

/* riquadro "Sei qui come...": stessa famiglia dei pulsanti del banner */
html:root body section.comune-hero.comune-hero--map.comune-hero--map .ic-profilo__btn{
  min-height:44px !important;
  font-size:14px !important;
  justify-content:center !important;
}


/* =====================================================================
   Elementi fantasma al caricamento — 13/09/2026

   Registrazione fotogramma per fotogramma del caricamento: uno stile
   iniettato da script (html body .comune-hero__meta:not(#ic-zz)) nasconde
   il 3o e 4o dato del banner (PEC e Provincia) solo a pagina interattiva.
   Fino ad allora, per ~200ms, compariva una riga con l'indirizzo PEC e la
   Provincia, che poi spariva facendo saltare i pulsanti di ~100px.
   Stessa regola, dichiarata qui: vale dal primo disegno.
   ===================================================================== */
html:root body section.comune-hero.comune-hero--map .comune-hero__meta .comune-hero__meta-item:nth-child(n+3):not(#ic-hero-z1){
  display:none !important;
}

/* la riga "fonte: ISTAT..." sotto la popolazione arriva da script dopo il
   primo disegno e allungava i dati di 11px: lo spazio e' gia' riservato */
@media (min-width:861px){
  html:root body section.comune-hero.comune-hero--map .comune-hero__meta .comune-hero__meta-item:not(#ic-hero-z1):not(#ic-hero-z2){
    min-height:88px !important;
    box-sizing:border-box !important;
  }
}

/* =====================================================================
   Dati del banner: un solo pannello di vetro satinato — 13/09/2026

   Il vetro (blur + ombra) stava su ciascuna cella: nello spazio fra le due
   colonne si vedeva il fondo, e il riquadro della popolazione sembrava
   non coprire tutto. Ora il vetro e' sul contenitore, largo quanto i
   pulsanti; le celle sono trasparenti e le separa un filo sfumato centrato
   nello spazio fra le colonne. Il vetro qui ha una funzione: tiene
   leggibili i numeri sopra la mappa.
   ===================================================================== */
html:root body section.comune-hero.comune-hero--map .comune-hero__meta:not(#ic-hero-z1):not(#ic-hero-z2){
  position:relative; isolation:isolate;
  background:linear-gradient(180deg, rgba(155,220,255,.085) 0%, rgba(155,220,255,.035) 100%) !important;
  border:1px solid rgba(155,220,255,.20) !important;
  border-radius:3px !important;
  -webkit-backdrop-filter:blur(14px) saturate(135%) !important;
  backdrop-filter:blur(14px) saturate(135%) !important;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
html:root body section.comune-hero.comune-hero--map .comune-hero__meta .comune-hero__meta-item:not(#ic-hero-z1):not(#ic-hero-z2),
html:root body section.comune-hero.comune-hero--map .comune-hero__meta .comune-hero__meta-item + .comune-hero__meta-item:not(#ic-hero-z1):not(#ic-hero-z2){
  background:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:0 !important;
  position:relative;
}
@media (min-width:861px){
  html:root body section.comune-hero.comune-hero--map .comune-hero__meta .comune-hero__meta-item + .comune-hero__meta-item:not(#ic-hero-z1):not(#ic-hero-z2)::before{
    content:""; position:absolute; left:-6.5px; top:16px; bottom:16px;
    width:1px !important; opacity:1 !important;
    background:linear-gradient(180deg, rgba(155,220,255,0), rgba(155,220,255,.38) 22%, rgba(155,220,255,.38) 78%, rgba(155,220,255,0)) !important;
  }
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  html:root body section.comune-hero.comune-hero--map .comune-hero__meta:not(#ic-hero-z1):not(#ic-hero-z2){
    background:rgba(8,23,42,.72) !important;
  }
}