/* ===== Реклама (ход 5 и ход 8 дизайн-документа «Evrohod Panel») =====
   Реклама берёт форму продукта: тот же шрифт, та же сетка, всегда помечена
   словом «реклама» — прописные Jost 10.5px цвета --eh-faint, ни «AD», ни
   звёздочки, ни серой плашки. Картинок, логотипов и кнопок нет; имя
   рекламодателя набирается Jost прописными, как раздел. Справа от имени — красная
   стрелка, как у названия объекта в карточке точки (замечание владельца 05.09.2026);
   ссылка — имя вместе со стрелкой (замечание владельца 01.10.2026: по заголовку
   щёлкали, а ссылкой была одна стрелка). Что и где показывается, решает static/js/ads.js. */
.ad-mark {
  font-family: 'Jost', system-ui, sans-serif; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--eh-faint);
  white-space: nowrap;
}
.ad-name {
  font-family: 'Jost', system-ui, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--eh-ink);
  transition: color var(--eh-hover-ms) linear;
}
/* Ход 12: имя рекламодателя под курсором краснеет — подхватывает цвет своей стрелки
   и показывает, что клик уводит наружу. Стрелка при этом не двигается и не меняет
   кегль: имя и стрелка остаются на своих местах. */
.ad-name:hover, .ad-name:has(.ad-link:hover) { color: var(--eh-action); }
/* Ссылка — имя и стрелка целиком: цвет и начертание берёт у имени, без подчёркивания.
   Внутри .leaflet-container Leaflet красит ссылки синим правилом весомее одного
   класса, поэтому цвет задан и с этим префиксом. */
.ad-link, .leaflet-container a.ad-link { color: inherit; text-decoration: none; }
.ad-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--eh-body); }
/* Стрелка внутри ссылки: красная, чуть меньше имени. */
.ad-arrow {
  color: var(--eh-action); font-size: 0.86em;
  margin-left: 6px; letter-spacing: 0; white-space: nowrap;
  transition: color var(--eh-hover-ms) linear;
}
.ad-link:hover .ad-arrow { color: var(--eh-action-hi); }
.ad-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

/* ---- 8D: полка под включённой зоной в фильтре «Зоны» (ILLAY Legal). Та же
   светлая подложка, что у строки под курсором, на всю ширину панели; над
   объявлением волосок, отделяющий его от строки слоя. Красной полосы и «скрыть»
   нет (замечание владельца 06.09.2026). ---- */
.zone-open { margin: 0 -18px; padding: 0 18px; background: var(--eh-row-hover); }
.zone-shelf { padding: 0 0 12px; }
.zone-shelf > .ad-mark { display: block; margin-bottom: 6px; padding-top: 11px; border-top: 1px solid #e6e2da; }
.zone-shelf .ad-name { font-size: 13px; margin-bottom: 4px; }

/* ---- 5C: подвал панели — прибит к низу под «Поставить метку» (Fintegra) ---- */
.ad-footer { padding: 11px 0 10px; border-top: 1px solid var(--eh-line); }
.ad-footer[hidden] { display: none; }
.ad-footer .ad-head { margin-bottom: 6px; }
.ad-footer .ad-name { font-size: 15px; }

/* ---- 5D: карточка под кнопками масштаба, поверх карты ----
   Контрол Leaflet: угол сам ставит её под зум по левому краю. Ширина 236px,
   та же тень, что у карточек на карте; прямой угол, как во всём наборе.
   Никогда не встаёт в угол легенды. Крестика нет: карточка не сворачивается. */
.leaflet-top .leaflet-control.ad-map { margin-top: 12px; }
.ad-map {
  width: 236px; box-sizing: border-box;
  background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.14);
  padding: 12px 13px 11px;
  font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12.5px; line-height: 1.45; color: var(--eh-body);
  cursor: default;
}
.ad-map .ad-head { margin-bottom: 6px; }
.ad-map .ad-name { font-size: 14px; margin-bottom: 5px; }
.ad-map .ad-text { line-height: 1.45; margin: 0; }

/* ---- 5D на узком экране: та же реклама полоской в одну строку вверху карты ----
   Карточка в 236 px закрывала верхнюю четверть телефона (замечание владельца
   06.09.2026). Полоска высотой в строку не растёт от длины объявления: пометка
   и имя стоят целиком, текст обрезается по ширине экрана.

   Раскладка полоски описана ЗДЕСЬ, а не внутри медиазапроса, и это не украшение
   порядка: раньше `position` и `z-index` лежали в медиазапросе, и стоило браузеру
   держать старый ads.css рядом со свежим ads.js — полоска оставалась блоком без
   позиционирования, уезжала под слои карты и пропадала совсем (замечание владельца
   06.09.2026: «реклама пропала совсем»). Медиазапрос ниже решает ровно один вопрос:
   какой из двух видов объявления показывать. Ошибиться в нём нечем.

   Кегли не «как можно мельче»: объявление должно читаться как объявление, а не как
   часть панели браузера. Имя — 13 px чернилами, текст — 12 px основным цветом.

   Две строки, а не одна: в строку помещались имя и два слова текста, и объявление
   не читалось (замечание владельца 06.09.2026 — «название и 2 слова непонятно;
   реклама по высоте станет толще, это ок»). Пометка и имя стоят первой строкой,
   текст идёт второй и обрезается по двум строкам: высота полоски задана и не зависит
   от длины объявления, иначе длинный текст рекламодателя съел бы пол-карты. Высота
   фиксирована и при коротком тексте: под полоской стоят кнопки масштаба и подсказки,
   и их отступы считаются от неё. */
.ad-strip {
  display: none;                 /* широкий экран: объявление показывает карточка под зумом */
  position: absolute; top: 0; left: 0; right: 0;
  /* Ниже легенды (10000) и панели (10001): полоска — верх карты, а не верх экрана. */
  z-index: 9999;
  min-height: 67px; box-sizing: border-box;
  padding: 6px 10px 7px;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--eh-line);
  font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}
/* Первая строка: пометка и имя со стрелкой. Не переносится — длинное имя обрежется
   по краю экрана, а текст останется на своей строке. */
.ad-strip .ad-strip-head {
  display: flex; align-items: baseline; gap: 8px;
  line-height: 1.35; white-space: nowrap; overflow: hidden;
}
.ad-strip .ad-mark { flex: none; font-size: 10px; letter-spacing: 0.12em; }
.ad-strip .ad-name { flex: none; font-size: 13px; letter-spacing: 0.06em; }
/* Вторая строка: текст объявления, не больше двух строк. */
.ad-strip .ad-text {
  margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--eh-body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Узкий экран: полоска вместо карточки. Кнопки масштаба, подсказка режима метки
   и тост загрузки съезжают под неё — иначе она их накрывает. Отсчёт от высоты полоски
   (67 px), собственные зазоры у них свои: у контролов Leaflet 10 px, у подсказки 12 px. */
@media (max-width: 768px) {
  .ad-strip { display: block; }
  .ad-map { display: none; }
  .leaflet-top { top: 67px; }
  .hint-banner, .layer-toast { top: 79px; }
}

/* ---- тёмная тема: та же карточка на тёмных токенах ---- */
html.dark .ad-map { background: #1c1f24; box-shadow: 0 2px 12px rgba(0,0,0,0.5); }
html.dark .ad-map .ad-text { color: #d8dade; }
html.dark .ad-strip { background: rgba(28,31,36,0.96); border-bottom-color: #2a2c31; }
html.dark .ad-strip .ad-text { color: #d8dade; }
html.dark .ad-arrow { color: #e04a2e; }
html.dark .zone-shelf > .ad-mark { border-top-color: #33373e; }
html.dark .ad-footer { border-top-color: #2a2c31; }