/* Видео с объектов (inc/video.php). Ролик вертикальный, 9:16. */

.vid__grid {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	grid-template-areas:
		'frame head'
		'frame more';
	grid-template-rows: auto 1fr;
	column-gap: 56px;
	align-items: start;
}

.vid__frame { grid-area: frame; }
.vid__head { grid-area: head; }
.vid__more { grid-area: more; }

.vid__frame {
	position: relative;
	margin: 0;
	aspect-ratio: 720 / 1278;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: #1d232b;
	box-shadow: var(--shadow-card);
}

.vid__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #1d232b;
}

/* Своя кнопка поверх обложки: закрывает субтитр на кадре и видна издалека. */
.vid__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0;
	border: 0;
	background: linear-gradient(180deg, rgba(0, 17, 48, 0.05) 30%, rgba(0, 17, 48, 0.45) 100%);
	color: var(--white);
	font-family: var(--font-text);
	font-size: 16px;
	cursor: pointer;
}

.vid__play-icon {
	position: relative;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--blue);
	box-shadow: 0 10px 30px rgba(0, 43, 128, 0.35);
	transition: transform 0.2s ease, background 0.2s ease;
}

.vid__play-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -13px 0 0 -8px;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent var(--white);
}

.vid__play:hover .vid__play-icon,
.vid__play:focus-visible .vid__play-icon {
	background: var(--blue-hover);
	transform: scale(1.06);
}

.vid__play-text {
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: rgba(0, 17, 48, 0.55);
	line-height: 1.2;
}

.vid__play[hidden],
.vid__frame.is-playing .vid__play { display: none; }

.vid__steps {
	display: grid;
	gap: 14px;
	max-width: 620px;
	margin: 28px 0 30px;
	padding: 0;
	list-style: none;
	counter-reset: vid;
}

.vid__steps li {
	position: relative;
	padding-left: 50px;
	font-size: 17px;
	line-height: 1.45;
	counter-increment: vid;
}

.vid__steps li::before {
	content: counter(vid);
	position: absolute;
	top: -3px;
	left: 0;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--blue-050);
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 600;
}

/* На B2B-странице соседи: чек-лист зон (белый) и сроки (голубой), поэтому фон белый. */
.vid--b2b { padding: 0 0 64px; }

@media (max-width: 960px) {
	.vid__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'head'
			'frame'
			'more';
		grid-template-rows: auto;
	}

	.vid__frame {
		width: min(100%, 320px);
		margin: 24px auto 0;
	}

	.vid__steps { margin-top: 26px; }
}

@media (max-width: 600px) {
	.vid__more .btn { width: 100%; }
	.vid__steps li { font-size: 16px; }
}

/* В статье блога: ролик слева, подпись справа, в ширину текста. */
.vid--post {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 26px;
	align-items: center;
	margin: 34px 0;
	padding: 22px;
	border-radius: var(--radius-card);
	background: var(--blue-050);
}

/* Именованные области из .vid__grid здесь не заданы: без сброса ролик уезжает во вторую колонку. */
.vid--post .vid__frame { grid-area: auto; box-shadow: none; border-radius: var(--radius-soft); }
.vid--post .vid__play-icon { width: 60px; height: 60px; }
.vid--post .vid__play-icon::after { margin: -10px 0 0 -6px; border-width: 10px 0 10px 17px; }
.vid--post .vid__play-text { font-size: 14px; }

.bl-body .vid--post .vid__kicker {
	margin: 0 0 6px;
	color: var(--blue);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bl-body .vid--post .vid__title {
	margin: 0 0 10px;
	font-family: var(--font-head);
	font-size: 21px;
	line-height: 1.3;
	color: var(--ink);
}

.bl-body .vid--post p { margin: 0; }

@media (max-width: 600px) {
	.vid--post {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px;
	}

	.vid--post .vid__frame { width: min(100%, 280px); margin: 0 auto; }
}

/* Превью ролика в ленте доверия вместо фото (ec_video_teaser). Размер и скругление — от .trustbar__photo. */
.trustbar__video {
	position: relative;
	display: block;
	overflow: hidden;
	background: #1d232b;
}

.trustbar__video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trustbar__video-badge {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px 5px 9px;
	border-radius: var(--radius-pill);
	background: var(--blue);
	color: var(--white);
	font-size: 13px;
	line-height: 1;
	transition: background 0.2s ease;
}

.trustbar__video-badge::before {
	content: '';
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent var(--white);
}

.trustbar__video:hover .trustbar__video-badge,
.trustbar__video:focus-visible .trustbar__video-badge {
	background: var(--blue-hover);
}

/* Ролик поверх страницы: на страницах без блока #video (video.js, openBox). */
.vid-lb {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(0, 11, 48, 0.82);
}

.vid-lb[hidden] { display: none; }

.vid-lb__inner {
	position: relative;
	height: min(86vh, 760px);
	aspect-ratio: 720 / 1278;
	max-width: 100%;
}

.vid-lb__video {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-soft);
	background: #1d232b;
	object-fit: contain;
}

.vid-lb__close {
	position: absolute;
	top: -8px;
	right: -56px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	cursor: pointer;
}

.vid-lb__close::before,
.vid-lb__close::after {
	content: '';
	position: absolute;
	top: 21px;
	left: 12px;
	width: 20px;
	height: 2px;
	background: var(--ink);
	transform: rotate(45deg);
}

.vid-lb__close::after { transform: rotate(-45deg); }

.vid-lb-open { overflow: hidden; }

@media (max-width: 600px) {
	.vid-lb__inner { height: auto; width: 100%; max-height: 82vh; }
	.vid-lb__close { top: -54px; right: 0; }
}