/* Всплывающие окна: тёмная панель с формой слева и фотографией справа.
 * Повторяют попапы прежнего сайта.
 */

.popup {
	position: fixed;
	inset: 0;
	z-index: var(--z-popup);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 2vw, 40px);
}

.popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.popup__window {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	width: min(1240px, 100%);
	/* окно не должно вылезать за экран: на ноутбуках высоты мало,
	   поэтому ограничиваем и пускаем прокрутку внутрь левой колонки */
	max-height: min(92vh, 860px);
	border-radius: var(--r-xl);
	overflow: hidden;
	background: #232323;
	color: var(--c-white);
	box-shadow: var(--sh-soft);
}

/* без min-height: 0 grid-колонка не сжимается и ломает ограничение высоты */
.popup__window > * {
	min-height: 0;
}

/* Крестик - в правом верхнем углу экрана, как в макете. */
.popup__close {
	position: fixed;
	top: clamp(12px, 1.5vw, 28px);
	right: clamp(12px, 1.5vw, 28px);
	z-index: 2;
	width: 44px;
	height: 44px;
	font-size: 34px;
	line-height: 1;
	color: var(--c-white);
	opacity: 0.85;
}

.popup__close:hover {
	opacity: 1;
}

.popup__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(20px, 2.2vw, 44px);
	overflow-y: auto;
}

/* Заголовок окна - не тег h2 (SEO-план, Т12): шрифт и вес, которые давало правило
   h1-h6 в base.css, заданы здесь - вид прежний. */
.popup__title {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(18px, 1.35vw, 27px);
	line-height: 1.32;
	letter-spacing: -0.01em;
}

.popup__list {
	margin-top: clamp(12px, 1.15vw, 22px);
	gap: clamp(8px, 0.7vw, 14px);
	font-size: clamp(12px, 0.78vw, 15px);
	line-height: 1.4;
}

.popup__list .checklist__icon {
	width: clamp(18px, 1.25vw, 24px);
	height: clamp(18px, 1.25vw, 24px);
}

.popup__text {
	margin-top: clamp(14px, 1.5vw, 28px);
	font-size: clamp(13px, 0.94vw, 18px);
	line-height: 1.45;
}

/* --- Правая часть: фотография ------------------------------------------------- */

.popup__media {
	position: relative;
	min-height: 260px;
	overflow: hidden;
	background: var(--c-ink);
}

/* Фотография не должна задавать высоту колонке - иначе окно вырастает
   выше экрана и планировки уезжают за нижний край. */
.popup__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Каталог - предметный снимок: его нельзя обрезать, показываем целиком. */
.popup__img--contain {
	object-fit: contain;
	padding: clamp(16px, 1.5vw, 30px);
}

.popup__logo {
	position: absolute;
	top: clamp(14px, 1.5vw, 28px);
	right: clamp(14px, 1.5vw, 28px);
	z-index: 1;
	width: clamp(90px, 8vw, 150px);
	/* Логотип может быть картинкой из админки - у неё в разметке своя высота. */
	height: auto;
}

.popup__plans {
	position: absolute;
	left: clamp(12px, 1.25vw, 24px);
	right: clamp(12px, 1.25vw, 24px);
	bottom: clamp(12px, 1.25vw, 24px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(8px, 0.83vw, 16px);
}

.popup__plan {
	width: 100%;
	/* на невысоких экранах планировки не должны вылезать за окно */
	max-height: min(22vh, 190px);
	object-fit: contain;
	padding: 6px;
	border-radius: var(--r-sm);
	background: var(--c-white);
}

/*
 * Фото со светлым небом сверху и баней у нижнего края («Получите проект бани»
 * и «Перезвоним», с 2026-10-02; ключ 'media' => 'sky' в inc/popups.php).
 * - Кадр привязан к низу: колонка фото бывает и почти квадратной (компьютер),
 *   и широкой полосой (телефон, 1,6) - на широкой уходит небо, а не ступени.
 * - Верх неба затемнён: золотой логотип на светлом небе не читался.
 * - Планировки - на небе под логотипом: внизу они закрывали баню (владелец, 02.10).
 *   Высота меньше обычной, чтобы на 1366-1440 не наезжать на крышу (замер 02.10).
 */
.popup__media--sky .popup__img {
	object-position: 50% 100%;
}

.popup__media--sky::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	height: 38%;
	background: linear-gradient(to bottom, rgba(20, 20, 20, 0.55), rgba(20, 20, 20, 0));
	pointer-events: none;
}

.popup__media--sky .popup__logo,
.popup__media--sky .popup__plans {
	z-index: 2;
}

.popup__media--sky .popup__plans {
	top: clamp(56px, 5.6vw, 96px);
	bottom: auto;
}

.popup__media--sky .popup__plan {
	max-height: min(15vh, 140px);
}

/* --- Форма на тёмном ------------------------------------------------------------ */

.form-short--dark {
	margin-top: clamp(14px, 1.35vw, 26px);
}

.form-short--dark .field__input {
	padding-block: clamp(11px, 0.85vw, 16px);
}

.form-short--dark .field__input {
	border-color: transparent;
	background: #3a3a3a;
	color: var(--c-white);
	border-radius: var(--r-pill);
}

/* 0,6 вместо 0,5: подсказка номера на #3a3a3a - около 5,2:1 вместо 4,17:1 (аудит 2026-09-25, 08-Ж3). */
.form-short--dark .field__input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.form-short--dark select.field__input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
	background-position: right 26px center, right 20px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.form-short--dark .field__label {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(14px, 1.04vw, 20px);
	color: var(--c-white);
	margin-bottom: 4px;
}

.form-short--dark .consent {
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(11px, 0.73vw, 14px);
}

.form-short--dark .consent a {
	color: var(--c-white);
}

.form-short--stacked .form-short__row {
	display: block;
}

.form-short--stacked .form-short__way {
	margin-top: clamp(10px, 1vw, 20px);
}

.form-short--stacked .consent {
	margin-top: clamp(10px, 1vw, 20px);
}

.form-short__submit--wide {
	width: 100%;
	margin-top: clamp(14px, 1.5vw, 28px);
}

/* --- Адаптив --------------------------------------------------------------------- */

@media (max-width: 900px) {
	.popup__window {
		grid-template-columns: 1fr;
		/* dvh - реальная высота экрана без адресной строки браузера;
		   vh на телефоне считает её как будто строки нет, и низ окна
		   вместе с кнопкой отправки прячется под панелью браузера. */
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		overflow-y: auto;
	}

	/* Фото - под формой (владелец, 2026-09-25): на телефоне человек открывает окно,
	   чтобы оставить заявку, и первым должен видеть заголовок и поле телефона,
	   а не треть экрана картинки. Раньше здесь стоял order: -1. */
	.popup__media {
		min-height: 34vh;
		max-height: 34vh;
	}

	/* Крестик висит над правым верхним углом окна - заголовок, который теперь
	   стоит первым, не должен уходить под него. */
	.popup__title {
		padding-right: 36px;
	}

	.popup__plans {
		display: none;   /* на телефоне планировки нечитаемы, а место съедают */
	}

	/*
	 * Крестик остаётся fixed: окно на телефоне прокручивается внутри себя,
	 * и привязанный к окну крестик уехал бы вверх вместе с фотографией,
	 * едва человек долистал до полей. За край экрана он уходил из-за
	 * увеличения страницы - причину убрали в forms.css и popup.js.
	 */
	.popup__close {
		top: 8px;
		right: 8px;
		color: var(--c-white);
		background: rgba(0, 0, 0, 0.45);
		border-radius: var(--r-round);
		font-size: 24px;
	}
}