/* =============================================================================
   LOBATO MACHADO — mapa interativo de bairros
   Complementa style.css.

   01. Layout da página
   02. Mapa (imagem + polígonos SVG + tooltip)
   03. Lista de bairros mapeados
   04. Responsivo
   ========================================================================== */

/* ─────────────────────────────────────────────────── 01. LAYOUT DA PÁGINA */
.pagina-mapa { background: var(--surface-alt); }
.pagina-mapa .mapa-pagina { padding-top: var(--header-h); }

.mapa-topo { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.mapa-titulo { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin-top: .5rem; }
.mapa-lede { color: var(--ink-70); max-width: 62ch; margin-top: .75rem; }

.mapa-corpo { padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem); }

/* ────────────────────────── 02. MAPA (IMAGEM + POLÍGONOS SVG + TOOLTIP) */
.mapa-interativo {
  position: relative; width: 100%; line-height: 0;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--sh-2);
  background: #fff;
}
.mapa-interativo__img { display: block; width: 100%; height: auto; }
.mapa-interativo__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.mapa-poligono {
  fill: rgba(35, 29, 31, .06);
  stroke: var(--bordo-600); stroke-width: 1.5;
  cursor: pointer;
  transition: fill .15s var(--ease), stroke-width .15s var(--ease);
}
.mapa-poligono:hover,
.mapa-poligono:focus-visible {
  fill: rgba(35, 29, 31, .22); stroke-width: 2.5; outline: none;
}

.mapa-interativo__tooltip {
  position: absolute; z-index: 5; top: 0; left: 0;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--bordo); color: var(--ink);
  padding: .5rem .9rem; border-radius: var(--r-sm);
  font-size: .85rem; font-weight: 700; white-space: nowrap;
  pointer-events: none; box-shadow: var(--sh-2);
}
.mapa-interativo__tooltip[hidden] { display: none; }

/* ──────────────────────────────────── 03. LISTA DE BAIRROS MAPEADOS */
.mapa-lista { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.mapa-lista__titulo { font-size: var(--fs-h3); }
.mapa-lista__grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem; margin-top: 1.1rem;
}
.mapa-lista__item {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; color: var(--ink); font-weight: 600;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.mapa-lista__item:hover { border-color: var(--ink); background: var(--bordo-050); }
.mapa-lista__item svg { margin-left: auto; font-size: .85rem; color: var(--ink-30); flex: none; }
.mapa-lista__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); flex: none; }

/* ─────────────────────────────────────────────────────── 04. RESPONSIVO */
@media (max-width: 700px) {
  .mapa-lista__grade { grid-template-columns: 1fr; }
}