/**
 * K-Travel — основной фронт-стиль.
 *
 * Структура:
 *   1. Reset + переменные дизайн-системы
 *   2. Типографика
 *   3. Контейнер
 *   4. Утилиты (sr-only, screen-reader-text)
 *   5. Кнопки
 *   6. Header
 *   7. Hero
 *   8. Footer
 *   9. Sticky mobile CTA
 *  10. Адаптив
 */

/* ─────────────────────────────────────────────────────────────────
   1. RESET + VARIABLES
   ───────────────────────────────────────────────────────────────── */

:root {
	/* палитра */
	--c-dark:        #0E1116;
	--c-dark-2:      #1A1F26;
	--c-light:       #F7F4EE;
	--c-bg:          #FFFFFF;
	--c-text:        #1A1F26;
	--c-text-muted:  #6B7280;
	--c-border:      #E5E1D8;
	--c-accent:      #F0584A;
	--c-accent-dark: #D8392A;
	--c-accent-soft: #FFF1EE;

	/* типографика — единственный шрифт темы Inter, разные веса */
	--font-display: 'Inter', system-ui, -apple-system, sans-serif;
	--font-body:    'Inter', system-ui, -apple-system, sans-serif;
	--font-serif:   'Inter', system-ui, -apple-system, sans-serif;

	/* радиусы */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 24px;
	--r-pill: 999px;

	/* тени */
	--sh-sm: 0 2px 8px rgba(14,17,22,0.04);
	--sh-md: 0 8px 32px rgba(14,17,22,0.08);
	--sh-lg: 0 24px 64px rgba(14,17,22,0.12);

	/* layout */
	--container-max: 1280px;
	--container-pad: 32px;
}

/* минимальный сброс — стилей родительской Astra на фронте нет */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

figure { margin: 0; }

/* HTML-атрибут hidden должен побеждать любые наши display-правила.
   Без !important любой класс с display: inline-flex перебьёт его. */
[hidden] { display: none !important; }

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* SVG иконки темы. По дефолту наследуют цвет родителя (currentColor). */
.klbk-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

a {
	color: var(--c-accent);
	text-decoration: none;
	transition: color 0.15s;
}

a:hover { color: var(--c-accent-dark); }

button { font-family: inherit; cursor: pointer; }

/* ─────────────────────────────────────────────────────────────────
   2. TYPOGRAPHY
   ───────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	margin: 0;
	line-height: 1.15;
	color: var(--c-text);
	letter-spacing: -0.02em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────
   3. CONTAINER
   ───────────────────────────────────────────────────────────────── */

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	width: 100%;
}

.container--narrow { max-width: 800px; }

/* ─────────────────────────────────────────────────────────────────
   4. UTILITIES
   ───────────────────────────────────────────────────────────────── */

.screen-reader-text,
.skip-link {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px; left: 8px;
	width: auto; height: auto;
	clip: auto;
	padding: 12px 18px;
	background: var(--c-dark);
	color: #fff;
	z-index: 1000;
	border-radius: var(--r-sm);
}

/* ─────────────────────────────────────────────────────────────────
   5. BUTTONS
   ───────────────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	padding: 12px 22px;
	border-radius: var(--r-pill);
	border: 0;
	background: transparent;
	color: var(--c-text);
	cursor: pointer;
	transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;
	text-decoration: none;
}

.btn:hover { transform: translateY(-1px); }

.btn--accent { background: var(--c-accent); color: #fff !important; }
.btn--accent:hover { background: var(--c-accent-dark); color: #fff !important; }

.btn--ghost {
	background: transparent;
	color: #fff !important;
	border: 1.5px solid rgba(255,255,255,0.3);
}
.btn--ghost:hover { background: rgba(255,255,255,0.1); color: #fff !important; }

.btn--ghost-light {
	background: transparent;
	color: #fff !important;
	border: 1.5px solid rgba(255,255,255,0.6);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.15); }

.btn--white { background: #fff; color: var(--c-dark) !important; }
.btn--white:hover { background: var(--c-light); color: var(--c-dark) !important; }

.btn--lg { padding: 16px 32px; font-size: 16px; }
.btn--sm { padding: 8px 16px; font-size: 13px; }

/* ─────────────────────────────────────────────────────────────────
   6. TOPBAR — тёмная узкая полоса над шапкой
   ───────────────────────────────────────────────────────────────── */

.topbar {
	background: var(--c-dark);
	color: rgba(255,255,255,0.78);
	font-size: 13px;
	line-height: 1;
	position: relative;
	z-index: 101;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 9px;
	padding-bottom: 9px;
}

.topbar__left,
.topbar__right {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255,255,255,0.78) !important;
	text-decoration: none;
	transition: color 0.15s;
}

.topbar__item:hover { color: #fff !important; }

.topbar__item .klbk-icon { opacity: 0.7; }

.topbar__weather .klbk-icon {
	color: var(--c-accent);
	opacity: 1;
}

.topbar__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.85) !important;
	transition: background 0.15s, color 0.15s;
}

.topbar__social:hover {
	background: var(--c-accent);
	color: #fff !important;
}

/* На главной topbar лежит поверх hero, как и header */
body.home .topbar {
	position: absolute;
	top: 0; left: 0; right: 0;
	background: rgba(14,17,22,0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* На главной topbar'а нет — header начинается с самого верха. */

/* ─────────────────────────────────────────────────────────────────
   7. HEADER
   ───────────────────────────────────────────────────────────────── */

/* Default — solid header для внутренних страниц.
   На главной (body.home) перебивается на transparent + absolute. */

.site-header {
	position: relative;
	background: #fff;
	box-shadow: 0 1px 2px rgba(14,17,22,0.04), 0 6px 20px rgba(14,17,22,0.05);
	z-index: 100;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding-top: 16px;
	padding-bottom: 16px;
	color: var(--c-text);
}

.site-header__brand {
	flex-shrink: 0;
}

.site-header__logo,
.site-header__title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	color: var(--c-text) !important;
	text-decoration: none;
}

.site-header__logo-img {
	height: 36px;
	width: auto;
	display: block;
	/* Лого красным по умолчанию (фирменный цвет на белом фоне). */
}

.site-header__nav { margin-left: 16px; }

.site-header__nav .primary-menu {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__nav a {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 15px;
	color: var(--c-text) !important;
	transition: color 0.15s;
	text-decoration: none;
}

.site-header__nav a:hover,
.site-header__nav .current-menu-item > a,
.site-header__nav .current_page_item > a {
	color: var(--c-accent) !important;
}

.site-header__contact {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.site-header__phone {
	color: var(--c-text) !important;
}

.site-header__burger span {
	background: var(--c-text);
}

/* ── Главная — прозрачный header поверх тёмного hero ───────── */

body.home .site-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	background: transparent;
	box-shadow: none;
}

body.home .site-header__inner {
	color: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
}

body.home .site-header__logo,
body.home .site-header__title { color: #fff !important; }

body.home .site-header__logo-img {
	/* белый лого на тёмном hero */
	filter: brightness(0) invert(1);
}

body.home .site-header__nav a {
	color: rgba(255,255,255,0.85) !important;
}

body.home .site-header__nav a:hover,
body.home .site-header__nav .current-menu-item > a,
body.home .site-header__nav .current_page_item > a {
	color: #fff !important;
}

body.home .site-header__phone {
	color: #fff !important;
}

body.home .site-header__burger span {
	background: #fff;
}

.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	color: #fff !important;
	text-decoration: none;
}

.site-header__phone svg { opacity: 0.8; }

.site-header__burger {
	display: none;
	background: none;
	border: 0;
	padding: 8px;
	flex-direction: column;
	gap: 5px;
}

.site-header__burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   7. HERO
   ───────────────────────────────────────────────────────────────── */

.hero {
	position: relative;
	min-height: 100vh;
	color: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

.hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.05);
}

.hero__gradient {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(14,17,22,0.55) 0%, rgba(14,17,22,0.25) 35%, rgba(14,17,22,0.85) 100%),
		linear-gradient(90deg, rgba(14,17,22,0.6) 0%, transparent 50%);
}

.hero__inner {
	position: relative;
	padding-top: 140px;
	padding-bottom: 80px;
	width: 100%;
}

.hero__content { max-width: 720px; }

.hero__eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--c-accent);
	background: rgba(240,88,74,0.12);
	padding: 6px 14px;
	border-radius: var(--r-pill);
	margin-bottom: 28px;
}

.hero__title {
	font-size: 76px;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0 0 24px;
	color: #fff !important;
}

.hero__subtitle {
	font-size: 19px;
	color: rgba(255,255,255,0.85);
	max-width: 600px;
	margin: 0 0 36px;
	line-height: 1.55;
}

.hero__cta {
	display: flex;
	gap: 14px;
	margin-bottom: 56px;
	flex-wrap: wrap;
}

.hero__stats {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
}

.hero__stats > div {
	display: flex;
	flex-direction: column;
}

.hero__stats strong {
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 4px;
	color: #fff;
}

.hero__stats span {
	font-size: 13px;
	color: rgba(255,255,255,0.65);
	letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────────
   8. SECTIONS (общая база для всех секций ниже hero)
   ───────────────────────────────────────────────────────────────── */

.section {
	padding: 110px 0;
}

.section--light  { background: var(--c-light); }
.section--dark   { background: var(--c-dark); color: #fff; }
.section--accent { background: var(--c-accent); color: #fff; }

.section__head {
	max-width: 760px;
	margin-bottom: 56px;
}

.section__head--light { color: #fff; }

.section__eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--c-accent);
	text-transform: uppercase;
	margin-bottom: 16px;
}

.section__title {
	font-size: 56px;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0 0 20px;
}

.section--dark .section__title { color: #fff; }

.section__lead {
	font-size: 18px;
	color: var(--c-text-muted);
	max-width: 600px;
	margin: 0;
}

.section--dark .section__lead { color: rgba(255,255,255,0.7); }

.section__link {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--c-accent);
	font-size: 16px;
}

/* Serif-вариант заголовка секции */
.section__title--serif {
	font-family: var(--font-serif);
	font-weight: 500;
	letter-spacing: -0.02em;
}

/* Цифровой индекс перед eyebrow ("01") */
.section__index {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--c-text-muted);
	margin-right: 14px;
	vertical-align: middle;
}

/* Шапка секции в ряд (заголовок слева, ссылка справа) */
.section__head--row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	max-width: none;
}

.section__head--row > div:first-child { max-width: 760px; }

.section__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--c-text);
	white-space: nowrap;
	flex-shrink: 0;
}

.section__link:hover { color: var(--c-accent); }
.section__link .klbk-icon { transition: transform 0.2s; }
.section__link:hover .klbk-icon { transform: translateX(4px); }

/* ─────────────────────────────────────────────────────────────────
   9. ROUTES GRID — карточки маршрутов (57hours-style)
   ───────────────────────────────────────────────────────────────── */

.routes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.route-card {
	background: #fff;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(14,17,22,0.04), 0 4px 14px rgba(14,17,22,0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	display: flex;
	flex-direction: column;
}

.route-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(14,17,22,0.06), 0 20px 40px rgba(14,17,22,0.10);
}

.route-card__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	flex: 1;
}

.route-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-light);
}

.route-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.route-card__img--placeholder {
	background: linear-gradient(135deg, #ddd6c8 0%, #ebe4d5 100%);
}

.route-card:hover .route-card__img { transform: scale(1.04); }

.route-card__badges {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 2;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.04em;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: rgba(255,255,255,0.94);
	color: var(--c-text);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.badge--hit { background: var(--c-accent); color: #fff; }
.badge--new { background: var(--c-dark); color: #fff; }

/* Overlay снизу фото: сложность точками в правом нижнем углу */
.route-card__overlay {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 2;
}

.route-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: var(--r-pill);
	background: rgba(14,17,22,0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Точки сложности внутри тёмного chip: неактивные — белые полупрозрачные,
   активные — наш фирменный красный */
.route-card__chip .difficulty__dot      { background: rgba(255,255,255,0.35); }
.route-card__chip .difficulty__dot.is-on { background: var(--c-accent); }

/* Подпись «Сложность» перед точками */
.route-card__chip-label {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
}

.route-card__body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
	background: #fff;
}

/* Локация: пин + текст */
.route-card__location {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--c-text-muted);
	margin-bottom: 8px;
	font-weight: 500;
}

.route-card__location .klbk-icon {
	color: var(--c-accent);
	flex-shrink: 0;
}

.route-card__title {
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 700;
	color: var(--c-text);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
}

/* Сложность точками */
.difficulty {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.difficulty__dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(14,17,22,0.18);
}

.difficulty__dot.is-on { background: var(--c-accent); }

/* Сводка этапов: inline, без плашки. Иконка + км + (время / набор мелким). */
.stages-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 22px;
	margin-bottom: 16px;
}

.stage-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.stage-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--c-light);
	color: var(--c-text);
	flex-shrink: 0;
}

.stage-pill__body {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.stage-pill__body strong {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--c-text);
}

.stage-pill__sub {
	font-size: 11px;
	color: var(--c-text-muted);
	margin-top: 2px;
}

/* Footer карточки: длительность слева + CTA справа */
.route-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--c-border);
}

.route-card__duration {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--c-text-muted);
}

.route-card__duration .klbk-icon {
	color: var(--c-text-muted);
}

.route-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-text);
	flex-shrink: 0;
}

.route-card__cta .klbk-icon { transition: transform 0.2s; }
.route-card:hover .route-card__cta { color: var(--c-accent); }
.route-card:hover .route-card__cta .klbk-icon { transform: translateX(4px); color: var(--c-accent); }

/* ─────────────────────────────────────────────────────────────────
   10. CATEGORIES (виды отдыха)
   ───────────────────────────────────────────────────────────────── */

.categories {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}

.cat-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--c-dark);
	color: #fff !important;
	text-decoration: none;
	transition: transform 0.25s, box-shadow 0.25s;
	display: block;

	/* по умолчанию — обычная карточка во втором ряду */
	grid-column: span 2;
	aspect-ratio: 4 / 5;
}

.cat-card--lg {
	/* крупные карточки в первом ряду */
	grid-column: span 3;
	aspect-ratio: 16 / 10;
}

.cat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(14,17,22,0.18);
}

.cat-card__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.6s ease;
}

.cat-card:hover .cat-card__img { transform: scale(1.06); }

.cat-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(14,17,22,0)   0%,
		rgba(14,17,22,0)   35%,
		rgba(14,17,22,0.7) 75%,
		rgba(14,17,22,0.95) 100%
	);
	pointer-events: none;
}

/* иконка-бейдж в правом верхнем углу */
.cat-card__icon {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
}

.cat-card__icon .klbk-icon { display: block; }

.cat-card__body {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 22px 24px 24px;
	z-index: 2;
}

.cat-card--lg .cat-card__body { padding: 28px 32px 30px; }

.cat-card__body h3 {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 6px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.cat-card--lg .cat-card__body h3 { font-size: 28px; margin-bottom: 8px; }

.cat-card__body p {
	font-size: 13px;
	color: rgba(255,255,255,0.85);
	margin: 0;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cat-card--lg .cat-card__body p {
	font-size: 15px;
	-webkit-line-clamp: 3;
	max-width: 90%;
}

.cat-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cat-card__cta::after {
	content: '→';
	transition: transform 0.2s;
}

.cat-card:hover .cat-card__cta::after { transform: translateX(4px); }

/* ─────────────────────────────────────────────────────────────────
   10. SINGLE ROUTE — страница маршрута
   ───────────────────────────────────────────────────────────────── */

/* Дополнительная ghost-кнопка на светлом фоне */
.btn--ghost-dark {
	background: transparent;
	color: var(--c-text) !important;
	border: 1.5px solid var(--c-border);
}
.btn--ghost-dark:hover {
	background: var(--c-light);
	border-color: var(--c-text);
}

/* Хлебные крошки */
.breadcrumbs {
	padding: 24px 0 8px;
	font-size: 13px;
	color: var(--c-text-muted);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs__item a {
	color: var(--c-text-muted);
	text-decoration: none;
	transition: color 0.15s;
}

.breadcrumbs__item a:hover { color: var(--c-accent); }

.breadcrumbs__item--current { color: var(--c-text); font-weight: 500; }

.breadcrumbs__sep {
	display: inline-flex;
	align-items: center;
	color: var(--c-border);
}

.breadcrumbs__sep-icon { transform: rotate(-90deg); }

/* Шапка: бейджи + заголовок + подзаголовок + чипы */
.route-page__header {
	padding: 24px 0 36px;
}

.route-page__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.route-page__title {
	font-family: var(--font-body);
	font-size: 56px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 16px;
	color: var(--c-text);
}

.route-page__subtitle {
	font-size: 19px;
	color: var(--c-text-muted);
	line-height: 1.5;
	max-width: 720px;
	margin: 0 0 28px;
}

/* Чипы информации под заголовком */
.route-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.route-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: var(--r-pill);
	background: var(--c-light);
	color: var(--c-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.route-chip .klbk-icon { color: var(--c-text-muted); }

.route-chip--difficulty { gap: 10px; }
.route-chip--difficulty .difficulty__dot { background: rgba(14,17,22,0.18); }
.route-chip--difficulty .difficulty__dot.is-on { background: var(--c-accent); }

/* Главное фото + плашка-триггер */
.route-page__media { margin-bottom: 48px; }

.route-page__media-frame {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
}

.route-page__media-trigger {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
	position: relative;
}

.route-page__media-img,
.route-page__media-placeholder {
	width: 100%;
	aspect-ratio: 5 / 2;
	max-height: 560px;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.route-page__media-trigger:hover .route-page__media-img { transform: scale(1.02); }

.route-page__media-placeholder {
	background: linear-gradient(135deg, #ddd6c8 0%, #ebe4d5 100%);
}

.route-page__media-badge {
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: var(--r-pill);
	background: rgba(255,255,255,0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(14,17,22,0.16);
	transition: transform 0.2s, box-shadow 0.2s;
}

.route-page__media-trigger:hover .route-page__media-badge {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(14,17,22,0.24);
}

.route-page__media-badge .klbk-icon { color: var(--c-accent); }

/* Двухколоночная секция */
.route-page__main { padding-bottom: 80px; }

.route-page__grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 64px;
	align-items: start; /* важно для sticky в grid */
}

.route-page__content { min-width: 0; }

.route-page__description {
	font-size: 17px;
	line-height: 1.7;
	color: var(--c-text);
}

.route-page__description p { margin: 0 0 1em; }

.route-page__description h2,
.route-page__description h3,
.route-page__description h4 {
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 1.4em 0 0.5em;
	line-height: 1.3;
}

.route-page__description h2 { font-size: 22px; }
.route-page__description h3 { font-size: 19px; }
.route-page__description h4 { font-size: 17px; }

.route-page__description a {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.route-page__description a:hover { color: var(--c-accent-dark); }

.route-page__description strong { font-weight: 700; color: var(--c-text); }

/* Маркированные и нумерованные списки в описании */
.route-page__description ul,
.route-page__description ol {
	list-style: none;
	padding: 0;
	margin: 0 0 1em;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.route-page__description ul li,
.route-page__description ol li {
	position: relative;
	padding-left: 26px;
	line-height: 1.55;
}

/* UL: короткая красная линия */
.route-page__description ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 16px;
	height: 2px;
	background: var(--c-accent);
}

.route-page__description ul li { padding-left: 28px; }

/* OL: красные цифры */
.route-page__description ol { counter-reset: route-ol; }

.route-page__description ol li {
	counter-increment: route-ol;
	padding-left: 32px;
}

.route-page__description ol li::before {
	content: counter( route-ol ) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--c-accent);
	min-width: 24px;
}

/* Вложенные списки — мельче точка, без увеличенного gap */
.route-page__description li ul,
.route-page__description li ol {
	margin-top: 8px;
	gap: 6px;
}

/* ── Read more / less для длинного описания ─────────────────────
   Плавная анимация через max-height + transition.
   В свёрнутом состоянии — 7 строк (7 × line-height в em).
   В развёрнутом max-height вычисляется JS-ом, чтобы анимация
   шла от/до реальной высоты контента.
*/

.route-readmore {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

/* Свёрнутое — обрезка по строкам через line-clamp.
   Это точно режет на конце строки, и scrollHeight > clientHeight ↔ "не влезло". */
.route-readmore__body {
	display: -webkit-box;
	-webkit-line-clamp: 7;
	line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Развёрнутое — обычный flow */
.route-readmore.is-expanded .route-readmore__body {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

.route-readmore__body > *:last-child { margin-bottom: 0; }

.route-readmore__toggle {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--c-accent);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
}

.route-readmore__toggle:hover { color: var(--c-accent-dark); }

.route-readmore__chevron { transition: transform 0.25s ease; }

.route-readmore.is-expanded .route-readmore__chevron { transform: rotate(180deg); }

/* ── Секции внутри контентной колонки ─────────────────────────── */

.route-section {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--c-border);
}

.route-section:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.route-section__title {
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 24px;
	color: var(--c-text);
}

.route-section__subtitle {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	margin: 32px 0 16px;
	color: var(--c-text);
}

.route-section--two-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.route-section--two-cols .route-section__title { margin-bottom: 18px; }

/* ── Сводка по транспорту: «🚙 14 км · на машине · 2ч 40мин» ── */

.stages-totals {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}

.stages-total {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--c-light);
	border-radius: var(--r-md);
	min-width: 180px;
	flex: 1 1 auto;
}

.stages-total__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	color: var(--c-text);
	flex-shrink: 0;
}

.stages-total__body {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.stages-total__body strong {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--c-text);
	letter-spacing: -0.01em;
}

.stages-total__body span {
	font-size: 13px;
	color: var(--c-text-muted);
	margin-top: 4px;
}

/* «Всего» — акцентная плашка, выделяется среди остальных */
.stages-total--grand {
	background: var(--c-accent);
	color: #fff;
}

.stages-total--grand .stages-total__body strong { color: #fff; font-size: 22px; }
.stages-total--grand .stages-total__body span   { color: rgba(255,255,255,0.85); }
.stages-total--grand .stages-total__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	margin-bottom: 2px;
}

/* ── Этапы маршрута (ladder) ─────────────────────────────────── */

.stages {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: stage;
	position: relative;
}

.stage {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 18px;
	padding-bottom: 28px;
	position: relative;
}

.stage:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 23px;
	top: 48px;
	bottom: 0;
	width: 2px;
	background: var(--c-border);
}

.stage__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-light);
	color: var(--c-text);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.stage__body { padding-top: 4px; }

.stage__header {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

.stage__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--r-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.stage__title {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--c-text);
}

.stage__transport {
	font-size: 14px;
	color: var(--c-text-muted);
	font-weight: 500;
}

.stage__meta {
	font-size: 14px;
	color: var(--c-text-muted);
	margin-bottom: 6px;
}

.stage__desc {
	font-size: 15px;
	color: var(--c-text);
	line-height: 1.55;
	margin: 0;
}

.stage__mirror {
	font-size: 13px;
	color: var(--c-text-muted);
	font-style: italic;
	margin: 6px 0 0;
}

/* ── Чек-листы «Что включено» / «Что взять» ─────────────────── */

.checklist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.checklist__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.5;
}

.checklist__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--c-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.checklist__icon--neutral {
	background: var(--c-light);
	color: var(--c-text);
}

/* ── Спецполя — пары label / value ───────────────────────────── */

.specifics {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-top: 1px solid var(--c-border);
}

.specifics__row {
	display: contents;
}

.specifics__row dt,
.specifics__row dd {
	padding: 14px 0;
	border-bottom: 1px solid var(--c-border);
	margin: 0;
}

.specifics__label {
	font-size: 14px;
	color: var(--c-text-muted);
	font-weight: 500;
}

.specifics__value {
	font-size: 15px;
	color: var(--c-text);
	font-weight: 600;
}

/* ── Программа по дням (для конного многодневного тура) ────── */

.program {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.program__day {
	padding: 18px 20px;
	background: var(--c-light);
	border-radius: var(--r-md);
}

.program__index {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--c-accent);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.program__title {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--c-text);
}

.program__desc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-text-muted);
	margin: 0;
}

/* ── Точка сбора + плашка трансфера ──────────────────────────── */

.location {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px 20px;
	background: var(--c-light);
	border-radius: var(--r-md);
	margin-bottom: 16px;
}

.location__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--c-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.location__body { flex: 1; }

.location__address {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--c-text);
}

.location__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-accent);
}

.location__link:hover { color: var(--c-accent-dark); }

.transfer-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 18px;
	background: var(--c-accent-soft);
	border-radius: var(--r-md);
	font-size: 14px;
	line-height: 1.5;
}

.transfer-note__icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Sticky-сайдбар */
.route-page__sidebar {
	position: sticky;
	top: 100px;
}

.booking-sidebar {
	background: transparent;
}

.booking-sidebar__inner {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.booking-sidebar__title {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.01em;
}

.booking-sidebar__widget-placeholder {
	padding: 20px;
	border: 2px dashed var(--c-border);
	border-radius: var(--r-md);
	font-size: 13px;
	color: var(--c-text-muted);
	background: var(--c-light);
	line-height: 1.5;
}

.booking-sidebar__widget-placeholder small {
	display: block;
	margin-top: 6px;
	opacity: 0.7;
}

/* Реальный виджет бронирования (когда поле заполнено) */
.booking-sidebar__widget {
	/* Без фона/паддингов — пусть виджет сам решает свой look */
}

.booking-sidebar__widget > * { max-width: 100%; }

.booking-sidebar__widget iframe {
	width: 100%;
	border: 0;
	display: block;
}

.booking-sidebar__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.booking-sidebar__cta {
	width: 100%;
	justify-content: center;
}

.booking-sidebar__note {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--c-accent-soft);
	border-radius: var(--r-md);
	font-size: 14px;
	color: var(--c-text);
	font-weight: 500;
}

.booking-sidebar__note .klbk-icon { color: var(--c-accent); flex-shrink: 0; }

.booking-sidebar__small {
	font-size: 12px;
	color: var(--c-text-muted);
	text-align: center;
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   FEATURES — «Почему K-Travel»
   ───────────────────────────────────────────────────────────────── */

.features {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
}

.feature {
	background: #fff;
	border-radius: var(--r-lg);
	padding: 28px 26px 26px;
	border: 1px solid var(--c-border);
}

.feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--r-md);
	background: var(--c-accent-soft);
	color: var(--c-accent);
	margin-bottom: 18px;
}

.feature__title {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
	color: var(--c-text);
}

.feature__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--c-text-muted);
}

/* ─────────────────────────────────────────────────────────────────
   FAQ — на главной
   ───────────────────────────────────────────────────────────────── */

.faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq__item {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.faq__item[open] {
	border-color: var(--c-accent);
}

.faq__question {
	cursor: pointer;
	padding: 18px 22px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16.5px;
	color: var(--c-text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--c-light);
	color: var(--c-accent);
	flex-shrink: 0;
	transition: transform 0.25s, background 0.2s;
}

.faq__item[open] .faq__icon {
	transform: rotate( 180deg );
	background: var(--c-accent-soft);
}

.faq__answer {
	padding: 0 22px 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--c-text);
}

.faq__answer p { margin: 0; }

/* ─────────────────────────────────────────────────────────────────
   CONTACT CTA — финальный блок главной
   ───────────────────────────────────────────────────────────────── */

.contact-cta {
	background: var(--c-accent);
	color: #fff;
}

.contact-cta__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 56px;
	align-items: center;
}

.contact-cta__title {
	font-family: var(--font-body);
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0 0 16px;
	color: #fff;
	line-height: 1.1;
}

.contact-cta__lead {
	font-size: 18px;
	color: rgba(255,255,255,0.92);
	margin: 0 0 28px;
	line-height: 1.55;
}

.contact-cta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.contact-cta__phone {
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: var(--r-lg);
	padding: 28px 32px;
	color: #fff;
}

.contact-cta__phone-label {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
	margin-bottom: 12px;
}

.contact-cta__phone-number {
	display: block;
	font-family: var(--font-body);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff !important;
	margin-bottom: 8px;
	text-decoration: none;
}

.contact-cta__phone-hours {
	font-size: 13px;
	color: rgba(255,255,255,0.75);
}

/* ─────────────────────────────────────────────────────────────────
   ARCHIVE — /routes/ и страницы категорий
   ───────────────────────────────────────────────────────────────── */

.archive-head {
	padding: 48px 0 16px;
}

.archive-head__title {
	font-family: var(--font-body);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0 0 12px;
	color: var(--c-text);
}

.archive-head__lead {
	font-size: 17px;
	color: var(--c-text-muted);
	max-width: 720px;
	margin: 0;
	line-height: 1.55;
}

.archive-section { padding: 24px 0 96px; }

.archive-grid { margin-top: 36px; }

.archive-empty {
	padding: 48px 0;
	font-size: 16px;
	color: var(--c-text-muted);
	text-align: center;
}

/* Пагинация WP */
.archive-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
}

.archive-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--r-md);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-text);
	background: #fff;
	border: 1px solid var(--c-border);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.archive-pagination .page-numbers:hover {
	background: var(--c-light);
	border-color: var(--c-text);
}

.archive-pagination .page-numbers.current {
	background: var(--c-accent);
	color: #fff;
	border-color: var(--c-accent);
}

.archive-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	color: var(--c-text-muted);
}

/* ── Intro-блок под заголовком категории (сворачиваемый) ─────── */

.category-intro {
	margin-top: 28px;
	max-width: 800px;
}

.category-intro__body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--c-text);
}

.category-intro__body p { margin: 0 0 1em; }
.category-intro__body p:last-child { margin-bottom: 0; }

.category-intro__body h2,
.category-intro__body h3,
.category-intro__body h4 {
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 1.4em 0 0.5em;
	line-height: 1.25;
	color: var(--c-text);
}

.category-intro__body h2 { font-size: 22px; }
.category-intro__body h3 { font-size: 18px; }
.category-intro__body h4 { font-size: 16px; }

.category-intro__body a {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.category-intro__body a:hover { color: var(--c-accent-dark); }

.category-intro__body strong { font-weight: 700; }

.category-intro__body ul,
.category-intro__body ol {
	list-style: none;
	padding: 0;
	margin: 0 0 1em;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.category-intro__body ul li,
.category-intro__body ol li {
	position: relative;
	padding-left: 26px;
	line-height: 1.55;
}

.category-intro__body ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 14px;
	height: 2px;
	background: var(--c-accent);
}

.category-intro__body ol { counter-reset: cat-ol; }
.category-intro__body ol li {
	counter-increment: cat-ol;
	padding-left: 30px;
}
.category-intro__body ol li::before {
	content: counter( cat-ol ) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--c-accent);
}

/* ── Чипы категорий ───────────────────────────────────────────── */

.category-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.category-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--r-pill);
	background: #fff;
	border: 1px solid var(--c-border);
	color: var(--c-text) !important;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
	white-space: nowrap;
}

.category-chip .klbk-icon {
	color: var(--c-text-muted);
	transition: color 0.15s;
}

.category-chip:hover {
	border-color: var(--c-text);
	transform: translateY(-1px);
}

.category-chip:hover .klbk-icon { color: var(--c-accent); }

.category-chip.is-active {
	background: var(--c-text);
	border-color: var(--c-text);
	color: #fff !important;
	cursor: default;
	transform: none;
}

.category-chip.is-active .klbk-icon {
	color: var(--c-accent);
}

/* ─────────────────────────────────────────────────────────────────
   SIMILAR ROUTES — перелинковка внизу страницы маршрута
   ───────────────────────────────────────────────────────────────── */

.similar {
	background: var(--c-light);
	padding: 72px 0 96px;
	margin-top: 40px;
}

.similar__block {
	margin-bottom: 64px;
}

.similar__block:last-child { margin-bottom: 0; }

.similar__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 28px;
}

.similar__title {
	font-family: var(--font-body);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--c-text);
}

.similar__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--c-text);
	white-space: nowrap;
	flex-shrink: 0;
}

.similar__link:hover { color: var(--c-accent); }

.similar__link .klbk-icon { transition: transform 0.2s; }
.similar__link:hover .klbk-icon { transform: translateX(4px); }

/* Карточки внутри similar — на бежевом фоне белые */
.similar .route-card { background: #fff; }

/* ─────────────────────────────────────────────────────────────────
   12. LIGHTBOX — модальный слайдер галереи
   ───────────────────────────────────────────────────────────────── */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(14, 17, 22, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__stage {
	margin: 0;
	max-width: 92vw;
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.lightbox__img {
	display: block;
	max-width: 92vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--r-md);
	transition: opacity 0.2s ease;
}

.lightbox__img.is-loading { opacity: 0.3; }

.lightbox__counter {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 0.04em;
}

/* Круглые кнопки управления */
.lightbox__close,
.lightbox__nav {
	position: fixed;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, transform 0.2s;
	z-index: 10;
}

.lightbox__close:hover,
.lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.22);
	transform: scale(1.05);
}

.lightbox__close {
	top: 24px;
	right: 24px;
}

.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }

.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.05); }

/* Иконки навигации — chevron-down повёрнут */
.lightbox__nav--prev .lightbox__nav-icon { transform: rotate(90deg); }
.lightbox__nav--next .lightbox__nav-icon { transform: rotate(-90deg); }

/* ─────────────────────────────────────────────────────────────────
   12. FOOTER
   ───────────────────────────────────────────────────────────────── */

.site-footer {
	background: var(--c-dark);
	color: rgba(255,255,255,0.7);
	padding-top: 80px;
	margin-top: 0;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 60px;
	padding-bottom: 56px;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

.site-footer__brand,
.site-footer__nav,
.site-footer__contacts {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__title,
.site-footer__logo,
.site-footer__brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 800;
	color: #fff !important;
	text-decoration: none;
	margin-bottom: 6px;
}

.site-footer__logo-img {
	height: 48px;
	width: auto;
	display: block;
	/* в футере фон тёмный — делаем лого белым */
	filter: brightness(0) invert(1);
}

.site-footer__about {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255,255,255,0.7);
}

.site-footer__address {
	font-style: normal;
	font-size: 14px;
	color: rgba(255,255,255,0.7);
	display: block;
	margin-top: 8px;
}

.site-footer__nav .footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.site-footer__nav a,
.site-footer__contacts a {
	color: rgba(255,255,255,0.7) !important;
	font-size: 15px;
	padding: 6px 0;
	transition: color 0.15s;
	text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__contacts a:hover { color: #fff !important; }

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px var(--container-pad);
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: 13px;
	max-width: var(--container-max);
	margin: 0 auto;
	color: rgba(255,255,255,0.5);
}

/* ─────────────────────────────────────────────────────────────────
   9. STICKY MOBILE CTA
   ───────────────────────────────────────────────────────────────── */

.sticky-cta {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: #fff;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
	padding: 12px 16px;
	gap: 10px;
	z-index: 50;
}

.sticky-cta a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	border-radius: var(--r-pill);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.sticky-cta__phone { background: var(--c-light); color: var(--c-text) !important; }
.sticky-cta__wa    { background: var(--c-accent); color: #fff !important; }

/* ─────────────────────────────────────────────────────────────────
   10. RESPONSIVE
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.hero__title { font-size: 56px; }
	.section__title { font-size: 42px; }
	.section { padding: 80px 0; }
	.routes-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.section__head--row { flex-direction: column; align-items: flex-start; gap: 16px; }
	/* Страница маршрута: sidebar уходит вниз */
	.route-page__grid { grid-template-columns: 1fr; gap: 40px; }
	.route-page__sidebar { position: static; }
	.route-page__title { font-size: 44px; }
	.route-section--two-cols { grid-template-columns: 1fr; gap: 24px; }
	/* Главная: новые секции */
	.features { grid-template-columns: repeat( 2, 1fr ); }
	.contact-cta__inner { grid-template-columns: 1fr; gap: 32px; }
	.contact-cta__title { font-size: 36px; }
	/* Similar routes на планшете */
	.similar { padding: 56px 0 72px; }
	.similar__title { font-size: 26px; }
	.similar__block { margin-bottom: 48px; }
	.categories {
		grid-template-columns: repeat(6, 1fr);
		gap: 14px;
	}
	/* Крупные — на всю ширину; мелкие — по 2 в ряд */
	.cat-card--lg { grid-column: span 6; aspect-ratio: 16 / 9; }
	.cat-card     { grid-column: span 3; aspect-ratio: 4 / 5;  }
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	:root { --container-pad: 20px; }
	.site-header__nav { display: none; }
	.site-header__phone { display: none; }
	.site-header__burger { display: flex; }
	/* Топбар на мобиле: компактнее, email и текст погоды скрываем */
	.topbar__inner { gap: 12px; }
	.topbar__left { gap: 12px; }
	.topbar__right { gap: 8px; }
	.topbar__item[href^="mailto:"] { display: none; }
	.topbar__weather span:last-child::after { content: ''; }
	.topbar__weather { font-size: 12px; }
	body.home .site-header { top: 36px; }
	/* Archive на мобиле */
	.archive-head { padding: 28px 0 12px; }
	.archive-head__title { font-size: 30px; }
	.archive-head__lead { font-size: 15px; }
	.archive-section { padding: 16px 0 56px; }
	.archive-grid { margin-top: 24px; }
	/* Чипы — горизонтальный скролл, как у Airbnb */
	.category-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0 calc( -1 * var(--container-pad) );
		padding: 4px var(--container-pad);
	}
	.category-chips::-webkit-scrollbar { display: none; }
	.category-chip { padding: 9px 14px; font-size: 13px; flex-shrink: 0; }
	.hero { min-height: 100vh; }
	.hero__inner { padding-top: 100px; padding-bottom: 60px; }
	.hero__title { font-size: 38px; line-height: 1.1; }
	.hero__subtitle { font-size: 16px; }
	.hero__stats { gap: 24px; }
	.hero__stats strong { font-size: 26px; }
	.section { padding: 56px 0; }
	.section__title { font-size: 32px; }
	.section__head { margin-bottom: 36px; }
	.routes-grid { grid-template-columns: 1fr; gap: 20px; }
	.route-card__body { padding: 18px 18px 20px; }
	.route-card__title { font-size: 22px; }
	/* Страница маршрута на мобиле */
	.route-page__title { font-size: 32px; line-height: 1.1; }
	.route-page__subtitle { font-size: 16px; }
	.route-page__header { padding: 12px 0 24px; }
	.route-page__media { margin-bottom: 32px; }
	.route-page__main { padding-bottom: 56px; }
	.route-chip { font-size: 13px; padding: 7px 12px; }
	.breadcrumbs { font-size: 12px; padding: 12px 0 0; }
	/* Секции маршрута */
	.route-section { margin-top: 36px; padding-top: 28px; }
	.route-section__title { font-size: 22px; }
	.specifics { grid-template-columns: 1fr; }
	.specifics__row dt { padding-bottom: 4px; border-bottom: 0; }
	.specifics__row dd { padding-top: 0; padding-bottom: 12px; }
	.stage { grid-template-columns: 36px 1fr; gap: 14px; padding-bottom: 22px; }
	.stage__icon { width: 36px; height: 36px; }
	.stage:not(:last-child)::before { left: 17px; top: 36px; }
	/* Features / FAQ / Contact CTA — мобильный */
	.features { grid-template-columns: 1fr; gap: 14px; }
	.feature { padding: 22px 20px; }
	.feature__icon { width: 48px; height: 48px; margin-bottom: 14px; }
	.faq__question { padding: 16px 18px; font-size: 15px; }
	.faq__answer { padding: 0 18px 18px; font-size: 14px; }
	.contact-cta__title { font-size: 28px; }
	.contact-cta__lead { font-size: 16px; }
	.contact-cta__phone { padding: 20px 22px; }
	.contact-cta__phone-number { font-size: 24px; }
	/* Similar routes на мобиле */
	.similar { padding: 40px 0 56px; }
	.similar__title { font-size: 22px; }
	.similar__head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.similar__block { margin-bottom: 36px; }
	/* Плашка-триггер на фото */
	.route-page__media-badge { right: 12px; bottom: 12px; padding: 10px 14px; font-size: 13px; }
	/* Лайтбокс */
	.lightbox__close,
	.lightbox__nav { width: 44px; height: 44px; }
	.lightbox__close { top: 12px; right: 12px; }
	.lightbox__nav--prev { left: 8px; }
	.lightbox__nav--next { right: 8px; }
	.lightbox__img { max-height: 70vh; }
	.categories {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.cat-card,
	.cat-card--lg { grid-column: span 1; aspect-ratio: 4 / 5; }
	.cat-card__body { padding: 16px 18px 20px; }
	.cat-card--lg .cat-card__body { padding: 16px 18px 20px; }
	.cat-card__body h3 { font-size: 17px; }
	.cat-card--lg .cat-card__body h3 { font-size: 18px; }
	.cat-card__body p { font-size: 12px; }
	.cat-card--lg .cat-card__body p { font-size: 12px; -webkit-line-clamp: 2; }
	.cat-card__icon { width: 32px; height: 32px; top: 12px; right: 12px; }
	.cat-card__icon .klbk-icon { width: 16px; height: 16px; }
	.cat-card__cta { font-size: 11px; margin-top: 10px; }
	.site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
	.site-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
	.sticky-cta { display: flex; }
	body { padding-bottom: 76px; }
}