/**
 * Витрина учебного центра — до утверждения макета.
 *
 * Утверждённого экрана списка программ в пакете дизайна нет, поэтому
 * страница собрана из уже существующих величин темы: своих кеглей,
 * цветов и отступов здесь не заводится ни одного. Когда появится
 * макет, файл заменяется вёрсткой по нему, а не дополняется.
 *
 * Сетки везде объявлены явно (`minmax(0, 1fr)`): неявная колонка
 * `auto` не сжимается уже́ содержимого и даёт горизонтальную прокрутку
 * на узком экране — эта ошибка на сайте уже была в базе знаний.
 */

/* --- Первый экран ---------------------------------------------------- */

.tri-tl-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-tl-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-tl-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-tl-hero__facts {
	list-style: none;
	margin: var(--tri-space-32) 0 0;
	padding: 0;
	display: grid;
	/*
	 * Четыре показателя в столбик занимали на телефоне почти экран
	 * каждый. Колонка появляется сама, как только карточке хватает
	 * ширины: на 390px это две колонки, на 320px — одна.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: var(--tri-space-12);
}

.tri-tl-hero__fact {
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-20);
	background: var(--tri-color-white);
	min-width: 0;
}

.tri-tl-hero__value {
	display: block;
	font-size: var(--tri-fs-24);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
}

.tri-tl-hero__label {
	display: block;
	margin-block-start: var(--tri-space-4);
	font-size: var(--tri-fs-14);
	color: var(--tri-color-muted-soft);
}

/* --- Общие заголовки секций ------------------------------------------ */

.tri-tl-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-tl-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-tl-programs__empty {
	margin: var(--tri-space-24) 0 0;
	font-size: var(--tri-fs-16-5);
	color: var(--tri-color-muted-soft);
}

.tri-tl-programs__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-tl-card {
	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;
}

.tri-tl-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

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

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

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

.tri-tl-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-tl-card__facts {
	list-style: none;
	margin: var(--tri-space-20) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-16);
}

.tri-tl-card__value {
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
}

.tri-tl-card__label {
	font-size: var(--tri-fs-14);
	color: var(--tri-color-muted-soft);
	margin-inline-start: var(--tri-space-4);
}

/* --- Направления ------------------------------------------------------ */

.tri-tl-directions__list {
	list-style: none;
	margin: var(--tri-space-28) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-16);
}

.tri-tl-directions__card {
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-24);
	background: var(--tri-color-surface-edf2fd);
	min-width: 0;
}

.tri-tl-directions__title {
	margin: 0;
	font-size: var(--tri-fs-18);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
	overflow-wrap: anywhere;
}

.tri-tl-directions__text {
	margin: var(--tri-space-8) 0 0;
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

/* --- Заявка ----------------------------------------------------------- */

.tri-tl-cta__panel {
	border-radius: var(--tri-radius-24);
	background: var(--tri-color-navy);
	color: var(--tri-color-white);
	padding: var(--tri-space-44) var(--tri-space-32);
	min-width: 0;
}

.tri-tl-cta__title {
	margin: 0;
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-32);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	overflow-wrap: anywhere;
}

.tri-tl-cta__text {
	margin: var(--tri-space-14) 0 0;
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-c8cdd6);
	max-width: 60ch;
}

.tri-tl-cta__actions {
	margin-block-start: var(--tri-space-24);
	flex-wrap: wrap;
}

/* --- Широкие экраны --------------------------------------------------- */

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

	.tri-tl-programs__list,
	.tri-tl-directions__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

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

	.tri-tl-directions__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tri-tl-cta__panel {
		padding: var(--tri-space-52);
	}
}