/* coverage-map — mappa "particellare" dell'Italia (base grigia + dot colorati e rete di linee sottili).
   Colori da token; i colori degli strati sono custom property del modulo (nessuna sfumatura radiale). */
.module-coverage-map {
  --cm-bp-0: var(--electric);
  --cm-bp-1: var(--brand);
  --cm-bp-2: var(--lime);
  --cm-fr-0: var(--electric);
  --cm-fr-1: var(--fuchsia-brand);
  --cm-fr-2: hsl(195 92% 50%);
  --cm-all: color-mix(in oklab, var(--ink) 58%, transparent);
  --cm-base: color-mix(in oklab, var(--ink) 20%, transparent);
}

.module-coverage-map.cm-dark {
  --cm-all: rgba(255, 255, 255, 0.55);
  --cm-base: rgba(255, 255, 255, 0.2);
}

/* ------------------------------------------------------------------ layout: 2 colonne (testi/tab/passi a sinistra, mappa a destra) */
.module-coverage-map .cm {
  display: grid;
  gap: 40px;
  align-items: center;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .module-coverage-map .cm {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;   /* da desktop tab e passi partono alla stessa altezza della mappa (non centrati in verticale) */
    gap: 64px;
    min-height: min(720px, calc(100vh - 140px));
  }
}

.module-coverage-map .cm-claim {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.module-coverage-map .cm-hint { max-width: 40ch; margin: 12px 0 0; color: var(--ink-soft); }

.module-coverage-map .cm-tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: 24px;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 7%, transparent);
}
.module-coverage-map .cm-tab {
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.module-coverage-map .cm-tab.is-active { background: var(--ink); color: #fff; }
.module-coverage-map .cm-tab:focus-visible,
.module-coverage-map .cm-step-btn:focus-visible,
.module-coverage-map .cm-cta:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }


.module-coverage-map .cm-steps { display: none; max-width: 460px; margin: 24px 0 0; padding: 0; list-style: none; }
.module-coverage-map .cm-steps.is-active { display: flex; flex-direction: column; gap: 10px; }

/* Card selezionabili (interruttori indipendenti): nessun bordo; hover e attiva = sfondo grigio chiaro, attiva = anche spunta nel pallino */
.module-coverage-map .cm-step { --cm-c: var(--ink); --cm-on: #fff; }
.module-coverage-map .cm-step[data-cm-layer="bp-0"] { --cm-c: var(--cm-bp-0); }
.module-coverage-map .cm-step[data-cm-layer="bp-1"] { --cm-c: var(--cm-bp-1); --cm-on: var(--ink); }
.module-coverage-map .cm-step[data-cm-layer="bp-2"] { --cm-c: var(--cm-bp-2); --cm-on: var(--ink); }
.module-coverage-map .cm-step[data-cm-layer="fr-0"] { --cm-c: var(--cm-fr-0); }
.module-coverage-map .cm-step[data-cm-layer="fr-1"] { --cm-c: var(--cm-fr-1); }
.module-coverage-map .cm-step[data-cm-layer="fr-2"] { --cm-c: var(--cm-fr-2); --cm-on: var(--ink); }
.module-coverage-map .cm-step {
  border: 1px solid rgba(255, 255, 255, 0.1);   /* bordo molto leggero, solo da non selezionata */
  border-radius: 14px;
  background: transparent;
  transition: background-color 0.2s, border-color 0.2s;
}
.module-coverage-map .cm-step:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); }
.module-coverage-map .cm-step.is-on { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.module-coverage-map .cm-step-btn {
  display: flex;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.module-coverage-map .cm-dot { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; color: var(--cm-on, #fff); }
/* segno di spunta: la selezione non è comunicata solo dal colore del bordo */
.module-coverage-map .cm-check { opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s; }
.module-coverage-map .cm-step.is-on .cm-check { opacity: 1; transform: none; }
.module-coverage-map .cm-dot-bp-0 { background: var(--cm-bp-0); }
.module-coverage-map .cm-dot-bp-1 { background: var(--cm-bp-1); }
.module-coverage-map .cm-dot-bp-2 { background: var(--cm-bp-2); }
.module-coverage-map .cm-dot-fr-0 { background: var(--cm-fr-0); }
.module-coverage-map .cm-dot-fr-1 { background: var(--cm-fr-1); }
.module-coverage-map .cm-dot-fr-2 { background: var(--cm-fr-2); }
.module-coverage-map .cm-step-copy { display: block; }
.module-coverage-map .cm-st { display: block; font-weight: 800; color: var(--ink); }
.module-coverage-map .cm-sd { display: block; margin-top: 2px; font-size: 0.92rem; line-height: 1.45; color: var(--ink-soft); }

/* ------------------------------------------------------------------ colonna destra: mappa */
.module-coverage-map .cm-mapcol { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.module-coverage-map .cm-map { position: relative; width: 100%; max-width: min(620px, calc((100vh - 190px) * 335 / 392)); aspect-ratio: 335 / 392; }
@media (max-width: 1023px) { .module-coverage-map .cm-map { max-width: 420px; } }
.module-coverage-map .cm-canvas,
.module-coverage-map .cm-links { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.module-coverage-map .cm-links { pointer-events: none; }

/* Box sulla mappa: uno per card attiva, impilati sul lato destro, tutti della stessa larghezza */
.module-coverage-map .cm-cards {
  position: absolute;
  top: 8%;
  right: -8%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 210px;
  pointer-events: none;
}
.module-coverage-map .cm-card {
  display: none;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border: 2px solid var(--cm-c, color-mix(in oklab, var(--ink) 25%, transparent));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(20, 20, 40, 0.35);
}
.module-coverage-map .cm-card[data-cm-layer="bp-0"] { --cm-c: var(--cm-bp-0); }
.module-coverage-map .cm-card[data-cm-layer="bp-1"] { --cm-c: var(--cm-bp-1); }
.module-coverage-map .cm-card[data-cm-layer="bp-2"] { --cm-c: var(--cm-bp-2); }
.module-coverage-map .cm-card[data-cm-layer="fr-0"] { --cm-c: var(--cm-fr-0); }
.module-coverage-map .cm-card[data-cm-layer="fr-1"] { --cm-c: var(--cm-fr-1); }
.module-coverage-map .cm-card[data-cm-layer="fr-2"] { --cm-c: var(--cm-fr-2); }
.module-coverage-map .cm-card.is-on { display: flex; animation: cm-card-in 0.35s ease both; }
/* i box entrano dall'alto verso il basso */
@keyframes cm-card-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
  .module-coverage-map .cm-cards { top: 3%; right: 0; width: 160px; }
  .module-coverage-map .cm-card { padding: 9px 12px; border-radius: 12px; }
}
.module-coverage-map .cm-ck { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--electric); }
.module-coverage-map .cm-card b { font-size: 0.98rem; line-height: 1.25; color: var(--ink); }

/* CTA: link testuale con freccia (non un pulsante) */
.module-coverage-map .cm-cta {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 0.2s;
}
.module-coverage-map .cm-cta svg { flex: none; width: 18px; height: 18px; transition: transform 0.25s; }
.module-coverage-map .cm-cta:hover { color: var(--electric); }
.module-coverage-map .cm-cta:hover svg { transform: translateX(3px); }
.module-coverage-map .cm-cta.is-active { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  .module-coverage-map .cm-card.is-on { animation: none; }
  .module-coverage-map .cm-card,
  .module-coverage-map .cm-step,
}

/* ------------------------------------------------------------------ versione scura (theme = dark: sezione su blu scuro, bg-ink) */
.module-coverage-map.cm-dark .cm-claim,
.module-coverage-map.cm-dark .cm-st { color: var(--on-dark); }
.module-coverage-map.cm-dark .cm-hint,
.module-coverage-map.cm-dark .cm-sd { color: rgba(255, 255, 255, 0.72); }
.module-coverage-map.cm-dark .cm-tabs { background: rgba(255, 255, 255, 0.1); }
.module-coverage-map.cm-dark .cm-tab { color: rgba(255, 255, 255, 0.75); }
.module-coverage-map.cm-dark .cm-tab.is-active { background: var(--brand); color: var(--ink); }
.module-coverage-map.cm-dark .cm-tab:focus-visible,
.module-coverage-map.cm-dark .cm-step-btn:focus-visible,
.module-coverage-map.cm-dark .cm-cta:focus-visible { outline-color: var(--brand); }
.module-coverage-map.cm-dark .cm-step:hover { background: rgba(255, 255, 255, 0.07); }
.module-coverage-map.cm-dark .cm-step.is-on { border-color: transparent; background: rgba(255, 255, 255, 0.12); }
.module-coverage-map.cm-dark .cm-cta { color: var(--brand); }
.module-coverage-map.cm-dark .cm-cta:hover { color: var(--brand); text-decoration-thickness: 2px; }
/* box sulla mappa: vetro scuro, testo chiaro (il bordo resta del colore della categoria) */
.module-coverage-map.cm-dark .cm-card { background: rgba(2, 37, 49, 0.72); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55); }
.module-coverage-map.cm-dark .cm-card[data-cm-card="0"] { --cm-c: rgba(255, 255, 255, 0.28); }
.module-coverage-map.cm-dark .cm-card b { color: var(--on-dark); }
.module-coverage-map.cm-dark .cm-ck { color: var(--brand); }

/* il wrapper nativo HubSpot e il pin-spacer restano dello stesso blu, così nessun 1px bianco compare ai bordi della sezione */
.dnd-section:has(.module-coverage-map.cm-dark),
.pin-spacer:has(.module-coverage-map.cm-dark) { background-color: var(--ink); }

/* Testo introduttivo sotto il titolo: 16px, a una o due colonne */
.module-coverage-map .cm-intro-text { font-size: 1rem; line-height: 1.6; }
.module-coverage-map .cm-intro-text p { margin: 0; }
.module-coverage-map .cm-intro-text p + p { margin-top: 16px; }
.module-coverage-map .cm-intro-text strong { font-weight: 700; color: var(--ink); }
.module-coverage-map.cm-dark .cm-intro-text strong { color: var(--on-dark); }
/* tema chiaro: la parola evidenziata del titolo (text-brand) diventa blu elettrico (il giallo sul bianco non si legge) */
.module-coverage-map:not(.cm-dark) .tdb-title .text-brand { color: var(--electric); }

/* Ingresso: finché la sezione non ha raggiunto metà schermo (classe cm-pre messa da module.js) i box sulla mappa restano nascosti */
.module-coverage-map .cm-cards { transition: opacity 0.5s ease; }
.module-coverage-map .cm.cm-pre .cm-cards { opacity: 0; }