/* Start:/local/templates/vine/components/bitrix/news.list/video-list/style.css?17875988672780*/
/* =========================================================================
   Видеобиблиотека — /materials/video/

   Макета нет, поэтому сетка и типографика повторяют «Полезные материалы»:
   две колонки по 616 при контейнере 1248, зазор 16, кегли 34/18/14.
   Своего здесь ровно три вещи: постер с пропорцией 16:9, метка длительности
   поверх него и кнопка воспроизведения.
   ========================================================================= */

.video-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.video-list__empty {
	margin: 0 0 24px;
	font-size: 18px;
	line-height: 21px;
}

.video-list__pager {
	display: flex;
	margin-top: 16px;
}

/* ------------------------------------------------------------- карточка */

.video-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.video-card__poster {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid #000000;
	/* Пока постеров нет, кадр остаётся ровным серым — сетка не разъезжается. */
	background: #C4C4C4;
}

.video-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Треугольник воспроизведения: рисуется рамками, ассет для этого заводить
   незачем — фигура одноцветная и без деталей. */
.video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -18px 0 0 -10px;
	border-style: solid;
	border-width: 18px 0 18px 30px;
	border-color: transparent transparent transparent #FFFFFF;
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
}

.video-card__duration {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 8px;
	background: rgba(0, 0, 0, 0.6);
	color: #FFFFFF;
	font-size: 14px;
	line-height: 20px;
}

.video-card__title {
	margin: 0;
	font-size: 34px;
	font-weight: 400;
	line-height: 40px;
}

.video-card__speaker {
	margin: 0;
	color: #777777;
	font-size: 14px;
	line-height: 16px;
}

.video-card__text {
	font-size: 18px;
	line-height: 21px;
}

.video-card__link {
	align-self: flex-start;
	color: #0077FF;
	font-size: 18px;
	line-height: 21px;
	text-decoration: underline;
}

/* Ссылки на ролик ещё нет — карточка показывается, но никуда не ведёт. */
.video-card__soon {
	align-self: flex-start;
	color: #777777;
	font-size: 18px;
	line-height: 21px;
}

.video-card--soon .video-card__poster {
	opacity: 0.7;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/system.pagenavigation/vine_more/style.css?1787502081471*/
/*
	Кнопка «Показать ещё» (макет 1279:7435, 143×40).

	Оформление — общая кнопка проекта `.vine-btn` (белая, рамка 1px #000,
	радиус 5, текст 18px). Здесь только габариты из макета: общая кнопка
	тянется по содержимому, а в макете ширина фиксированная.
*/

.vine-more {
	min-width: 143px;
	min-height: 40px;
}

/* End */
/* /local/templates/vine/components/bitrix/news.list/video-list/style.css?17875988672780 */
/* /local/templates/vine/components/bitrix/system.pagenavigation/vine_more/style.css?1787502081471 */