/* Basi comuni delle mappe di SmartLands dentro il sito (fibra, data center): colori e caratteri della "carta tecnica"
   in modalità scura, apertura con i numeri chiave, pannelli, schede, schermo intero. Tutto sotto .slm, per non toccare
   il resto del sito; le regole generali del sito (reset del tema, bottoni, campi) si neutralizzano qui dentro. */
.slm {
  --slm-ink: #14161A;
  --slm-ink2: #1E2126;
  --slm-ink3: #2A2E36;
  --slm-linea: #3A3F48;
  --slm-testo: #C9CEDA;
  --slm-forte: #E8E6DF;
  --slm-tenue: #8B93A3;
  --slm-giallo: #FFDE01;
  --slm-ocra: #E5C400;
  --slm-raggio: 12px;
  --slm-ombra: 0 18px 38px -22px rgba(0, 0, 0, 0.7);
  --slm-lato: 340px;
  --slm-titoli: 'Space Grotesk', system-ui, sans-serif;
  position: relative;
  color: var(--slm-testo);
  background: var(--slm-ink);
  font: 16px/1.55 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  text-align: left;
}
.slm *, .slm *::before, .slm *::after { box-sizing: border-box; }
.slm [hidden] { display: none !important; }
.slm h1, .slm h2, .slm h3 { font-family: var(--slm-titoli); color: var(--slm-forte); letter-spacing: -0.01em; }
.slm p, .slm ul, .slm ol { margin-top: 0; }
.slm a { color: var(--slm-giallo); text-underline-offset: 2px; }
.slm a:hover { color: var(--slm-ocra); }
/* Il reset del tema dà ai bottoni bordo e passaggio rosa: dentro la mappa decidono queste regole */
.slm button { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-transform: none; letter-spacing: normal; white-space: normal; transition: none; }
.slm button:hover, .slm button:focus { background-color: transparent; color: inherit; text-decoration: none; }
.slm input[type="range"] { padding: 0; border: 0; border-radius: 0 !important; background: transparent; }
.slm .vis-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Apertura: occhiello, titolo, sommario e numeri chiave, sullo sfondo a griglia tecnica del sito */
.slm .slm-apertura { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 24px 48px; padding: 44px max(16px, calc((100% - 1240px) / 2)) 28px; background-color: var(--slm-ink); background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; border-bottom: 1px solid var(--slm-ink3); }
.slm .slm-occhiello { margin: 0 0 12px; font: 600 12.5px/1.4 var(--slm-titoli); letter-spacing: 2.5px; text-transform: uppercase; color: var(--slm-ocra); }
.slm .slm-titolo { margin: 0; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); line-height: 1.05; letter-spacing: -0.02em; }
.slm .slm-sommario { margin: 16px 0 0; max-width: 58ch; font-size: 1.05rem; }
.slm .slm-numeri { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slm .slm-numero { padding: 14px 16px; background: var(--slm-ink2); border: 1px solid var(--slm-ink3); border-radius: var(--slm-raggio); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.slm .slm-numero:hover { transform: translateY(-3px); border-color: var(--slm-giallo); box-shadow: var(--slm-ombra); }
.slm .slm-numero strong { display: block; min-height: 1.15em; font: 700 clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem)/1.15 var(--slm-titoli); color: var(--slm-giallo); font-variant-numeric: tabular-nums; }
.slm .slm-numero > span { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--slm-tenue); }
.slm .slm-aggiornata { grid-column: 1 / -1; margin: 0; min-height: 1.5em; font-size: 0.82rem; color: var(--slm-tenue); }

/* Riquadro della mappa: mappa a sinistra, pannello a destra */
.slm .app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--slm-lato); height: clamp(560px, calc(100vh - 140px), 880px); background: var(--slm-ink); border-bottom: 1px solid var(--slm-ink3); }
.slm .app:fullscreen, .slm .app.slm-intero { width: 100%; height: 100vh; height: 100dvh; }
.slm .app.slm-intero { position: fixed; inset: 0; z-index: 2147483000; }
html.slm-bloccato, html.slm-bloccato body { overflow: hidden; }
.slm .mappa { position: relative; width: 100%; height: 100%; }
.slm .lato { position: relative; overflow-y: auto; padding: 18px; background: var(--slm-ink2); border-left: 1px solid var(--slm-ink3); }
.slm .lato h2 { margin: 0 0 10px; font-size: 1.15rem; }
.slm .lato h3 { margin: 16px 0 6px; font-size: 0.95rem; }
.slm .riquadro { padding: 10px 12px; color: var(--slm-testo); background: rgba(30, 33, 38, 0.92); border: 1px solid var(--slm-ink3); border-radius: 10px; box-shadow: var(--slm-ombra); backdrop-filter: blur(6px); }
.slm .controlli-alto { position: absolute; top: 12px; left: 12px; z-index: 3; }
.slm .controlli-basso { position: absolute; left: 12px; bottom: 32px; z-index: 3; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; max-width: calc(100% - var(--slm-lato) - 24px); }
.slm .slm-strumenti { position: absolute; top: 84px; right: calc(var(--slm-lato) + 10px); z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.slm .slm-strumento { display: grid; place-items: center; width: 34px; height: 34px; font: 700 0.75rem/1 'Inter', system-ui, sans-serif; color: var(--slm-forte); background: var(--slm-ink2); border: 1px solid var(--slm-ink3); border-radius: 8px; cursor: pointer; transition: background-color 0.15s, color 0.15s, transform 0.15s; }
.slm .slm-strumento:hover { color: var(--slm-giallo); background-color: var(--slm-ink3); transform: translateY(-1px); }
.slm .slm-strumento[aria-pressed="true"] { color: var(--slm-ink); background-color: var(--slm-giallo); border-color: var(--slm-giallo); }

/* Controlli di MapLibre in versione scura */
.slm .maplibregl-ctrl-group { background: var(--slm-ink2); border: 1px solid var(--slm-ink3); box-shadow: none; }
.slm .maplibregl-ctrl-group button + button { border-top: 1px solid var(--slm-ink3); }
.slm .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1) brightness(0.9); }
.slm .maplibregl-ctrl button:not(:disabled):hover { background-color: rgba(255, 222, 1, 0.12); }
.slm .maplibregl-ctrl-attrib, .slm .maplibregl-ctrl-attrib.maplibregl-compact { color: var(--slm-tenue); background: rgba(20, 22, 26, 0.85); }
.slm .maplibregl-ctrl-attrib a { color: var(--slm-testo); }
.slm .maplibregl-ctrl-attrib-button { filter: invert(1); }

/* Legenda, campioni, etichetta sotto il puntatore, note */
.slm .legenda { font-size: 0.8rem; }
.slm .legenda .titolo-legenda { margin: 0 0 6px; font-weight: 600; color: var(--slm-forte); }
.slm .legenda ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 3px 14px; }
.slm .campione { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.14); }
.slm .suggerimento { position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none; max-width: 260px; padding: 7px 9px; border-radius: 8px; font-size: 0.85rem; color: var(--slm-ink); background: var(--slm-forte); box-shadow: var(--slm-ombra); }
.slm .suggerimento strong { color: var(--slm-ink); }
.slm .nota-piccola, .slm .fonte, .slm .aggiornamento { color: var(--slm-tenue); font-size: 0.8rem; }

/* Scheda del comune o del punto */
.slm .scheda { position: absolute; inset: 0; overflow-y: auto; padding: 18px; background: var(--slm-ink2); }
.slm .scheda h2 { margin: 0 0 4px; padding-right: 44px; font-size: 1.25rem; }
.slm .scheda .chiudi { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; font-size: 1.4rem; line-height: 1; color: var(--slm-forte); background-color: var(--slm-ink3); border-radius: 50%; cursor: pointer; }
.slm .scheda .chiudi:hover { color: var(--slm-giallo); background-color: var(--slm-linea); }
.slm .scheda .luogo { margin: 0 0 10px; color: var(--slm-tenue); font-size: 0.9rem; }
.slm .nota { padding: 9px 11px; border-radius: 8px; background: rgba(255, 222, 1, 0.08); border: 1px solid rgba(255, 222, 1, 0.25); font-size: 0.85rem; }
.slm .cta { display: inline-block; margin: 14px 0 8px; padding: 11px 16px; border-radius: 10px; background: var(--slm-giallo); color: var(--slm-ink); font-weight: 700; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.slm .cta:hover { color: var(--slm-ink); transform: translateY(-1px); box-shadow: 0 12px 26px -14px rgba(255, 222, 1, 0.7); }
.slm .copia { font-size: 0.85rem; color: var(--slm-giallo); text-decoration: underline; cursor: pointer; }
.slm .copia:hover { color: var(--slm-ocra); }
.slm .errore { position: absolute; inset: 16px; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; text-align: center; color: var(--slm-forte); background: rgba(20, 22, 26, 0.96); border: 1px solid var(--slm-ink3); border-radius: var(--slm-raggio); }

/* Testi sotto la mappa e invito al contatto */
.slm .testo { max-width: 780px; margin: 0 auto; padding: 44px 16px 32px; }
.slm .testo h2 { margin: 34px 0 10px; font-size: 1.45rem; }
.slm .testo h2:first-child { margin-top: 0; }
.slm .testo li { margin-bottom: 6px; }
.slm .invito { margin-top: 36px; padding: 24px; border-radius: var(--slm-raggio); background: var(--slm-ink2); border: 1px solid var(--slm-ink3); }
.slm .invito h2 { margin-top: 0; }

/* Focus della mappa: anello giallo e scuro sopra la tela WebGL, visibile su ogni colore delle aree */
.slm .maplibregl-canvas:focus-visible { outline: none !important; }
.slm .mappa:has(.maplibregl-canvas:focus-visible)::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 3px solid var(--slm-giallo); box-shadow: inset 0 0 0 3px var(--slm-ink); }

/* Entrate: apertura e schede. "backwards" lascia libero il passaggio del mouse a animazione finita.
   Il testo d'apertura sale senza dissolvenza: partendo da opacity 0 il browser lo conterebbe come disegnato
   (LCP) solo quando il thread si libera dall'avvio della mappa, secondi dopo che si vede. */
@media (prefers-reduced-motion: no-preference) {
  .slm .slm-intro { animation: slm-scivola 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .slm .slm-numero { animation: slm-sale 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .slm .slm-numero:nth-child(1) { animation-delay: 0.1s; }
  .slm .slm-numero:nth-child(2) { animation-delay: 0.18s; }
  .slm .slm-numero:nth-child(3) { animation-delay: 0.26s; }
  .slm .slm-numero:nth-child(4) { animation-delay: 0.34s; }
  .slm .scheda:not([hidden]) { animation: slm-entra 0.22s ease-out backwards; }
}
@keyframes slm-sale { from { opacity: 0; transform: translateY(14px); } }
@keyframes slm-scivola { from { transform: translateY(14px); } }
@keyframes slm-entra { from { opacity: 0; transform: translateX(14px); } }
@keyframes slm-sale-basso { from { opacity: 0; transform: translateY(24px); } }

@media (max-width: 960px) {
  .slm .slm-apertura { grid-template-columns: 1fr; padding-top: 32px; }
  .slm .slm-aggiornata .fonti { display: none; }
}
@media (max-width: 760px) {
  .slm .app { display: block; height: auto; }
  .slm .app.slm-intero, .slm .app:fullscreen { overflow-y: auto; }
  .slm .mappa { height: 68vh; min-height: 420px; }
  .slm .controlli-alto { top: 10px; left: 10px; right: 56px; }
  .slm .controlli-basso { position: static; max-width: none; padding: 10px; background: var(--slm-ink); }
  .slm .slm-strumenti { right: 10px; }
  .slm .errore { justify-content: flex-start; }
  .slm .lato { overflow: visible; border-left: none; border-top: 1px solid var(--slm-ink3); }
  .slm .scheda { position: fixed; inset: auto 0 0 0; z-index: 20; max-height: 72vh; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5); }
  .slm .suggerimento { display: none; }
  .slm .slm-numeri { gap: 8px; }
  .slm .slm-numero { padding: 12px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .slm .scheda:not([hidden]) { animation-name: slm-sale-basso; }
}
@media (prefers-reduced-motion: reduce) {
  .slm *, .slm *::before, .slm *::after { animation: none !important; transition: none !important; }
}