/* Карта на странице контактов. Файл вне общего site.css (см. gulpfile.js):
   нужен только здесь и подключается после site.css, поэтому его правила
   перекрывают прежние .contact_conteiner и .map с той же специфичностью. */

.contact_conteiner {
	padding: 0;
	overflow: hidden;
	min-height: 440px;
}

.contact_conteiner .map {
	position: relative;
	flex: 0 0 50%;
	width: 50%;
	min-height: 440px;
	border-radius: 0;
	background: #e8ecf2;
}

.contact_conteiner .contact-company {
	padding-top: 28px;
	padding-bottom: 28px;
}

.map__canvas {
	position: absolute;
	inset: 0;
}

.map__canvas iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Подложка в спокойной серо-синей гамме, чтобы метка ТРЕК была главным на
   карте. Классы Яндекса с номером версии (ymaps-2-1-79-...), поэтому опора
   на часть имени. Метка и кнопки лежат в других слоях и фильтр не получают. */
.map__canvas [class*="ground-pane"] {
	filter: grayscale(1) sepia(.2) hue-rotate(178deg) saturate(1.6) brightness(.97) contrast(1.08);
}

/* Кнопка сверху слева: внизу слева у Яндекса свои служебные кнопки. */
.map__route {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 8px;
	background: #FFD520;
	color: #1f2a3c;
	font-family: Jost, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(31, 42, 60, .22);
	transition: background-color .15s ease, transform .15s ease;
}

.map__route:hover {
	background: #ffcb05;
	transform: translateY(-1px);
}

.map__route:focus-visible {
	outline: 2px solid #315DA8;
	outline-offset: 2px;
}

.map__route svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Метка: слой Яндекса ставит начало координат ровно в точку завода. */
.trekPin {
	position: absolute;
	left: 0;
	top: 0;
	font-family: Jost, sans-serif;
}

.trekPin__pulse {
	position: absolute;
	left: -18px;
	top: -18px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(49, 93, 168, .28);
	animation: trekPinPulse 2.4s ease-out infinite;
}

.trekPin__dot {
	position: absolute;
	left: -6px;
	top: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #FFD520;
	border: 3px solid #315DA8;
	box-sizing: border-box;
}

.trekPin__stem {
	position: absolute;
	left: -1.5px;
	top: -22px;
	width: 3px;
	height: 18px;
	background: #315DA8;
}

.trekPin__badge {
	position: absolute;
	left: -30px;
	top: -80px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #315DA8;
	border: 3px solid #fff;
	box-sizing: border-box;
	box-shadow: 0 8px 20px rgba(20, 42, 84, .35);
	display: flex;
	align-items: center;
	justify-content: center;
}

.trekPin__badge svg {
	width: 30px;
	height: 30px;
}

.trekPin__label {
	position: absolute;
	left: 40px;
	top: -72px;
	white-space: nowrap;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(20, 42, 84, .18);
	color: #1f2a3c;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

.trekPin__label small {
	display: block;
	margin-top: 2px;
	color: #6b7383;
	font-size: 12px;
	font-weight: 400;
}

@keyframes trekPinPulse {
	0% { transform: scale(.4); opacity: 1; }
	100% { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.trekPin__pulse { animation: none; opacity: .6; }
}

/* До 900px блок идёт в одну колонку: карта сверху во всю ширину. */
@media (max-width: 900px) {
	.contact_conteiner {
		flex-direction: column;
		min-height: 0;
	}

	.contact_conteiner .map {
		flex: none;
		width: 100%;
		min-height: 320px;
	}

	.contact_conteiner .contact-company {
		margin-left: 0;
		padding: 24px 16px;
	}
}

/* На узком экране подпись у метки не помещается рядом с кругом. */
@media (max-width: 499px) {
	.contact_conteiner .map {
		min-height: 280px;
	}

	.trekPin__label {
		display: none;
	}

	.map__route {
		left: 12px;
		top: 12px;
		padding: 9px 14px;
		font-size: 14px;
	}
}