/* Сквозной подвал: закрывает страницу, а не повторяет форму над ним. */
.lp.lp-site-footer {
	padding: var(--lp-space-2xl) 0 var(--lp-space-xl);
	background: var(--lp-field-deep);
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-site-footer__inner {
	display: grid;
	gap: var(--lp-space-xl);
}

.lp .lp-site-footer__brand > a {
	display: inline-block;
}

.lp .lp-site-footer__logo {
	width: auto;
	height: 2.25rem;
}

.lp .lp-site-footer__wordmark {
	font-family: var(--lp-font-display);
	font-size: var(--lp-text-h3);
	color: var(--lp-ink);
	text-transform: uppercase;
}

.lp .lp-site-footer__caption,
.lp .lp-site-footer__legal,
.lp .lp-site-footer__policy {
	font-size: var(--lp-text-sm);
	line-height: 1.55;
	color: var(--lp-ink-muted);
}

.lp .lp-site-footer__caption {
	margin-top: var(--lp-space-sm);
	max-width: 18rem;
}

/*
 * Меню подвала — две колонки: услуги и решения, до пяти ссылок в каждой.
 *
 * auto-fit, а не жёсткие две колонки: на телефоне пара колонок из прописных
 * надписей превращается в две башни по три строки каждая, и читать их
 * тяжелее, чем один столбик. Ниже порога колонка складывается сама,
 * без отдельного медиазапроса.
 *
 * ПОРОГ 10rem, А НЕ 11rem. При 11rem паре колонок нужно 384 пикселя вместе
 * с зазором, а на экране 1024 средней колонке подвала достаётся 377 — меню
 * складывалось в столбик из-за семи пикселей. 10rem дают запас и при этом
 * оставляют телефон однoколоночным: там средней колонке достаётся 335.
 */
.lp .lp-site-footer__nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--lp-space-md) var(--lp-space-lg);
}

/*
 * Заголовок колонки набран мельче и приглушённее ссылок: это подпись
 * к списку, а не первый его пункт. Тот же приём, что у колонок мегаменю.
 */
.lp .lp-site-footer__nav-title {
	margin: 0 0 var(--lp-space-2xs);
	font-size: var(--lp-text-micro);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-site-footer__menu {
	display: grid;
	gap: var(--lp-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-site-footer__nav a,
.lp .lp-site-footer__phone,
.lp .lp-site-footer__policy {
	display: inline-flex;
	min-height: 2.5rem;
	align-items: center;
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--lp-ink);
}

.lp .lp-site-footer__phone {
	font-size: var(--lp-text-sm);
	letter-spacing: var(--lp-tracking-nav);
}

.lp .lp-site-footer__meta {
	display: grid;
	align-content: start;
	gap: var(--lp-space-2xs);
	justify-items: start;
}

/*
 * МЕССЕНДЖЕРЫ В ПОДВАЛЕ СО СЛОВАМИ, А НЕ ОДНИМИ ЗНАЧКАМИ. В шапке значок
 * стоит один: там борьба за каждый пиксель ширины. В подвале место есть,
 * а человек, дошёдший до низа страницы, ищет контакт глазами и
 * читает, а не угадывает кружок по цвету.
 */
.lp .lp-site-footer__messengers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-space-2xs) var(--lp-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-site-footer__messenger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--lp-ink);
}

.lp .lp-site-footer__messenger-icon {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
}

.lp .lp-site-footer__legal {
	padding-top: var(--lp-space-md);
	border-top: 1px solid var(--lp-line);
}

.lp .lp-site-footer__legal p + p {
	margin-top: var(--lp-space-2xs);
}

.lp .lp-site-footer a:hover {
	color: var(--lp-crimson);
}

/*
 * ПЛАНШЕТ: ДВА РЯДА, А НЕ ТРИ КОЛОНКИ. Меню теперь занимает вдвое больше
 * места, чем прежний одинокий список, и в ряд из трёх колонок оно влезает
 * только за счёт контактов — надписи мессенджеров и ссылка на политику
 * начинают вылезать за край страницы.
 *
 * Поэтому здесь меню уходит на свой ряд во всю ширину: обе его колонки
 * помещаются рядом, а бренду и контактам достаётся ряд выше целиком.
 */
@media (min-width: 48em) {
	.lp .lp-site-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.lp .lp-site-footer__nav,
	.lp .lp-site-footer__legal {
		grid-column: 1 / -1;
	}
}

/*
 * От 1280px всё встаёт в один ряд: бренд, меню, контакты.
 *
 * НЕ ОТ 1024px, ХОТЯ ФОРМАЛЬНО ВЛЕЗАЕТ. Влезает впритык: колонке меню
 * достаётся 172 пикселя, и «Для продавцов на маркетплейсах» ложится в них
 * тремя строками. Ряд из трёх колонок ради этого не стоит второго ряда:
 * подвал не экономит высоту, он закрывает страницу.
 */
@media (min-width: 80em) {
	.lp .lp-site-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
	}

	.lp .lp-site-footer__nav {
		grid-column: auto;
	}
}

/* Диалог вынесен из потока и делит тот же визуальный язык, что форма. */
.lp.lp-project-modal {
	/*
	 * Поле вокруг окна названо переменной, потому что его знают ДВОЕ: сам
	 * контейнер задаёт им отступ, а окно вычитает его же из высоты экрана.
	 * Пока это было два независимых значения, они разъезжались: отступ
	 * ужимался на низком экране, а предельная высота считалась по-старому,
	 * и окну не доставалось выигранного места.
	 */
	--lp-modal-pad: var(--lp-gutter);

	position: fixed;
	inset: 0;
	z-index: calc(var(--lp-z-float) + 10);
	display: grid;
	place-items: center;
	padding: var(--lp-modal-pad);
}

.lp.lp-project-modal[hidden] {
	display: none;
}

.lp .lp-project-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 7, 8, 0.78);
	backdrop-filter: blur(8px);
}

/*
 * ОКНО ВМЕЩАЕТ ФОРМУ ЦЕЛИКОМ, БЕЗ ПРОКРУТКИ.
 *
 * Раньше здесь стоял потолок в 46rem — 736 пикселей при содержимом в 827.
 * Окно резалось даже на экране 1600×900, где места хватало с запасом:
 * потолок не пускал. Числа взялись из ниоткуда и ничего не защищали,
 * поэтому единственным ограничителем осталась высота окна браузера.
 *
 * Прокрутка оставлена НАРОЧНО, но теперь она страховка, а не режим работы:
 * на телефоне в альбомной ориентации (окно ниже 500 пикселей) форма не
 * поместится ни при какой вёрстке, и без overflow кнопка отправки стала бы
 * недостижимой. Плотность содержимого подобрана так, чтобы на обычных
 * экранах прокрутка не появлялась вовсе.
 */
.lp .lp-project-modal__dialog {
	position: relative;
	width: min(100%, 35rem);
	max-height: calc(100svh - (var(--lp-modal-pad) * 2));
	overflow: auto;
	padding: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);
	color: var(--lp-ink);
	background: var(--lp-burgundy-panel);
	border: 1px solid var(--lp-line-control);
	box-shadow: var(--lp-frame-shadow);
}

.lp .lp-project-modal__close {
	position: absolute;
	top: var(--lp-space-sm);
	right: var(--lp-space-sm);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	font-size: 2rem;
	line-height: 1;
	color: var(--lp-ink);
	background: transparent;
	border: 1px solid var(--lp-line-control);
	cursor: pointer;
}

.lp .lp-project-modal__title {
	padding-right: 3rem;
}

.lp .lp-project-modal__lead {
	margin-top: var(--lp-space-sm);
	max-width: 30rem;
	color: var(--lp-ink);
}

/* Шаг между полями плотнее, чем в секционной форме: окно ограничено высотой. */
.lp .lp-project-modal__form {
	display: grid;
	gap: var(--lp-space-sm);
	margin-top: var(--lp-space-md);
}

.lp .lp-project-modal .lp-field {
	display: grid;
	gap: var(--lp-space-2xs);
}

.lp .lp-project-modal .lp-field__label {
	font-size: var(--lp-text-micro);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
}

.lp .lp-project-modal .lp-field__label span {
	margin-left: var(--lp-space-2xs);
	font-weight: var(--lp-weight-regular);
	letter-spacing: 0;
	text-transform: none;
}

.lp .lp-project-modal .lp-field__label b {
	color: var(--lp-crimson);
}

.lp .lp-project-modal__agreement {
	display: grid;
	gap: var(--lp-space-2xs);
}

/*
 * Поле ввода сохраняет высоту в 48 пикселей — этого требует PRODUCT.md
 * к любой цели нажатия. Ужимается только описание задачи: три строки там
 * были запасом, а не необходимостью, и растянуть его можно потянув за угол.
 */
.lp .lp-project-modal .lp-textarea {
	min-height: 4.5rem;
}

.lp .lp-project-modal__lead {
	font-size: var(--lp-text-sm);
	line-height: 1.5;
}

/*
 * УПЛОТНЕНИЕ ПО ВЫСОТЕ ОКНА.
 *
 * Запрос по высоте, а не по ширине: форма упирается именно в высоту, и на
 * ноутбуке 1280×720 ей не хватало 65 пикселей, тогда как по ширине там
 * простора вдвое больше нужного. Ужимать окно на всех экранах ради этого
 * случая незачем — на 900 пикселях и выше форма дышит, как задумано.
 *
 * Высота поля ввода не трогается: 48 пикселей требует PRODUCT.md к любой
 * цели нажатия, и экономить на них нельзя.
 */
@media (max-height: 50em) {
	/* Поля вокруг окна тоже отдают высоту: они не содержание, а воздух. */
	.lp.lp-project-modal {
		--lp-modal-pad: var(--lp-space-sm);
	}

	.lp .lp-project-modal__dialog {
		padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
	}

	.lp .lp-project-modal__lead {
		margin-top: var(--lp-space-2xs);
	}

	.lp .lp-project-modal__form {
		gap: 0.75rem;
		margin-top: var(--lp-space-sm);
	}

	.lp .lp-project-modal .lp-field {
		gap: 0.25rem;
	}

	.lp .lp-project-modal .lp-textarea {
		min-height: 3.5rem;
	}
}

html.lp-modal-open,
body.lp-modal-open {
	overflow: hidden;
}