/**
 * Попап «Видео о компании» (#wsn-video, baner-popup-video.php).
 * Своя вёрстка вместо попапа Tilda (15.11.2026). Размеры сняты с прежней
 * вёрстки на её раскладках (окно по центру экрана, затемнение rgba(0,0,0,.2)):
 *  - от 1200: окно 743×300, обложка 212×105 выступает над окном на 12px,
 *    подпись 20/28, кнопки 194×60 в ряд с зазором 29;
 *  - 960–1199: 673×251, обложка выше окна на 42, подпись 18/25, кнопки 173×55;
 *  - 640–959: 584×251, кнопки 155×50;
 *  - 480–639: 433×223, обложка 194×96, подпись 16/22, кнопки 120×47;
 *  - уже 480: 300×411, обложка 176×87 внутри окна, кнопки 239×47 столбиком.
 * Открытие/закрытие — общий обработчик окон в wsn-main.js (класс is-open,
 * body.wsn-lock), поэтому крестик несёт и класс wsn-cart__close.
 */

/* Слои как у Tilda: само окно — выше всего (10000001), затемнение с размытием —
   отдельным элементом ниже шапки сайта (99998 < 99999 у .wsn-header), поэтому
   шапка над затемнением остаётся чёткой. Прозрачный слой окна во весь экран
   ловит щелчок мимо окна — по нему общий обработчик и закрывает. */
.wsn-vpop {
	position: fixed;
	inset: 0;
	z-index: 10000001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity .3s ease;
	font-family: var(--t-text-font, 'Montserrat'), Arial, sans-serif;
}

.wsn-vpop[hidden] { display: none; }
.wsn-vpop.is-open { opacity: 1; }

/* Пока окно открыто, страница заблокирована и полоса прокрутки пропадает
   (body.wsn-lock). Tilda полосу не убирала и ставила окно по центру видимой
   части — сдвигаем правый край на ширину полосы (--wsn-sbw меряет wsn-main.js),
   иначе окно уезжало вправо на её половину. */
body.wsn-lock .wsn-vpop { right: var(--wsn-sbw, 0px); }

.wsn-vpop__bg {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: none;
	background: rgba(0, 0, 0, .2);
	/* страница под окном размыта — как было у Tilda (blur 6px) */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .3s ease;
}

.wsn-vpop:not([hidden]) + .wsn-vpop__bg { display: block; }
.wsn-vpop.is-open + .wsn-vpop__bg { opacity: 1; }
.wsn-vpop * { box-sizing: border-box; }

.wsn-vpop__box {
	position: relative;
	flex: none;
	width: 743px;
	max-width: 100%;
	height: 300px;
	padding-top: 122px;
	border-radius: 12px;
	background: #fff;
	text-align: center;
}

/* крестик: отступы и размер — как у иконки Tilda */
.wsn-vpop .wsn-vpop__close {
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	opacity: 1;
	cursor: pointer;
}

.wsn-vpop__close img { display: block; width: 21px; height: 21px; }

.wsn-vpop__cover {
	position: absolute;
	top: -12px;
	left: 50%;
	width: 212px;
	height: auto;
	border-radius: 13px;
	/* обложка наклонена на −10° на всех ширинах — как у Tilda (rotate 350deg) */
	transform: translateX(-50%) rotate(-10deg);
}

.wsn-vpop__text {
	max-width: 486px;
	margin: 0 auto;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: -.1px;
	color: #000;
}

.wsn-vpop__btns {
	display: flex;
	justify-content: center;
	gap: 29px;
	margin-top: 23px;
}

.wsn-vpop__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 194px;
	height: 60px;
	border: 1px solid #000;
	border-radius: 50px;
	background: #fff;
}

.wsn-vpop__logo { display: block; height: auto; }
.wsn-vpop__logo_vk { width: 143px; }
.wsn-vpop__logo_rt { width: 138px; }
.wsn-vpop__logo_yt { width: 136px; }

/* ---------- 960–1199 ---------- */

@media (max-width: 1199px) {
	.wsn-vpop__box { width: 673px; height: 251px; padding-top: 95px; }
	.wsn-vpop .wsn-vpop__close { top: 18px; right: 16px; }
	.wsn-vpop__close img { width: 17px; height: 17px; }
	.wsn-vpop__cover { top: -42px; }
	.wsn-vpop__text { max-width: 454px; font-size: 18px; line-height: 25px; }
	.wsn-vpop__btns { gap: 27px; margin-top: 25px; }
	.wsn-vpop__btn { width: 173px; height: 55px; }
	.wsn-vpop__logo_vk { width: 128px; }
	.wsn-vpop__logo_rt { width: 123px; }
	.wsn-vpop__logo_yt { width: 121px; }
}

/* ---------- 640–959 ---------- */

@media (max-width: 959px) {
	.wsn-vpop__box { width: 584px; padding-top: 102px; }
	.wsn-vpop .wsn-vpop__close { right: 18px; }
	.wsn-vpop__btns { gap: 24px; margin-top: 23px; }
	.wsn-vpop__btn { width: 155px; height: 50px; }
	.wsn-vpop__logo_vk { width: 115px; }
	.wsn-vpop__logo_rt { width: 110px; }
	.wsn-vpop__logo_yt { width: 109px; }
}

/* ---------- 480–639 ---------- */

@media (max-width: 639px) {
	.wsn-vpop__box { width: 433px; height: 223px; padding-top: 88px; }
	.wsn-vpop .wsn-vpop__close { top: 12px; right: 12px; }
	.wsn-vpop__cover { top: -38px; width: 194px; }
	.wsn-vpop__text { max-width: 405px; font-size: 16px; line-height: 22px; }
	.wsn-vpop__btns { gap: 19px; margin-top: 22px; }
	.wsn-vpop__btn { width: 120px; height: 47px; }
	.wsn-vpop__logo_vk { width: 89px; }
	.wsn-vpop__logo_rt { width: 85px; }
	.wsn-vpop__logo_yt { width: 84px; }
}

/* ---------- уже 480: кнопки столбиком ---------- */

@media (max-width: 479px) {
	.wsn-vpop__box { width: 300px; height: 411px; padding-top: 121px; }
	.wsn-vpop .wsn-vpop__close { top: 16px; right: 13px; }
	.wsn-vpop__close img { width: 20px; height: 20px; }
	.wsn-vpop__cover { top: 0; width: 176px; }
	.wsn-vpop__text { max-width: 264px; }
	.wsn-vpop__btns { flex-direction: column; align-items: center; gap: 11px; margin-top: 26px; }
	.wsn-vpop__btn { width: 239px; }
	.wsn-vpop__logo_vk { width: 145px; }
	.wsn-vpop__logo_rt { width: 125px; }
	.wsn-vpop__logo_yt { width: 119px; }
}