/* ==========================================================================
   video.css — страница видеоархива /video/.

   ОТКУДА. html_flat/starco_video_concept.html, заготовка после вычитания
   base.css — migrate/css_draft/video.css. Здесь она вычищена: убраны
   правила общих узлов (шапка, подвал, мобильное меню, .reveal и их
   брейкпоинты) — они уже в base.css и постранично не отличаются.

   ЧЕГО ЗДЕСЬ НЕТ НАМЕРЕННО. Секция .pagination-section концепта (карточка
   «14 страниц видеоистории» и полоса номеров) не перенесена: пагинации на
   /video/ нет, все ролики выводятся одним списком с клиентским фильтром.
   Причина подробно расписана в шапке video.tpl. Появится VideoView с
   адресами /video/page/{n}/ — вернутся и разметка, и .pages/.page, но из
   общего pagination.tpl и base.css, а не из этих правил.

   ИМЯ КЛАССА АКТИВНОГО ЧИПА. В концепте .filter-btn.active, здесь
   .filter-btn.is-active: активность проставляет общий design/t1/js/filter.js,
   и он навешивает именно .is-active. Класс из концепта не сработал бы молча.
   ========================================================================== */

/* ------------------------------------------------- общая типографика --- */
/* .section-title, .section-copy и правило переносов у заголовков есть во
   ВСЕХ одиннадцати концептах и по-хорошему должны лежать в base.css. Пока
   их там нет, каждый постраничный файл несёт свою копию. Когда base.css
   будет можно править — этот блок удаляется отсюда целиком. */
.section-title {
	font-size: clamp(38px, 4.5vw, 64px);
	line-height: .96;
	letter-spacing: -.05em;
	margin: 15px 0 22px;
	font-weight: 950;
	text-transform: uppercase;
	text-wrap: balance;
	word-break: normal;
	hyphens: none;
}
.section-copy { font-size: 18px; line-height: 1.72; color: #536176; max-width: 800px; }

h1, h2, h3 { word-break: normal; overflow-wrap: normal; hyphens: none; text-wrap: balance; }

/* ------------------------------------------------------------- шапка -- */
/* Верхний отступ 145px — под фиксированную шапку из base.css.
   Слово-призрак в :after у каждой страницы своё, поэтому .hero и живёт
   в постраничном файле (см. шапку base.css). */
.hero {
	padding: 145px 0 56px;
	background:
		radial-gradient(circle at 84% 18%, rgba(230, 192, 76, .12), transparent 18%),
		radial-gradient(circle at 14% 80%, rgba(217, 8, 18, .11), transparent 23%),
		linear-gradient(128deg, var(--navy2), var(--navy) 52%, #0a518f);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, transparent 0 88px, rgba(255, 255, 255, .025) 89px 90px);
}
.hero:after {
	content: "VIDEO";
	position: absolute;
	right: -10px;
	bottom: -64px;
	font-size: clamp(145px, 17vw, 285px);
	font-weight: 950;
	line-height: .76;
	letter-spacing: -.09em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .05);
}
.hero-content { position: relative; z-index: 2; max-width: 900px; }

.hero-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #cce6ff;
}
.hero-kicker strong { background: var(--red); padding: 8px 12px; border-radius: 999px; color: #fff; }

.hero h1 {
	font-size: clamp(54px, 6.4vw, 92px);
	line-height: .84;
	letter-spacing: -.065em;
	text-transform: uppercase;
	margin: 25px 0 20px;
	font-weight: 950;
}
.hero h1 span {
	display: block;
	color: var(--gold);
	font-size: .42em;
	line-height: 1;
	margin-top: 18px;
	letter-spacing: .025em;
}

/* .hero-lead — обёртка вокруг $page->body: там приходит готовый HTML с
   собственными <p>, поэтому размер задаётся и обёртке, и абзацам внутри. */
.hero p,
.hero-lead {
	font-size: 18px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .72);
	max-width: 740px;
	margin: 0;
}
.hero-lead p { margin: 0 0 14px; }
.hero-lead p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ главное видео -- */
.featured { padding: 50px 0 36px; background: #fff; }
.featured-grid {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 28px;
	align-items: center;
}
.featured-player {
	aspect-ratio: 16 / 9;
	border-radius: 28px;
	overflow: hidden;
	background: var(--navy2);
	box-shadow: var(--shadow);
	position: relative;
}
/* iframe сюда вставляет video-embed.js вместо кнопки — по клику. */
.featured-player iframe { width: 100%; height: 100%; border: 0; display: block; }

.featured-copy .meta-row { justify-content: flex-start; margin-top: 18px; }
.featured-copy h2 {
	font-size: clamp(32px, 3.8vw, 52px);
	line-height: .98;
	letter-spacing: -.045em;
	margin: 15px 0 17px;
}
.featured-copy p { font-size: 16px; line-height: 1.68; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------ архив --- */
.archive { padding: 38px 0 98px; background: linear-gradient(180deg, #fff, #f7fafc); }
.archive-head {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 70px;
	align-items: end;
	margin-bottom: 28px;
}

.controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 25px; }
.filter-btn {
	border: 1px solid var(--line);
	background: #fff;
	color: var(--blue);
	border-radius: 999px;
	padding: 11px 15px;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
	transition: .2s;
}
.filter-btn span { opacity: .55; }
.filter-btn.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }
.filter-btn.is-active span { opacity: .75; }

/* ------------------------------------------------------- сетка роликов - */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.video-card {
	border: 1px solid var(--line);
	border-radius: 25px;
	background: #fff;
	overflow: hidden;
	transition: .3s;
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* filter.js прячет карточку атрибутом hidden, а не классом .hidden из
   концепта. Правило страхует случай, если карточке зададут display. */
.video-card[hidden] { display: none; }

/* .video-frame — блок с пропорцией 16:9; кнопка растянута внутри него.
   Кнопка ДОЛЖНА быть прямым потомком: video-embed.js подменяет её на
   iframe вызовом parentNode.replaceChild(). */
.video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #0b3d69;
	overflow: hidden;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-frame .js-video,
.featured-player .js-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Градиентная заглушка вместо превью: у роликов в базе картинок нет, а
   пустой тёмный прямоугольник читался бы как ошибка загрузки.
   .bg-0 — базовый вариант .video-bg, отдельного правила ему не нужно. */
.video-bg {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(circle at 78% 18%, rgba(230, 192, 76, .25), transparent 17%),
		linear-gradient(145deg, #063d73, #03192f);
}
.bg-1 { background: radial-gradient(circle at 78% 18%, rgba(217, 8, 18, .32), transparent 19%), linear-gradient(145deg, #114c7e, #03172c); }
.bg-2 { background: radial-gradient(circle at 22% 78%, rgba(230, 192, 76, .22), transparent 20%), linear-gradient(145deg, #8f080f, #d91820); }
.bg-3 { background: radial-gradient(circle at 82% 20%, rgba(11, 88, 164, .34), transparent 18%), linear-gradient(145deg, #102f4c, #020e20); }
.bg-4 { background: radial-gradient(circle at 50% 12%, rgba(230, 192, 76, .22), transparent 18%), linear-gradient(145deg, #0b5f9f, #041e38); }

.ghost-index {
	position: absolute;
	right: 15px;
	bottom: -25px;
	font-size: 170px;
	font-weight: 950;
	line-height: 1;
	color: rgba(255, 255, 255, .055);
	letter-spacing: -.09em;
}

.play-button {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	color: var(--red);
	font-size: 20px;
	padding-left: 4px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
	transition: .25s;
	z-index: 2;
}
.video-card:hover .play-button,
.featured-player:hover .play-button { transform: scale(1.06); }

.watch-label {
	position: absolute;
	left: 18px;
	bottom: 17px;
	color: #fff;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 950;
	z-index: 2;
}

/* -------------------------------------------------------- подпись карточки */
.video-meta { padding: 20px 21px 22px; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meta-row time { font-size: 11px; color: var(--muted); font-weight: 850; }
.tag {
	display: inline-flex;
	padding: 8px 10px;
	border-radius: 999px;
	background: #edf5fb;
	color: var(--blue);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: .11em;
	font-weight: 950;
}
.video-meta h3 { font-size: 22px; line-height: 1.06; margin: 13px 0 0; letter-spacing: -.035em; }

/* Счётчик фильтра. filter.js пишет в него textContent, поэтому выделения
   внутри строки (в концепте было <b>) здесь быть не может. */
.status { margin-top: 22px; font-size: 12px; color: var(--muted); }

/* -------------------------------------------------------------- призыв -- */
.cta {
	padding: 82px 0;
	background: linear-gradient(125deg, var(--red), #b7080f 56%, #071d35);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.cta:after {
	content: "35";
	position: absolute;
	right: 2%;
	top: -58px;
	font-size: 290px;
	font-weight: 950;
	line-height: 1;
	color: rgba(255, 255, 255, .055);
}
.cta-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
}
.cta h2 {
	font-size: clamp(39px, 5.2vw, 69px);
	line-height: .91;
	letter-spacing: -.058em;
	text-transform: uppercase;
	margin: 0 0 15px;
}
.cta p { max-width: 760px; color: rgba(255, 255, 255, .73); font-size: 17px; line-height: 1.6; }

/* ------------------------------------------------------- брейкпоинты --- */
/* Только постраничные: шапка, подвал и --container перестраиваются в base.css. */
@media (max-width: 1180px) {
	.featured-grid, .archive-head { grid-template-columns: 1fr; }
	.archive-head { gap: 24px; }
}

@media (max-width: 820px) {
	.hero { padding: 130px 0 48px; }
	.hero h1 { font-size: 64px; }
	.featured { padding-top: 38px; }
	.video-grid { grid-template-columns: 1fr; }
	.cta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.hero { padding: 120px 0 42px; }
	.hero h1 { font-size: 50px; }
	.hero p, .hero-lead { font-size: 16px; }
	.featured-copy h2 { font-size: 32px; }
	.video-meta h3 { font-size: 20px; }
}