/**
 * TRIADA — раскладка: container, section, сетки, утилиты.
 *
 * КЛЮЧЕВОЕ ПРАВИЛО СЕКЦИЙ
 * В макетах вертикальные отступы секций — это НЕ одна величина.
 * Встречаются 56, 64, 72, 78, 88, 92, 96, 100, 104, 112, 128, 144, 160px,
 * и разница между ними — часть дизайнерского ритма страницы.
 *
 * Поэтому:
 *   - каждая секция получает СВОИ padding-top/bottom из шкалы --tri-space-*;
 *   - адаптив не подменяет значения приближёнными, а масштабирует их все
 *     одним коэффициентом --tri-section-scale. Пропорции между 64/96/104/128
 *     сохраняются на любом экране, а на desktop коэффициент равен 1,
 *     то есть значения совпадают с макетом ТОЧНО.
 */

/* --------------------------------------------------------------------
 * Каркас страницы
 * ------------------------------------------------------------------ */

.tri-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.tri-site-main {
	flex: 1 0 auto;
}

.tri-site-footer {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------
 * Container
 *
 * reference (макет v2): max-width:1240px; width:calc(100% - 48px); margin:0 auto
 * ------------------------------------------------------------------ */

.tri-container {
	/*
	 * max-width — это ВНЕШНЯЯ ширина, как в макете: там у контейнера
	 * `max-width:1240px` и `padding:… 24px` при `box-sizing:border-box`,
	 * то есть под содержимое остаётся 1192px.
	 *
	 * Раньше здесь стоял calc(max + поле*2). Поля прибавлялись к
	 * пределу, внешняя ширина становилась 1288px, а содержимое — 1240px:
	 * ровно на 48px шире утверждённого макета.
	 */
	width: 100%;
	max-width: var(--tri-container-max);
	margin-inline: auto;
	padding-inline: var(--tri-gutter);
}

/* Колонка читаемого текста. В макетах абзацы ограничены max-width:64ch. */
.tri-container--measure {
	max-width: calc(var(--tri-measure) + var(--tri-gutter) * 2);
}

/* Разрывает контейнер на всю ширину окна (для полноэкранных фонов). */
.tri-full-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --------------------------------------------------------------------
 * Section
 * ------------------------------------------------------------------ */

/*
 * КОЭФФИЦИЕНТ ВЕРТИКАЛЬНОГО РИТМА ЖИВЁТ НА КОРНЕ.
 *
 * Он подстраивает ВСЕ отступы разом, сохраняя их различия, и объявлен
 * здесь, а не на .tri-section, потому что им пользуются и элементы вне
 * секций. Первый экран программы — как раз такой: у .tri-tr-hero нет
 * класса .tri-section, переменная там не находилась, и `calc(26px * )`
 * оставался без второго множителя. Такое выражение недействительно, и
 * браузер отбрасывал всё объявление padding-block целиком — вместе с
 * нижним отступом. Первый экран оставался совсем без полей: крошки
 * упирались в липкую шапку, а низ экрана — в следующую секцию.
 *
 * На сами секции это не влияет: они наследуют то же значение.
 */
:root {
	--tri-section-scale: 0.55;
}

.tri-section {
	position: relative;
	--tri-section-pt: var(--tri-space-104);
	--tri-section-pb: var(--tri-space-104);
	padding-block:
		calc(var(--tri-section-pt) * var(--tri-section-scale))
		calc(var(--tri-section-pb) * var(--tri-section-scale));
}

@media (min-width: 768px) {
	:root {
		--tri-section-scale: 0.75;
	}
}

/*
 * Desktop: значения макета 1:1.
 *
 * Порог 1264px, а не 1280px, потому что медиазапросы считают ширину БЕЗ
 * классической полосы прокрутки: в окне 1280px остаётся 1265px, и на
 * ровно «десктопной» ширине ритм секций иначе сжимался бы до 0.75.
 * Брейкпоинт шапки при этом остаётся 1280px — там ограничение другое:
 * полная композиция строки физически не помещается уже.
 */
@media (min-width: 1264px) {
	:root {
		--tri-section-scale: 1;
	}
}

/* Отступы секции. Каждый модификатор — конкретное значение из макетов. */
.tri-section--pt-0 { --tri-section-pt: 0px; }
.tri-section--pt-56 { --tri-section-pt: var(--tri-space-56); }
.tri-section--pt-64 { --tri-section-pt: var(--tri-space-64); }
.tri-section--pt-72 { --tri-section-pt: var(--tri-space-72); }
.tri-section--pt-78 { --tri-section-pt: var(--tri-space-78); }
.tri-section--pt-84 { --tri-section-pt: var(--tri-space-84); }
.tri-section--pt-88 { --tri-section-pt: var(--tri-space-88); }
.tri-section--pt-92 { --tri-section-pt: var(--tri-space-92); }
.tri-section--pt-96 { --tri-section-pt: var(--tri-space-96); }
.tri-section--pt-104 { --tri-section-pt: var(--tri-space-104); }
.tri-section--pt-112 { --tri-section-pt: var(--tri-space-112); }
.tri-section--pt-128 { --tri-section-pt: var(--tri-space-128); }
.tri-section--pt-144 { --tri-section-pt: var(--tri-space-144); }
.tri-section--pt-160 { --tri-section-pt: var(--tri-space-160); }

.tri-section--pb-0 { --tri-section-pb: 0px; }
.tri-section--pb-26 { --tri-section-pb: var(--tri-space-26); }
.tri-section--pb-40 { --tri-section-pb: var(--tri-space-40); }
.tri-section--pb-56 { --tri-section-pb: var(--tri-space-56); }
.tri-section--pb-60 { --tri-section-pb: var(--tri-space-60); }
.tri-section--pb-64 { --tri-section-pb: var(--tri-space-64); }
.tri-section--pb-72 { --tri-section-pb: var(--tri-space-72); }
.tri-section--pb-84 { --tri-section-pb: var(--tri-space-84); }
.tri-section--pb-88 { --tri-section-pb: var(--tri-space-88); }
.tri-section--pb-92 { --tri-section-pb: var(--tri-space-92); }
.tri-section--pb-96 { --tri-section-pb: var(--tri-space-96); }
.tri-section--pb-100 { --tri-section-pb: var(--tri-space-100); }
.tri-section--pb-104 { --tri-section-pb: var(--tri-space-104); }
.tri-section--pb-112 { --tri-section-pb: var(--tri-space-112); }
.tri-section--pb-128 { --tri-section-pb: var(--tri-space-128); }

/* Поверхности секций — каждый оттенок из макетов отдельным модификатором. */
.tri-section--surface-edf2fd { background-color: var(--tri-color-surface-edf2fd); }
.tri-section--surface-fafbff { background-color: var(--tri-color-surface-fafbff); }
.tri-section--surface-f5f8ff { background-color: var(--tri-color-surface-f5f8ff); }
.tri-section--surface-f7faff { background-color: var(--tri-color-surface-f7faff); }
.tri-section--surface-fafcff { background-color: var(--tri-color-surface-fafcff); }

/* reference: секции, отделённые тонкой линией сверху (border-top 1px #EBEDF1).
   Линия идёт по контейнеру, а не по всей ширине окна, поэтому верхний
   отступ переносится с секции на контейнер — значение то же самое. */
/*
 * СЕКЦИЯ НЕ УПИРАЕТСЯ В ЧУЖУЮ ЗАЛИВКУ.
 *
 * `--pb-0` означает «секция кончается на своём содержимом»: следующая
 * секция сама отобьётся — либо своей линией-разделителем, либо верхним
 * отступом. На однородном белом это и правда незаметно.
 *
 * Но когда следом идёт секция со своей поверхностью, граница цвета
 * приходится ровно на нижний край последней карточки: полоса начинает
 * краситься там, где карточка ещё не кончилась, и блок читается
 * обрезанным. Верхний отступ следующей секции тут не помогает — он
 * внутри полосы, то есть уже по ту сторону цвета.
 *
 * Замер на странице агента: низ ряда карточек и верх полосы совпадали
 * до пикселя — 1425 и 1425 у «рабочих агентов» перед демонстрацией,
 * 5294 и 5294 у карточек доступа перед «Что подходит вашей компании».
 * То же сочетание есть на программе и на услуге, поэтому правило общее,
 * а не для одной страницы.
 *
 * Отступ задаётся переменной контракта, а не самим padding: так он
 * масштабируется вместе с остальными отступами на всех брейкпоинтах.
 */
.tri-section--pb-0:has(+ .tri-section--surface-f5f8ff),
.tri-section--pb-0:has(+ .tri-section--surface-f7faff),
.tri-section--pb-0:has(+ .tri-section--surface-fafcff),
.tri-section--pb-0:has(+ .tri-section--navy) {
	--tri-section-pb: var(--tri-space-64);
}

.tri-section--divided {
	padding-block-start: 0;
}

.tri-section--divided > .tri-container {
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
	padding-block-start: calc(var(--tri-section-pt) * var(--tri-section-scale));
}

.tri-section--navy {
	background-color: var(--tri-color-navy);
	color: var(--tri-color-white);
}

/* reference: сетка 56x56 поверх тёмной заливки. Тонкие белые линии,
   которые в макете отделяют финальные блоки от остальной страницы. */
.tri-section--grid {
	position: relative;
	isolation: isolate;
}

.tri-section--grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

.tri-section--navy-deep {
	background-color: var(--tri-color-navy-deep);
	color: var(--tri-color-white);
}

:is(.tri-section--navy, .tri-section--navy-deep) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--tri-color-white);
}

/* Кнопки исключены: у них собственная цветовая пара, а этот селектор
   (0,1,1) перебил бы .tri-btn--accent (0,1,0). */
:is(.tri-section--navy, .tri-section--navy-deep) a:not(.tri-btn) {
	color: var(--tri-color-white);
}

/* Шапка секции: надзаголовок + заголовок + лид. */
.tri-section__header {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-12);
	max-width: var(--tri-measure);
}

/* reference: надзаголовок — 12px w800 ls0.12em uppercase */
.tri-section__eyebrow {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-12);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
}

:is(.tri-section--navy, .tri-section--navy-deep) .tri-section__eyebrow {
	color: var(--tri-color-white);
}

/* reference: лид секции — 19px lh1.55 #5A6270 */
.tri-section__lead {
	font-size: var(--tri-fs-19);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
}

:is(.tri-section--navy, .tri-section--navy-deep) .tri-section__lead {
	color: var(--tri-color-on-dark-e6eaf2);
}

.tri-section__body {
	margin-block-start: var(--tri-space-40);
}

/* --------------------------------------------------------------------
 * Сетки
 *
 * Авто-сетка: число колонок определяется доступной шириной, поэтому
 * отдельные media queries под каждую сетку не нужны.
 * Зазоры — значения из макетов.
 * ------------------------------------------------------------------ */

.tri-grid {
	display: grid;
	gap: var(--tri-space-18);
}

.tri-grid--gap-12 { gap: var(--tri-space-12); }
.tri-grid--gap-16 { gap: var(--tri-space-16); }
.tri-grid--gap-20 { gap: var(--tri-space-20); }
.tri-grid--gap-28 { gap: var(--tri-space-28); }
.tri-grid--gap-40 { gap: var(--tri-space-40); }
.tri-grid--gap-64 { gap: var(--tri-space-64); }

.tri-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.tri-grid--auto-wide {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.tri-grid--auto-narrow {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* Раскладка «оглавление + статья» из макета wiki.
   reference: grid-template-columns:230px 1fr; gap:44px */
.tri-layout-toc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-toc-gap);
	align-items: start;
}

@media (min-width: 1024px) {
	.tri-layout-toc {
		grid-template-columns: var(--tri-toc-column) minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------
 * Утилиты
 * ------------------------------------------------------------------ */

/* Элементы сеток не раздуваются под min-content содержимого — иначе
   широкая таблица растягивает колонку, а вместе с ней и страницу. */
.tri-grid > *,
.tri-layout-toc > * {
	min-width: 0;
}

/* Широкий контент скроллится внутри себя. */
.tri-scroll-x {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.tri-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tri-space-12);
}

.tri-stack {
	display: flex;
	flex-direction: column;
}

/* Отступы сверху — значения из макетов. */
.tri-mt-8 { margin-block-start: var(--tri-space-8); }
.tri-mt-10 { margin-block-start: var(--tri-space-10); }
.tri-mt-14 { margin-block-start: var(--tri-space-14); }
.tri-mt-16 { margin-block-start: var(--tri-space-16); }
.tri-mt-18 { margin-block-start: var(--tri-space-18); }
.tri-mt-20 { margin-block-start: var(--tri-space-20); }
.tri-mt-26 { margin-block-start: var(--tri-space-26); }
.tri-mt-30 { margin-block-start: var(--tri-space-30); }
.tri-mt-34 { margin-block-start: var(--tri-space-34); }
.tri-mt-40 { margin-block-start: var(--tri-space-40); }
.tri-mt-52 { margin-block-start: var(--tri-space-52); }

/* Соотношение сторон для медиа-слотов. */
.tri-ratio {
	position: relative;
	aspect-ratio: var(--tri-ratio);
	overflow: hidden;
	border-radius: var(--tri-radius-20);
	background-color: var(--tri-color-surface-edf2fd);
}

.tri-ratio--16-9 { --tri-ratio: 16 / 9; }
.tri-ratio--16-10 { --tri-ratio: 16 / 10; }
.tri-ratio--4-3 { --tri-ratio: 4 / 3; }
.tri-ratio--portrait { --tri-ratio: 4 / 5; }

.tri-ratio > img,
.tri-ratio > video,
.tri-ratio > iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
}