/**
 * Статья базы знаний (wiki).
 *
 * reference: design-reference/wiki.html.
 *
 * Страница состоит из двух колонок: слева прилипающее оглавление
 * (230px), справа — материал. В макете это две отдельные секции, а
 * оглавление поднимается в шапку отрицательным `margin-top:-372px`.
 * Здесь шапка и статья лежат в ОДНОЙ сетке, а оглавление занимает
 * левую колонку целиком: визуально то же самое, но без магического
 * числа, которое ломается на заголовке другой длины (а статей будут
 * сотни, и длина заголовка у каждой своя).
 *
 * Оформление элементов статьи (врезки, схемы, промо-блоки, список
 * изменений, карточка автора) задано классами: редактор собирает
 * материал из этих блоков, а не переносит стили из макета вручную.
 */

/* ====================================================================
 * ОБЩАЯ СЕТКА
 * reference: 230px 1fr; gap 44px; align-items:start
 * ================================================================== */

/*
 * КОЛОНКА ДОЛЖНА УМЕТЬ СЖИМАТЬСЯ.
 *
 * На узких экранах колонка объявлена не была, и сетка брала неявную
 * дорожку auto. Такая дорожка не сужается меньше своего содержимого:
 * длинный пункт оглавления требовал около 690px, и вся страница
 * растягивалась под него — при окне 360px документ занимал 707px.
 *
 * minmax(0, 1fr) разрешает дорожке быть уже содержимого, и текст
 * начинает переноситься. Прятать переполнение у body нельзя: это
 * скрывает причину, а не устраняет её.
 */
.tri-wiki__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-44);
	align-items: start;
}

/*
 * ЛЕВАЯ КОЛОНКА ТЯНЕТСЯ НА ВСЮ ВЫСОТУ СТРОКИ.
 *
 * У сетки align-items: start — так шапка и текст прижаты к верху. Но
 * этим же правилом колонка оглавления сжималась до высоты самого
 * списка, и липкому блоку было некуда ехать: оглавление уходило вверх
 * вместе с текстом и пропадало с экрана на первом же разделе.
 * Прилипание работает только внутри своего контейнера, поэтому
 * контейнер обязан быть высотой со статью.
 */
.tri-wiki__aside {
	min-width: 0;
	align-self: stretch;
}

/*
 * Колонка с текстом. min-width: 0 нужен ей по той же причине, что и
 * левой: без него широкая таблица внутри статьи распирала бы дорожку
 * сетки и вместе с ней всю страницу.
 */
.tri-wiki__col {
	min-width: 0;
}

/*
 * ПУСТАЯ ЛЕВАЯ КОЛОНКА ЕСТЬ ТОЛЬКО НА ШИРОКОМ ЭКРАНЕ.
 *
 * В шапке материала и в блоке «Читайте также» левая колонка пуста:
 * она держит текст на одной вертикали с оглавлением. На телефоне
 * колонок нет, и пустой элемент превратился бы в лишний отступ
 * величиной с gap сетки.
 */
.tri-wiki__aside--empty {
	display: none;
}

/* ====================================================================
 * ШАПКА МАТЕРИАЛА (отдельная секция над текстом)
 * reference: белое полотно, hairline сверху, контейнер padding 28px 0 0
 * ================================================================== */

.tri-wiki-hero {
	background-color: var(--tri-color-white);
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
}

/* ====================================================================
 * ШАПКА СТАТЬИ
 * reference: padding:36px 0 0
 * ================================================================== */

.tri-wiki-head {
	padding-block-start: var(--tri-space-28);
	min-width: 0;
}

/* ====================================================================
 * ХЛЕБНЫЕ КРОШКИ В СТАТЬЕ
 * reference (v3): обычная строка 13px без плашки, padding 6px 0 26px,
 * снизу hairline #EBEDF1
 *
 * ПОЧЕМУ ЗДЕСЬ, А НЕ В КОМПОНЕНТЕ. На странице услуги крошки лежат
 * поверх фотографии обложки, и плашка с фоном там обязательна —
 * иначе текст не читается. В статье фон белый, плашка вокруг
 * крошек превращается в лишнюю рамку и съедает воздух перед
 * заголовком. Меняется только вид в этом месте: разметка, порядок
 * и микроразметка остаются общими.
 * ================================================================== */

.tri-wiki-head .tri-breadcrumbs {
	display: block;
	font-weight: var(--tri-fw-500);
}

.tri-wiki-head .tri-breadcrumbs__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tri-space-10);
	padding: var(--tri-space-6) 0 var(--tri-space-26);
	background: none;
	border: 0;
	border-block-end: var(--tri-border-width) solid var(--tri-color-divider);
	border-radius: 0;
}

.tri-wiki-head .tri-breadcrumbs a {
	color: var(--tri-color-muted-soft);
	font-weight: var(--tri-fw-600);
}

.tri-wiki-head .tri-breadcrumbs a:hover,
.tri-wiki-head .tri-breadcrumbs a:focus-visible {
	color: var(--tri-color-ink);
}

.tri-wiki-head .tri-breadcrumbs__current,
.tri-wiki-head .tri-breadcrumbs .breadcrumb_last {
	color: var(--tri-color-ink-secondary);
	font-weight: var(--tri-fw-600);
}

.tri-wiki-head .tri-breadcrumbs__separator {
	color: var(--tri-color-border-c9cdd5);
}

/*
 * Длинная цепочка на телефоне прокручивается внутри своей строки —
 * так же, как в общем компоненте, но без плашки вокруг.
 */
@media (max-width: 767px) {
	.tri-wiki-head .tri-breadcrumbs__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		white-space: nowrap;
		scrollbar-width: none;
	}

	.tri-wiki-head .tri-breadcrumbs__inner::-webkit-scrollbar {
		display: none;
	}
}

/* reference: 13px/800; ls 0.08em; uppercase; margin-top:30px */
.tri-wiki-head__eyebrow {
	display: block;
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-36);
}

/* reference: 44px/1.18/800; ls -0.015em; margin-top:18px; text-wrap:balance */
.tri-wiki-head__title {
	font-size: clamp(1.875rem, 1.36rem + 2vw, 2.75rem); /* 30px → 44px на 1280px */
	line-height: var(--tri-lh-1-18);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-015);
	margin: var(--tri-space-20) 0 0;
	text-wrap: balance;
}

/* reference: 19px/1.6 #5A6270; margin-top:20px; text-wrap:pretty */
.tri-wiki-head__lead {
	font-size: var(--tri-fs-19);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-24);
	text-wrap: pretty;
}

/* reference: строка мета — gap 22px; margin-top:22px;
   padding-bottom:24px; border-bottom 1px #EBEDF1 */
.tri-wiki-head__meta {
	display: flex;
	align-items: center;
	gap: var(--tri-space-22);
	margin-block-start: var(--tri-space-28);
	padding-block-end: var(--tri-space-26);
	border-block-end: var(--tri-border-width) solid var(--tri-color-divider);
	flex-wrap: wrap;
	list-style: none;
	padding-inline: 0;
}

/* reference: 13.5px/600 #6B7280; значение — #5A6270 w700 */
.tri-wiki-head__meta li {
	display: flex;
	align-items: center;
	gap: var(--tri-space-7);
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
}

.tri-wiki-head__meta b {
	color: var(--tri-color-muted);
	font-weight: var(--tri-fw-700);
}

/* reference: точка-разделитель 4x4 #C9CDD5 */
.tri-wiki-head__meta li + li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-border-c9cdd5);
	margin-inline-end: var(--tri-space-15);
}

/* reference: «Проверено экспертом» — 13.5px/700 #16181D */
.tri-wiki-head__checked {
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
}

/* reference: автор — gap 16px; padding 20px 0; border-bottom 1px #EBEDF1 */
.tri-wiki-head__author {
	display: flex;
	align-items: center;
	gap: var(--tri-space-16);
	padding-block: var(--tri-space-20);
	border-block-end: var(--tri-border-width) solid var(--tri-color-divider);
	flex-wrap: wrap;
}

/* reference: аватар 52x52 круг */
.tri-wiki-head__avatar {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-circle);
	overflow: hidden;
	background-color: var(--tri-color-surface-edf2fd);
}

.tri-wiki-head__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tri-wiki-head__who {
	flex: 1;
	min-width: 0;
}

/* reference: 15.5px/800 */
.tri-wiki-head__name {
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

/* reference: 13px/600 #5A6270; margin-top:2px */
.tri-wiki-head__role {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-2);
}

/* reference: 13.5px/800; nowrap */
.tri-wiki-head__link {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	white-space: nowrap;
	text-decoration: none;
}

/* ====================================================================
 * ОГЛАВЛЕНИЕ
 * reference: 12px/800 ls 0.08em uppercase; список gap 4px;
 * border-left 1px #E2E5EA; ссылка 14px padding 9px 8px 9px 16px
 *
 * MOBILE-FIRST. Базовые правила описывают телефон: оглавление —
 * обычный блок со сворачиваемым списком. Липкая колонка включается
 * с 1024px, где для неё есть место.
 * ================================================================== */

/*
 * Поле блока переехало на саму кнопку: на телефоне «Содержание» —
 * основной способ навигации по статье, и нажиматься должна вся
 * строка, а не 19 пикселей текста внутри неё.
 */
.tri-toc {
	min-width: 0;
	margin-block-start: var(--tri-space-28);
	padding: 0 var(--tri-space-18) var(--tri-space-16);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-14);
	background-color: var(--tri-color-surface-fafbff);
}

/*
 * КНОПКА — ЭТО ЗАГОЛОВОК БЛОКА.
 *
 * На телефоне она сворачивает список, на широком экране остаётся
 * просто подписью: там список открыт всегда, кнопка не реагирует на
 * нажатие и убрана из обхода клавиатурой (tabindex ставит скрипт).
 */
.tri-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-12);
	width: 100%;
	min-block-size: 48px;
	background: none;
	border: 0;
	padding: var(--tri-space-16) 0;
	cursor: pointer;
	font-family: inherit;
	text-align: start;
	color: var(--tri-color-muted-soft);
}

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

.tri-toc__chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.tri-toc__toggle[aria-expanded="true"] .tri-toc__chevron {
	transform: rotate(180deg);
}

.tri-toc__list {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-4);
	margin-block-start: var(--tri-space-16);
	border-inline-start: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	list-style: none;
	padding: 0;
	min-width: 0;
}

/*
 * СВЁРНУТЫЙ СПИСОК ДЕЙСТВИТЕЛЬНО СКРЫТ.
 *
 * Скрипт сворачивает список атрибутом hidden, но браузерное правило
 * [hidden]{display:none} слабее правила по классу выше: с display:flex
 * список оставался на экране, кнопка щёлкала вхолостую, и на телефоне
 * десять пунктов навигации по-прежнему стояли между шапкой статьи и
 * первым абзацем. Правило по тому же классу возвращает hidden силу.
 */
.tri-toc__list[hidden] {
	display: none;
}

/*
 * ПУНКТ ОГЛАВЛЕНИЯ ДОЛЖЕН УМЕТЬ СЖИМАТЬСЯ.
 *
 * У элемента флексбокса минимальная ширина по умолчанию равна ширине
 * его содержимого. Длинный заголовок раздела не переносился, пункт
 * требовал своей полной ширины, и на узком экране вся страница
 * растягивалась под него: при окне 320px документ занимал под 700px.
 *
 * min-width: 0 снимает это требование и разрешает тексту переноситься.
 * Прятать переполнение у body нельзя — это скрывает причину, а не
 * убирает её.
 */
.tri-toc__list > li {
	min-width: 0;
}

.tri-toc__link {
	display: block;
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted);
	padding: var(--tri-space-9) var(--tri-space-8) var(--tri-space-9) var(--tri-space-16);
	margin-inline-start: -1px;
	border-inline-start: 2px solid transparent;
	line-height: var(--tri-lh-1-4);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.2s ease, border-color 0.2s ease;
}

/* reference: h3-пункты чуть мельче и с дополнительным отступом */
.tri-toc__link--h3 {
	font-size: var(--tri-fs-13-5);
	padding-inline-start: var(--tri-space-28);
}

.tri-toc__link:hover,
.tri-toc__link:focus-visible {
	color: var(--tri-color-ink);
}

/*
 * АКТИВНЫЙ РАЗДЕЛ. Отметку ставит article.js по наблюдателю
 * пересечений — она показывает, какой раздел читатель видит сейчас.
 * Отличается и цветом, и насыщенностью, и полосой слева: одного
 * цвета мало для людей, которые его не различают.
 */
.tri-toc__link[aria-current="true"] {
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-800);
	border-inline-start-color: var(--tri-color-navy);
}

@media (prefers-reduced-motion: reduce) {
	.tri-toc__chevron,
	.tri-toc__link {
		transition: none;
	}
}

/* ====================================================================
 * ТЕЛО СТАТЬИ
 * reference (v3): H2 32px/1.2/800 ls -0.012em, отступ сверху 64px;
 * абзацы 18px/1.7 #3A3F49, отступ 22px; списки 17px/1.6
 *
 * ВОЗДУХ — ЭТО ЧИТАЕМОСТЬ, А НЕ УКРАШЕНИЕ. Материалы базы знаний
 * длинные: без крупных интервалов между разделами, абзацами и
 * врезками текст читается как сплошное полотно, и человек теряет
 * место, с которого продолжать. Отступы здесь заданы один раз для
 * ВСЕХ элементов статьи — и для блоков Gutenberg тоже, — чтобы новый
 * материал не приходилось размечать вручную.
 * ================================================================== */

.tri-wiki-body {
	min-width: 0;
	padding-block-start: var(--tri-space-28);
}

.tri-wiki-body h2 {
	font-size: var(--tri-fs-32);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-012);
	margin: var(--tri-space-64) 0 0;
	scroll-margin-top: 120px;
	text-wrap: balance;
}

/*
 * Первый заголовок материала не отодвигается на целый раздел: над ним
 * уже стоит шапка статьи, и двойной отступ выглядел бы обрывом.
 */
.tri-wiki-body > h2:first-child {
	margin-block-start: var(--tri-space-28);
}

.tri-wiki-body h3 {
	font-size: var(--tri-fs-22);
	line-height: var(--tri-lh-1-3);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin: var(--tri-space-40) 0 0;
	scroll-margin-top: 120px;
}

.tri-wiki-body h4 {
	font-size: var(--tri-fs-18);
	line-height: var(--tri-lh-1-35);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin: var(--tri-space-32) 0 0;
	scroll-margin-top: 120px;
}

.tri-wiki-body p {
	font-size: var(--tri-fs-18);
	line-height: var(--tri-lh-1-7);
	color: var(--tri-color-ink-secondary);
	margin-block-start: var(--tri-space-22);
}

.tri-wiki-body p + p {
	margin-block-start: var(--tri-space-20);
}

.tri-wiki-body a {
	font-weight: var(--tri-fw-700);
}

/* ====================================================================
 * СПИСКИ РЕДАКТОРА
 * reference: пункты 17px/1.6, интервал между пунктами 14px,
 * отступ блока сверху 22px
 *
 * Правила описывают ОБЫЧНЫЕ ul/ol из редактора, а не только
 * оформленный .tri-wiki-list: редактор набирает список кнопкой
 * Gutenberg и не обязан помнить про классы темы.
 * ================================================================== */

.tri-wiki-body ul,
.tri-wiki-body ol {
	margin-block-start: var(--tri-space-22);
	padding-inline-start: var(--tri-space-22);
	font-size: var(--tri-fs-17);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

.tri-wiki-body li + li {
	margin-block-start: var(--tri-space-14);
}

.tri-wiki-body li > ul,
.tri-wiki-body li > ol {
	margin-block-start: var(--tri-space-14);
}

.tri-wiki-body ul li::marker,
.tri-wiki-body ol li::marker {
	color: var(--tri-color-navy);
}

/* Список с фирменными точками (оформленный вариант). */
.tri-wiki-list {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-14);
	margin-block-start: var(--tri-space-22);
	list-style: none;
	padding: 0;
}

.tri-wiki-list li {
	display: flex;
	gap: var(--tri-space-12);
	align-items: flex-start;
	font-size: var(--tri-fs-17);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

/* Интервал даёт gap контейнера: второй раз добавлять его не нужно. */
.tri-wiki-list li + li {
	margin-block-start: 0;
}

.tri-wiki-list li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-navy);
	flex-shrink: 0;
	margin-block-start: var(--tri-space-10);
}

.tri-wiki-list b {
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-800);
}

/* ====================================================================
 * ТАБЛИЦЫ
 * reference (v3): рамка 1px #E2E5EA, скругление 14px, шапка #F5F8FF
 * 12px/800 uppercase, ячейки padding 15px 20px, разделители #EBEDF1
 *
 * ДВА ИСТОЧНИКА, ОДИН ВИД. Таблица приходит либо блоком Gutenberg
 * (figure.wp-block-table), либо обычным <table> в тексте. Правила
 * написаны для обоих: редактор вставляет таблицу привычной кнопкой
 * и получает оформление макета без ручной разметки.
 *
 * ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА — У ТАБЛИЦЫ, А НЕ У СТРАНИЦЫ. Таблица из
 * четырёх колонок не помещается в телефон. Прокручивается её
 * собственная рамка со скруглением; документ по горизонтали не едет.
 * ================================================================== */

.tri-wiki-body .wp-block-table,
.tri-wiki-body .tri-wiki-table {
	margin: var(--tri-space-32) 0 0;
}

/*
 * Рамка со скруглением живёт на обёртке, а прокрутка — внутри неё.
 * overflow: hidden и overflow-x: auto на одном элементе несовместимы:
 * скругление обрезало бы прокрутку. Поэтому рамка снаружи, таблица
 * внутри, и у самой таблицы рамки нет.
 */
.tri-wiki-body .wp-block-table,
.tri-wiki-body .tri-wiki-table,
.tri-wiki-body > table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-14);
	background-color: var(--tri-color-white);
}

.tri-wiki-body > table {
	margin-block-start: var(--tri-space-32);
}

.tri-wiki-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-5);
	color: var(--tri-color-ink-secondary);
}

/* reference: шапка — светлое полотно, мелкая прописная подпись */
.tri-wiki-body thead th,
.tri-wiki-body table tr:first-child th {
	background-color: var(--tri-color-surface-f5f8ff);
	text-align: start;
	padding: var(--tri-space-13) var(--tri-space-20);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
	white-space: nowrap;
}

.tri-wiki-body tbody tr {
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
	vertical-align: top;
}

.tri-wiki-body td,
.tri-wiki-body tbody th {
	padding: var(--tri-space-15) var(--tri-space-20);
	text-align: start;
}

/* Первая колонка — ключ строки, поэтому насыщеннее остальных. */
.tri-wiki-body tbody th,
.tri-wiki-body tbody td:first-child {
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

/*
 * ВЫРАВНИВАНИЕ ПО ПРАВОМУ КРАЮ — ТОЛЬКО ТАМ, ГДЕ ЕГО ЗАДАЛ РЕДАКТОР.
 *
 * Правый край уместен у коротких значений: срок, сумма, количество —
 * их удобно сравнивать по разрядам. Длинный текст, прижатый вправо,
 * получает рваный левый край и читается заметно хуже, поэтому общего
 * правила «вся таблица вправо» здесь нет: работает штатный класс
 * Gutenberg на конкретной ячейке.
 */
.tri-wiki-body td.has-text-align-right,
.tri-wiki-body th.has-text-align-right {
	text-align: end;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tri-wiki-body td.has-text-align-center,
.tri-wiki-body th.has-text-align-center {
	text-align: center;
}

/* Подпись таблицы — та же, что у схем и видео. */
.tri-wiki-body .wp-block-table figcaption,
.tri-wiki-body table + figcaption {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
	margin-block-start: var(--tri-space-10);
	text-align: start;
	padding: 0 var(--tri-space-2) var(--tri-space-2);
}

/* ====================================================================
 * ПРОЧИЕ БЛОКИ РЕДАКТОРА
 * Отступ сверху одинаков у цитаты, картинки и встраивания: материал
 * держит ритм независимо от того, чем его наполнили.
 * ================================================================== */

.tri-wiki-body > figure,
.tri-wiki-body > blockquote,
.tri-wiki-body .wp-block-image,
.tri-wiki-body .wp-block-embed,
.tri-wiki-body .wp-block-quote,
.tri-wiki-body .wp-block-pullquote,
.tri-wiki-body .wp-block-group,
.tri-wiki-body .wp-block-columns,
.tri-wiki-body .wp-block-media-text {
	margin-block-start: var(--tri-space-32);
}

.tri-wiki-body .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tri-radius-14);
}

.tri-wiki-body .wp-block-embed iframe,
.tri-wiki-body .wp-block-embed video {
	display: block;
	width: 100%;
	border-radius: var(--tri-radius-14);
}

.tri-wiki-body blockquote {
	border-inline-start: 3px solid var(--tri-color-navy);
	padding: var(--tri-space-6) 0 var(--tri-space-6) var(--tri-space-24);
	font-size: var(--tri-fs-19);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink);
}

.tri-wiki-body blockquote p:first-child {
	margin-block-start: 0;
}

.tri-wiki-body hr,
.tri-wiki-body .wp-block-separator {
	border: 0;
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
	margin-block-start: var(--tri-space-48);
}

/* ====================================================================
 * КОРОТКО О ГЛАВНОМ
 * reference: #FAFBFF; border #E2E5EA; radius 16px; padding 26px 30px;
 * margin-top:28px; пункты с точкой 6x6 #12295C
 * ================================================================== */

.tri-wiki-summary {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-28) var(--tri-space-32);
	margin-block-start: var(--tri-space-28);
}

.tri-wiki-summary__title {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-07);
	text-transform: uppercase;
	color: var(--tri-color-ink);
}

.tri-wiki-summary__list {
	display: flex;
	flex-direction: column;
	margin-block-start: var(--tri-space-14);
	list-style: none;
	padding: 0;
}

/* reference: строки — border-bottom 1px #EDF2FD; padding 11px 0; gap 14px */
.tri-wiki-summary__list li {
	display: flex;
	gap: var(--tri-space-14);
	align-items: flex-start;
	border-block-end: var(--tri-border-width) solid var(--tri-color-surface-edf2fd);
	padding-block: var(--tri-space-13);
	font-size: var(--tri-fs-16);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-ink-secondary);
}

.tri-wiki-summary__list li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-navy);
	flex-shrink: 0;
	margin-block-start: var(--tri-space-9);
}

/* ====================================================================
 * ВРЕЗКИ
 * reference: radius 12px; padding 20px 24px; margin-top 22–26px;
 * левая полоса 3px
 * ================================================================== */

.tri-wiki-note {
	border-radius: var(--tri-radius-12);
	padding: var(--tri-space-22) var(--tri-space-26);
	margin-block-start: var(--tri-space-30);
}

.tri-wiki-note__label {
	display: flex;
	align-items: center;
	gap: var(--tri-space-9);
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-ink);
}

.tri-wiki-note p {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
	margin-block-start: var(--tri-space-8);
}

/* reference: требование законодательства — #FAFBFF, полоса #12295C */
.tri-wiki-note--law {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-inline-start: 3px solid var(--tri-color-navy);
}

/* reference: обратите внимание — #F5F8FF без цветной полосы */
.tri-wiki-note--attention {
	background-color: var(--tri-color-surface-f5f8ff);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	margin-block-start: var(--tri-space-22);
}

.tri-wiki-note--attention .tri-wiki-note__label {
	color: var(--tri-color-muted);
}

/* reference: важно — #FFF8EC; border #F0DDBA; полоса #E9A13B */
.tri-wiki-note--important {
	background-color: var(--tri-color-warn-surface);
	border: var(--tri-border-width) solid var(--tri-color-warn-border);
	border-inline-start: 3px solid var(--tri-color-warn-accent);
	margin-block-start: var(--tri-space-24);
}

.tri-wiki-note--important .tri-wiki-note__label {
	color: var(--tri-color-warn-text-strong);
}

.tri-wiki-note--important p {
	color: var(--tri-color-warn-text);
}

/* reference: практический пример — белый фон, полоса #17703D */
.tri-wiki-note--example {
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-inline-start: 3px solid var(--tri-color-success);
	padding: var(--tri-space-22) var(--tri-space-26);
}

.tri-wiki-note--example .tri-wiki-note__label {
	color: var(--tri-color-success);
}

/* reference: 17px/800; margin-top:10px */
.tri-wiki-note__title {
	font-size: var(--tri-fs-17);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-10);
}

.tri-wiki-note--example p {
	font-size: var(--tri-fs-16);
	margin-block-start: var(--tri-space-10);
}

/* reference: итоги примера — gap 28px; border-top 1px #EBEDF1;
   padding-top:14px; margin-top:16px */
.tri-wiki-note__facts {
	display: flex;
	gap: var(--tri-space-28);
	margin-block-start: var(--tri-space-16);
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
	padding-block-start: var(--tri-space-14);
	flex-wrap: wrap;
	font-size: var(--tri-fs-14);
	color: var(--tri-color-muted);
	list-style: none;
	padding-inline: 0;
}

.tri-wiki-note__facts b {
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-800);
}

/* reference: совет эксперта — #FAFBFF; radius 14px; padding 22px 26px;
   gap 18px; аватар 46x46 */
.tri-wiki-advice {
	display: flex;
	gap: var(--tri-space-18);
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-22) var(--tri-space-26);
	margin-block-start: var(--tri-space-26);
	align-items: flex-start;
}

.tri-wiki-advice__avatar {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-circle);
	overflow: hidden;
	background-color: var(--tri-color-surface-edf2fd);
}

.tri-wiki-advice__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tri-wiki-advice__label {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-ink);
}

.tri-wiki-advice p {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
	margin-block-start: var(--tri-space-8);
}

/* ====================================================================
 * ИЛЛЮСТРАЦИИ
 * reference: figure margin-top 24–28px; рамка radius 16px;
 * подпись 13.5px/600 #6B7280 margin-top:10px
 * ================================================================== */

.tri-wiki-figure {
	margin: var(--tri-space-28) 0 0;
}

.tri-wiki-figure__frame {
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-16);
	overflow: hidden;
	background-color: var(--tri-color-white);
}

.tri-wiki-figure__frame img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
	background-color: var(--tri-color-surface-edf2fd);
}

.tri-wiki-figure figcaption {
	font-size: var(--tri-fs-13-5);
	color: var(--tri-color-muted-soft);
	font-weight: var(--tri-fw-600);
	margin-block-start: var(--tri-space-10);
}

/* reference: видео — рамка 400px; вуаль rgba(4,18,46,0.35);
   круг 76x76 rgba(255,255,255,0.94); подпись слева снизу */
.tri-wiki-video {
	position: relative;
	height: 400px;
	border-radius: var(--tri-radius-16);
	overflow: hidden;
	background-color: var(--tri-color-navy);
	display: block;
}

.tri-wiki-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tri-wiki-video__veil {
	position: absolute;
	inset: 0;
	background-color: rgba(4, 18, 46, 0.35);
	pointer-events: none;
}

.tri-wiki-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	border-radius: var(--tri-radius-circle);
	background-color: rgba(255, 255, 255, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tri-color-navy);
}

/* reference: плашка названия — left 20px; bottom 18px;
   rgba(2,21,55,0.85); radius 10px; padding 10px 16px */
.tri-wiki-video__label {
	position: absolute;
	left: var(--tri-space-20);
	bottom: var(--tri-space-18);
	background-color: rgba(2, 21, 55, 0.85);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-10) var(--tri-space-16);
	color: var(--tri-color-white);
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-700);
	pointer-events: none;
}

/* ====================================================================
 * ЭКСПЕРТНЫЙ ТЕСТ
 * reference: #FAFBFF; border #E2E5EA; radius 16px; padding 30px 34px;
 * margin-top:52px
 * ================================================================== */

.tri-wiki-quiz {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-30) var(--tri-space-34);
	margin-block-start: var(--tri-space-52);
}

.tri-wiki-quiz__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-20);
}

/* reference: плашка #F8B327; radius 100px; padding 5px 12px;
   12px/600 ls 0.08em uppercase */
.tri-wiki-quiz__badge {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-600);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-ink);
	background-color: var(--tri-color-accent);
	border-radius: var(--tri-radius-100);
	padding: var(--tri-space-5) var(--tri-space-12);
}

/* reference: аватар 44x44 круг */
.tri-wiki-quiz__avatar {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-circle);
	overflow: hidden;
	background-color: var(--tri-color-surface-edf2fd);
}

.tri-wiki-quiz__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* reference: 22px/800; margin-top:16px */
.tri-wiki-quiz__title {
	font-size: var(--tri-fs-22);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin: var(--tri-space-16) 0 0;
}

/* reference: 14.5px/1.55 #5A6270; margin-top:8px */
.tri-wiki-quiz__text {
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-8);
}

/* reference: вопросы — gap 10px; margin-top:22px */
.tri-wiki-quiz__list {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-10);
	margin-block-start: var(--tri-space-22);
	list-style: none;
	padding: 0;
	border: 0;
	margin-inline: 0;
}

/* reference: строка вопроса — #FFFFFF; border #E2E5EA; radius 12px;
   padding 13px 18px; gap 16px */
.tri-wiki-quiz__item {
	display: flex;
	align-items: center;
	gap: var(--tri-space-16);
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-12);
	padding: var(--tri-space-13) var(--tri-space-18);
	flex-wrap: wrap;
}

/* reference: 14.5px/600 #3A3F49; lh 1.4 */
.tri-wiki-quiz__q {
	flex: 1;
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-ink-secondary);
	line-height: var(--tri-lh-1-4);
	min-width: 0;
}

.tri-wiki-quiz__answers {
	display: flex;
	gap: var(--tri-space-8);
}

/* Ответы — настоящие radio: вопрос отвечается с клавиатуры и
   озвучивается скринридером; визуально это две кнопки из макета. */
.tri-wiki-quiz__answer {
	position: relative;
}

.tri-wiki-quiz__answer input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	margin: 0;
}

/* reference: кнопка 13px/800; padding 8px 18px; radius 9px;
   выключенная — border #DDE0E6, включённая — заливка #12295C */
.tri-wiki-quiz__answer span {
	display: block;
	background-color: var(--tri-color-white);
	border: 1.5px solid var(--tri-color-border);
	color: var(--tri-color-muted);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	padding: var(--tri-space-8) var(--tri-space-18);
	border-radius: var(--tri-radius-9);
	pointer-events: none;
}

.tri-wiki-quiz__answer input:checked + span {
	background-color: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
	color: var(--tri-color-white);
}

.tri-wiki-quiz__answer input:focus-visible + span {
	outline: 2px solid var(--tri-role-focus);
	outline-offset: 3px;
}

/* reference: рекомендация — #FFF8EC; border #F0DDBA; radius 12px;
   padding 16px 20px; margin-top:14px */
.tri-wiki-quiz__result {
	background-color: var(--tri-color-warn-surface);
	border: var(--tri-border-width) solid var(--tri-color-warn-border);
	border-radius: var(--tri-radius-12);
	padding: var(--tri-space-16) var(--tri-space-20);
	margin-block-start: var(--tri-space-14);
}

.tri-wiki-quiz__result-label {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-warn-text-strong);
}

.tri-wiki-quiz__result p {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-warn-text);
	margin-block-start: var(--tri-space-7);
}

/* reference: подвал — gap 16px; margin-top:18px */
.tri-wiki-quiz__foot {
	display: flex;
	align-items: center;
	gap: var(--tri-space-16);
	margin-block-start: var(--tri-space-18);
	flex-wrap: wrap;
}

/* reference: 12.5px/600 #6B7280 */
.tri-wiki-quiz__disclaimer {
	font-size: var(--tri-fs-12-5);
	color: var(--tri-color-muted-soft);
	font-weight: var(--tri-fw-600);
}

/* ====================================================================
 * ПРОМО-БЛОКИ (AI-инструменты и учебная платформа)
 * reference: тёмный — #12295C + сетка-паттерн; светлый — #F5F8FF
 * ================================================================== */

.tri-wiki-promo {
	position: relative;
	display: flex;
	gap: var(--tri-space-36);
	align-items: center;
	border-radius: var(--tri-radius-18);
	padding: var(--tri-space-36) var(--tri-space-40);
	margin-block-start: var(--tri-space-60);
	flex-wrap: wrap;
}

/* reference: #12295C + линии rgba(255,255,255,0.035) 56x56 */
.tri-wiki-promo--dark {
	background-color: var(--tri-color-navy);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 56px 56px;
	overflow: hidden;
}

/* reference: #F5F8FF; border #E2E5EA */
.tri-wiki-promo--light {
	background-color: var(--tri-color-surface-f5f8ff);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
}

.tri-wiki-promo__body {
	flex: 1;
	min-width: 0;
}

/* reference: плашка над блоком */
.tri-wiki-promo__badge {
	display: inline-flex;
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-navy);
	background-color: var(--tri-color-accent);
	border-radius: var(--tri-radius-100);
	padding: var(--tri-space-5) var(--tri-space-12);
}

/* reference: 24px/800; ls -0.01em; margin-top:14px */
.tri-wiki-promo__title {
	font-size: var(--tri-fs-24);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-01);
	margin: var(--tri-space-14) 0 0;
}

/* reference: 14.5px/1.55; margin-top:10px */
.tri-wiki-promo__text {
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-10);
}

.tri-wiki-promo--dark .tri-wiki-promo__title {
	color: var(--tri-color-white);
}

.tri-wiki-promo--dark .tri-wiki-promo__text {
	color: var(--tri-color-on-dark-c8cdd6);
}

/* reference: gap 20px; margin-top:20px */
.tri-wiki-promo__actions {
	gap: var(--tri-space-20);
	margin-block-start: var(--tri-space-20);
	align-items: center;
}

/* reference: карточка-макет 280px; radius 14px; padding 18px 20px */
.tri-wiki-promo__card {
	width: 280px;
	flex-shrink: 0;
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-18) var(--tri-space-20);
	pointer-events: none;
	box-shadow: var(--tri-shadow-black-44-25);
}

.tri-wiki-promo--light .tri-wiki-promo__card {
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	box-shadow: var(--tri-shadow-navy-36-1);
}

/* reference: 12px/800 #6B7280; ls 0.07em */
.tri-wiki-promo__card-eyebrow {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-muted-soft);
	letter-spacing: var(--tri-ls-p0-07);
}

/* reference: 13.5px/800; margin-top:8px */
.tri-wiki-promo__card-title {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-8);
}

/* reference: полосы-заглушки 7px #EBEDF1 */
.tri-wiki-promo__bar {
	height: 7px;
	background-color: var(--tri-color-divider);
	border-radius: var(--tri-radius-100);
	margin-block-start: var(--tri-space-7);
	overflow: hidden;
}

.tri-wiki-promo__bar:first-of-type {
	margin-block-start: var(--tri-space-12);
}

.tri-wiki-promo__bar > span {
	display: block;
	height: 100%;
	background-color: var(--tri-color-navy);
	border-radius: var(--tri-radius-100);
}

.tri-wiki-promo__card-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--tri-space-12);
	margin-block-start: var(--tri-space-12);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

/* reference: статус «● Черновик готов» / «Удостоверение по итогам курса» */
.tri-wiki-promo__status {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-success);
	margin-block-start: var(--tri-space-12);
}

/* reference: уголок-рамка над тёмным блоком */
.tri-wiki-promo__corner {
	position: absolute;
	top: -14px;
	left: 30px;
	width: 52px;
	height: 52px;
	border-block-start: 3px solid var(--tri-color-border-e2e5ea);
	border-inline-start: 3px solid var(--tri-color-border-e2e5ea);
	border-start-start-radius: var(--tri-radius-14);
	pointer-events: none;
}

/* ====================================================================
 * ПОСЛЕДНИЕ ИЗМЕНЕНИЯ
 * reference (v3): карточка с рамкой #E2E5EA, radius 14px;
 * шапка #F5F8FF 12px/800 uppercase padding 12px 22px;
 * строки сеткой 130px + 1fr, gap 24px, padding 18px 22px
 *
 * НА ТЕЛЕФОНЕ КОЛОНКИ НЕТ. Дата в 130px и текст рядом не помещаются
 * в узкий экран, поэтому дата встаёт над изменением отдельной
 * строкой: журнал остаётся читаемым, а страница не едет вбок.
 * ================================================================== */

.tri-wiki-changelog {
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	margin-block-start: var(--tri-space-24);
	background-color: var(--tri-color-white);
}

.tri-wiki-changelog__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-4) var(--tri-space-24);
	background-color: var(--tri-color-surface-f5f8ff);
	padding: var(--tri-space-12) var(--tri-space-22);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
}

.tri-wiki-changelog__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: inherit;
}

.tri-wiki-changelog__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-6) var(--tri-space-24);
	align-items: start;
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
	padding: var(--tri-space-18) var(--tri-space-22);
}

/* Интервал между строками даёт разделитель: margin здесь не нужен. */
.tri-wiki-changelog__row + .tri-wiki-changelog__row {
	margin-block-start: 0;
}

/* reference: дата 14px/800 navy, цифры в табличной ширине */
.tri-wiki-changelog__date {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	padding-block-start: var(--tri-space-2);
}

.tri-wiki-changelog__body {
	min-width: 0;
}

/* reference: 16.5px/800/1.35 */
.tri-wiki-changelog__title {
	font-size: var(--tri-fs-16-5);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1-35);
	color: var(--tri-color-ink);
}

/* reference: 15px/1.6 #5A6270; margin-top:6px */
.tri-wiki-changelog__text {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-6);
}

/* reference: 13.5px/700 #6B7280; margin-top:14px */
.tri-wiki-changelog__note {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
	margin-block-start: var(--tri-space-14);
}

/* ====================================================================
 * ПОМОЩЬ ЭКСПЕРТА / ФОРМА КОНСУЛЬТАЦИИ (блок внутри статьи)
 * reference (v3): #FAFBFF, рамка #E2E5EA, radius 18px,
 * padding 32px 34px, margin-top 56px; сетка 1fr + 360px:
 * слева специалист и контакты, справа белая карточка с формой
 * ================================================================== */

.tri-wiki-help {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-28);
	align-items: start;
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-18);
	padding: var(--tri-space-32) var(--tri-space-34);
	margin-block-start: var(--tri-space-56);
	scroll-margin-top: 120px;
}

.tri-wiki-help__who {
	display: flex;
	align-items: center;
	gap: var(--tri-space-16);
}

.tri-wiki-help__avatar {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-circle);
	overflow: hidden;
}

.tri-wiki-help__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tri-wiki-help__name {
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-wiki-help__role {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-2);
}

.tri-wiki-help__body {
	min-width: 0;
}

/* reference: 24px/1.25/800; margin-top:22px */
.tri-wiki-help__title {
	font-size: var(--tri-fs-24);
	line-height: var(--tri-lh-1-25);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-012);
	margin-block-start: var(--tri-space-22);
}

/* reference: 15.5px/1.6 #5A6270; margin-top:10px; мера строки 440px */
.tri-wiki-help__text {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-10);
	max-width: 44ch;
}

.tri-wiki-help__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-8);
	margin-block-start: var(--tri-space-22);
	align-items: flex-start;
}

.tri-wiki-help__phone {
	font-size: var(--tri-fs-17);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-wiki-help__email {
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted);
}

/*
 * КАРТОЧКА ФОРМЫ. Сама форма приходит из общего слота
 * (template-parts/common/form-slot.php): это может быть каноническая
 * форма темы или форма подключённого плагина. Оболочка одна и та же,
 * поэтому вид блока не зависит от того, чем форму в итоге закрыли.
 */
.tri-wiki-help__form {
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-22);
}

.tri-wiki-help__form-title {
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block-end: var(--tri-space-14);
}

/* Запасной путь: форма не подключена — остаётся кнопка и согласие. */
.tri-wiki-help__action {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-10);
	align-items: flex-start;
}

.tri-wiki-help__consent {
	font-size: var(--tri-fs-12);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-muted-soft);
}

/* ====================================================================
 * ОБ АВТОРЕ
 * reference (v3): #FAFBFF; radius 20px; сетка 200px 1fr; gap 32px;
 * padding 30px; margin-top:72px; фото 230px
 * ================================================================== */

.tri-wiki-author {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-20);
	display: grid;
	gap: var(--tri-space-32);
	padding: var(--tri-space-30);
	margin-block-start: var(--tri-space-72);
	scroll-margin-top: 120px;
}

.tri-wiki-author__photo {
	height: 250px;
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	background-color: var(--tri-color-surface-edf2fd);
}

.tri-wiki-author__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* reference: 12.5px/800; ls 0.08em; uppercase; #6B7280 */
.tri-wiki-author__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);
}

/* reference: 26px/800; margin-top:10px */
.tri-wiki-author__name {
	font-size: var(--tri-fs-26);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin: var(--tri-space-10) 0 0;
}

/* reference: 14.5px/700; margin-top:4px */
.tri-wiki-author__role {
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-4);
}

/* reference: 15px/1.6 #5A6270; margin-top:14px */
.tri-wiki-author__text {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-14);
}

/* reference: показатели — gap 26px; margin-top:16px; 20px/800 */
.tri-wiki-author__stats {
	display: flex;
	gap: var(--tri-space-26);
	margin-block-start: var(--tri-space-16);
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
}

.tri-wiki-author__stat-value {
	font-size: var(--tri-fs-20);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-wiki-author__stat-label {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
}

/* reference: gap 14px; margin-top:20px */
/*
 * ДЕЙСТВИЯ ПОД КАРТОЧКОЙ АВТОРА.
 * reference: две кнопки — «Все статьи автора» и «Задать вопрос
 * эксперту»; gap 14px, margin-top 20px. Кнопка печатается только
 * тогда, когда у неё есть куда вести: адрес приходит из карточки
 * эксперта или из поп-апа консультации, а не подставляется решёткой.
 */
.tri-wiki-author__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-14);
	margin-block-start: var(--tri-space-20);
}

/* ====================================================================
 * ЧИТАЙТЕ ТАКЖЕ
 * reference: #F5F8FF; padding 72px 0; margin-top:72px;
 * карточки repeat(3,1fr) gap 16px; margin-top:28px
 * ================================================================== */

.tri-wiki-related {
	background-color: var(--tri-color-surface-f5f8ff);
	margin-block-start: calc(var(--tri-space-72) * var(--tri-section-scale));
}

.tri-wiki-related__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tri-space-32);
	flex-wrap: wrap;
}

/* reference: 32px/800; ls -0.01em */
.tri-wiki-related__title {
	font-size: var(--tri-fs-32);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-01);
	margin: 0;
}

.tri-wiki-related__all {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	white-space: nowrap;
	text-decoration: none;
}

.tri-wiki-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--tri-space-16);
	margin-block-start: var(--tri-space-28);
	list-style: none;
	padding: 0;
}

/* reference: карточка — #FFFFFF; border #E2E5EA; radius 16px;
   padding 24px; gap 9px; hover border #16181D + тень */
.tri-wiki-card {
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-24);
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-9);
	height: 100%;
	text-decoration: none;
	min-width: 0;
	/* reference: .15s ease — в wiki другая длительность, чем на
	   остальных страницах (.3s); значение сохранено как есть. */
	transition:
		border-color var(--tri-duration-15) ease,
		box-shadow var(--tri-duration-15) ease;
}

.tri-wiki-card:hover,
.tri-wiki-card:focus-visible {
	border-color: var(--tri-color-ink);
	box-shadow: var(--tri-shadow-navy-28-08);
}

/* reference: 12px/800; ls 0.06em; uppercase; #6B7280 */
.tri-wiki-card__cat {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
}

/* reference: 16.5px/800; lh 1.4 */
.tri-wiki-card__title {
	font-size: var(--tri-fs-16-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	line-height: var(--tri-lh-1-4);
}

/* reference: 13.5px/1.55 #5A6270 */
.tri-wiki-card__text {
	font-size: var(--tri-fs-13-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
}

/* reference: подвал карточки — «Читать →» и время чтения */
.tri-wiki-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--tri-space-12);
	margin-block-start: auto;
	padding-block-start: var(--tri-space-4);
}

.tri-wiki-card__more {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-wiki-card__time {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
}

/* reference: связанные услуги — border-top 1px #E2E5EA;
   margin-top:32px; padding-top:24px; gap 24px */
.tri-wiki-related__services {
	display: flex;
	align-items: center;
	gap: var(--tri-space-24);
	border-block-start: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	margin-block-start: var(--tri-space-32);
	padding-block-start: var(--tri-space-24);
	flex-wrap: wrap;
}

.tri-wiki-related__services-label {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
	white-space: nowrap;
}

.tri-wiki-related__services ul {
	display: flex;
	gap: var(--tri-space-22);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-700);
}

/* ====================================================================
 * ШИРОКИЙ ЭКРАН
 *
 * Всё, что выше, описывает телефон. Здесь включаются две колонки,
 * липкое оглавление и раскладки макета. Медиазапросов max-width в
 * раскладке нет: правило появляется, когда для него есть место.
 * ================================================================== */

@media (min-width: 768px) {
	/* reference: строки журнала изменений — 130px + 1fr */
	.tri-wiki-changelog__head,
	.tri-wiki-changelog__row {
		grid-template-columns: 130px minmax(0, 1fr);
	}

	/* reference: карточка консультации — специалист и форма рядом */
	.tri-wiki-help {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--tri-space-36);
	}
}

@media (min-width: 1024px) {
	/* reference: 230px 1fr */
	.tri-wiki__grid {
		grid-template-columns: 230px minmax(0, 1fr);
	}

	/* Пустая колонка держит текст на одной вертикали с оглавлением. */
	.tri-wiki__aside--empty {
		display: block;
	}

	/*
	 * ОГЛАВЛЕНИЕ — ОТДЕЛЬНАЯ ЛИПКАЯ КОЛОНКА.
	 *
	 * Карточка с фоном нужна была телефону, где оглавление стоит в
	 * потоке текста и его надо отделить. В колонке фон лишний: макет
	 * показывает голый список с тонкой линией слева.
	 *
	 * top: 136px — высота липкой шапки с полосой рубрик плюс воздух:
	 * оглавление останавливается ПОД шапкой, а не заезжает под неё.
	 * Своя прокрутка включается на длинных материалах, чтобы пункты
	 * не уходили за нижний край экрана.
	 */
	.tri-toc {
		position: sticky;
		top: 136px;
		align-self: start;
		margin-block-start: 0;
		padding: var(--tri-space-28) 0 0;
		border: 0;
		border-radius: 0;
		background: none;
		max-height: calc(100vh - 160px);
		overflow-y: auto;
	}

	/* Кнопка превращается в подпись: список открыт всегда. */
	.tri-toc__toggle {
		cursor: default;
	}

	.tri-toc__chevron {
		display: none;
	}

	/* reference: repeat(3,1fr) */
	.tri-wiki-related__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* reference: 200px 1fr */
	.tri-wiki-author {
		grid-template-columns: 200px minmax(0, 1fr);
	}
}

/* ====================================================================
 * УЗКИЙ ЭКРАН: только оформление, не раскладка
 * ================================================================== */

@media (max-width: 1023px) {
	.tri-wiki-quiz,
	.tri-wiki-promo,
	.tri-wiki-help,
	.tri-wiki-author,
	.tri-wiki-summary {
		padding: var(--tri-space-24);
	}

	.tri-wiki-promo {
		gap: var(--tri-space-24);
		margin-block-start: var(--tri-space-40);
	}

	.tri-wiki-promo__card,
	.tri-wiki-help__action,
	.tri-wiki-help__form {
		width: 100%;
	}

	.tri-wiki-video {
		height: 240px;
	}

	.tri-wiki-author__photo {
		height: 220px;
	}

	/* Заголовки на телефоне не нуждаются в разделе воздуха на экран. */
	.tri-wiki-body h2 {
		font-size: var(--tri-fs-26);
		margin-block-start: var(--tri-space-48);
	}

	.tri-wiki-body h3 {
		font-size: var(--tri-fs-20);
		margin-block-start: var(--tri-space-32);
	}

	.tri-wiki-body p {
		font-size: var(--tri-fs-17);
	}

	/* Дата журнала изменений встаёт над самим изменением. */
	.tri-wiki-changelog__head span + span {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * ЦЕЛИ НАЖАТИЯ НА СЕНСОРНЫХ ЭКРАНАХ (мобильный этап 14.09)
 *
 * Ссылки-действия внутри карточек набраны мелким шрифтом: по высоте
 * они занимали 20–26px, и палец попадал в них через раз. Размер
 * шрифта и вид ссылки не меняются — увеличивается только область,
 * по которой можно нажать.
 * ---------------------------------------------------------------- */
@media (max-width: 1023px) {
	.tri-wiki-head__link,
	.tri-wiki-author__link {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}
}

/* Телефон и почта — тоже цели нажатия (мобильный этап 14.09). */
@media (max-width: 1023px) {
	.tri-wiki-help__phone,
	.tri-wiki-help__email {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}
}