/*
 * Страница «Контакты» (/kontakty) — вёрстка по макету Figma (43_Контакты, 1440px).
 * Подключается только в /kontakty.php; все правила под body.page-contacts.
 */

body.page-contacts {
	--ct-blue: #375583;
	--ct-navy: #283f61;
	--ct-steel: #6b8ab7;
	--ct-red: #be1f36;
	--ct-line: #e1e1e2;
	--ct-shadow: 0 4px 16px rgba(55, 85, 131, 0.14);
}

body.page-contacts main .container {
	max-width: 1440px;
	padding-left: 120px;
	padding-right: 120px;
}

/* ---------- Hero «Мы всегда на связи» (751px) ---------- */

body.page-contacts .contacts-hero {
	position: relative;
	height: 751px;
	overflow: hidden;
	background: radial-gradient(211.84% 144.17% at 130.14% -54.23%, #6b8ab7 0%, #fff 100%);
}

body.page-contacts .contacts-hero picture,
body.page-contacts .contacts-hero__fade {
	position: absolute;
	display: block;
	pointer-events: none;
}

/* узор: BG-группа 1699x1694 в точке (248; -1058) */
body.page-contacts .contacts-hero__ornament {
	left: calc(50% - 720px + 248px);
	top: -1058px;
	width: 1699px;
	height: 1694px;
}

/* фото: 1008x710, top -102; прижато к правому краю секции на любой ширине */
body.page-contacts .contacts-hero__photo {
	right: 0;
	top: -102px;
	width: 1008px;
	height: 710px;
}

body.page-contacts .contacts-hero picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* белые «растушёвки» (линейный градиент прозрачный -> белый) */
body.page-contacts .contacts-hero__fade--a {
	right: 95px;
	top: 492px;
	width: 577px;
	height: 147px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

body.page-contacts .contacts-hero__fade--b {
	left: 0;
	right: 0;
	top: 392px;
	height: 216px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

body.page-contacts .contacts-hero .container {
	position: relative;
	z-index: 2;
	padding-top: 216px;
}

body.page-contacts .contacts-hero h1 {
	max-width: 520px;
	font-size: 56px;
	line-height: 60px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ct-blue);
}

/* ---------- карточки контактов ---------- */

body.page-contacts .contacts-cards {
	position: relative;
	z-index: 3;
	margin-top: -195px;
}

body.page-contacts .contacts-cards__list {
	display: flex;
	align-items: stretch;
	gap: 19px;
}

body.page-contacts .contacts-card {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	width: 303px;
	min-height: 237px;
	padding: 19px 23px 31px;
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--ct-shadow);
}

body.page-contacts .contacts-card--address {
	width: 510px;
}

body.page-contacts .contacts-card:last-child {
	width: 349px;
}

body.page-contacts .contacts-card__icon {
	display: block;
	width: 56px;
	height: 56px;
	margin-bottom: 36px;
}

body.page-contacts .contacts-card__icon img {
	display: block;
	width: 100%;
	height: 100%;
}

body.page-contacts .contacts-card h2 {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ct-blue);
}

body.page-contacts .contacts-card p {
	margin-top: 8px;
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--ct-navy);
}

body.page-contacts .contacts-card a.email-link {
	color: var(--ct-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.page-contacts .contacts-card a.email-link:hover {
	color: var(--ct-blue);
}

/* ---------- красный баннер «Мы в социальных сетях» (200px) ---------- */

body.page-contacts .contacts-banner {
	position: relative;
	z-index: 1;
	margin: 65px 0 68px;
	height: 200px;
	overflow: hidden;
	background: var(--ct-red);
}

/* узор: BG-группа 1270x1267 в точке (448; -168) */
body.page-contacts .contacts-banner__ornament {
	position: absolute;
	left: calc(50% - 720px + 448px);
	top: -168px;
	width: 1270px;
	height: 1267px;
	display: block;
	pointer-events: none;
}

body.page-contacts .contacts-banner__ornament img {
	display: block;
	width: 100%;
	height: 100%;
}

body.page-contacts .contacts-banner .container {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
	padding-top: 51px;
}

body.page-contacts .contacts-banner__txt {
	max-width: 500px;
}

body.page-contacts .contacts-banner h2 {
	font-size: 32px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: 0;
	color: #fff;
}

body.page-contacts .contacts-banner__txt p {
	margin-top: 14px;
	max-width: 380px;
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	letter-spacing: 0;
	color: #fff;
}

body.page-contacts .contacts-banner__socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 24px;
}

body.page-contacts .contacts-banner__socials .btn {
	height: 64px;
	padding: 16px 36px;
	gap: 8px;
	background: #fff;
	box-shadow: var(--ct-shadow);
}

body.page-contacts .contacts-banner__socials .btn:hover {
	background: #f3f4f2;
}

body.page-contacts .contacts-banner__socials .btn span {
	color: var(--ct-red);
}

body.page-contacts .contacts-banner__socials .btn img {
	width: 20px;
	height: 20px;
	filter: brightness(0) saturate(100%) invert(15%) sepia(88%) saturate(4400%) hue-rotate(344deg) brightness(88%);
}

/* ---------- адаптив (вне макета: аккуратная деградация) ---------- */

@media (max-width: 1280px) {
	body.page-contacts main .container {
		padding-left: 48px;
		padding-right: 48px;
	}

	body.page-contacts .contacts-cards__list {
		flex-wrap: wrap;
	}

	body.page-contacts .contacts-card,
	body.page-contacts .contacts-card--address,
	body.page-contacts .contacts-card:last-child {
		flex: 1 1 280px;
		width: auto;
	}
}

@media (max-width: 800px) {
	body.page-contacts main .container {
		padding-left: 24px;
		padding-right: 24px;
	}

	body.page-contacts .contacts-hero {
		height: auto;
		min-height: 620px;
	}

	body.page-contacts .contacts-hero .container {
		padding-top: 96px;
		padding-bottom: 390px;
	}

	body.page-contacts .contacts-hero h1 {
		font-size: 36px;
		line-height: 42px;
	}

	/* фото прижато к правому краю и не уходит за него: на узком экране левая часть
	   обрезается, а дети справа остаются в кадре */
	body.page-contacts .contacts-hero__photo {
		left: auto;
		right: 0;
		top: auto;
		bottom: 0;
		width: max(560px, 100%);
		height: auto;
		aspect-ratio: 1260 / 887;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px);
		mask-image: linear-gradient(180deg, transparent 0, #000 72px);
	}

	/* белая растушёвка у нижнего края hero (иначе у края остаётся полоска фото) */
	body.page-contacts .contacts-hero__fade--b {
		top: auto;
		bottom: 0;
	}

	body.page-contacts .contacts-cards {
		margin-top: -60px;
		padding-bottom: 24px;
	}

	/* фон под плашками как в макете: градиент #6b8ab7 -> белый, синий снизу слева,
	   светлый сверху справа; сверху короткая белая растушёвка для плавного стыка с фото */
	body.page-contacts .contacts-cards::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: 60px;
		right: 0;
		bottom: 0;
		left: 0;
		background:
			linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 45px),
			radial-gradient(211.84% 144.17% at -30.14% 154.23%, #6b8ab7 0%, #fff 100%);
		pointer-events: none;
	}

	body.page-contacts .contacts-banner {
		height: auto;
		margin-top: 0;
		padding-bottom: 40px;
	}

	/* «Мы в социальных сетях»: всё по центру, кнопка MAX переносится вниз тоже по центру */
	body.page-contacts .contacts-banner .container {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	body.page-contacts .contacts-banner__txt p {
		margin-right: auto;
		margin-left: auto;
	}

	body.page-contacts .contacts-banner h2 {
		font-size: 28px;
		line-height: 34px;
	}

	body.page-contacts .contacts-banner__socials {
		justify-content: center;
	}

	body.page-contacts .contacts-banner__socials .btn {
		height: 52px;
		padding: 12px 28px;
	}
}