/**
 * Компонент: вторая строка шапки (направления) + мегаменю.
 *
 * Все значения desktop-состояния перенесены из /design-reference
 * без округления; источник каждого помечен «reference:».
 *
 * Геометрия панели на desktop:
 *   строка направлений абсолютна внутри шапки → top:72px, высота 46px;
 *   панель абсолютна внутри строки направлений → top:100% = 118px
 *   от верха шапки, как menuTop:"118px" в макете.
 *   Вариант, открытый кнопкой «Услуги» первой строки, встаёт на top:0
 *   строки направлений = 72px от верха шапки — как menuTop:"72px".
 */

/* ====================================================================
 * Вторая строка: направления
 * reference: border-top:1px solid #EBEDF1; background:#FFFFFF
 * ================================================================== */

.tri-header__topics {
	border-top: var(--tri-border-width) solid var(--tri-color-divider);
	background-color: var(--tri-color-white);
}

.tri-header__topics-inner {
	display: flex;
	align-items: center;
	gap: var(--tri-space-30); /* reference: gap:30px */
	min-height: var(--tri-header-topics-height); /* reference: height:46px */
}

.tri-topics {
	min-width: 0;
}

.tri-topics__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--tri-space-30); /* reference: gap:30px */
}

.tri-topics__item {
	/* Панель мегаменю позиционируется относительно строки направлений,
	   а не пункта, поэтому пункт не должен создавать containing block. */
	position: static;
}

/* reference: пункт — flex, gap:6px */
.tri-topics__row {
	display: flex;
	align-items: center;
	gap: var(--tri-space-6);
}

/* reference: font-size:13.5px; font-weight:600; color:#5A6270 */
.tri-topics__link {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted);
	white-space: nowrap;
	text-decoration: none;
}

/* reference: style-hover="color:#16181D" */
.tri-topics__link:hover,
.tri-topics__link:focus-visible {
	color: var(--tri-color-ink);
}

.tri-topics__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--tri-color-muted);
}

.tri-topics__toggle:hover {
	color: var(--tri-color-ink);
}

.tri-topics__chevron {
	transition: transform var(--tri-duration-32) var(--tri-ease);
}

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

/*
 * reference: открытое направление подсвечивается #12295C
 * (`color: menuOpen && activeCol === col ? "#12295C" : "#5A6270"`).
 */
.tri-topics__item.is-open .tri-topics__link,
.tri-topics__item.is-open .tri-topics__toggle {
	color: var(--tri-color-navy);
}

.tri-topics__item.is-current .tri-topics__link {
	color: var(--tri-color-ink);
}

/* reference: поиск — margin-left:auto; gap:8px; 13px/500 #6B7280;
   border:1px solid #DDE0E6; border-radius:10px; padding:7px 14px */
.tri-header__search {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-8);
	margin-left: auto;
	flex-shrink: 0;
	padding: var(--tri-space-7) var(--tri-space-14);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-10);
	background-color: var(--tri-color-white);
	color: var(--tri-color-muted-soft);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-500);
	white-space: nowrap;
	text-decoration: none;
}

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

/* ====================================================================
 * Панель мегаменю
 * ================================================================== */

.tri-mega {
	display: none;
	/* reference: ширина колонок мегаменю — 400px 400px 1fr */
	--tri-mega-col: 400px;
}

/* ====================================================================
 * DESKTOP
 * ================================================================== */

@media (min-width: 1280px) {

	/*
	 * Строка направлений — второй ряд шапки. Абсолютное позиционирование
	 * даёт полосу во всю ширину окна и одновременно позволяет держать
	 * разметку строки внутри единственного контейнера навигации
	 * (#tri-header-drawer), не дублируя пункты меню для мобильной панели.
	 * Высота ряда компенсируется padding-bottom у самой шапки.
	 */
	.tri-header__topics {
		position: absolute;
		left: 0;
		right: 0;
		top: var(--tri-header-bar-height); /* reference: под первой строкой 72px */
		z-index: var(--tri-z-dropdown);
		height: var(--tri-header-topics-height); /* reference: height:46px */
		transition:
			height var(--tri-duration-28) var(--tri-ease),
			border-top-width var(--tri-duration-28) var(--tri-ease),
			opacity var(--tri-duration-28) var(--tri-ease),
			visibility 0s linear 0s;
	}

	/* --- Свёрнутый ряд направлений -------------------------------------
	 * Прокрутка вниз убирает вторую строку, прокрутка вверх возвращает —
	 * как на прежнем сайте. Первая строка остаётся липкой всегда.
	 *
	 * Сворачивание — это высота, а не сдвиг: ряд лежит НАД первой строкой
	 * по z-index, и уехавший вверх ряд проступал бы сквозь неё. Высота
	 * ряда и компенсирующий padding шапки анимируются одной длительностью,
	 * поэтому страница поднимается ровно, без рывка.
	 *
	 * visibility гасится с задержкой на всю анимацию: пока ряд ещё виден,
	 * он остаётся доступен, а в свёрнутом виде выпадает из порядка обхода
	 * с клавиатуры — иначе фокус уходил бы на невидимые ссылки.
	 * ------------------------------------------------------------------ */
	.is-topics-collapsed .tri-header__topics {
		height: 0;
		border-top-width: 0;
		opacity: 0;
		overflow: hidden;
		visibility: hidden;
		pointer-events: none;
		transition:
			height var(--tri-duration-28) var(--tri-ease),
			border-top-width var(--tri-duration-28) var(--tri-ease),
			opacity var(--tri-duration-28) var(--tri-ease),
			visibility 0s linear var(--tri-duration-28);
	}

	/* Пункты не переносятся: ряд обязан сохранять высоту 46px.
	   При нехватке ширины ряд прокручивается по горизонтали внутри себя. */
	.tri-topics__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.tri-topics__list::-webkit-scrollbar {
		display: none;
	}

	/* --- Панель --------------------------------------------------- */

	.tri-mega {
		position: absolute;
		left: 0;
		right: 0;
		/* menuTop:"118px" в макете. Строка направлений занимает 72..119
		   (1px border-top + 46px), её padding-box начинается на 73, поэтому
		   ровно 118 даёт 100% минус толщина границы. */
		top: calc(100% - var(--tri-border-width));
		display: block;
		visibility: hidden;
		opacity: 0;
		z-index: var(--tri-z-dropdown);
		background-color: var(--tri-color-white); /* reference */
		border-bottom: var(--tri-border-width) solid var(--tri-color-border);
		box-shadow: var(--tri-shadow-navy-56-18); /* reference: 0 24px 56px rgba(4,34,92,0.18) */
		transition:
			opacity var(--tri-duration-28) var(--tri-ease),
			visibility var(--tri-duration-28) var(--tri-ease);
	}

	/* Открытие наведением работает без JS. */
	.tri-topics__item--has-mega:hover > .tri-mega,
	.tri-topics__item--has-mega:focus-within > .tri-mega,
	.tri-mega[data-open="true"] {
		visibility: visible;
		opacity: 1;
	}

	/*
	 * Панель, открытая кнопкой «Услуги» первой строки: перекрывает ряд
	 * направлений — reference menuTop:"72px".
	 */
	.tri-mega--from-bar {
		/* menuTop:"72px" — панель встаёт вплотную под первой строкой,
		   перекрывая ряд направлений. */
		top: calc(var(--tri-border-width) * -1);
	}

	/* reference: grid-template-columns:400px 400px 1fr; min-height:340px */
	.tri-mega__grid {
		position: relative;
		display: grid;
		grid-template-columns:
			var(--tri-mega-col)
			var(--tri-mega-col)
			minmax(0, 1fr);
		min-height: 340px;
	}

	/* --- Колонка 1: услуги ---------------------------------------- */

	/* reference: border-right:1px solid #EBEDF1; padding:18px 0 */
	.tri-mega__col--services {
		border-right: var(--tri-border-width) solid var(--tri-color-divider);
		padding: var(--tri-space-18) 0;
	}

	.tri-mega__services {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* reference: flex; justify-content:space-between; gap:12px;
	   font-size:14.5px; font-weight:600; line-height:1.35;
	   padding:11px 26px 11px 0; color:#3A3F49 */
	.tri-mega__service-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--tri-space-12);
		padding: var(--tri-space-11) var(--tri-space-26) var(--tri-space-11) 0;
		font-size: var(--tri-fs-14-5);
		font-weight: var(--tri-fw-600);
		line-height: var(--tri-lh-1-35);
		color: var(--tri-color-ink-secondary);
		text-decoration: none;
		background-color: transparent;
	}

	/* reference: активный пункт — color:#16181D, фон #F5F8FF (если есть состав) */
	.tri-mega__service-link:hover,
	.tri-mega__service-link:focus-visible,
	.tri-mega__service-link.is-active {
		color: var(--tri-color-ink);
	}

	.tri-mega__service-link[data-tri-mega-sub]:hover,
	.tri-mega__service-link[data-tri-mega-sub]:focus-visible,
	.tri-mega__service-link[data-tri-mega-sub].is-active {
		background-color: var(--tri-color-surface-f5f8ff);
	}

	.tri-mega__service-chevron {
		flex-shrink: 0;
	}

	/* --- Колонка 2: состав работ ---------------------------------- */

	/* reference: border-right:1px solid #EBEDF1; padding:18px 0 18px 26px */
	.tri-mega__col--sub {
		border-right: var(--tri-border-width) solid var(--tri-color-divider);
		padding: var(--tri-space-18) 0 var(--tri-space-18) var(--tri-space-26);
	}

	/* reference: 14px/500 #6B7280; line-height:1.45; max-width:300px; padding-top:4px */
	.tri-mega__hint {
		font-size: var(--tri-fs-14);
		font-weight: var(--tri-fw-500);
		color: var(--tri-color-muted-soft);
		line-height: var(--tri-lh-1-45);
		max-width: 300px;
		padding-top: var(--tri-space-4);
	}

	/* Подсказка исчезает, как только выбран пункт с составом работ. */
	.tri-mega__grid:has(.tri-mega__sub[data-open="true"]) .tri-mega__hint {
		display: none;
	}

	/*
	 * Состав работ живёт в разметке внутри своей услуги (колонка 1),
	 * а показывается в области колонки 2. Позиционирование считается
	 * от .tri-mega__grid: для абсолютных потомков containing block —
	 * его padding-box.
	 */
	.tri-mega__sub {
		position: absolute;
		top: 0;
		bottom: 0;
		/* Сетка стоит на .tri-header-shell, у которой горизонтального поля
		   нет (как в макете), поэтому padding-box совпадает с содержимым и
		   колонка 1 начинается от нуля. Колонка 2 — ровно её ширина.
		   Прежняя поправка на --tri-gutter компенсировала поля .tri-container
		   и теперь увела бы панель на 24px вправо. */
		left: var(--tri-mega-col);
		width: var(--tri-mega-col);
		display: none;
		padding: var(--tri-space-18) 0 var(--tri-space-18) var(--tri-space-26);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.tri-mega__sub[data-open="true"] {
		display: block;
	}

	/* reference: 12px/800; ls 0.07em; uppercase; #6B7280; padding-bottom:10px */
	.tri-mega__sub-title {
		font-size: var(--tri-fs-12);
		font-weight: var(--tri-fw-800);
		letter-spacing: var(--tri-ls-p0-07);
		text-transform: uppercase;
		color: var(--tri-color-muted-soft);
		padding-bottom: var(--tri-space-10);
	}

	.tri-mega__sub-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* reference: block; 14px/600 #3A3F49; line-height:1.35; padding:9px 0 */
	.tri-mega__sub-link {
		display: block;
		font-size: var(--tri-fs-14);
		font-weight: var(--tri-fw-600);
		color: var(--tri-color-ink-secondary);
		line-height: var(--tri-lh-1-35);
		padding: var(--tri-space-9) 0;
		text-decoration: none;
	}

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

	/* --- Колонка 3: промо ----------------------------------------- */

	/* reference: padding:26px 0 26px 40px; flex-direction:column; align-items:flex-start */
	.tri-mega__col--promo {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: var(--tri-space-26) 0 var(--tri-space-26) var(--tri-space-40);
	}
}

/* Общие для всех ширин стили промо-колонки и текстов панели. */

/* reference: 13px/700 #6B7280 */
.tri-mega__promo-eyebrow {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

/* reference: 20px/700 #16181D; line-height:1.3; margin-top:10px;
   max-width:320px; letter-spacing:-0.012em */
.tri-mega__promo-title {
	font-size: var(--tri-fs-20);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	line-height: var(--tri-lh-1-3);
	margin-block-start: var(--tri-space-10);
	max-width: 320px;
	letter-spacing: var(--tri-ls-n0-012);
}

/* reference: 14px/500 #5A6270; line-height:1.5; margin-top:10px; max-width:340px */
.tri-mega__promo-text {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-muted);
	line-height: var(--tri-lh-1-5);
	margin-block-start: var(--tri-space-10);
	max-width: 340px;
}

/* reference: margin-top:20px; 14px/600; padding:12px 22px; radius:10px */
.tri-mega__promo-cta {
	margin-block-start: var(--tri-space-20);
}

/* reference: 13.5px/700 #12295C; margin-top:14px */
.tri-mega__promo-link {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
	margin-block-start: var(--tri-space-14);
	text-decoration: none;
}

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

/*
 * Общее правило в base.css обнуляет длительности переходов, но не
 * задержки. Без этого при отключённой анимации ряд направлений исчезал
 * бы мгновенно, а из обхода с клавиатуры выпадал бы на 0.28s позже.
 */
@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
	.is-topics-collapsed .tri-header__topics {
		transition-delay: 0s;
	}
}

/* ====================================================================
 * < 1280px — мегаменю становится аккордеоном внутри мобильной панели.
 * Мобильного макета в /design-reference нет: раскладка ниже —
 * решение темы, см. docs/DESIGN-DEVIATIONS.md.
 * ================================================================== */

@media (max-width: 1279px) {

	.tri-header__topics {
		width: 100%;
		border-top: 0;
		padding-block-start: var(--tri-space-16);
		border-top: var(--tri-border-width) solid var(--tri-color-divider);
	}

	.tri-header__topics-inner {
		display: block;
		padding-inline: 0;
		max-width: none;
	}

	.tri-topics__list {
		flex-direction: column;
		align-items: stretch;
		gap: var(--tri-space-2);
	}

	.tri-topics__row {
		justify-content: space-between;
	}

	.tri-topics__link {
		flex: 1 1 auto;
		padding-block: var(--tri-space-10);
		font-size: var(--tri-fs-15);
		color: var(--tri-color-ink);
		white-space: normal;
	}

	.tri-topics__toggle {
		width: 32px;
		height: 32px;
		border-radius: var(--tri-radius-6);
	}

	.tri-topics__toggle:hover {
		background-color: var(--tri-color-surface-f5f8ff);
		color: var(--tri-color-navy);
	}

	.tri-header__search {
		display: flex;
		margin-left: 0;
		margin-block-start: var(--tri-space-16);
		justify-content: center;
	}

	/* --- Панель как аккордеон ------------------------------------- */

	.tri-mega[data-open="true"] {
		display: block;
	}

	.tri-mega__grid {
		display: block;
		padding-inline: 0;
		max-width: none;
		border-left: 2px solid var(--tri-color-divider);
		padding-left: var(--tri-space-16);
		margin-block-end: var(--tri-space-8);
	}

	.tri-mega__services {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.tri-mega__service-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--tri-space-12);
		padding-block: var(--tri-space-9);
		font-size: var(--tri-fs-14);
		font-weight: var(--tri-fw-600);
		line-height: var(--tri-lh-1-35);
		color: var(--tri-color-ink-secondary);
		text-decoration: none;
	}

	.tri-mega__service-chevron {
		flex-shrink: 0;
	}

	/*
	 * Колонок на узких экранах нет: состав работ раскрывается прямо
	 * под своей услугой. Пустая ячейка-разделитель и промо-блок
	 * в аккордеоне не нужны.
	 */
	.tri-mega__col--sub,
	.tri-mega__col--promo {
		display: none;
	}

	.tri-mega__sub {
		display: none;
		padding: 0 0 var(--tri-space-8) var(--tri-space-16);
		border-left: 2px solid var(--tri-color-divider);
		margin-block-end: var(--tri-space-4);
	}

	.tri-mega__sub[data-open="true"] {
		display: block;
	}

	.tri-mega__sub-title {
		font-size: var(--tri-fs-12);
		font-weight: var(--tri-fw-800);
		letter-spacing: var(--tri-ls-p0-07);
		text-transform: uppercase;
		color: var(--tri-color-muted-soft);
		padding-block-end: var(--tri-space-6);
	}

	.tri-mega__sub-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.tri-mega__sub-link {
		display: block;
		padding-block: var(--tri-space-8);
		font-size: var(--tri-fs-14);
		font-weight: var(--tri-fw-600);
		line-height: var(--tri-lh-1-35);
		color: var(--tri-color-ink-secondary);
		text-decoration: none;
	}
}