/* ===========================================================
   ДНК — слой интерактивной карты (Яндекс JS API 2.1)
   Отдельный файл: styles.css и animations.css не трогаем.
   Подключается ПОСЛЕ styles.css.
   Откат: убрать <link> на этот файл и <script src="js/map.js">.
   =========================================================== */

/* Контейнер — это тот же .footer__map из styles.css
   (border-radius + overflow:hidden + aspect-ratio 904/470),
   мы лишь добавляем ему слои. */
.dnk-map {
  background: #141414;           /* чтобы не мигало белым до загрузки тайлов */
  --pin-w: clamp(34px, 3vw, 57px);
}

/* --- Статичная картинка-плейсхолдер ----------------------- */
/* Лежит под картой и гаснет, когда карта готова.
   Если API не поднялся — остаётся видимой навсегда. */
.dnk-map__static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.15);
  opacity: 1;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 1;
}

/* Статичная метка-капля поверх плейсхолдера (класс .footer__map-pin
   из styles.css) — гаснет вместе с картинкой */
.dnk-map__static-pin {
  z-index: 2;
  transition: opacity .45s ease;
  pointer-events: none;
}

.dnk-map.is-ready .dnk-map__static,
.dnk-map.is-ready .dnk-map__static-pin { opacity: 0; }

/* --- Контейнер самой карты -------------------------------- */
.dnk-map__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 3;
}

.dnk-map.is-ready .dnk-map__canvas { opacity: 1; }

/* Пока карта не готова (и если она вообще не поднялась) — пустой
   контейнер не должен перехватывать клики по блоку */
.dnk-map:not(.is-ready) .dnk-map__canvas { pointer-events: none; }
.dnk-map.is-failed .dnk-map__canvas { display: none; }

/* --- ТЁМНАЯ КАРТА ---------------------------------------- */
/* В API 2.1 тёмной схемы нет: подложка растровая и светлая.
   Затемняем её инверсией с разворотом тона — приём стандартный:
   invert(1) делает светлое тёмным, hue-rotate(180deg) возвращает
   цветам исходные оттенки (зелень остаётся зеленью, вода — водой).

   ВАЖНО: фильтр висит ТОЛЬКО на слое тайлов (ground-pane).
   Копирайты и логотип Яндекса лежат в других панах и остаются
   в исходном виде — их изменять нельзя по условиям использования.
   Селектор по подстроке, потому что класс содержит версию API
   (ymaps-2-1-79-ground-pane). */
.dnk-map__canvas [class*="-ground-pane"] {
  filter: invert(1) hue-rotate(180deg) saturate(.55) brightness(.78) contrast(1.12);
}

/* --- Метка ------------------------------------------------ */
/* Шаблон вставляется в контейнер, левый-верхний угол которого стоит
   в точке, поэтому якорь «низ-центр» задаём трансформом сами. */
.dnk-map__pin {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  width: var(--pin-w);
  line-height: 0;
  cursor: pointer;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55));
  transition: translate .25s ease;
  will-change: translate;
}

.dnk-map__pin img {
  display: block;
  width: 100%;
  height: auto;
}

.dnk-map__pin:hover,
.dnk-map__pin:focus-visible { translate: 0 -6px; }

.dnk-map__pin:focus-visible {
  outline: 2px solid #bbd043;
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- Контролы Яндекса под тёмный макет -------------------- */
/* Кнопки зума 2.1: классы тоже содержат версию API,
   поэтому селекторы по подстроке. Копирайты и логотип Яндекса
   НЕ трогаем — их изменять нельзя по условиям использования. */
/* ВАЖНО: `[class*="-float-button"]` матчит и саму иконку
   (…-float-button-icon), поэтому её приходится исключать —
   иначе иконка получает тёмный фон, инвертируется вместе с ним
   и кнопка выглядит светлым пятном без «+/−». */
.dnk-map__canvas [class*="-float-button"]:not([class*="-float-button-icon"]) {
  background: rgba(20, 20, 20, .82) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45) !important;
  border-radius: 8px !important;
}

.dnk-map__canvas [class*="-float-button"]:not([class*="-float-button-icon"]):hover {
  background: rgba(187, 208, 67, .92) !important;
}

/* background-color, а НЕ шорткат background: шорткат сбросил бы
   background-image, которым Яндекс рисует сами «+» и «−». */
.dnk-map__canvas [class*="-float-button-icon"] {
  background-color: transparent !important;
  filter: invert(1) !important;   /* чёрные «+/−» → белые */
}

.dnk-map__canvas [class*="-float-button"]:hover [class*="-float-button-icon"] {
  filter: none !important;        /* на лаймовом фоне — снова тёмные */
}

/* --- Мобилка ---------------------------------------------- */
@media (max-width: 600px) {
  .dnk-map { --pin-w: clamp(28px, 10vw, 44px); }
  .dnk-map__pin:hover { translate: 0 0; }   /* на тач-устройствах ховер не нужен */
}

@media (prefers-reduced-motion: reduce) {
  .dnk-map__static,
  .dnk-map__static-pin,
  .dnk-map__canvas,
  .dnk-map__pin { transition: none; }
}