/*
 * Страница «Контакты» сайта услуг (public/kontakty/services.php).
 *
 * Отдельный файл, а не пара правил в promo.css: страница одна, правил два
 * десятка, и держать их вместе с рекламными блоками значит однажды сломать
 * контакты, правя лендинг. Все цвета — токенами landing.css: страница обязана
 * перекраситься вместе с сайтом.
 */

/* ── Первый экран ────────────────────────────────────────────────────────── */

.kont-hero { padding-bottom: 8px; }

/* Текст слева, картинка справа. Пропорция 1.05fr / 1fr, а не поровну: слева
   живой текст с кнопками, справа декорация — ей уступать первой. */
.kont-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 48px;
	align-items: center;
}

.kont-hero__text .badge { margin-bottom: 14px; }

.kont-hero__text h1 {
	margin: 0 0 14px;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.12;
	text-wrap: balance;
}

.kont-hero__lead {
	margin: 0 0 26px;
	max-width: 30em;
	color: var(--muted);
	font-size: 16.5px;
	line-height: 1.6;
}

/* Блок связи здесь без белой карточки: он и так лежит на белом фоне первого
   экрана, вторая подложка добавила бы рамку внутри рамки. */
.kont-hero__ways {
	max-width: 460px;
	padding: 0;
	background: none;
	box-shadow: none;
}

.kont-hero__art img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Каналы связи ────────────────────────────────────────────────────────── */

.kont-ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin-top: 28px;
}

/* Карточка целиком кликабельна: у неё один адресат, и заставлять целиться в
   ссылку внутри — лишняя работа для пальца на телефоне. */
.kont-way {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.kont-way:hover,
.kont-way:focus-visible {
	border-color: var(--blue);
	box-shadow: 0 18px 40px -24px rgba(8, 15, 40, .5);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.kont-way { transition: none; }
	.kont-way:hover,
	.kont-way:focus-visible { transform: none; }
}

.kont-way__top { display: flex; align-items: center; gap: 10px; }

.kont-way__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 10px;
	background: var(--tint);
	color: var(--blue);
}

.kont-way__icon .ico { width: 18px; height: 18px; }

.kont-way__title {
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.kont-way__value {
	color: var(--blue);
	font-size: 19px;
	font-weight: 700;
	/* Длинная почта не должна распирать карточку. */
	overflow-wrap: anywhere;
}

.kont-way__note {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.5;
}

/* ── Адрес и карта ───────────────────────────────────────────────────────── */

.kont-place {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: 28px;
	margin-top: 28px;
	align-items: start;
}

.kont-place__address {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
}

/* Часы работы — плашкой, а не строкой в списке: человек, решающий звонить
   сейчас или писать, ищет их глазами первыми. */
.kont-place__hours {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: var(--radius);
	background: var(--tint);
	color: var(--blue-dark);
	font-size: 14.5px;
	line-height: 1.55;
}

.kont-place__hours b { font-size: 16px; font-weight: 700; }

.kont-place__list {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
	color: var(--muted);
	font-size: 15px;
}

/* Галочка рисуется псевдоэлементом, а не символом в тексте: так она не
   попадёт в буфер, когда человек копирует адрес. */
.kont-place__list li {
	display: flex;
	gap: 10px;
	line-height: 1.5;
}

.kont-place__list li::before {
	content: "✓";
	flex: none;
	color: var(--blue);
	font-weight: 700;
}

.kont-place__acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Карта в рамке с тем же радиусом, что у карточек. `aspect-ratio` вместо
   высоты в пикселях: на узком экране высокая карта занимала бы весь экран. */
.kont-place__map {
	position: relative;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--tint);
}

.kont-place__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ── Реквизиты ───────────────────────────────────────────────────────────── */

/*
 * Реквизиты — белая карточка со строками «подпись → значение».
 *
 * ⚠ Не таблица. Пробовали `.cmp`: она свёрстана под «Работа | Цена», где второй
 * столбец число и прижат вправо, — реквизиты в ней разъезжались, между подписью
 * и значением зияла пустота во всю ширину страницы.
 */
.kont-req {
	max-width: 760px;
	margin: 28px auto 0;
	padding: 8px 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
}

.kont-req__row {
	display: grid;
	/* Колонка подписи фиксированной ширины: иначе «ИНН» и «Полное название»
	   получили бы разные отступы, и значения не выстроились бы по одной линии. */
	grid-template-columns: 190px 1fr;
	gap: 8px 20px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
}

.kont-req__row:first-child { border-top: 0; }

/* Подпись приглушаем: глаз ищет значение, а не название строки. */
.kont-req__key {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.5;
}

.kont-req__val {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.5;
	/* Цифры ИНН и МФО выстраиваются столбиком — так их проще переписывать. */
	font-variant-numeric: tabular-nums;
	/* Длинное название банка не должно распирать карточку. */
	overflow-wrap: anywhere;
}

@media (max-width: 620px) {
	.kont-req { padding: 4px 18px; }
	/* На телефоне подпись над значением: 190 px под подпись отняли бы у
	   значения половину строки, и банк переносился бы по слогам. */
	.kont-req__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}

/* ── Узкие экраны ────────────────────────────────────────────────────────── */

/* 900px — та же точка, что у остальных двухколоночных блоков сайта (.cta__grid
   в landing.css). Своя точка перелома здесь означала бы, что страница ломается
   не там, где ломается всё остальное. */
@media (max-width: 900px) {
	.kont-hero__inner { grid-template-columns: 1fr; gap: 28px; }
	.kont-place { grid-template-columns: 1fr; }

	/* Картинка на узком экране уходит под текст и сжимается: она декоративная,
	   и занимать половину первого экрана ей незачем. */
	.kont-hero__art { max-width: 460px; margin: 0 auto; order: 2; }
}

@media (max-width: 620px) {
	.kont-hero__ways { max-width: none; }
	.kont-place__acts .btn { flex: 1 1 140px; justify-content: center; }
}