/* Identità Val Seriana: una piccola plancia alpina, leggibile e tattile.
 * Il foglio è intenzionalmente locale al progetto: la struttura condivisa con
 * Mobilità Bergamo resta in _casa.css, qui cambiano voce, ritmo e materia. */
:root{
  --bg:#eef4ee; --carta:#fbfff8;
  --ink:#17352a; --ink-2:#365346; --ink-3:#52685c; --ink-4:#71847a;
  --rule:#c8d8cc; --rule-soft:#e2ece3;
  --dawn:#bde85f; --dawn-ink:#256341;
  --scorre:#2f7d5d; --sente:#8a6507; --rallenta:#b45a18; --coda:#b5363c;
  --acqua:#397b9a; --acqua-velo:#dcebf0;
  --serif:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Atkinson Hyperlegible',system-ui,-apple-system,sans-serif;
  --molla:cubic-bezier(.2,.8,.2,1);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 8% 3%,color-mix(in srgb,var(--dawn) 28%,transparent) 0 10rem,transparent 22rem),
    radial-gradient(circle at 92% 18%,color-mix(in srgb,var(--acqua) 12%,transparent) 0 8rem,transparent 23rem),
    var(--bg);
  font-size:1.02rem;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.22;
  background-image:repeating-linear-gradient(118deg,transparent 0 34px,color-mix(in srgb,var(--ink) 5%,transparent) 35px,transparent 36px 70px);
  mask-image:linear-gradient(to bottom,#000,transparent 44rem);
}

.salta{
  position:fixed;left:1rem;top:.6rem;z-index:100;transform:translateY(-180%);
  padding:.65rem 1rem;border-radius:.7rem;background:var(--ink);color:var(--carta);
  font-weight:700;text-decoration:none;
}
.salta:focus{transform:none}

:where(a,button,input,[tabindex]):focus-visible{outline:3px solid var(--dawn-ink);outline-offset:3px}
button{touch-action:manipulation}

.testa{
  min-height:3.75rem;align-items:center;padding:.65rem clamp(1rem,3vw,2rem);
  background:color-mix(in srgb,var(--bg) 86%,transparent);border-color:color-mix(in srgb,var(--ink) 14%,transparent);
}
.testa .nome{font-size:1.18rem;font-weight:700;letter-spacing:-.025em}
.testa .nome::before{content:"↗";display:inline-grid;place-items:center;width:1.65rem;height:1.65rem;margin-right:.45rem;border-radius:50%;background:var(--dawn);font:800 .8rem/1 var(--sans);vertical-align:.12rem}
.testa .quando{font-weight:700;padding:.28rem .55rem;border-radius:999px;background:var(--carta);border:1px solid var(--rule)}
.torna{min-height:2.75rem}

.involucro{max-width:64rem;padding-inline:clamp(1rem,3vw,2rem)}
body.home .involucro{max-width:72rem}

.verdetto{
  position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(1rem,3vw,2rem);
  padding:clamp(1.25rem,4vw,3rem);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  border-radius:clamp(1.2rem,3vw,2rem);background:color-mix(in srgb,var(--carta) 90%,transparent);
  box-shadow:0 1.2rem 3.5rem color-mix(in srgb,var(--ink) 8%,transparent);
}
.verdetto::after{
  content:"";position:absolute;z-index:-1;width:15rem;height:15rem;right:-4rem;top:-6rem;
  border-radius:42% 58% 66% 34% / 41% 37% 63% 59%;background:var(--dawn);transform:rotate(12deg);
}
.occhiello{color:var(--dawn-ink);font-size:.75rem;letter-spacing:.14em}
.verdetto h1{font-size:clamp(2.55rem,7vw,5.4rem);max-width:13ch;font-weight:700;line-height:.92;letter-spacing:-.055em}
.verdetto h1 em{color:var(--dawn-ink);font-style:normal;text-decoration:underline;text-decoration-thickness:.12em;text-underline-offset:.08em;text-decoration-color:var(--dawn)}
.verdetto .riassunto{font-size:clamp(1rem,2vw,1.2rem);line-height:1.45;max-width:52ch}

.semaforo{border-radius:1rem;background:var(--rule);max-width:48rem;box-shadow:inset 0 0 0 1px var(--rule)}
.semaforo div{padding:.8rem .5rem}
.semaforo b{font-family:var(--serif);font-size:1.65rem}

section.blocco{margin-top:clamp(1.4rem,4vw,3rem)}
section.blocco > h2,.mappa-intro h2{font-size:clamp(1.8rem,4vw,3.25rem);font-weight:700;letter-spacing:-.045em}
section.blocco > h2 em,.mappa-intro h2 em{font-style:normal;color:var(--dawn-ink)}

#blocco-mappa{
  padding:clamp(1rem,3vw,1.5rem);border-radius:1.5rem;background:var(--ink);color:var(--carta);
  box-shadow:0 1.3rem 3rem color-mix(in srgb,var(--ink) 18%,transparent);
}
#blocco-mappa .mappa-intro{margin:0 0 1rem}
#blocco-mappa .mappa-intro h2{margin:0 0 .4rem;color:var(--carta)}
#blocco-mappa .cappello{margin:0;max-width:62ch;color:#d8e5dc}
#blocco-mappa .cappello b{color:var(--dawn)}
.telaio{
  width:100%;max-width:none!important;min-height:21rem;border:0;border-radius:1rem;
  background:#dfe9e1;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--carta) 20%,transparent);
}
.telaio .leaflet-tile-pane{filter:saturate(.65) brightness(1.04) contrast(.92) hue-rotate(12deg)}
.telaio .leaflet-control-zoom a{width:2.75rem;height:2.75rem;line-height:2.65rem;font-size:1.2rem}
.telaio .leaflet-control-attribution{color:#355147;background:rgba(251,255,248,.86)}
.strato .nomeporta{font-size:10px;font-weight:700;fill:#17352a;stroke:#f7fbf5;stroke-width:3.5px}
.strato .porta{fill:#f7fbf5;stroke:#17352a;stroke-width:1.6}
.strato .presa:focus{stroke:var(--dawn);stroke-opacity:.55;outline:none}

.mappa-comandi .modi{gap:.45rem;padding-top:.7rem}
.mappa-comandi .modi button,.filtri button,.filtri a{
  min-height:2.75rem;border-radius:.75rem;border-color:var(--rule);background:var(--carta);color:var(--ink-2);
}
#blocco-mappa .mappa-comandi .modi button{background:#29473b;color:#e8f1eb;border-color:#49675a}
#blocco-mappa .mappa-comandi .modi button[aria-pressed=true]{background:var(--dawn);color:var(--ink);border-color:var(--dawn)}
#blocco-mappa .mappa-comandi .modi .srotola{color:#d8e5dc;border-color:#5c766b}
.mappa-scheda{margin-top:.65rem;border:0;border-radius:1rem;background:#29473b;color:#f2f8f3;padding:.75rem .9rem}
.mappa-scheda .verso,.mappa-scheda .quanto{color:#c7d8cd}

.mappa-dettaglio{
  margin:.7rem 0 0;padding:clamp(.85rem,2vw,1.2rem);border-radius:1rem;
  background:var(--carta);color:var(--ink);box-shadow:0 .8rem 2rem rgba(0,0,0,.15);
}
.mappa-dettaglio .dettaglio{padding:0;border:0;animation:apre .25s var(--molla) both}
.mappa-dettaglio .dettaglio-capo{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.mappa-dettaglio .dettaglio-capo h3{font:700 clamp(1.2rem,3vw,1.8rem)/1.05 var(--serif);letter-spacing:-.035em;text-transform:none;color:var(--ink);margin:0}
.mappa-dettaglio .dettaglio-capo p{margin:.2rem 0 0;color:var(--ink-3)}
.mappa-dettaglio .ora-valore{font:700 clamp(1.6rem,4vw,2.4rem)/1 var(--serif);white-space:nowrap}
.periodi-grafico{display:flex;gap:.35rem;flex-wrap:wrap;margin:.9rem 0 .75rem}
.periodi-grafico button{min-height:2.65rem;padding:.45rem .75rem;border:1px solid var(--rule);border-radius:.7rem;background:var(--rule-soft);color:var(--ink-2);font:700 .82rem/1 var(--sans);cursor:pointer}
.periodi-grafico button[aria-pressed=true]{background:var(--ink);color:var(--carta);border-color:var(--ink)}
.mappa-dettaglio .grafico{padding:.45rem 0 .1rem}
.mappa-dettaglio .grafico svg{height:clamp(8.5rem,22vw,12rem)}
.mappa-dettaglio .assex{font-size:.75rem;color:var(--ink-3)}

#blocco-mappa .mappa-striscia{padding:.7rem;border-radius:.85rem;background:#29473b}
#blocco-mappa .mappa-striscia .gg{color:#cfddd4}
#blocco-mappa .mappa-striscia .ore{color:#aebfb4}
#blocco-mappa .legenda{color:#cbd9d0}
#blocco-mappa #mappa-legenda .scala{border-color:#5c766b}

.filtri{position:relative;top:auto;margin:1rem 0 0;padding:.25rem 0;background:transparent;backdrop-filter:none}
.filtri button[aria-pressed=true],.filtri a[aria-current=page]{background:var(--ink);color:var(--carta)}
.filtri + .filtri{margin-top:.35rem}

.elenco{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:.65rem;margin-top:1rem}
.tratta{border-radius:1rem;box-shadow:0 .35rem 1.2rem color-mix(in srgb,var(--ink) 6%,transparent);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tratta:hover{transform:translateY(-2px);box-shadow:0 .8rem 1.8rem color-mix(in srgb,var(--ink) 10%,transparent)}
.tratta[data-aperta=si]{grid-column:auto;border:2px solid var(--dawn-ink);background:color-mix(in srgb,var(--dawn) 9%,var(--carta))}
.tratta > button{min-height:6.7rem;padding:.9rem;align-content:start}
.tratta .dove{font-family:var(--serif);font-size:1.05rem;letter-spacing:-.025em}
.tratta .sotto{font-size:.8rem}
.tratta .min{font-family:var(--serif);font-size:1.65rem}
.tratta .scintilla{align-self:end}

.numeri{border-radius:.75rem}
.numeri div{padding:.65rem .45rem}
.numeri b{font-family:var(--serif);font-size:1.18rem}

.carta,.mini{border-radius:1rem;box-shadow:0 .3rem 1.2rem color-mix(in srgb,var(--ink) 5%,transparent)}
footer{line-height:1.55}
footer details{max-width:62ch}
footer summary{cursor:pointer;font-weight:700;color:var(--ink-2);min-height:2.75rem;display:flex;align-items:center}

.barra{background:color-mix(in srgb,var(--carta) 90%,transparent);border-color:var(--rule);box-shadow:0 -.5rem 1.4rem color-mix(in srgb,var(--ink) 6%,transparent)}
.barra a,.barra button{min-height:4rem}

@media (min-width:50rem){
  #blocco-mappa{display:grid;grid-template-columns:minmax(13rem,.58fr) minmax(30rem,1.42fr);gap:1rem 1.4rem;align-items:start}
  #blocco-mappa .mappa-intro{grid-column:1;position:sticky;top:5rem}
  #blocco-mappa .mappa-corpo{grid-column:2;min-width:0}
  .verdetto{min-height:25rem;display:flex;flex-direction:column;justify-content:center}
  .semaforo{margin-top:1.4rem}
}

@media (max-width:39.99rem){
  body{font-size:1rem}
  .testa{padding-inline:.75rem}
  .testa .nome::before{display:none}
  .involucro{padding-inline:.75rem}
  .verdetto{border-radius:1.2rem;padding:1.15rem}
  .verdetto::after{width:9rem;height:9rem;right:-4rem;top:-4rem;opacity:.8}
  .verdetto h1{font-size:clamp(2.35rem,13vw,3.7rem)}
  .semaforo span{font-size:.58rem}
  #blocco-mappa{border-radius:1.2rem;padding:.75rem}
  .telaio{min-height:26rem}
  .mappa-striscia{overflow-x:auto}
  .mappa-striscia .giorno,.mappa-striscia .ore{min-width:32rem}
  .periodi-grafico{display:grid;grid-template-columns:repeat(3,1fr)}
  .periodi-grafico button{padding:.4rem .25rem;font-size:.76rem}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tratta{transition:none}}
@media (prefers-contrast:more){:root{--rule:#7b9183;--ink-3:#304b3d}.tratta,.carta,.mini{box-shadow:none}}