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

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

.tri-sl-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-sl-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-sl-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-sl-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-sl-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-sl-directions__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-16);
}

.tri-sl-direction {
	position: relative;
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-16);
	background: var(--tri-color-white);
	padding: var(--tri-space-24);
	min-width: 0;
	transition:
		border-color var(--tri-duration-28) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease);
}

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

.tri-sl-direction__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--tri-radius-10);
	background: var(--tri-color-surface-edf2fd);
	color: var(--tri-color-navy);
}

.tri-sl-direction__title {
	margin: var(--tri-space-16) 0 0;
	font-size: var(--tri-fs-19);
	line-height: var(--tri-lh-1-3);
	font-weight: var(--tri-fw-700);
	overflow-wrap: anywhere;
}

.tri-sl-direction__link {
	color: var(--tri-color-ink);
	text-decoration: none;
}

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

/*
 * Нажимается вся карточка, а не одна строка заголовка: цель пальца
 * должна совпадать с тем, что человек видит как один объект.
 */
.tri-sl-direction__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

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

/* ====================================================================
 * КАТАЛОГ УСЛУГ
 * ================================================================== */

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

.tri-sl-catalog__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-sl-card {
	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-sl-card:hover,
.tri-sl-card:focus-within {
	border-color: var(--tri-color-navy);
	box-shadow: var(--tri-shadow-navy-18-10);
}

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

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

.tri-sl-card__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-sl-card__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-sl-card__link {
	color: var(--tri-color-ink);
	text-decoration: none;
}

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

.tri-sl-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tri-sl-card__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);
}

/*
 * Переход — подпись под текстом, а не вторая ссылка: нажимается вся
 * карточка, поэтому второй цели для клавиатуры и озвучивания здесь
 * быть не должно.
 */
.tri-sl-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-7);
	margin-block-start: auto;
	padding-block-start: var(--tri-space-20);
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
}

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

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

	.tri-sl-catalog__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.tri-sl-catalog__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}