/* ══════════════════════════════════════
   БЛОК «ГЕОГРАФИЯ СООБЩЕСТВА» (карта России)
   Namespace: .vmp-map__*. Токены — из main.css (main.css подключается
   раньше, см. header.php), своей палитры не заводим.
══════════════════════════════════════ */

.map-section { background: var(--bg); }

.vmp-map__inner {
	display: grid;
	grid-template-columns: minmax(280px, .72fr) minmax(0, 1.55fr);
	gap: clamp(34px, 5vw, 82px);
	align-items: center;
}

.vmp-map__copy h2 { max-width: 480px; }

.vmp-map__lead {
	max-width: 460px;
	margin: 16px 0 0;
	color: var(--text-muted);
	font-size: 1.05rem;
	line-height: 1.6;
}

.vmp-map__stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.vmp-map__stat {
	min-width: 122px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
}
.vmp-map__stat strong {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	color: var(--ink-900);
	font-size: 1.5rem;
	line-height: 1;
	margin-bottom: 5px;
	font-variant-numeric: tabular-nums;
}
.vmp-map__stat span { color: var(--text-muted); font-size: .78rem; line-height: 1.25; }

.vmp-map__hint {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	color: var(--text-muted);
	font-size: .85rem;
}
.vmp-map__hint-dot {
	width: 10px; height: 10px;
	border-radius: var(--radius-full);
	background: var(--accent-500);
	box-shadow: 0 0 0 5px var(--accent-100);
}

.vmp-map__stage {
	position: relative;
	min-width: 0;
	padding: clamp(14px, 2.5vw, 24px);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
}

.vmp-map__canvas { position: relative; width: 100%; aspect-ratio: 1000 / 520; }

.vmp-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.vmp-map__country {
	fill: var(--sand-150);
	stroke: var(--border-strong);
	stroke-width: 2.2;
	vector-effect: non-scaling-stroke;
}

.vmp-map__point {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--accent-500);
	box-shadow: 0 0 0 5px var(--accent-100), 0 5px 12px rgba(0, 15, 45, .24);
	cursor: pointer;
	z-index: 4;
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.vmp-map__point::before {
	content: "";
	position: absolute;
	inset: -8px;
	border: 1px solid var(--accent-300);
	border-radius: inherit;
	animation: vmpPulse 2.4s infinite;
}
.vmp-map__point:hover,
.vmp-map__point:focus-visible,
.vmp-map__point.is-active {
	transform: translate(-50%, -50%) scale(1.28);
	box-shadow: 0 0 0 7px var(--accent-100), 0 8px 18px rgba(0, 15, 45, .28);
}

@keyframes vmpPulse {
	0%, 100% { transform: scale(.75); opacity: 0; }
	30% { opacity: .75; }
	70% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.vmp-map__point::before { animation: none; }
	.vmp-map__point { transition: none; }
}

.vmp-map__tooltip {
	position: absolute;
	left: 0; top: 0;
	width: min(265px, calc(100vw - 48px));
	padding: 16px;
	border-radius: var(--radius-md);
	background: var(--ink-900);
	box-shadow: var(--shadow-lg);
	color: var(--on-ink);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, calc(-100% - 18px)) scale(.96);
	transform-origin: 50% 100%;
	pointer-events: none;
	z-index: 10;
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease);
}
.vmp-map__tooltip.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, calc(-100% - 18px)) scale(1);
	pointer-events: auto;
}
.vmp-map__tooltip::after {
	content: "";
	position: absolute;
	left: 50%; bottom: -7px;
	width: 14px; height: 14px;
	background: var(--ink-900);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 2px;
}
.vmp-map__tooltip-city { margin: 0; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; font-weight: 700; }
.vmp-map__tooltip-count { margin: 7px 0 13px; color: var(--on-ink-muted); font-size: .82rem; }
.vmp-map__tooltip-link {
	position: relative; z-index: 2;
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--accent-on-ink);
	font-size: .82rem; font-weight: 700;
	text-decoration: none;
}
.vmp-map__tooltip-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.vmp-map__telegram-icon { width: 17px; height: 17px; flex: 0 0 auto; }

.vmp-map__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
	padding: 0 6px 4px;
	color: var(--text-faint);
	font-size: .74rem;
}

@media (max-width: 1050px) {
	.vmp-map__inner { grid-template-columns: 1fr; gap: 34px; }
	.vmp-map__copy h2 { max-width: 640px; }
	.vmp-map__lead { max-width: 640px; }
}

@media (max-width: 640px) {
	.vmp-map__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vmp-map__stat { min-width: 0; }
	.vmp-map__stage { padding: 10px; overflow: visible; }
	.vmp-map__canvas { aspect-ratio: 1000 / 620; }
	.vmp-map__svg { top: 9%; height: 82%; }
	.vmp-map__point { width: 14px; height: 14px; }
	.vmp-map__footer { display: none; }
	.vmp-map__tooltip { width: min(236px, calc(100vw - 40px)); padding: 14px; }
}