/* Карта точек сбора: пульсирующие маркеры и элементы управления.
 *
 * Маркер = L.divIcon с разметкой:
 *   .pm (--pm-c: цвет, --pm-delay: сдвиг анимации)
 *     .pm-ring            волна 1
 *     .pm-ring.pm-ring--2 волна 2 (запаздывает на полпериода — волна идёт непрерывно)
 *     .pm-dot > .pm-num   яркая точка с номером
 *
 * Анимируются только transform и opacity: браузер считает их на видеокарте,
 * без пересчёта раскладки страницы — карта не «дёргается» и меньше тратит батарею.
 */

/* --- Цвета панелей карты: из общих переменных сайта (static/css/site.css) ------
 * Значения после запятой — запасные, если карта подключена без site.css. */
:root {
  --pm-panel-bg: var(--surface-glass, rgba(255, 253, 247, 0.94));
  --pm-panel-fg: var(--fg, #1d2a22);
  --pm-panel-muted: var(--muted, #5d6b62);
  --pm-panel-border: var(--border, rgba(29, 42, 34, 0.14));
  --pm-accent: var(--accent, #9a7212);
  --pm-accent-fg: var(--accent-fg, #fff);
  --pm-shadow: var(--shadow, 0 6px 24px rgba(20, 30, 24, 0.16));
  /* обводка точки — отделяет её от подложки (на тёмной — тёмная) */
  --pm-outline: color-mix(in srgb, var(--bg, #fff) 90%, transparent);
}

/* --- Маркер --------------------------------------------------------------- */
.pm-icon {
  /* у L.divIcon по умолчанию белый квадрат с рамкой — убираем */
  background: none;
  border: 0;
}

.pm {
  --pm-dur: 2s;
  position: relative;
  width: 100%;
  height: 100%;
}

.pm-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--pm-c);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: pm-pulse var(--pm-dur) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  animation-delay: var(--pm-delay, 0s);
}
.pm-ring--2 {
  animation-delay: calc(var(--pm-delay, 0s) + var(--pm-dur) / 2);
}

@keyframes pm-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.pm-dot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pm-c);
  /* обводка + мягкое свечение в цвет маркера */
  box-shadow:
    0 0 0 2px var(--pm-outline),
    0 0 10px 2px color-mix(in srgb, var(--pm-c) 65%, transparent);
  color: var(--pm-fg, #fff);
  font: 700 8px/1 "Inter", "Noto Sans", system-ui, sans-serif;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 1px color-mix(in srgb, var(--pm-c) 40%, rgba(0, 0, 0, 0.5));
  user-select: none;
}
.pm--g2 .pm-dot { font-size: 9px; }
.pm--g3 .pm-dot { font-size: 11px; }

/* Номер: на компьютере всегда, на телефоне — при приближении (класс ставит JS) */
.pm-num {
  opacity: 0;
  transition: opacity 0.2s;
}
.pm-labels .pm-num {
  opacity: 1;
}

/* --- Переключатель «цвет по району / по численности» --------------------- */
.pm-control {
  display: flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--pm-panel-border);
  border-radius: 999px;
  background: var(--pm-panel-bg);
  box-shadow: var(--pm-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pm-control button {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pm-panel-muted);
  font: 600 12px/1.2 "Inter", "Noto Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.pm-control button:hover {
  color: var(--pm-panel-fg);
}
.pm-control button[aria-pressed="true"] {
  background: var(--pm-accent);
  color: var(--pm-accent-fg);
}
.pm-control button:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 2px;
}

/* --- Пользователь просит меньше движения: без волн, только свечение ------- */
@media (prefers-reduced-motion: reduce) {
  .pm-ring {
    display: none;
  }
  .pm-dot {
    box-shadow:
      0 0 0 2px var(--pm-outline),
      0 0 14px 5px color-mix(in srgb, var(--pm-c) 55%, transparent);
  }
}

/* --- Карточка точки (попап) ---------------------------------------------------- */
.pm-popup .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.pm-popup .leaflet-popup-content { margin: 14px 16px; font: 0.88rem/1.45 var(--font-sans, system-ui, sans-serif); }
.pm-card p { margin: 0 0 6px; }
.pm-card__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; }
.pm-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.pm-card__meta { color: #5f6c63; }
.pm-card__stats { display: flex; gap: 16px; }
.pm-card__stats b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pm-card__photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.pm-card__photo {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #e9e4d6;
  cursor: zoom-in;
}
.pm-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.pm-card__photo:hover img { transform: scale(1.08); }
.pm-card__photo:focus-visible { outline: 2px solid #946d10; outline-offset: 1px; }
.pm-card__more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: 700;
}