/**
 * Раздел «Видео»: плитка списка `/video/` и страница записи `/video/{слаг}/`.
 *
 * Контракт раздела — .operator/specs/videos.md. Общие рецепты берём из
 * design-system.css (§3 цвет, §4 типографика, §9.5 карточки, §9.6 сетка),
 * рельс таймкодов — `.timecodes` из components.css, длинный текст описания —
 * longread.css (§9.26).
 */

/* --- Плитка списка ---
   Сетка — как у списка статей: одна колонка на телефоне, две в середине,
   три на широком экране. Засечки по углам плитки — общий рецепт
   в components.css (`.article-item, .video-item`).
   Сверху отступа нет: воздух до строки «Найдено N записей» даёт общий
   гэп списка (40px), как в списках статей и семинаров. */

.video-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: auto;
	gap: var(--spacing-xl);
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 700px) {
	.video-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 752px; /* 2×360 + 32 */
	}
}

@media (min-width: 1050px) {
	.video-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 1144px; /* 3×360 + 2×32 */
	}
}

/* Плитка: кадр занимает всю ширину карточки и прижат к верхнему краю —
   полей сверху и по бокам нет, они остались только у строки под кадром
   (`.video-item__foot`) и снизу 24px: у строки с датой есть внутренние поля
   по высоте букв (line-height 1.7), они добавляют около 10px ниже видимых
   букв, и без поправки воздух под строкой казался бы больше, чем над кадром.
   Верхних засечек нет: кадр их закрывает — остаются две нижние
   (общий рецепт — components.css, `.article-item, .video-item`). */
.video-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m);
	padding: 0 0 var(--spacing-l);
	--tick-lines:
		linear-gradient(var(--color-border), var(--color-border)) left bottom / 22px 1px no-repeat,
		linear-gradient(var(--color-border), var(--color-border)) left bottom / 1px 22px no-repeat,
		linear-gradient(var(--color-border), var(--color-border)) right bottom / 22px 1px no-repeat,
		linear-gradient(var(--color-border), var(--color-border)) right bottom / 1px 22px no-repeat;
	--tick-lines-strong:
		linear-gradient(var(--color-primary), var(--color-primary)) left bottom / 22px 1px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) left bottom / 1px 22px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) right bottom / 22px 1px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) right bottom / 1px 22px no-repeat;
}

/* Кадр записи: ссылка на запись, 16:9, обесцвечен (монохромный язык сайта, §3).
   Рамки-коробки нет — кадр держат только две нижние засечки плитки (§9.26).
   Имени записи под кадром нет: оно в подписи ссылки (aria-label). */
.video-item__cover {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--color-background-muted);
	text-decoration: none;
}

.video-item__cover:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Кадр обесцвечен (монохромный язык сайта, §3), но цвет возвращается под
   курсором — тем же числом, что и засечки: пока курсор на краю, кадр ещё
   серый, в середине — цветной. Одно значение `--tick-strength` на три
   отклика: засечки, белый оверлей и цвет кадра. */
.video-item__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale( calc( 1 - var(--tick-strength, 0) ) );
}

/* С клавиатуры цвет возвращается целиком — как и засечки (`:focus-within`). */
.video-item:focus-within .video-item__img {
	filter: grayscale(0);
}

.video-item__img--empty {
	display: block;
	background-color: var(--color-background-muted);
}

/* Белый оверлей поверх кадра — «прозрачность 90%» (10% белого): кадр чуть
   светлее, но остаётся читаемым. Кадр обесцвечен фильтром и потому рисуется
   слоем выше псевдоэлемента — оверлею нужен z-index (иначе он уходит под кадр
   и его не видно); плашка длительности — ещё выше.
   Под курсором оверлей сходит на нет вместе с проявлением засечек: яркость
   засечек (`--tick-strength`, считает article-ticks.js) и его прозрачность —
   одно число, поэтому кадр раскрывается ровно настолько, насколько зажглись
   засечки. Перехода нет: как и у засечек, значение меняется сразу. */
.video-item__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: color-mix(in srgb, var(--color-background) 10%, transparent);
	opacity: calc( 1 - var(--tick-strength, 0) );
	pointer-events: none;
}

/* С клавиатуры близости курсора нет — оверлей снимаем целиком,
   как и засечки (`components.css`, `:focus-within`). */
.video-item:focus-within .video-item__cover::before {
	opacity: 0;
}

.video-item__duration {
	position: absolute;
	z-index: 2;
	right: 8px;
	bottom: 8px;
	padding: 2px 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: #FFFFFF;
	background-color: color-mix(in srgb, var(--color-primary) 75%, transparent);
}

.video-item__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-m);
	margin-top: auto;
	/* Кадр выше полей не имеет — поля строки держим здесь. */
	padding: 0 var(--spacing-xl);
}

.video-item__meta {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 300;
	color: var(--color-foreground-muted);
}

.video-item__reactions {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-heading);
	font-size: 15px;
	color: var(--color-foreground-muted);
}

.video-item__reaction {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.video-icon {
	width: 16px;
	height: 16px;
	flex: none;
}

/* --- Страница записи ---
   Каркас страницы (шапка, колонка, блоки с линиями, строка меты) — общий,
   `.entry-*` в design-system.css (§9.21); ниже только плеер записи. */

.video-single__embed {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--color-background-muted);
	border: 1px solid var(--color-border);
}

.video-single__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}