/*
 * Пины и кластеры карт - ОДИН файл на весь сайт.
 *
 * Эталон: components/content/MapPin.jsx. Раньше эти правила жили только в
 * map-section.css, то есть только на /{город}/karta/, а карта объявления и
 * карта площадки показывали дефолтную синюю каплю Яндекса. Файл вынесен,
 * чтобы у пина был ровно один источник правды: разметку ему даёт
 * assets/js/map-pin.js, стиль - этот файл, и обе карты (раздела и
 * одиночная) рисуют одинаковый пин.
 *
 * Классы намеренно сохранили префикс `pk-mp-*` карты раздела: переименование
 * тронуло бы map-section.js, map-section.css и разметку кластерной панели
 * ради косметики.
 *
 * Токены (--pk-*, --fs-*, --fw-*) - из base.css. Локальная переменная одна:
 * --pk-mp-pin-bg (цвет пина, общий для пилюли и хвостика).
 *
 * Селекторы БЕЗ `.pk-front`: макеты ymaps живут внутри контейнера карты, и
 * на странице карты раздела `.pk-front` на body нет.
 */

/* ---------- Пины и кластеры (HTML-макеты ymaps, MapPin.jsx) ---------- */

.pk-mp-pin {
	--pk-mp-pin-bg: var(--pk-green-dark);
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -100%);
	transform-origin: bottom center;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	font-family: var(--pk-font-sans);
	filter: drop-shadow(0 3px 8px rgba(16, 44, 26, 0.28));
	transition: transform var(--dur-mid) var(--ease-entrance), filter var(--dur-mid);
}
.pk-mp-pin.is-promo { --pk-mp-pin-bg: var(--pk-star); }
.pk-mp-pin.is-selected {
	--pk-mp-pin-bg: var(--pk-green-deep);
	transform: translate(-50%, -100%) scale(1.14);
	filter: drop-shadow(0 8px 16px rgba(16, 44, 26, 0.42));
}
.pk-mp-pin__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: var(--pk-radius-pill);
	background: var(--pk-mp-pin-bg);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.34);
	font-size: var(--fs-ui-sm);
	font-weight: var(--fw-bold);
	line-height: 1;
	white-space: nowrap;
}
.pk-mp-pin.is-promo .pk-mp-pin__pill {
	color: var(--pk-amber-text);
	border-color: var(--pk-amber-border);
}
/* Выделенный пин один для всех: тёмно-зелёный, без звёздочки (state = selected). */
.pk-mp-pin.is-selected .pk-mp-pin__pill {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.34);
}
.pk-mp-pin__star { width: 12px; height: 12px; flex: none; display: block; }
.pk-mp-pin.is-selected .pk-mp-pin__star { display: none; }
.pk-mp-pin__tail {
	width: 0;
	height: 0;
	margin-top: -1px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid var(--pk-mp-pin-bg);
}

.pk-mp-cluster {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.92);
	background: var(--pk-green-dark);
	color: #fff;
	font-family: var(--pk-font-sans);
	font-size: 16px;
	font-weight: var(--fw-black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(16, 44, 26, 0.34);
}
.pk-mp-cluster.is-m { width: 54px; height: 54px; font-size: 18px; }
.pk-mp-cluster.is-l { width: 62px; height: 62px; font-size: 18px; }

/* ---------- Карта во всё окно («Открыть карту») ----------
 * Рамка карты (`[data-pk-map-frame]`: .pk-ls-map объявления, .pk-mv-map--live
 * площадки) по клику по кнопке раскрывается слоем на весь вьюпорт. Поведение
 * вешает pk-map-public.js, здесь только вид.
 *
 * Нативный Fullscreen API сознательно не используем: iOS Safari не умеет его
 * ни на чём, кроме <video>, и кнопка на айфоне была бы мёртвой. Владельцу
 * нужна была карта во всё ОКНО - слой это и даёт, одинаково везде.
 *
 * `.pk-front` в селекторе - исключение из правила шапки этого файла: рамки
 * живут только на страницах сайта, а без него правило проигрывало бы по весу
 * собственным размерам рамки в listing.css / mesto.css (у обоих 0-2-0, и они
 * печатаются позже).
 */
.pk-front [data-pk-map-frame].is-map-full {
	position: fixed;
	inset: 0;
	z-index: 9300;
	width: auto;
	height: auto;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
}
body.pk-map-full-open { overflow: hidden; }
/* Чат-виджет и его пузырь перекрыли бы развёрнутую карту: у стороннего
   `#spotly-root` свой inline-стиль, поэтому important (тот же приём уже
   применён к нему в layout.css). */
body.pk-map-full-open #spotly-root { display: none !important; }