/**
 * Витрина базы знаний.
 *
 * МАКЕТА У СТРАНИЦЫ НЕТ. Размеры, цвета и радиусы повторяют витрину
 * учебного центра и витрину услуг: одна семья карточек на все списки
 * сайта. Нового визуального языка здесь не появляется. Отклонение
 * записано в docs/DESIGN-DEVIATIONS.md.
 *
 * Раскладка мобильная по умолчанию: один столбец, колонки добавляются
 * шире 768px и 1024px.
 */

/* ====================================================================
 * ПЕРВЫЙ ЭКРАН
 * ================================================================== */

.tri-wl-hero__eyebrow {
	display: inline-block;
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
	margin-block-start: var(--tri-space-24);
}

.tri-wl-hero__title {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-44);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1-15);
	letter-spacing: var(--tri-ls-n0-028);
	color: var(--tri-color-ink);
	margin: var(--tri-space-12) 0 0;
	overflow-wrap: anywhere;
}

.tri-wl-hero__lead {
	font-size: var(--tri-fs-17);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin: var(--tri-space-16) 0 0;
	max-width: 72ch;
}

.tri-wl-hero__total {
	margin: var(--tri-space-20) 0 0;
	font-size: var(--tri-fs-15-5);
	color: var(--tri-color-muted-soft);
}

.tri-wl-hero__count {
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	font-variant-numeric: tabular-nums lining-nums;
}

/* ====================================================================
 * РАЗДЕЛЫ
 * ================================================================== */

.tri-wl-cats__title {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
	margin: 0;
}

/*
 * Ряд разделов не переносится, а прокручивается внутри себя: при пяти
 * направлениях перенос занимал бы несколько строк и отодвигал список
 * материалов за экран. Прокрутка локальная — страница по горизонтали
 * не едет.
 */
.tri-wl-cats__list {
	list-style: none;
	margin: var(--tri-space-16) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--tri-space-8);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-block-end: var(--tri-space-4);
	margin-inline: calc(var(--tri-gutter) * -1);
	padding-inline: var(--tri-gutter);
}

.tri-wl-cats__list::-webkit-scrollbar {
	display: none;
}

.tri-wl-cats__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.tri-wl-cats__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: var(--tri-space-18);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-10);
	background: var(--tri-color-white);
	color: var(--tri-color-ink);
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-600);
	text-decoration: none;
	white-space: nowrap;
	transition:
		border-color var(--tri-duration-28) var(--tri-ease),
		color var(--tri-duration-28) var(--tri-ease);
}

a.tri-wl-cats__link:hover,
a.tri-wl-cats__link:focus-visible {
	border-color: var(--tri-color-navy);
	color: var(--tri-color-navy);
}

/* ====================================================================
 * МАТЕРИАЛЫ
 * ================================================================== */

.tri-wl-title {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-32);
	font-weight: var(--tri-fw-700);
	line-height: var(--tri-lh-1-2);
	letter-spacing: var(--tri-ls-n0-022);
	color: var(--tri-color-ink);
	margin: 0;
	overflow-wrap: anywhere;
}

.tri-wl-lead {
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin: var(--tri-space-14) 0 0;
	max-width: 72ch;
}

.tri-wl-articles__empty {
	margin: var(--tri-space-24) 0 0;
	font-size: var(--tri-fs-16-5);
	color: var(--tri-color-muted-soft);
}

.tri-wl-articles__list {
	list-style: none;
	margin: var(--tri-space-32) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-24);
}

/*
 * Отступ сверху нужен списку от заголовка. Когда заголовок и описание
 * раздела не заполнены, список идёт сразу за полем секции, и второй
 * отступ только отодвигал карточки от разделов.
 */
.tri-wl-articles__list:first-child {
	margin-block-start: 0;
}

.tri-wl-article {
	position: relative;
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-16);
	background: var(--tri-color-white);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition:
		border-color var(--tri-duration-28) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease);
}

.tri-wl-article:hover,
.tri-wl-article:focus-within {
	border-color: var(--tri-color-navy);
	box-shadow: var(--tri-shadow-navy-18-10);
}

/* Пропорция задана заранее: лента не прыгает, пока грузятся снимки. */
.tri-wl-article__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.tri-wl-article__body {
	padding: var(--tri-space-24);
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.tri-wl-article__eyebrow {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
}

.tri-wl-article__title {
	margin: var(--tri-space-8) 0 0;
	font-size: var(--tri-fs-20);
	line-height: var(--tri-lh-1-3);
	font-weight: var(--tri-fw-700);
	/* Длинное название переносится целиком, а не обрезается многоточием. */
	overflow-wrap: anywhere;
}

.tri-wl-article__link {
	color: var(--tri-color-ink);
	text-decoration: none;
}

.tri-wl-article__link:hover,
.tri-wl-article__link:focus-visible {
	color: var(--tri-color-link-2a56b8);
}

.tri-wl-article__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tri-wl-article__lead {
	margin: var(--tri-space-12) 0 0;
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
}

/*
 * Автор и дата переносятся вместе с экраном: на 320px они встают
 * друг под друга, а не выталкивают карточку по горизонтали.
 */
.tri-wl-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--tri-space-4) var(--tri-space-12);
	margin: var(--tri-space-20) 0 0;
	padding-block-start: var(--tri-space-16);
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
	font-size: var(--tri-fs-14);
	color: var(--tri-color-muted-soft);
	min-width: 0;
}

.tri-wl-article__author {
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink-secondary);
	overflow-wrap: anywhere;
}

/* ====================================================================
 * ШИРЕ ТЕЛЕФОНА
 * ================================================================== */

@media (min-width: 768px) {
	.tri-wl-articles__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tri-wl-cats__list {
		flex-wrap: wrap;
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}

@media (min-width: 1024px) {
	.tri-wl-articles__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ====================================================================
 * СТРАНИЦЫ СПИСКА
 * ================================================================== */

.tri-wl-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tri-space-8);
	margin-block-start: var(--tri-space-40);
}

.tri-wl-pager__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-8);
	min-width: 0;
}

/* Номер и шаг — одинаковые цели нажатия: 44px в обе стороны. */
.tri-wl-pager__link,
.tri-wl-pager__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: var(--tri-space-14);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-10);
	background: var(--tri-color-white);
	color: var(--tri-color-ink);
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-600);
	text-decoration: none;
	font-variant-numeric: tabular-nums lining-nums;
	transition:
		border-color var(--tri-duration-28) var(--tri-ease),
		color var(--tri-duration-28) var(--tri-ease);
}

a.tri-wl-pager__link:hover,
a.tri-wl-pager__link:focus-visible,
a.tri-wl-pager__step:hover,
a.tri-wl-pager__step:focus-visible {
	border-color: var(--tri-color-navy);
	color: var(--tri-color-navy);
}

.tri-wl-pager__link.is-current {
	background: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
	color: var(--tri-color-white);
}