/* Страница «Контакты»: чёрный верх с фоновой сеткой первого экрана, ниже таблица контактов и карта 2ГИС
	в одной сетке с крестиками, затем блок заявки с главной */

/* ---------- Верх страницы ---------- */
.cpage-hero {
	position: relative;
	padding: calc(var(--header-top) + var(--header-h) + var(--space-xl)) var(--gutter) var(--space-xl);
	overflow: hidden;
	background: var(--c-black);
	color: var(--c-white);
}

.cpage-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--space-m) clamp(24px, 4vw, 64px);
	max-width: var(--container);
	margin: 0 auto;
}

.cpage-hero__title {
	grid-column: 1 / -1;
	font-size: var(--fs-display);
	font-weight: var(--fw-regular);
	line-height: 1;
	letter-spacing: -0.04em;
}

/* статус — та же строка, что в блоке заявки, но на чёрном и без линий */
.cpage-hero__status {
	grid-row: auto; /* в блоке заявки статус привязан к строке сетки — здесь нет */
	min-height: 0;
	padding: 0;
	border: 0;
	color: var(--text-muted-dark);
}

.cpage-hero__status b {
	color: var(--c-white);
}

.cpage-hero__coord {
	color: var(--text-muted-dark);
}

/* ---------- Контакты и карта ---------- */
.cpage {
	--line: var(--grid-line);
	--cross: var(--grid-cross);
	--row: 64px;
	--pad: clamp(20px, 2.4vw, 32px);
	--label: 132px;
	padding: var(--space-xl) var(--gutter) 0;
	background: var(--bg-light);
	color: var(--text-on-light);
}

.cpage__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	max-width: var(--container);
	margin: 0 auto;
	border: 1px solid var(--line); /* taste-skill-ignore: сетка — фирменный приём */
}

/* Крестики по углам таблицы и на стыке колонок */
.cpage__grid::before,
.cpage__grid::after,
.cpage__facts::before,
.cpage__facts::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 11px;
	height: 11px;
	background:
		linear-gradient(var(--cross), var(--cross)) center / 1px 100% no-repeat, /* taste-skill-ignore: крестик сетки */
		linear-gradient(var(--cross), var(--cross)) center / 100% 1px no-repeat; /* taste-skill-ignore: крестик из двух линий */
	pointer-events: none;
}

.cpage__grid::before { left: -6px; top: -6px; }
.cpage__grid::after { right: -6px; bottom: -6px; }
.cpage__facts::before { right: -6px; top: -6px; }
.cpage__facts::after { right: -6px; bottom: -6px; }

.cpage__facts {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	border-right: 1px solid var(--line); /* taste-skill-ignore: граница колонки */
}

/* Строка контакта: подпись в колонке той же ширины, что у полей бланка; высота кратна строке сетки */
.cpage__fact {
	display: grid;
	grid-template-columns: var(--label) minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	min-height: calc(var(--row) * 1.5);
	padding: 16px var(--pad);
}

.cpage__fact + .cpage__fact {
	border-top: 1px solid var(--line); /* taste-skill-ignore: линия строки */
}

/* последняя строка забирает остаток высоты — низ колонки совпадает с низом карты */
.cpage__fact:last-child {
	flex: 1;
	align-items: start;
	padding-top: 24px;
}

.cpage__fact dt {
	color: var(--text-muted-ink);
}

.cpage__fact dd {
	min-width: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
}

.cpage__fact:last-child dt {
	padding-top: 3px;
}

/* Карта: в монохроме, чтобы не спорить с палитрой; при наведении и фокусе — в цвете */
.cpage__map {
	--vf: 16px;
	position: relative;
	min-height: 600px;
}

.cpage__map::before {
	z-index: 1;
	inset: 12px;
	opacity: 1;
	scale: 1;
	pointer-events: none;
}

.cpage__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 600px;
	border: 0;
	filter: grayscale(1) contrast(1.05);
	transition: filter var(--dur-base) var(--ease-out);
}

.cpage__map:hover iframe,
.cpage__map:focus-within iframe {
	filter: none;
}

/* Блок заявки на этой странице: телефон, почта и статус уже в таблице выше — слева только заголовок */
.cpage + .contact {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-2xl); /* на главной следующий блок светлый и отступ общий; здесь дальше подвал */
}

.cpage + .contact .contact__head {
	grid-row: 1 / -1;
}

.cpage + .contact .contact__status,
.cpage + .contact .contact__facts {
	display: none;
}

@media (max-width: 1100px) {
	.cpage__grid { grid-template-columns: 1fr; }
	.cpage__facts { border-right: 0; border-bottom: 1px solid var(--line); /* taste-skill-ignore */ }
	.cpage__facts::before { display: none; }
	.cpage__facts::after { left: -6px; right: auto; }
	.cpage__map,
	.cpage__map iframe { min-height: 440px; }
}

@media (max-width: 640px) {
	.cpage { --pad: 20px; }
	.cpage-hero__inner { grid-template-columns: 1fr; }
	.cpage__fact { grid-template-columns: 1fr; gap: 6px; min-height: var(--row); }
	.cpage__map,
	.cpage__map iframe { min-height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
	.cpage__map iframe { transition: none; }
}