/*
 * Интерактивная карта России на первом экране главной.
 *
 * Разметка — template-parts/hero-map.php, поведение — assets/js/map.js.
 * Суша остаётся зелёной (--color-land-*, тон фирменного знака), маршруты,
 * интерфейс и подписи используют стальной акцент темы.
 */

/* ── Раскладка первого экрана ─────────────────────────────────────────────── */

/* Карте отдана широкая колонка: контур страны вытянут по горизонтали. */
.ntr-hero--map .ntr-hero__grid {
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	align-items: center;
}

/* ── Карточка карты ───────────────────────────────────────────────────────── */

.ntr-hero__map {
	/* Гасим правила .ntr-map со страницы контактов. */
	aspect-ratio: auto;
	background: var(--color-bg);
	width: 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--color-divider);
}

.ntr-map__head {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-divider);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
}

.ntr-map__head-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ntr-map__head-status {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
	color: var(--color-accent-700);
}

/* ── Сцена ────────────────────────────────────────────────────────────────── */

.ntr-map__scene {
	grid-column: 1 / -1;
	grid-row: 2;
	position: relative;
	min-height: 520px;
	display: grid;
	place-items: center;
	overflow: hidden;
	perspective: 1300px;
	perspective-origin: 50% 46%;
	cursor: grab;
	/* Вертикальная прокрутка страницы пальцем остаётся за браузером. */
	touch-action: pan-y;
}

.ntr-map__scene.is-dragging {
	cursor: grabbing;
}

.ntr-map--flat .ntr-map__scene {
	cursor: default;
}

.ntr-map__stage {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
	transform:
		translate3d(0, var(--ntr-map-ty, 0px), 0)
		rotateX(46deg)
		rotateZ(var(--ntr-map-rz, -2deg))
		scale(var(--ntr-map-scale, 1.04));
	transition: transform 0.1s linear;
	will-change: transform;
	filter: drop-shadow(0 16px 20px rgba(43, 43, 45, 0.16));
}

.ntr-map__scene.is-dragging .ntr-map__stage {
	transition: none;
}

.ntr-map__svg {
	width: 100%;
	height: 100%;
	display: block;
	user-select: none;
	-webkit-user-select: none;
}

/* ── Суша ─────────────────────────────────────────────────────────────────── */

.ntr-map__land {
	fill: url(#ntr-map-land);
	stroke: var(--color-land-700);
	stroke-width: 1.55;
	vector-effect: non-scaling-stroke;
	filter: url(#ntr-map-glow);
}

.ntr-map__coast {
	fill: none;
	stroke: var(--color-land-100);
	stroke-opacity: 0.6;
	stroke-width: 0.8;
	vector-effect: non-scaling-stroke;
}

/* ── Маршруты и дроны ─────────────────────────────────────────────────────── */

.ntr-map__flight {
	transition: opacity 0.25s;
}

.ntr-map__route {
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 5 7;
	opacity: 0.8;
	vector-effect: non-scaling-stroke;
	animation: ntr-map-dash 1.8s linear infinite;
	transition: stroke-width 0.25s, opacity 0.25s;
}

.ntr-map__drone-body {
	fill: var(--color-accent-700);
	stroke: var(--color-neutral-100);
	stroke-width: 0.7;
}

.ntr-map__drone-halo {
	fill: var(--color-accent-300);
	opacity: 0.35;
}

@keyframes ntr-map-dash {
	to { stroke-dashoffset: -24; }
}

/* ── Точки ────────────────────────────────────────────────────────────────── */

.ntr-map__point {
	cursor: pointer;
	transition: opacity 0.25s;
}

.ntr-map__pulse {
	fill: var(--color-land-400);
	opacity: 0.22;
	transform-box: fill-box;
	transform-origin: center;
	animation: ntr-map-pulse 2.4s ease-in-out infinite;
}

.ntr-map__halo {
	fill: none;
	stroke: var(--color-accent-400);
	stroke-width: 1;
	stroke-dasharray: 3 4;
	opacity: 0.85;
}

.ntr-map__ring {
	fill: none;
	stroke: var(--color-land-700);
	stroke-width: 1.2;
	opacity: 0.9;
}

.ntr-map__core {
	fill: var(--color-land-600);
	stroke: var(--color-neutral-100);
	stroke-width: 1.3;
}

.ntr-map__stem {
	stroke: var(--color-land-700);
	stroke-width: 1;
	opacity: 0.7;
}

.ntr-map__label {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	fill: var(--color-land-800);
	/* Белая обводка под текстом — подписи читаются поверх заливки суши. */
	paint-order: stroke;
	stroke: #fff;
	stroke-width: 3.4px;
	stroke-linejoin: round;
	pointer-events: none;
}

/* Объекты НТР — стальным акцентом, чтобы отличались от городов-ориентиров. */
.ntr-map__point--hq .ntr-map__pulse,
.ntr-map__point--site .ntr-map__pulse {
	fill: var(--color-accent-400);
	opacity: 0.26;
}

.ntr-map__point--hq .ntr-map__ring,
.ntr-map__point--site .ntr-map__ring {
	stroke: var(--color-accent-700);
	stroke-width: 1.6;
	opacity: 1;
}

.ntr-map__point--hq .ntr-map__core,
.ntr-map__point--site .ntr-map__core {
	fill: var(--color-accent-700);
}

.ntr-map__point--hq .ntr-map__stem,
.ntr-map__point--site .ntr-map__stem {
	stroke: var(--color-accent-700);
	opacity: 0.9;
}

.ntr-map__point--hq .ntr-map__label,
.ntr-map__point--site .ntr-map__label {
	fill: var(--color-accent-900);
	font-size: 13px;
}

.ntr-map__point--hq .ntr-map__label {
	font-size: 14px;
	letter-spacing: 0.08em;
}

.ntr-map__point--hq .ntr-map__halo {
	stroke: var(--color-accent-700);
	stroke-dasharray: 4 3;
}

.ntr-map__point--hq .ntr-map__pulse {
	animation-duration: 2s;
}

@keyframes ntr-map-pulse {
	50% { transform: scale(1.5); opacity: 0.07; }
}

/* ── Состояния ────────────────────────────────────────────────────────────── */

.ntr-map__point.is-dimmed,
.ntr-map__flight.is-dimmed {
	opacity: 0.22;
}

.ntr-map__point.is-active .ntr-map__ring {
	stroke: var(--color-accent);
	stroke-width: 2;
	opacity: 1;
}

.ntr-map__point.is-active .ntr-map__core {
	fill: var(--color-accent);
}

.ntr-map__point.is-active .ntr-map__label {
	fill: var(--color-accent-900);
}

.ntr-map__flight.is-highlighted .ntr-map__route {
	stroke: var(--color-accent-700);
	stroke-width: 2.8;
	opacity: 1;
}

.ntr-map__focus {
	fill: transparent;
	stroke: var(--color-accent-800);
	stroke-width: 1.5;
	stroke-dasharray: 3 3;
	opacity: 0;
	pointer-events: none;
}

.ntr-map__point:focus {
	outline: none;
}

.ntr-map__point:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.ntr-map__point:focus-visible .ntr-map__focus {
	opacity: 1;
}

/* ── Панель управления ────────────────────────────────────────────────────── */

.ntr-map__controls {
	grid-area: 1 / 1;
	justify-self: end;
	align-self: end;
	z-index: 2;
	margin: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ntr-map__controls .btn {
	background: var(--color-bg);
	color: var(--color-accent-800);
}

.ntr-map__controls .btn:hover {
	background: var(--color-accent-100);
}

/* Перебиваем `.ntr-map svg { width:100% }` из style.css. */
.ntr-map__controls .btn svg {
	width: 16px;
	height: 16px;
}

/* ── Сведения и легенда ───────────────────────────────────────────────────── */

.ntr-map__info {
	grid-column: 1;
	grid-row: 3;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: var(--space-3);
	border-left: 2px solid var(--color-accent);
}

.ntr-map__info-title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 18px;
	line-height: 1.15;
}

.ntr-map__info-note {
	font-size: 13px;
	line-height: 1.35;
	color: var(--color-neutral-700);
}

.ntr-map__legend {
	grid-column: 2;
	grid-row: 3;
	align-self: end;
	justify-self: end;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px 14px;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
}

.ntr-map__legend li {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.ntr-map__legend-mark {
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: 50%;
}

.ntr-map__legend-mark--site {
	background: var(--color-accent-700);
	box-shadow: 0 0 0 2px var(--color-accent-200);
}

.ntr-map__legend-mark--city {
	background: var(--color-land-600);
	box-shadow: 0 0 0 2px var(--color-land-200);
}

.ntr-map__legend-mark--route {
	width: 18px;
	height: 0;
	border-radius: 0;
	border-top: 2px dashed var(--color-accent);
}

/* ── Адаптив ──────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.ntr-map__scene { min-height: 440px; }
	.ntr-hero__map { padding: var(--space-3); }
}

@media (max-width: 900px) {
	/* Одна колонка: карта уходит под текст первого экрана. */
	.ntr-hero--map .ntr-hero__grid { grid-template-columns: 1fr; }
	.ntr-map__scene { min-height: 340px; }
}

@media (max-width: 700px) {
	.ntr-hero__map {
		grid-template-columns: minmax(0, 1fr);
	}

	.ntr-map__info,
	.ntr-map__legend {
		grid-column: 1;
		justify-self: stretch;
		justify-content: flex-start;
	}

	.ntr-map__legend { grid-row: 4; }
	.ntr-map__scene { min-height: 300px; }
	.ntr-map__head { font-size: 10px; letter-spacing: 0.08em; }
}

@media (max-width: 560px) {
	.ntr-map__scene { min-height: 260px; }
	.ntr-map__info-title { font-size: 16px; }
	.ntr-map__controls { margin: var(--space-2); gap: 4px; }
	.ntr-map__controls .btn { width: 32px; height: 32px; }
}

/* ── Пониженная подвижность ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ntr-map__pulse,
	.ntr-map__route,
	.ntr-map .ntr-blink {
		animation: none;
	}

	.ntr-map__stage {
		transition: none;
	}
}

/* Класс ставит JS: автоповорот выключен, движение сведено к минимуму. */
.ntr-map.is-static .ntr-map__pulse,
.ntr-map.is-static .ntr-map__route,
.ntr-map.is-static .ntr-blink {
	animation: none;
}

.ntr-map.is-static .ntr-map__stage {
	transition: none;
}