/* ============================================================
   klasyk.pl — mapa w treści artykułu (shortcode #mapa, MAP-1)
   Ładowany WARUNKOWO przez article.phtml tylko gdy treść zawiera
   shortcode (razem z vendor leaflet + protomaps-leaflet +
   article-map.js). Ręczny CSS na tokenach (konwencja DS-2026).
   Legenda = overlay SSR nad kanwą Leafleta (z-index nad panele map);
   lista obiektów = zwijane <details> pod mapą (SEO, mosty produktowe).
   ============================================================ */

.art-map { margin: 2rem 0; }

.art-map__canvas {
  position: relative;
  height: clamp(20rem, 55vh, 30rem);
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.art-map__noscript { margin: 0; padding: 2.25rem 1.5rem; text-align: center; color: var(--meta-strong); }

.art-map__marker { background: none; border: none; }
.art-map__marker svg { display: block; }

.art-map__legend {
  position: absolute;
  left: .875rem;
  bottom: .875rem;
  z-index: 1000; /* nad panelami Leafleta (max ~700) */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .75rem;
  display: grid;
  gap: .3125rem;
  font-family: var(--sans);
  font-size: .6875rem;
  pointer-events: none;
}

.art-map__legend-row { display: flex; align-items: center; gap: .4375rem; color: var(--heading); }
.art-map__legend-row svg { flex: none; display: block; }
.art-map__legend-note { color: var(--meta); font-size: .625rem; }

.art-map__count { color: var(--meta); font-variant-numeric: tabular-nums; }

.art-map__list {
  margin-top: .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .625rem .875rem;
  font-family: var(--sans);
}

.art-map__list summary { cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--heading); }
.art-map__list-label {
  margin: .875rem 0 .125rem;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--meta-strong);
}
.art-map__list ul { margin: .25rem 0; padding-left: 1.25rem; }
.art-map__list li { margin: .25rem 0; font-size: .9375rem; }
.art-map__meta { color: var(--meta); font-size: .8125rem; }

@media (max-width: 640px) {
  .art-map__canvas { height: 18rem; }
  .art-map__legend { left: .5rem; bottom: .5rem; padding: .375rem .5625rem; font-size: .625rem; }
}