@charset "UTF-8";

/* ВЕРСИЯ ФАЙЛА: 2. Подключается как map-points.css?v=2.
   ПРАВИЛО: если правишь этот файл — подними версию в ссылке на единицу
   (v=2 -> v=3) в файлах comics.php, index.php, sections.php и map.php, иначе
   браузер продолжит отдавать старый.

   Версия 2, 29.09.2026: добавлен ряд значков .card__marks и значок музыки.
   Геотег не изменился видом, но теперь он лежит внутри ряда, а не сам по
   себе, поэтому его position стал обычным — позиционирует ряд. */

/* 04.10.2026. Из этого файла убраны правила .leaflet-attribution-flag и
   .leaflet-interactive вместе с объяснением про флаг. Leaflet на сайте больше
   нет (решение владельца), разметки библиотеки не бывает, и правила не могут
   сработать ни на одной странице. Версия 2 поэтому не поднята: вид страницы не
   менялся, а подъём заставил бы всех посетителей перекачивать файл ради
   ничего. ПРАВИЛО «правишь файл - поднимай версию» остаётся в силе для
   правок, меняющих вид.

   Подпись «© OpenStreetMap» со ссылкой на лицензию никуда не делась: теперь её
   рисует своя карта в map.php, правила лежат в assets/css/map-view.css.
   Прятать её нельзя. */

/* Привязка выпуска к точке на карте.
   Файл маленький и отдельный намеренно: 28.09.2026 править большой style.css
   было опасно, а ASSETS_V поднимать нельзя без надобности — этот файл
   подключается со своей версией в query, и кеш браузера его не удержит.

   Здесь три вещи:
   1. Стикер-капля на карточке выпуска — красная капля, как просил владелец.
   2. Оранжевая полоса по краю карточки раздела в «Все разделах», когда
      выбранная точка относится к этому разделу.
   3. Красная точка на карте (стиль задаётся в JS, здесь только размер).

   Правило: точка всегда одна. Значит «ты сейчас здесь». */

/* Картинка карточки выпуска стала контейнером, а ссылка — вложенной.
   Раньше .card__img сам был ссылкой, и вложить туда ещё одну ссылку — метку
   на карту — было нельзя: ссылка в ссылке. Те .card__img это просто div, внутри
   ссылка на сам выпуск, а метка лежит рядом и ведёт на карту.
   Ни одно из правил style.css на это не смотрит: у .card__img заданы только
   aspect-ratio, фон, position:relative и overflow:hidden, а картинка внутри
   растягивается по .card__img img. Поэтому общий стиль не трогаем. */
.card__img > .card__img__link {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ряд значков в правом верхнем углу картинки: точка на карте и песня.

   29.09.2026. Почему ряд: обе метки живут в одном углу, а номерок занимает
   левый. Сначала метка геотега при появлении ноты уезжала влево и наезжала на
   номерок — владелец это показал. Теперь ряд прижат к правому краю, метка
   геотега в нём слева, нота справа, номерок не затронут. Плашка одна — ряд
   состоит из одной метки и стоит ровно там же, где раньше.

   Ширину плашек ряд не задаёт: в CSS нельзя узнать, сколько пикселей занимает
   эмодзи, поэтому порядок и зазор заданы самим рядом, а не сдвигом в CSS. */
.card__marks {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Метка геотега: значок 📍 на плашке номера выпуска, в правом верхнем углу.

   28.09.2026, вид выбрал владелец из четырёх вариантов (временная страница
   pin-test.php, вариант 2). Отвергнут вариант с файлом `метка.png`: у файла
   непрозрачный белый фон, угол имеет A=255 — обещание «вырезать» можно
   сдержать, но значок уже знаком читателям и не тащит на сайт файл.

   Размер плашки снят с номерка, а не придуман: .card__badge в общем style.css
   меряется 52x29 при отступе 5px и радиусе 20px. Значит содержимое метки — 19px,
   и 5+19+5 даёт ту же высоту 29. Отступы, радиус и цвет копирую из .card__badge,
   поэтому метка стоит с номерком в одном ряду и не выбивается.

   Значок пишем HTML-символом, а не картинкой, — это тот самый вид, который был
   утверждён. В CSS его цвет задать нельзя, эмодзи рисуется системным шрифтом;
   на чёрной плашке красная булавка читается хорошо, это видно было на странице
   сравнения.

   Позиционирования своего теперь нет: метка лежит внутри .card__marks, и её
   место задаёт ряд. Вне ряда метка встанет в поток — так и надо, иначе она
   снова наехала бы на номерок. */
.geo-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .8);
  color: var(--accent-2);
  font-size: 16px;
  line-height: 19px;
  text-decoration: none;
  transition: transform .15s ease;
}
.geo-sticker:hover,
.geo-sticker:focus-visible {
  transform: scale(1.1);
}

/* Значок музыки: 🎵 на плашке того же вида, что и метка геотега. Вид выбрал
   владелец 29.09.2026 — нота, наушники отклонены. Значения скопированы из
   .geo-sticker один в один: та же высота 29, тот же радиус, тот же оранжевый.
   Разница в ширине — 42 против 33 — из-за самого эмодзи, и ряд её учитывает. */
.music-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .8);
  color: var(--accent-2);
  font-size: 16px;
  line-height: 19px;
  text-decoration: none;
  transition: transform .15s ease;
}
.music-sticker:hover,
.music-sticker:focus-visible {
  transform: scale(1.1);
}

/* Карточка раздела в «Все разделах», к которому относится выбранная точка.
   Полоса идёт по периметру — так видно с любой ширины, и не съедает место
   внутри карточки, где уже живут значок, название и текст. */
.busel-card.is-geo-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent);
  position: relative;
}
/* Подпись на полосе — название выпуска, его подставляет скрипт в атрибут
   data-geo-label. Если скрипт не сработал, а полоса есть, показываем
   короткий запасной текст, а не пустоту. */
.busel-card.is-geo-active::after {
  content: attr(data-geo-label, "точка на карте");
  position: absolute;
  top: -9px;
  right: 10px;
  max-width: 70%;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .busel-card.is-geo-active::after { max-width: 60%; }
}


/* ---- Плашка точки на карте Яндекса (03.10.2026) ----
   Классы свои, без привязки к библиотеке: .mappop ставит сам map.php, и эти
   правила работают независимо от того, чья это карта. Цвета взяты из палитры
   сайта: приглушённый серый для мелких строк, оранжевый — для названия и
   для ссылки. Внутри Яндекса тёмная тема включена в коде карты, поэтому
   тёмный текст читается. */
.mappop__name {
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--accent);
  text-decoration: none;
}
.mappop__name:hover { text-decoration: underline; }
.mappop__meta {
  margin-top: 4px;
  font-size: 13px;
  color: #c5bbb0;
}
.mappop__addr {
  margin-top: 6px;
  font-size: 12px;
  color: #c5bbb0;
}
.mappop__addr a { color: var(--accent-2); }