/* Полный CSS: монохромная Яндекс.Карта с оливковым оттенком
   Цели:
   - Чисто монохромная палитра с лёгким «оливковым» оттенком
   - Сохранить читаемость названий улиц
   - Приглушить названия организаций/POI, не ломая собственную метку
   - Полноширинный блок + адаптивная высота
*/

/* 1) Полноширинная секция под карту (растягиваем от края до края экрана) */
#map-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #eef2e8; /* светлый оливковый фон на время загрузки тайлов */
}

/* 2) Контейнер карты */
#yandex-map {
  width: 100%;
  height: 60vh;       /* 60% высоты окна */
  min-height: 380px;  /* комфортный минимум */
  max-height: 780px;  /* ограничение на очень высоких экранах (можно убрать) */
}

/* 3) Монохром с оливковым оттенком:
   - grayscale(1): полностью обесцвечиваем
   - hue-rotate(330deg): лёгкое смещение в оливковый спектр
   - saturate(0.9): слегка «смягчаем» контуры
   - contrast(1.06): увеличиваем читаемость
   - brightness(1.02): делаем светлую схему немного светлее
*/
.ymaps-2-1-79-map {
  filter: grayscale(1) hue-rotate(330deg) saturate(0.9) contrast(1.06) brightness(1.02);
}

/* 4) Подписи улиц (labels) — небольшая коррекция, чтобы были чётче на монохроме */
.ymaps-2-1-79-labels-pane {
  filter: contrast(1.04) brightness(1.02);
}

/* 5) Приглушаем подписи организаций/POI (не скрываем полностью, чтобы не задеть улицы на некоторых тайлах) */
.ymaps-2-1-79-labels-pane [class*="business"],
.ymaps-2-1-79-labels-pane [class*="poi"],
.ymaps-2-1-79-labels-pane [class*="org"],
.ymaps-2-1-79-labels-pane [class*="company"] {
  opacity: 0.22;
  filter: grayscale(1) contrast(0.95);
}

/* 6) Скрываем отвлекающие панели/поиск/промо (не влияет на названия улиц и вашу метку) */
.ymaps-2-1-79-controls__control_search,
.ymaps-2-1-79-controls__control_toolbar,
.ymaps-2-1-79-controls__control_typeselector,
.ymaps-2-1-79-controls__control_traffic,
.ymaps-2-1-79-traffic-panel,
.ymaps-2-1-79-gotoymaps__container,
.ymaps-2-1-79-copyrights-promo {
  display: none !important;
}

/* 7) Стили подписи (балун) вашей метки — гармонирует с монохромно‑оливковой картой */
.custom-balloon {
  font: 600 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #2f3528;                 /* тёмно‑оливковый текст */
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(47, 53, 40, 0.08);
}

/* 8) Адаптивные правки по высоте */
@media (max-width: 1200px) {
  #yandex-map { height: 56vh; min-height: 360px; }
}
@media (max-width: 992px) {
  #yandex-map { height: 52vh; min-height: 340px; }
}
@media (max-width: 768px) {
  /* если тема уже делает секцию полноширинной на мобилках — можно убрать «растяжку» */
  #map-section { margin-left: 0; margin-right: 0; width: 100%; }
  #yandex-map { height: 48vh; min-height: 320px; }
}
@media (max-width: 480px) {
  #yandex-map { height: 44vh; min-height: 300px; }
}

/* 9) Доп. утилита для варианта «карта внутри карточки» (если не нужна полноширинность):
   <div class="map-card"><div id="yandex-map"></div></div> */
.map-card {
  border-radius: 16px;
  overflow: hidden;
  background: #f3f6ee;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* 10) Сброс iframe на всякий случай */
#yandex-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}