/*
 * Архитектурная и визуальная навигация — стили страницы
 * Шаблон: page-proizvodstvo-arhitekturnoj-vizualnoj-navigacii.php
 *
 * Дизайн-система (editorial / архитектурный журнал):
 *   - 3 базовых ритма сеток: 6+6 (editorial), 3+3+3+3 (quartet), 4+4+4 (trio).
 *   - Единая шкала отступов: 8 / 16 / 24 / 32 / 48 / 80 / 96 px.
 *   - Единые размеры: H1 56px, H2 36px, H3 19px; card-radius 8px, photo-radius 4px.
 *   - Цвет: чернильный ink #1a1c20, нейтральный фон, точечные акценты RAL-латуни.
 */

.arch-nav {
	/* Цветовые токены */
	--kl-ink: #1a1c20;
	--kl-ink-soft: #45474d;
	--kl-muted: #8a8d93;
	--kl-line: #e6e6e8;
	--kl-line-soft: #f0f0f2;
	--kl-bg: #ffffff;
	--kl-bg-soft: #f5f5f7;
	--kl-bg-deep: #0f1114;
	--kl-yellow: #ffd60a;
	--kl-brass: #c4a875;

	/* Шкала отступов */
	--sp-1: 8px;
	--sp-2: 16px;
	--sp-3: 24px;
	--sp-4: 32px;
	--sp-5: 48px;
	--sp-6: 80px;
	--sp-section: 55px; /* вертикальный padding секции — общее расстояние между блоками = 110px */

	/* Радиусы */
	--r-card: 8px;
	--r-photo: 4px;
	--r-pill: 100px;

	color: var(--kl-ink);
	box-sizing: border-box;
	font-family: var(--font_family2, 'Manrope', Arial, sans-serif);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.arch-nav *,
.arch-nav *::before,
.arch-nav *::after {
	box-sizing: border-box;
}

.category_info .cont.row .arch-nav-row-wrap,
.arch-nav-row-wrap {
	width: 100%;
	flex-basis: 100%;
	box-sizing: border-box;
}

.arch-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--sp-3);
}

/* ============================================================
 * Типографика и общие компоненты
 * ============================================================ */

/* Eyebrow — рубрика-метка над H2 */
.arch-nav-eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--kl-muted);
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 var(--sp-2);
}

.arch-nav-eyebrow--block {
	margin-top: var(--sp-5);
	color: var(--kl-ink-soft);
}

.arch-nav-eyebrow--on-photo {
	color: rgba(255, 255, 255, 0.72);
}

/*
 * Секции без разделительных линий — ритм страницы держится только воздухом
 * (padding: var(--sp-section) сверху и снизу). Полупрозрачные линии добавляли
 * визуального шума, не давая структурного выигрыша.
 */
.arch-nav-section {
	padding: var(--sp-section) 0;
}

.arch-nav-section:first-of-type {
	padding-top: var(--sp-5);
}

/*
 * Заголовки секций и лиды ограничены ~50% ширины инсайдера (1152/2 ≈ 576px).
 * Визуально создаёт сильную центральную ось: текст никогда не уходит дальше
 * середины страницы — правая половина остаётся «дышать» для глаза.
 * Editorial-блоки (.arch-nav-editorial .arch-nav-section-title) переопределяют
 * это правило через `max-width: none`, т.к. там текст уже внутри 50%-колонки.
 */
.arch-nav-section-title {
	font-size: 36px;
	font-weight: 600;
	color: var(--kl-ink);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 var(--sp-2);
	max-width: 576px;
}

.arch-nav-section-lead {
	font-size: 16px;
	color: var(--kl-ink-soft);
	max-width: 576px;
	line-height: 1.65;
	margin: 0 0 var(--sp-5);
}

/* Кнопки */
.arch-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--r-card);
	padding: 16px 24px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s, color 0.2s, border-color 0.2s;
}

.arch-nav-btn--primary {
	background: #fff;
	color: var(--kl-ink);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.arch-nav-btn--primary:hover,
.arch-nav-btn--primary:focus-visible {
	background: var(--kl-yellow);
	color: var(--kl-ink);
	transform: translateY(-1px);
}

.arch-nav-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.arch-nav-btn--ghost:hover,
.arch-nav-btn--ghost:focus-visible {
	background: #fff;
	color: var(--kl-ink);
	border-color: #fff;
	transform: translateY(-1px);
}

.arch-nav-btn--secondary {
	background: var(--kl-bg-soft);
	color: var(--kl-ink);
}

.arch-nav-btn--secondary:hover,
.arch-nav-btn--secondary:focus-visible {
	background: #e2e2e6;
	transform: translateY(-1px);
}

/* ============================================================
 * 1. HERO — full-bleed photo с code-strip поверх
 * ============================================================ */
.arch-nav-hero {
	padding: 0;
	border-top: none;
}

/* Full-bleed: фото выходит за пределы .arch-nav-inner до краёв вьюпорта */
.arch-nav-hero-cover {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: 640px;
	margin-bottom: var(--sp-4);
	overflow: hidden;
	border-radius: 0;
	background: var(--kl-bg-deep);
}

.arch-nav-hero-cover__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.arch-nav-hero-cover__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.78) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 55%);
}

.arch-nav-hero-cover__content {
	position: absolute;
	bottom: 130px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1200px;
	padding: 0 var(--sp-3);
	color: #fff;
	z-index: 2;
}

.arch-nav-hero-cover__content > * {
	max-width: 760px;
}

.arch-nav-hero-h1 {
	font-size: 50px;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0 0 var(--sp-3);
}

.arch-nav-hero-lead {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.55;
	max-width: 620px;
	margin: 0 0 var(--sp-4);
}

.arch-nav-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

/* ============================================================
 * 2. Editorial-блок (6+6 фото+текст) — повторяющийся паттерн
 * Используется в: «От концепции к производству», «Доступная среда»
 * ============================================================ */
.arch-nav-section--editorial {
	/* без border-top — общая линия секций убрана */
}

/*
 * Editorial-паттерн — карточка под единый стиль с .arch-nav-entry-feature.
 * Обводка, белый фон, фото слева + текст справа, отступы 48px.
 * Размер заголовка 24px (как в feature) — это акцентная карточка, не H2 секции.
 */
.arch-nav-editorial {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	background: #fff;
	color: var(--kl-ink);
	border: 1px solid var(--kl-line);
	border-radius: var(--r-card);
	overflow: hidden;
	height: 480px;
	align-items: stretch;
}

.arch-nav-editorial__photo {
	position: relative;
	overflow: hidden;
	height: 100%;
	margin: 0;
	border-radius: 0;
	background: var(--kl-bg-deep);
}

.arch-nav-editorial__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.arch-nav-editorial__photo-caption {
	position: absolute;
	left: var(--sp-3);
	bottom: var(--sp-3);
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	padding: 6px 12px;
	border-radius: 3px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 2;
}

.arch-nav-editorial__copy {
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: none;
}

/* Подгоняем H2 и lead внутри editorial под размеры feature-карточки */
.arch-nav-editorial .arch-nav-section-title {
	font-size: 24px;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 0 var(--sp-2);
	max-width: none;
}

.arch-nav-editorial .arch-nav-section-lead {
	font-size: 14.5px;
	line-height: 1.6;
	max-width: none;
	margin-bottom: 0;
}

/* ============================================================
 * 4. Технологии — сценарии (3+3+3+3) + инвентарь (6+6)
 * ============================================================ */
.arch-nav-section--tech .arch-nav-tech-intro {
	margin-bottom: var(--sp-5);
}

/* 4.1. Сценарная матрица — 4 ключевых сценария */
.arch-nav-scenarios {
	margin-bottom: var(--sp-5);
}

.arch-nav-scenarios__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--sp-3) var(--sp-6);
	align-items: end;
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--kl-line);
}

.arch-nav-scenarios__head-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--kl-ink);
	letter-spacing: -0.02em;
	line-height: 1.1;
	grid-column: 1;
}

.arch-nav-scenarios__head-desc {
	grid-column: 2;
	font-size: 14px;
	color: var(--kl-ink-soft);
	line-height: 1.6;
	margin: 0;
	max-width: 460px;
	justify-self: end;
}

/*
 * Сценарная матрица «4 способа реализации» с hover-расширением.
 * При наведении на карточку:
 *   1. Внешний grid даёт ей больше места (2fr), остальным сжимает (0.67fr)
 *   2. Внутренний grid карточки переключается с (1fr 0fr) на (1fr 1fr) —
 *      справа от текста проявляется фото
 *   3. Переход 0.5s ease-out — плавно, без рывков
 * Используется CSS :has() (Chrome 105+, Safari 15.4+, Firefox 121+).
 * На мобиле — карточки в одну колонку, фото всегда открыто (без hover).
 */
/*
 * Чистая flex-реализация без вложенных layout-анимаций.
 *
 * Архитектура:
 *   • Сетка — flex, каждая карточка `flex: 1 1 0` (равные доли).
 *   • Hover: `flex-grow: 3` — соседи автоматически сжимаются благодаря
 *     flex-математике (распределение оставшегося места), без `:has()`,
 *     без отдельных анимаций на соседях. Один источник истины — одна анимация.
 *   • Фото — `position: absolute` справа поверх карточки, ширина 0 → 50%.
 *     Никаких вложенных flex/grid внутри карточки. Только width-транзишен.
 *   • Текст — `max-width: 280px` — не растягивается при росте карточки,
 *     остаётся «приклеенным» к левому краю.
 *
 * Почему чище:
 *   • Один transition на одно свойство в каждом элементе — браузер не глотает
 *     кадры при пересечении hover между карточками.
 *   • Нет `:has()` — нет квадратичной сложности селектора при быстрых hover.
 *   • Все анимируемые свойства — width, flex-grow, opacity, filter — браузер
 *     умеет интерполировать предсказуемо.
 */
.arch-nav-scenarios__grid {
	display: flex;
	gap: var(--sp-2);
}

.arch-nav-scenario {
	flex: 1 1 0;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--kl-line);
	border-radius: var(--r-card);
	position: relative;
	overflow: hidden;
	transition: flex-grow 1.15s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.5s ease,
	            box-shadow 0.5s ease;
}

.arch-nav-scenario::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--scn-accent, var(--kl-ink));
	z-index: 2;
}

@media (min-width: 1280px) and (hover: hover) {
	.arch-nav-scenario:hover {
		flex-grow: 3;
		border-color: var(--scn-accent, var(--kl-ink));
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
	}
}

.arch-nav-scenario__text {
	padding: var(--sp-3);
	display: flex;
	flex-direction: column;
	max-width: 280px;
	position: relative;
	z-index: 1;
}

.arch-nav-scenario__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	overflow: hidden;
	background: var(--kl-bg-soft);
	opacity: 0;
	filter: blur(14px);
	transition: width 1.15s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 0.9s ease 0.25s,
	            filter 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

@media (min-width: 1280px) and (hover: hover) {
	.arch-nav-scenario:hover .arch-nav-scenario__image {
		width: 50%;
		opacity: 1;
		filter: blur(0);
	}
}

.arch-nav-scenario__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder для отсутствующего рендера — пунктирная рамка с подписью */
.arch-nav-scenario__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.arch-nav-scenario__image--placeholder::before {
	content: '';
	position: absolute;
	inset: var(--sp-2);
	border: 1.5px dashed var(--kl-line);
	border-radius: 6px;
}

.arch-nav-scenario__image-stub {
	position: relative;
	z-index: 1;
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--kl-muted);
	text-align: center;
	line-height: 1.4;
}

.arch-nav-scenario__tag {
	font-size: 11px;
	letter-spacing: 0.14em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--scn-accent, var(--kl-ink));
	margin-bottom: 6px;
}

.arch-nav-scenario__object {
	font-size: 16px;
	font-weight: 700;
	color: var(--kl-ink);
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin-bottom: var(--sp-2);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--kl-line-soft);
}

.arch-nav-scenario__specs {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.arch-nav-scenario__spec {
	margin: 0;
}

.arch-nav-scenario__spec dt {
	font-size: 10px;
	letter-spacing: 0.14em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--kl-muted);
	margin-bottom: 4px;
}

.arch-nav-scenario__spec dd {
	font-size: 13px;
	color: var(--kl-ink);
	line-height: 1.4;
	margin: 0;
	font-weight: 500;
}

/*
 * 4.2. Инвентарь (материалы / технологии) — две сетки по 5 карточек.
 * Карточки в стиле остальных блоков страницы: белые с обводкой, нумерация
 * 01-05, цветная полоска-акцент сверху. Материалы — accent = swatch цвета,
 * технологии — единый ink-акцент (визуально отличает группы).
 */
.arch-nav-inventory {
	padding: var(--sp-4) 0 0;
}

.arch-nav-inventory + .arch-nav-inventory {
	padding-top: var(--sp-5);
}

.arch-nav-inventory__head {
	margin-bottom: var(--sp-3);
}

.arch-nav-inventory__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--kl-ink);
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0;
}

.arch-nav-inventory__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--sp-2);
}

.arch-nav-inventory-card {
	position: relative;
	padding: var(--sp-3);
	background: #fff;
	border: 1px solid var(--kl-line);
	border-radius: var(--r-card);
	display: flex;
	flex-direction: column;
	min-height: 170px;
	overflow: hidden;
	transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.arch-nav-inventory-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--inv-accent, var(--kl-ink));
	z-index: 3;
}

.arch-nav-inventory-card:hover {
	transform: translateY(-2px);
	border-color: var(--inv-accent, var(--kl-ink));
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}

/*
 * Карточки материалов с фото-фоном: фото cover'ом заполняет карточку,
 * сверху тёмный градиент для читаемости белого текста.
 * Текст всегда снизу карточки — над самой плотной частью градиента.
 */
.arch-nav-inventory-card--photo {
	min-height: 280px;
	padding: 0;
	color: #fff;
	border-color: transparent;
}

.arch-nav-inventory-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.arch-nav-inventory-card--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 35%,
		rgba(0, 0, 0, 0.35) 65%,
		rgba(0, 0, 0, 0.78) 100%);
	z-index: 2;
}

.arch-nav-inventory-card--photo:hover .arch-nav-inventory-card__bg {
	transform: scale(1.04);
}

.arch-nav-inventory-card__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--sp-3);
}

.arch-nav-inventory-card--photo .arch-nav-inventory-card__num {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 0;
}

.arch-nav-inventory-card--photo .arch-nav-inventory-card__name {
	color: #fff;
	margin: auto 0 var(--sp-2);
}

/*
 * Note (описание) на карточках с фото скрыт по умолчанию — раскрывается
 * на hover на desktop с мышью. Анимация через max-height + opacity для
 * плавного «выезда» снизу. На touch-устройствах всегда видим (нет hover'а).
 */
.arch-nav-inventory-card--photo .arch-nav-inventory-card__note {
	color: rgba(255, 255, 255, 0.82);
	border-top-color: rgba(255, 255, 255, 0.2);
	max-height: 0;
	padding-top: 0;
	margin-top: 0;
	border-top-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 0.25s ease 0.05s,
	            padding-top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            border-top-width 0.3s ease;
}

@media (hover: hover) {
	.arch-nav-inventory-card--photo:hover .arch-nav-inventory-card__note {
		max-height: 120px;
		padding-top: var(--sp-2);
		margin-top: var(--sp-2);
		border-top-width: 1px;
		opacity: 1;
	}
}

@media (hover: none) {
	.arch-nav-inventory-card--photo .arch-nav-inventory-card__note {
		max-height: none;
		padding-top: var(--sp-2);
		margin-top: var(--sp-2);
		border-top-width: 1px;
		opacity: 1;
		overflow: visible;
		transition: none;
	}
}

/* Базовые стили (для технологий — без фото, white-on-white) */
.arch-nav-inventory-card__num {
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: var(--kl-muted);
	margin-bottom: var(--sp-2);
}

.arch-nav-inventory-card__name {
	font-size: 16px;
	font-weight: 700;
	color: var(--kl-ink);
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0 0 var(--sp-2);
}

.arch-nav-inventory-card__note {
	font-size: 13px;
	color: var(--kl-ink-soft);
	line-height: 1.5;
	margin: 0;
	margin-top: auto;
	padding-top: var(--sp-2);
	border-top: 1px solid var(--kl-line-soft);
}

/* ============================================================
 * 5. «С чем можно прийти» (3+3+3+3) + Feature-баннер
 * ============================================================ */
.arch-nav-entry-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-2);
	/* sp-6 = 80px между сеткой из 4 карточек и feature-баннером ниже —
	   sp-5 (48px) визуально сливался с gap (16px) между карточками */
	margin-bottom: var(--sp-6);
}

.arch-nav-entry-card {
	background: #fff;
	border: 1px solid var(--kl-line);
	border-radius: var(--r-card);
	padding: var(--sp-3);
	display: flex;
	flex-direction: column;
	min-height: 200px;
	transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.arch-nav-entry-card:hover {
	transform: translateY(-2px);
	border-color: var(--kl-ink);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}

.arch-nav-entry-card__tag {
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: var(--kl-muted);
	margin-bottom: var(--sp-2);
}

.arch-nav-entry-card__title {
	font-size: 19px;
	font-weight: 700;
	color: var(--kl-ink);
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 0 var(--sp-2);
}

.arch-nav-entry-card__desc {
	font-size: 13.5px;
	color: var(--kl-ink-soft);
	line-height: 1.55;
	margin: 0;
}

/* Feature-баннер «Серия корпусов» — белая 50/50 карточка (тот же ритм, что у других карточек) */
.arch-nav-entry-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	background: #fff;
	color: var(--kl-ink);
	border: 1px solid var(--kl-line);
	border-radius: var(--r-card);
	overflow: hidden;
	height: 480px;
	align-items: stretch;
}

.arch-nav-entry-feature__photo {
	position: relative;
	overflow: hidden;
	height: 100%;
}

.arch-nav-entry-feature__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.arch-nav-entry-feature__copy {
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.arch-nav-entry-feature__tag {
	font-size: 11px;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: var(--kl-muted);
	text-transform: uppercase;
	margin-bottom: var(--sp-2);
}

.arch-nav-entry-feature__title {
	font-size: 24px;
	font-weight: 700;
	color: var(--kl-ink);
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 0 var(--sp-2);
}

.arch-nav-entry-feature__desc {
	font-size: 14.5px;
	color: var(--kl-ink-soft);
	line-height: 1.6;
	margin: 0;
}

/* ============================================================
 * 6. Типы объектов (4 карточки с hover-расширением) —
 * тот же паттерн что у сценариев технологий: flex + absolute image-overlay.
 * При hover: карточка раздвигается, фото справа фокусируется из blur.
 * ============================================================ */
.arch-nav-objects-grid {
	display: flex;
	gap: var(--sp-2);
}

.arch-nav-object-card {
	flex: 1 1 0;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--kl-line);
	border-radius: var(--r-card);
	position: relative;
	overflow: hidden;
	transition: flex-grow 1.15s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.5s ease,
	            box-shadow 0.5s ease;
}

.arch-nav-object-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--obj-accent, var(--kl-ink));
	z-index: 2;
}

@media (min-width: 1280px) and (hover: hover) {
	.arch-nav-object-card:hover {
		flex-grow: 3;
		border-color: var(--obj-accent, var(--kl-ink));
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
	}
}

.arch-nav-object-card__text {
	padding: var(--sp-3);
	display: flex;
	flex-direction: column;
	max-width: 280px;
	min-height: 320px;
	position: relative;
	z-index: 1;
}

.arch-nav-object-card__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	overflow: hidden;
	background: var(--kl-bg-soft);
	opacity: 0;
	filter: blur(14px);
	transition: width 1.15s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 0.9s ease 0.25s,
	            filter 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

@media (min-width: 1280px) and (hover: hover) {
	.arch-nav-object-card:hover .arch-nav-object-card__image {
		width: 50%;
		opacity: 1;
		filter: blur(0);
	}
}

.arch-nav-object-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.arch-nav-object-card__title {
	font-size: 19px;
	font-weight: 700;
	color: var(--kl-ink);
	letter-spacing: -0.015em;
	margin: 0 0 8px;
}

.arch-nav-object-card__lead {
	font-size: 13.5px;
	color: var(--kl-ink-soft);
	line-height: 1.55;
	margin: 0 0 var(--sp-2);
}

.arch-nav-object-card__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sp-3);
}

.arch-nav-object-card__bullets li {
	position: relative;
	padding-left: 14px;
	font-size: 13px;
	color: var(--kl-ink-soft);
	line-height: 1.5;
	margin-bottom: 6px;
}

.arch-nav-object-card__bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 4px;
	height: 4px;
	background: var(--kl-muted);
	border-radius: 50%;
}

/* ============================================================
 * 7. Доступная среда — KITS-перелинковка (3+3+3+3)
 * Editorial-head стилизуется по общему классу .arch-nav-editorial
 * ============================================================ */
.arch-nav-kits-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-2);
	margin-top: var(--sp-2);
}

.arch-nav-kits-card {
	padding: var(--sp-3);
	background: #fff;
	color: var(--kl-ink);
	border: 1px solid var(--kl-line);
	border-radius: var(--r-card);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	min-height: 200px;
	transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s, color 0.18s;
}

.arch-nav-kits-card:hover {
	transform: translateY(-2px);
	border-color: var(--kl-ink);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
	color: var(--kl-ink);
}

.arch-nav-kits-card__num {
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--kl-muted);
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: var(--sp-2);
}

.arch-nav-kits-card__title {
	font-size: 19px;
	font-weight: 700;
	color: var(--kl-ink);
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 0 var(--sp-2);
}

.arch-nav-kits-card__desc {
	font-size: 13.5px;
	color: var(--kl-ink-soft);
	line-height: 1.55;
	margin: 0;
}

.arch-nav-kits-card__arrow {
	margin-top: auto;
	padding-top: var(--sp-3);
	font-size: 16px;
	color: var(--kl-muted);
	align-self: flex-end;
}

/* ============================================================
 * 8. «Для кого» (4+4+4) — три аудитории
 * ============================================================ */
/*
 * «Для кого» — full-bleed серый фон.
 * Секция растягивается на 100vw через margin: 0 calc(50% - 50vw).
 * Горизонтальный padding использует max() для удержания контента
 * в пределах max-width 1200 при больших viewport и стандартного 24px на узких.
 */
.arch-nav-section--audiences {
	background: var(--kl-bg-soft);
	border-radius: 0;
	border-top: none;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: var(--sp-section) max(var(--sp-3), calc(50vw - 600px + var(--sp-3)));
}

.arch-nav-audiences-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-2);
	margin-top: var(--sp-5);
}

.arch-nav-audience-card {
	background: #fff;
	border: 1px solid var(--kl-line);
	border-radius: var(--r-card);
	padding: var(--sp-3);
	display: flex;
	flex-direction: column;
}

.arch-nav-audience-card__tag {
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--kl-muted);
	margin-bottom: var(--sp-2);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--kl-line-soft);
}

.arch-nav-audience-card__title {
	font-size: 19px;
	font-weight: 700;
	color: var(--kl-ink);
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0 0 var(--sp-2);
}

.arch-nav-audience-card__desc {
	font-size: 13.5px;
	color: var(--kl-ink-soft);
	line-height: 1.55;
	margin: 0;
}

/* ============================================================
 * 9. Финальный CTA
 * ============================================================ */
/*
 * Финальный CTA — full-bleed на сером, продолжает фон секции «Для кого»
 * без визуального шва (обе секции 100vw, одинаковый bg-soft).
 */
.arch-nav-section--cta {
	background: var(--kl-bg-soft);
	border-top: none;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 0 max(var(--sp-3), calc(50vw - 600px + var(--sp-3))) var(--sp-section);
}

.arch-nav-final-cta {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--sp-4);
	padding: var(--sp-5);
	background: var(--kl-ink);
	color: #fff;
	border-radius: var(--r-card);
}

.arch-nav-final-cta .arch-nav-eyebrow {
	color: rgba(255, 255, 255, 0.55);
}

.arch-nav-final-cta__title {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin: 0 0 var(--sp-2);
	color: #fff;
}

.arch-nav-final-cta__desc {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
	max-width: 540px;
	margin: 0;
}

.arch-nav-final-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}

.arch-nav-final-cta__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	padding: 16px 22px;
	border: 0;
	background: #fff;
	color: var(--kl-ink);
	border-radius: var(--r-card);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s, transform 0.18s, color 0.18s;
}

.arch-nav-final-cta__btn:hover,
.arch-nav-final-cta__btn:focus-visible {
	background: var(--kl-yellow);
	color: var(--kl-ink);
	transform: translateX(2px);
}

.arch-nav-final-cta__btn span {
	font-size: 18px;
	font-weight: 500;
	color: var(--kl-muted);
}

.arch-nav-final-cta__btn:hover span {
	color: var(--kl-ink);
}

/* ============================================================
 * Блок «Модульная навигационная стела» — горизонтальный техпаспорт
 * во всю ширину инсайдера 1200px. Шапка (eyebrow + H2 + lead) слева
 * как в остальных секциях, фото снизу на всю ширину.
 * scroll-margin-top — чтобы при якорном переходе заголовок не уезжал
 * под sticky-шапку сайта (header в styles.css:826 fixed sticky).
 * ============================================================ */
.arch-nav-section--modular {
	scroll-margin-top: var(--header_height, 124px);
}

.arch-nav-modular {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.arch-nav-modular__head {
	max-width: 880px;
}

.arch-nav-modular__head .arch-nav-section-title {
	margin: 0 0 var(--sp-2);
}

.arch-nav-modular__head .arch-nav-section-lead {
	margin: 0;
}

.arch-nav-modular__photo {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	width: 100%;
}

.arch-nav-modular__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Stacked-fallback для всех устройств, КРОМЕ desktop с настоящим hover.
 * Срабатывает если:
 *   - viewport < 1280px (планшет, мобильный), ИЛИ
 *   - hover: none (touch-устройство любого размера)
 *
 * Это покрывает гибриды (ноутбук с тач-экраном) и предотвращает «прыжки»,
 * когда обе `(hover: hover)` и `(hover: none)` могут совпадать.
 */
@media (max-width: 1279px), (hover: none) {
	.arch-nav-scenario,
	.arch-nav-object-card {
		flex-direction: column;
		flex: 1 1 100%;
	}
	.arch-nav-scenarios__grid,
	.arch-nav-objects-grid {
		flex-direction: column;
	}
	.arch-nav-scenario__text,
	.arch-nav-object-card__text {
		max-width: none;
		min-height: 0;
	}
	.arch-nav-scenario__image,
	.arch-nav-object-card__image {
		position: static;
		width: auto;
		height: 240px;
		opacity: 1;
		filter: blur(0);
		transition: none;
	}
}

/* ============================================================
 * Адаптив
 * ============================================================ */
@media (max-width: 1279px) {
	.arch-nav-kits-grid,
	.arch-nav-entry-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.arch-nav-audiences-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Сценарии и типы объектов на планшете — обрабатываются объединённым правилом
	   @media (max-width: 1279px), (hover: none) выше: stacked layout с фото снизу */

	.arch-nav-hero-cover {
		height: 560px;
	}

	.arch-nav-hero-h1 {
		font-size: 40px;
	}

	.arch-nav-editorial {
		gap: var(--sp-5);
	}

	/* Инвентарь на планшете: 5 узких карточек становятся тесными → 3 в ряд */
	.arch-nav-inventory__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/*
	 * На планшете снимаем max-width: 576px у H2/lead — иначе на ширине 1024
	 * заголовок занимает только 576px (~59% content area), оставляя ~400px
	 * пустого справа. На белых секциях это незаметно, на full-bleed серой
	 * секции «Для кого» / финальном CTA — h2 визуально «прилипает к левому
	 * краю» внутри цветной плашки.
	 */
	.arch-nav-section-title,
	.arch-nav-section-lead {
		max-width: none;
	}
}

@media (max-width: 900px) {
	.arch-nav-section {
		padding: var(--sp-5) 0;
	}

	.arch-nav-section--audiences {
		padding-top: var(--sp-5);
		padding-bottom: var(--sp-5);
	}

	.arch-nav-hero-cover {
		height: auto;
		aspect-ratio: 4 / 5;
		min-height: 520px;
	}

	/*
	 * Сброс десктопного центрирования: убираем transform/width/padding/max-width,
	 * выставленные через `left:50%; transform:translateX(-50%); width:100%; max-width:1200px; padding:0 24px`.
	 * Иначе transform утаскивает контент за левый край viewport.
	 */
	.arch-nav-hero-cover__content {
		left: var(--sp-4);
		right: var(--sp-4);
		bottom: var(--sp-4);
		transform: none;
		width: auto;
		max-width: none;
		padding: 0;
	}

	.arch-nav-hero-cover__content > * {
		max-width: none;
	}

	.arch-nav-hero-code {
		right: var(--sp-4);
		top: var(--sp-4);
		min-width: 180px;
		padding: var(--sp-2);
	}

	.arch-nav-hero-h1 {
		font-size: 32px;
		line-height: 1.1;
	}

	.arch-nav-hero-lead {
		font-size: 14.5px;
	}

	.arch-nav-section-title {
		font-size: 26px;
	}

	.arch-nav-section-lead {
		font-size: 14px;
		margin-bottom: var(--sp-4);
	}

	.arch-nav-editorial {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}

	.arch-nav-editorial__photo {
		height: 220px;
		min-height: 220px;
	}

	.arch-nav-editorial__copy {
		padding: var(--sp-4);
	}

	/* Сценарии и типы объектов на мобиле — уже стакаются объединённым правилом
	   @media (max-width: 1279px), (hover: none) выше */

	.arch-nav-final-cta {
		grid-template-columns: 1fr;
		gap: var(--sp-3);
		padding: var(--sp-4);
	}

	.arch-nav-final-cta__title {
		font-size: 22px;
	}

	.arch-nav-scenarios__head {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.arch-nav-scenarios__head-title {
		grid-row: auto;
		grid-column: 1;
		font-size: 22px;
	}

	.arch-nav-scenarios__head-desc {
		grid-row: auto;
		grid-column: 1;
		max-width: none;
		margin-top: 8px;
	}

	.arch-nav-inventory__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.arch-nav-entry-feature {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}

	.arch-nav-modular {
		gap: var(--sp-3);
	}

	.arch-nav-modular__head {
		max-width: none;
	}

	.arch-nav-entry-feature__photo {
		height: 220px;
		min-height: 220px;
	}

	.arch-nav-entry-feature__copy {
		padding: var(--sp-4);
	}
}

@media (max-width: 639px) {
	.arch-nav-inner {
		padding: 0 var(--sp-2);
	}

	.arch-nav-section {
		padding: var(--sp-5) 0;
	}

	/*
	 * Full-bleed секции (audiences + cta) на ≤639 синхронизируются с inner
	 * по горизонтальному padding'у — 16px вместо дефолтных 24px, иначе
	 * на узких экранах заголовок «выезжает» относительно других секций.
	 */
	.arch-nav-section--audiences,
	.arch-nav-section--cta {
		padding-left: var(--sp-2);
		padding-right: var(--sp-2);
	}

	/* `.arch-nav-objects-grid` теперь flex, поэтому исключён из grid-template-columns override */
	.arch-nav-kits-grid,
	.arch-nav-entry-grid,
	.arch-nav-audiences-grid,
	.arch-nav-inventory__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-2);
	}

	/* На очень узких экранах ужимаем заголовки секций — длинные русские H2 не помещаются на 26px */
	.arch-nav-section-title {
		font-size: 22px;
	}

	.arch-nav-hero-cover {
		min-height: 480px;
		border-radius: 0;
	}

	.arch-nav-hero-code {
		position: static;
		margin: var(--sp-3) var(--sp-3) 0;
		display: none; /* Скрываем code-strip на мобиле — палитра доступна в блоке «Под дизайн-код» */
	}

	.arch-nav-hero-cta {
		flex-direction: column;
	}

	.arch-nav-btn {
		width: 100%;
	}

	.arch-nav-object-card__image {
		height: 180px;
	}
}