/* === 🧱 Front CSS Build — 2026-05-19 09:00:03 === */

/* --- tokens.css --- */
/* === 📄 /styles_core/front/tokens.css — цветовые и типографические токены ===
   Основной источник переменных для всех стилей фронта  Кочуй
   Поддерживает автоматическое переключение светлой и тёмной темы.
*/

/* === 🌾 Тема "Кочуй! ===

*/

:root {
/* =========================================================
   🌿 БАЗОВЫЕ ЦВЕТА — CAMP ALTAI (СВЕТЛАЯ ТЕМА)
   ========================================================= */

/* 🔥 Primary — ЕДИНСТВЕННЫЙ оранжевый (действие, деньги, CTA) */
--color-primary: #fb8500;        /* кнопки, цена, главное действие */
--color-on-primary: #ffffff;     /* текст на primary */
--color-primary-light: #ffd6a8;  /* hover / мягкая подсветка */

/* 🌿 Accent — вторичный акцент (НЕ оранжевый) */
--color-accent: #6baa75;         /* пояснения, бейджи, смысл */
--color-accent-light: #e3f0e7;   /* мягкий фон под accent */

/* ⚠️ Highlight — внимание / маркер (редко!) */
--color-highlight: #ffc105;      /* подчёркивание, метки, выделение */
--color-on-highlight: #1f1e1d;   /* текст на highlight (добавить) */


--color-tibet: #646e78;
--color-tibet-light: rgba(100, 110, 120, 0.12);

/* 🌞 Фоны и поверхности */
/* 🌞 Фоны и поверхности */
--color-bg: #ffffff;                 /* основной фон сайта / body */
--color-surface: #f7f7f7;            /* карточки, секции, контейнеры */
--color-surface-muted: #f0f0f0;      /* вложенные плашки, muted UI */

/* 🧱 Границы */
--color-border: rgba(0,0,0,0.08);
--color-border-subtle: rgba(0,0,0,0.04);


/* 🌑 Основной текст */
--color-fg: #323030;        /* основной текст / заголовки / базовый контент */

/* 🌫️ Вторичный текст */
--color-muted: #6f6a63;     /* подписи, пояснения, менее важный текст */


/* 🌊 Информационные цвета */
--color-info: #9dd4d2;         /* info-акценты, уведомления, мягкие бирюзовые элементы */
--color-info-light: #e6f5f4;   /* светлый фон для info-блоков и плашек */

/* ✅ Состояния */
--color-success: #6baa75;
--color-error: #c44536;


/* 🎨 Тени — ослабить */
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
--shadow-md: 0 3px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 8px 14px -2px rgb(0 0 0 / 0.15);




  /* 🎨 Радиусы и тени */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
    /* 🟢 Pill / Capsule */
  --radius-pill: 999px;
  
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 3px 6px -1px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 8px 14px -2px rgb(0 0 0 / 0.8);

  /* 📐 Ритм и типографика */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --lh-default: 1.6;
  --lh-heading: 1.25;
  
    /* 🅰️ Заголовки секций */
  --section-title-letter-spacing: 0.04em;
  
  --font-size-base: 1rem;

  --transition-base: 0.25s ease-in-out;
}


:root{
  /* === FOOTER (brand layer, theme-independent) === */
  --footer-bg: var(--color-tibet);                 /* тёплый графит */
  --footer-fg: #ffffff;
--footer-muted: rgba(255,255,255,0.82);
--footer-input-border: rgba(255,255,255,0.22);
--footer-input-bg: transparent;
  --footer-input-border: rgba(255,255,255,0.15);
}



/* 🌙 Тёмная версия “Кочевой” темы (по желанию, атмосферная) */
@media (prefers-color-scheme: dark) {
:root {

  --color-bg: #1f1b17;                     /* 🌑 основной фон сайта / body / большие секции */

  --color-surface: #2a241f;                /* 🪵 карточки / меню / dropdown / UI-плашки */

  --color-fg: #ffffff;                     /* ✍️ основной текст / заголовки */

  --color-muted: #cfc6bb;                  /* 🌫️ вторичный текст / подписи / muted */

  --color-border: rgba(255,255,255,0.12); /* 🧱 основные границы / border */

  --color-border-subtle: rgba(255,255,255,0.06); /* 🪶 слабые divider-линии */


  }
}


/* =========================================================
   🎛 РУЧНОЙ OVERRIDE ТЕМЫ (data-theme)
   Имеет приоритет над prefers-color-scheme
   ========================================================= */

/* ☀️ Явная светлая тема */
html[data-theme="light"]{
  --color-bg: #ffffff;
  --color-surface: #f7f7f7;
  --color-surface-muted: #f0f0f0;

  --color-fg: #1f1e1d;
  --color-muted: #6f6a63;

  --color-border: rgba(0,0,0,0.08);
  --color-border-subtle: rgba(0,0,0,0.04);
}

/* 🌙 Явная тёмная тема */
html[data-theme="dark"]{

  --color-bg: #323030;            /* главный фон сайта */
  --color-surface: #2a241f;       /* карточки / секции */
  --color-surface-muted: #26211d; /* вложенные плашки */

  --color-fg: #ffffff;
  --color-muted: #cfc6bb;

  --color-border: rgba(255,255,255,0.12);
  --color-border-subtle: rgba(255,255,255,0.06);

}


/* === Новый слой в tokens.css === */
:root {
  --accent-ui: var(--color-accent); /* используется в меню, кнопках, ссылках */
  --accent-bg: var(--color-accent-light); /* используется для фонов (breadcrumbs и т.п.) */
}

/* === 🏷️ Badge tokens (по дизайну Кочуй) === */
:root {

  --badge-expedition:   #fb8500; /* Экспедиции — основной оранжевый (актив, энергия) */
  --badge-autotour:     #ffc105; /* Автотуры — жёлтый акцент (дорога, движение) */
  --badge-trekking:     #6baa75; /* Треккинги — зелёный (природа, пешие маршруты) */
  --badge-hiking:       #646e78; /* Походы — холодный серо-синий (универсальный) */
  --badge-horse:        #588860; /* Конные — глубокий зелёный (традиция, сила) */
  --badge-jeep:         #e5e5e5; /* Джип-туры — нейтральный светлый (техника) */
  --badge-dogfriendly:  #f6f6f6; /* Dog-friendly — мягкий светлый фон */
  --badge-direction:    #499290; /* Direction / Направление — бирюзовый (ориентир) */
  --badge-feminine:     #d57100; /* Feminine — тёплый оранжево-медный */
  --badge-sad:          #323232; /* Sad — тёмный графит */
  --badge-joy:          #9dd4d2; /* Joy — светлый мятно-бирюзовый */

}

/* =========================================================
   🏔 HERO TOKENS — фон и карточка hero-блока
   ========================================================= */

/* 🌞 Светлая тема (по умолчанию) */
:root{
  /* затемнение фото */
  --hero-overlay-top: rgba(0,0,0,0.18);
  --hero-overlay-bottom: rgba(0,0,0,0.32);

  /* карточка hero */
  --hero-card-bg: rgba(245,245,245,0.65); /* ← ПРОЗРАЧНОСТЬ */
  --hero-card-blur: 3px;                  /* ← РАЗМЫТИЕ */
}

/* 🌙 Авто тёмная тема (по системе) */
@media (prefers-color-scheme: dark){
  :root{
    --hero-overlay-top: rgba(0,0,0,0.30);
    --hero-overlay-bottom: rgba(0,0,0,0.50);

    --hero-card-bg: rgba(20,20,20,0.45);
    --hero-card-blur: 5px;
  }
}

/* ☀️ Явная светлая тема */
html[data-theme="light"]{
  --hero-overlay-top: rgba(0,0,0,0.18);
  --hero-overlay-bottom: rgba(0,0,0,0.32);

  --hero-card-bg: rgba(245,245,245,0.55);
  --hero-card-blur: 3px;
}

/* 🌙 Явная тёмная тема */
html[data-theme="dark"]{
  --hero-overlay-top: rgba(0,0,0,0.45);
  --hero-overlay-bottom: rgba(0,0,0,0.65);

  --hero-card-bg: rgba(20,20,20,0.45);
  --hero-card-blur: 5px;
}


/* =========================================================
   ACCORDION BODY BACKGROUND — THEME AWARE
   ========================================================= */

html[data-theme="light"]{
  --accordion-body-bg: rgba(255,255,255,0.9);
  --accordion-body-fg: #111;
}

html[data-theme="dark"]{
  --accordion-body-bg: rgba(20,18,15,0.75);
  --accordion-body-fg: rgba(255,255,255,0.95);
}


/* --- accents.css --- */
/* === 📄 /styles_core/front/base/accents.css — акцентные цветовые схемы Camp Altai ===
   Универсальная палитра акцентов (цветовые темы).
   Каждая схема задаёт оттенок для декоративных элементов (например, breadcrumbs).
   Привязка к страницам задаётся отдельно в их JSON / meta, а не здесь.
*/

/* 🧱 Терракота — тёплая охра, глина, костёр */
.accent-amber nav.breadcrumbs {
  --breadcrumbs-bg: #C7682B;
  --breadcrumbs-border: color-mix(in srgb, #C7682B 10%, transparent);
}

/* 🌿 Оливковый — трава, юрты, степь */
.accent-olive nav.breadcrumbs {
  --breadcrumbs-bg: #566B4A;
  --breadcrumbs-border: color-mix(in srgb, #566B4A 10%, transparent);
}

/* 🌲 Хвойно-бирюзовый — тайга, ручьи, прохлада */
.accent-teal nav.breadcrumbs {
  --breadcrumbs-bg: #2F7C7A;
  --breadcrumbs-border: color-mix(in srgb, #2F7C7A 10%, transparent);
}

/* 🪶 Розовая глина — соль, скалы, тепло */
.accent-rose nav.breadcrumbs {
  --breadcrumbs-bg: #A64B4B;
  --breadcrumbs-border: color-mix(in srgb, #A64B4B 10%, transparent);
}

/* 🌌 Небесно-синий — река, воздух, простор */
.accent-sky nav.breadcrumbs {
  --breadcrumbs-bg: #3B83BD;
  --breadcrumbs-border: color-mix(in srgb, #3B83BD 10%, transparent);
}

/* ✨ Золотистый — солнце, трава на закате */
.accent-gold nav.breadcrumbs {
  --breadcrumbs-bg: #B8901C;
  --breadcrumbs-border: color-mix(in srgb, #B8901C 10%, transparent);
}

/* 🏜 Песочный — холмы, сухая трава, тёплый свет */
.accent-sand nav.breadcrumbs {
  --breadcrumbs-bg: #C9A066;
  --breadcrumbs-border: color-mix(in srgb, #C9A066 10%, transparent);
}

/* === 📄 Универсальное применение акцентов ===
   Автоматически окрашивает плашку крошек при наличии accent-класса.
*/
nav.breadcrumbs {
  background: linear-gradient(
270deg,
    color-mix(in srgb, var(--breadcrumbs-bg) 50%, var(--color-surface)) 0%,
    var(--color-surface) 60%
  );
}



/* --- layout.css --- */
/* === 📄 /styles_core/front/layout.css === */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  background: var(--color-bg);

  width: 100%;
  max-width: 100%;
}

body {
  margin: 0;
  padding: 0;

   background: var(--color-bg);
   
   
  color: var(--color-fg);
  font-family: var(--font-base);
  line-height: var(--lh-default);
  font-size: 1rem;

  display: flex;
  flex-direction: column;
  min-height: 100vh;

  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}



/* === Контент растягивает страницу === */
.page-content {
  flex: 1;
  background: transparent;
}

/* === Контейнер === */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  
   box-sizing: border-box;
}

/* === Секции === */
.section {
  padding: var(--space-12) 0;
  background:transparent;
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-16) 0;
  }
}

/* === Grid утилиты === */
.grid-2 { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: var(--space-8); grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: var(--space-8); grid-template-columns: repeat(4, 1fr); }

/* === Breakpoints === */
:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1200px;
}

/* === Адаптив === */
@media (max-width: 480px) {
  body {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .section {
    padding: var(--space-8) 0;
  }

  .container {
    padding: 0 var(--space-3);
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-8) 0;
  }
}



@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
  }
}



/* --- typography.css --- */
/* === 📄 /styles_core/front/base/typography.css — типографика фронта Кочуй === */




/* === 🧩 Golos Text — основной текст === */
@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/Golos/golos-text-v4-cyrillic_latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/Golos/golos-text-v4-cyrillic_latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/Golos/golos-text-v4-cyrillic_latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/Golos/golos-text-v4-cyrillic_latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* === 🧩 Unbounded — СТАТИЧЕСКИЕ ВЕСА (КАНОН) === */

@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded/unbounded-v8-cyrillic_latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded/unbounded-v8-cyrillic_latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded/unbounded-v8-cyrillic_latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded/unbounded-v8-cyrillic_latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* === 🧩 Caveat — рукописные акценты (из /assets/fonts/Caveat/) === */
@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/Caveat/Caveat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* === 🧩 Material Symbols Rounded — иконки (из /assets/fonts/MaterialSymbols/) === */
@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('/assets/fonts/MaterialSymbols/MaterialSymbolsRounded.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}


/* === 🪶 Переменные шрифтов и ритма === */
:root {
  --font-base: 'Golos Text', system-ui, sans-serif; /* основной текст */
  --font-display: 'Unbounded', sans-serif;          /* заголовки */
  --font-hand: 'Caveat', cursive;                    /* декоративный акцент */
  --font-icons: 'Material Symbols Rounded';

  --font-size-base: 1rem;
  --lh-default: 1.6;
  --lh-heading: 1.25;
}


/* === 🔠 Section titles (block headers) === */
:root{
  --section-title-font: var(--font-display);
  --section-title-weight: 600;
  --section-title-size: clamp(1.6rem, 3vw, 2.2rem);
  --section-title-line-height: 1.2;
  --section-title-margin-bottom: var(--space-6);
}

.section{
  padding-top: var(--space-16);
  padding-bottom: calc(var(--space-16) + var(--space-4));
}


.section-title{
  font-family:var(--section-title-font);
  font-weight:var(--section-title-weight);
  font-size:var(--section-title-size);
  line-height:var(--section-title-line-height);
  letter-spacing: var(--section-title-letter-spacing);
  margin-bottom:var(--section-title-margin-bottom);
}



/* === ⚙️ Основной текст === */
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--lh-default);
  color: var(--color-fg, #1f1e1d);
  background: var(--color-bg, #fdfcf9);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* === 🏔️ Заголовки === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--color-fg);
  margin-bottom: var(--space-4, 1rem);
}

h1 {
  font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  letter-spacing: -0.01em;
}

h2 {
  font-weight: 700;
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  color: var(--color-fg);
}

h2.section-title{
  margin-top: 0;
}


h3 {
  font-weight: 500;
  font-size: clamp(1.25rem, 0.95rem + 0.8vw, 1.6rem);
}

h4 {
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--color-muted);
}


/* === CANON: section title as real H2 === */
h2.section-title{
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  line-height: var(--section-title-line-height);
}






/* === ✍️ Подписи и декоративные акценты === */
.hand, .signature, blockquote cite {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--color-accent);
  letter-spacing: 0.5px;
}


/* === 💬 Текст, ссылки и выделения === */
p {
  max-width: 75ch;
  margin-bottom: var(--space-4, 1rem);
}
strong,
b {
  font-weight: 700;
  color: var(--color-fg);
}

/* 🔧 FIX: strong внутри ссылок наследует цвет ссылки */
a strong,
a b {
  color: inherit;
}

em {
  font-style: italic;
  opacity: 0.9;
}
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}


/* === 💬 Цитаты === */
blockquote {
  font-family: var(--font-base);
  font-style: italic;
  color: var(--color-muted);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4, 1rem);
  margin: var(--space-6, 1.5rem) 0;
}


/* === 🔣 Иконки === */
.material-symbols-rounded {
  font-family: var(--font-icons);
  font-weight: 400;
  font-style: normal;
  font-size: 1.4em;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  color: currentColor;
}


/* === 📋 Списки и таблицы === */
ul, ol {
  padding-left: var(--space-8);
  margin-bottom: var(--space-4);
}
ul li { list-style: disc; }
ol li { list-style: decimal; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-6) 0;
  font-size: 0.95rem;
}
th, td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  text-align: left;
}
th {
  color: var(--color-muted);
  font-weight: 600;
}


/* === 💡 Доп. визуальные элементы === */
code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--color-surface);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.9em;
}
mark {
  background: var(--color-accent-light, #fff2cc);
  padding: 0 4px;
}
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* =========================================================
   📞 Phone link (base element)
   ========================================================= */

a.header__phone{
  font-family:var(--font-display);
  font-size:0.95rem;
  font-weight:700;
  line-height:1;
 color:var(--color-primary);      /* ← нормальный цвет */
  text-decoration:none;
  white-space:nowrap;
  transition:
    color var(--transition-base),
    transform .15s ease;
}

a.header__phone:hover{
  color:var(--color-primary-light);
  text-decoration:none;
  transform:translateY(-1px);
}


/* === 🔣 Material Symbols Rounded — иконки как шрифт ===
   ВАЖНО:
   Иконки Material Symbols — это ТЕКСТОВЫЕ глифы.
   Без этих свойств браузер покажет слово (например: "dark_mode"),
   а не саму иконку.

   Этот блок:
   ✔ включает правильный font-family
   ✔ включает ligatures ('liga')
   ✔ гарантирует рендер иконок, а не текста
   ✔ используется во ВСЁМ проекте (кнопки, хедер, тулбары)
*/

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   PROSE — типографическая зона для редакторского HTML
   Используется для текста туров, описаний, статей
============================================================ */

.prose{
  color: var(--color-fg);
  line-height: 1.6;
}

/* абзацы */
.prose p{
  margin: 0 0 1em;
}

/* списки */
.prose ul{
  margin: 1em 0 1em 1.25em;
   padding-left: 2em; /* ← ВОТ ОН, ТАБ */
}

.prose ol{
  margin: 1em 0 1em 1.25em;
  padding-left: 2em; /* ← ВОТ ОН, ТАБ */
}

.prose li{
  margin-bottom: .5em;
}

/* заголовки внутри текста */
.prose h2,
.prose h3,
.prose h4{
  margin: 1.5em 0 .75em;
  line-height: 1.25;
}

/* акценты */
.prose strong{
  font-weight: 600;
   color: inherit !important;
}

.prose em{
  opacity: .9;
}

/* ===============================
   ССЫЛКИ — ГЛАВНОЕ
=============================== */

.prose a{
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover{
  text-decoration-thickness: 2px;
}

/* ============================================================
   Quill alignment — поддержка выравнивания редактора
   Работает ТОЛЬКО внутри .prose
============================================================ */

.prose .ql-align-center{
  text-align: center;
}

.prose .ql-align-right{
  text-align: right;
}

.prose .ql-align-left{
  text-align: left;
}





/* ============================================================
   TEXT ON MEDIA — заголовки наследуют цвет контейнера
   Используется для hero / cover / impression / overlay
============================================================ */

.text-on-media{
  color: #fff;
}

.text-on-media h1,
.text-on-media h2,
.text-on-media h3,
.text-on-media h4,
.text-on-media h5,
.text-on-media h6{
  color: inherit;
}


/* --- buttons.css --- */
/* =========================================================
   📄 buttons.css — кнопки сайта «Кочуй»
   Единый стиль для всех CTA, ссылок и форм
   ========================================================= */
/* =========================================================
   Button — no link underline (hard reset)
   ========================================================= */

.button,
.button:hover,
.button:focus,
.button:active{
  text-decoration: none;
}


/* =========================================================
   Button — base
   ========================================================= */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;

  font-weight: 700;
  cursor: pointer;

  color: var(--color-fg);
  text-decoration: none;

  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base),
    color var(--transition-base);
}


/* =========================================================
   Button — primary
   Жёлтая → зелёная, текст: чёрный → белый
   ========================================================= */

.button--primary{
  background: var(--color-highlight);
  color: var(--color-on-highlight);
}

.button--primary:hover{
  background: var(--color-accent);
  color: #ffffff;
}



/* =========================================================
   Button — secondary (outline / канон)
   ========================================================= */

.button--secondary{
  background: transparent;                /* ← ПРОЗРАЧНЫЙ ФОН */
    border: 2px solid var(--color-highlight);  /* ← жёлтая рамка 2px */
    color: color-mix(in srgb, var(--color-highlight) 90%, #fff 20%);

}

/* hover — аккуратное усиление */
.button--secondary:hover{
  background: var(--color-primary-light);  /* лёгкая заливка */
  color: var(--color-primary);
  border-color: var(--color-primary);
}



/* =========================================================
   Button — transparent (вторичное действие)
   ========================================================= */

.button--transparent{
  background: none;
  color: var(--color-fg);
  box-shadow: none;
}

.button--transparent:hover{
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: none;
  transform: none;
}

.button--transparent:active{
  box-shadow: none;
  transform: none;
}


/* =========================================================
   Button — context overrides
   ========================================================= */

/* Footer transparent button */
footer .button--transparent{
  background: var(--footer-input-bg);
  border: 1px solid var(--footer-input-border);
  color: var(--footer-fg);
}


/* =========================================================
   Button — states (общие)
   ========================================================= */

.button:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.button:active{
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}


/* =========================================================
   Button — loading state
   ========================================================= */

.button.button-loading{
  pointer-events: none;
  opacity: 0.8;
}

.button.button-loading > span{
  visibility: hidden;
}

.button.button-loading::after{
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.4);
  border-top-color: rgba(255,255,255,1);
  animation: spin 0.9s linear infinite;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}


/* =========================================================
   Button — present (special size / invitation)
   ========================================================= */

.button--present{
  padding: 18px 44px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;

  background: transparent;
  color: var(--color-fg);
   border: 1.5px solid color-mix(in srgb, currentColor 65%, transparent);

  box-shadow: none;
}

.button--present:hover{
  opacity: 0.85;
  box-shadow: none;
  transform: none;
}

.button--present:active{
  opacity: 0.75;
}

/* =========================================================
   Button — banner (hero / club banner CTA)
   ========================================================= */

.button--banner{
  padding: 14px 36px;
  border-radius: var(--radius-pill);

  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;

  background: var(--color-primary);
  color: var(--color-on-primary);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.25);
}

/* hover */
.button--banner:hover{
  background: color-mix(in srgb, var(--color-primary) 85%, #000);
  color: #ffffff;

  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35);
}

/* active */
.button--banner:active{
  transform: translateY(0);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.3);
}



/* --- forms.css --- */
/* === 📄 /styles_core/front/forms.css — базовые стили форм фронта === */

.form{
  width:80%;
}

.form__body{
  display:flex;
  flex-direction:column;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
 margin-bottom:0;
}

.form-label{
  font-weight:600;
  font-size:0.95rem;
}

.form-input{
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background-color:var(--color-surface);
  color:var(--color-fg);
  font-family:inherit;
  font-size:1rem;
}

.form-input::placeholder{
  color:var(--color-muted);
}

.form-input:focus{
  border-color:var(--color-primary);
  outline:2px solid var(--color-primary-light);
  box-shadow:0 0 0 3px var(--color-primary-light);
}

.form__btn{
  margin-top:var(--space-1);
  align-self:flex-start;
}

.form__result{
  margin-top:var(--space-3);
  font-size:0.95rem;
}


/* =========================================================
   🧾 FORM CONSENT — аккуратный блок согласия
   ========================================================= */

.form-consent{
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-muted);
}

.form-consent__row{
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: 1.4;
  cursor: pointer;
}

.form-consent input{
  margin-top: 3px;
  accent-color: var(--color-primary);
}

.form-consent a{
  color: var(--color-primary);
  text-decoration: none;
}

.form-consent a:hover{
  text-decoration: underline;
}


/* =========================================================
   FORM SUCCESS — ANIMATED
========================================================= */

.form-success{
  display:none;
  text-align:center;
  padding:var(--space-6);

  opacity:0;
  transform:translateY(10px);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.form-success.is-visible{
  display:block;
  opacity:1;
  transform:translateY(0);
}

.form-success__icon{
  font-size:40px;
  color:var(--color-success);
}

.form-success__title{
  margin-top:var(--space-2);
  font-weight:600;
}

.form-success__text{
  margin-top:var(--space-2);
  color:var(--color-muted);
}

.footer__form-col .footer__col-title{
  margin-bottom:var(--space-4);
}

.form-consent__row span{
  display:block;
  flex:1;
}


/* =========================================================
   FOOTER QUESTION BUTTON
========================================================= */

.footer-question-btn{
  background:transparent;

  border:1px solid rgba(255,255,255,0.16);

  color:var(--footer-fg);

  border-radius:var(--radius-pill);

  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform .15s ease;
}

.footer-question-btn:hover{
  background:var(--color-accent);

  border-color:var(--color-accent);

  color:var(--color-on-accent);

  transform:translateY(-1px);
}


/* --- grid.css --- */
/* === 📄 /styles_core/front/base/grid.css — шаблоны сеток фронта Camp Altai ===
   Назначение:
   🎯 Универсальные гриды для всех страниц фронта.
   Используются в блоках hero, benefits, gallery, footer и т.д.

   📐 Архитектура:
   1️⃣ Базовый слой — .grid, gap и поведение контейнера.
   2️⃣ Шаблоны колонок — .cols-2, .cols-3, .cols-4 и т.д.
   3️⃣ Адаптивные модификаторы — .cols-2@md, .cols-3@lg.
   4️⃣ Визуальные отладчики (только для демо, не включать в прод).
*/

/* === 1️⃣ Базовый слой === */
.grid {
  display: grid;
  gap: var(--space-5, 24px);
  align-items: start;
}



/* === 2️⃣ Шаблоны колонок === */
.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Автоматическая сетка (адаптивное заполнение) */
.cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* === 3️⃣ Адаптивные модификаторы === */
@media (max-width: 1024px) {
  .cols-4, .cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .cols-3, .cols-4, .cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: 1fr; }
}




/* --- modal.css --- */
/* === 📄 /styles_core/front/base/modal.css — стили фронтовых модалок ===
   Универсальное оформление модальных окон для фронта Camp Altai.
   Единый стиль для всех модалок (текст, формы, виджеты, описания и т.д.).
   Подключается глобально в layout / footer сайта.
*/

/* === 🔲 Общая обёртка модалки === */
.modal {
  position: fixed;
  inset: 0; /* top, right, bottom, left = 0 */
  display: none; /* по умолчанию скрыта */
  justify-content: center;
  align-items: center;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.55); /* затемнение */
  backdrop-filter: blur(2px);
  padding: 24px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 🔹 Активное состояние */
.modal.open {
  display: flex;
  opacity: 1;
}

.modal.hidden {
  display: none;
}

/* === 🪟 Контент модалки === */
.modal__content {
  position: relative;
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 720px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(-10px);
  animation: modalFadeIn 0.25s ease forwards;
}

/* === ❌ Кнопка закрытия === */
.modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 26px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted, #666);
  transition: color 0.2s ease;
}
.modal__close:hover {
  color: var(--color-primary, #2d5a42);
}

/* === 📦 Контентная область === */
.modal__body {
  padding: 32px;
  color: var(--color-fg, #1f1e1d);
  line-height: 1.6;
  font-size: 1rem;
}
.modal__body p + p {
  margin-top: 1em;
}

/* === 💫 Анимация появления === */
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* =========================================================
   PDF MODAL — WIDE MODE
   ========================================================= */

.modal[data-modal="pdf"] .modal__content{
  max-width: 80vw;     /* ← почти на всю ширину */
  width: 96vw;
  max-height: 96vh;    /* ← почти на всю высоту */
}

.modal[data-modal="pdf"] .modal__body{
  padding: 0;          /* ← чтобы PDF не имел рамок */
}





/* === 🧭 Адаптивность === */
@media (max-width: 640px) {
  .modal__content {
    max-width: 95%;
    padding: 16px;
  }
  .modal__body {
    padding: 24px 16px;
  }
}



/* --- accordion.css --- */
/* === 🧩 Universal Accordion — final look === */

.accordion{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  margin-bottom:var(--space-8);
}

/* Карточка */
.accordion-item{
  background:transparent;
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:background var(--transition-base), box-shadow var(--transition-base);
}

/* Закрытое состояние */
.accordion-item:not(.open){
   background:transparent;
}

/* Открытое состояние */
.accordion-item.open{
   background:transparent;
  box-shadow:var(--shadow-sm);
}

/* Заголовок */
.accordion-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);

  padding:var(--space-4) var(--space-6);

  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  line-height:var(--lh-heading);

  background-color: color-mix(
    in srgb,
    var(--color-accent)35%,
    var(--color-surface)
  );
  color: var(--color-on-surface);

  border:none;
  border-radius:var(--radius-lg);
  cursor:pointer;
  text-align:left;
}

/* Цвет фона заголовка при ховере*/
.accordion-header:hover{
  background-color: color-mix(in srgb, var(--color-surface) 85%, var(--color-success));
}

/* Цвет заголовка в открытом состоянии */
.accordion-item.open .accordion-header{
  background-color: color-mix(in srgb, var(--color-success) 25%, var(--color-surface));
}



.accordion-item.open .accordion-header:hover{
  color: color-mix(in srgb, var(--color-text) 70%, var(--color-success));
}


.accordion-header:active{
  transform:scale(0.98);
}


/* Иконка (+ / −) */
.accordion-header::after{
  content:"+";
  width:28px;
  height:28px;
  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  background:var(--color-primary);   /* 🔴 ОРАНЖЕВЫЙ */
  color:var(--color-on-primary);

  font-size:18px;
  line-height:1;
  transition:transform var(--transition-base), background var(--transition-base);
}

/* Открыто — минус */
.accordion-item.open .accordion-header::after{
  content:"−";
  background:var(--color-accent);    /* 🟢 ЗЕЛЁНЫЙ */
}

/* Тело */
.accordion-body{
  max-height:0;
  overflow:hidden;

  padding:0 var(--space-6);
  color:var(--color-fg);
  line-height:var(--lh-default);

  opacity:0;
  transition:
    max-height .35s ease,
    opacity .25s ease,
    padding .25s ease;
}



/* =========================================================
   ACCORDION — BODY (THEME AWARE)  покраска фона под текстом
   ========================================================= */

.accordion-item{
  overflow:hidden; /* 🔑 обязательно */
  border-radius:var(--radius-lg);
}

.accordion-item.open .accordion-body{
  background:var(--accordion-body-bg);
  color:var(--accordion-body-fg);

  border-radius:var(--radius-lg);
  padding-top:var(--space-4);
}




/* Показ */
.accordion-item.open .accordion-body{
   max-height:1600px;
  opacity:1;
  padding:var(--space-4) var(--space-6) var(--space-6);
}

/* Типографика внутри */
.accordion-body p{
  margin-bottom:var(--space-3);
}

.accordion-body ul{
  padding-left:var(--space-6);
  margin-bottom:var(--space-3);
}

.accordion-body li{
  margin-bottom:var(--space-2);
}

/* Выделенные инфо-блоки внутри (как жёлтая плашка) */
.accordion-body .notice,
.accordion-body .highlight{
  margin-top:var(--space-4);
  padding:var(--space-4);
  border-left:4px solid var(--color-accent);
  background:color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-radius:var(--radius-md);
}

.accordion-item .accordion-body p{
  max-width: none;
}




@media (max-width:768px){
  .accordion-item.open .accordion-body{
    max-height:4000px;
  }
}


/* --- anchor-note.css --- */
/* =========================================================
   🔖 ANCHOR NOTE
   Универсальный смысловой маркер текста
========================================================= */

.anchor-note{
  position:relative;

  max-width:680px;
  padding:var(--space-3) var(--space-4);
  padding-left:calc(var(--space-4) + 2px);

  border-left:4px solid var(--color-accent);
  background:none;

  border-radius:6px;

  font-size:1.05rem;

  font-weight:600;
  letter-spacing:0.01em;
   line-height:1.45;

  color:var(--color-fg);


  /* 👇 ВОТ ТОЛЬКО ЭТО */
  background-image:linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-accent) 38%, transparent),
    color-mix(in srgb, var(--color-primary) 34%, transparent)
  );
  background-repeat:no-repeat;
}




/* --- breadcrumbs.css --- */
/* === 📄 /styles_core/front/blocks/breadcrumbs.css — хлебные крошки сайта Camp Altai ===
   Универсальный компонент навигации по иерархии страниц.
   🔹 Используется под хедером на всех страницах, кроме главной.
   🔹 Поддерживает адаптив, hover и тёмную тему.
*/

.breadcrumbs {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-4) 0;
  font-size: var(--fs-300);
}





.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  color: var(--color-muted);
  
    min-width: 0;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin: 0 var(--space-2);
  color: var(--color-border);
}




.breadcrumbs__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-base);
  
  
}

.breadcrumbs__link,
.breadcrumbs__current {
  white-space: normal;
  word-break: break-word;
}




.breadcrumbs svg{
  max-width:100%;
  width:1em;
  height:1em;
  flex-shrink:0;
}





.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}

.breadcrumbs__current {
  color: var(--color-muted);
  font-weight: 600;
  pointer-events: none;
}

/* === 🌙 Тёмная тема === */
@media (prefers-color-scheme: dark) {
  .breadcrumbs {
    background: var(--color-surface);
    border-color: var(--color-border);
  }
  .breadcrumbs__link:hover {
    color: var(--color-accent);
  }
}

/* === 📱 Адаптив === */
@media (max-width: 640px) {
  .breadcrumbs {
    font-size: 0.9rem;
    padding: var(--space-3) 0;
  }
  .breadcrumbs__list {
    gap: var(--space-1);
  }
}



/* --- calendar_grid.css --- */
/* =========================================================
   TOUR CARD GRID
   Только раскладка, без логики карточек
========================================================= */

.tour-card-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;

  justify-content:center;
  align-items:flex-start;

  margin-top: var(--space-6);
}

/* DEBUG — включать при необходимости */
/*
.tour-card-grid{
  outline:5px solid red;
}
*/

.page-content > .section.section-tours{
  margin-top: var(--space-12);
}



/* убираем underline у ссылок в фильтрах календаря */
.calendar-filters-panel a{
  text-decoration: none;
}

/* =========================================================*/
   Reset-кнопка фильтров — ВИДИМЫЙ hover
/* =========================================================*/


.calendar-filter-item.is-reset{
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border);
  color: var(--color-fg);
  cursor: pointer;
  position: relative;
}

/* ЯВНЫЙ hover — сдвиг + обводка */
.calendar-filter-item.is-reset:hover{
  background: var(--color-surface);
  border-style: solid;
  border-color: var(--color-border);

  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}




/* =========================================================
   CALENDAR FILTERS PANEL
========================================================= */

.calendar-filters-panel{
  margin-bottom: var(--space-8);
  padding: var(--space-6);

  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}


/* =========================================================
   TABS INSIDE FILTER PANEL
========================================================= */

.calendar-filters-panel .tabs{
  display:flex;
  flex-direction:column;
  gap: var(--space-5);
}

.calendar-filters-panel .tabs__labels{
  display:flex;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.calendar-filters-panel .tabs__content{
  padding-top: var(--space-4);
}



/* =========================================================
   CALENDAR FILTERS (INSIDE TABS)
========================================================= */

.calendar-filters{
  margin:0;
}

/* группа фильтра */
.calendar-filters__group{
  display:flex;
  flex-direction:column;
  gap: var(--space-6);
}

/* заголовок фильтра — скрыт (контекст даёт таб) */
.calendar-filters__label{
  display:none;
}

/* контейнер кнопок */
.calendar-filters__items{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-4);
}


/* =========================================================
   FILTER ITEMS (CHIPS)
========================================================= */

.calendar-filter-item{
  display:inline-flex;
  align-items:center;
  gap: var(--space-3);

  padding:6px 14px;
  border-radius:999px;

  font-size: var(--fs-300);
  font-weight:500;
  line-height:1;

  background: var(--color-surface-muted);
  border:1px solid var(--color-border-subtle);
  color: var(--color-fg);

  text-decoration:none;
  cursor:pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

/* hover */
.calendar-filter-item:hover{
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* активная */
.calendar-filter-item.is-active{
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

/* hover активной */
.calendar-filter-item.is-active:hover{
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}


/* =========================================================
   ICONS INSIDE FILTER ITEM
========================================================= */

.calendar-filter-item__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.1em;
}

.calendar-filter-item__icon svg{
  width:1em;
  height:1em;
  display:block;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px){

  .calendar-filters-panel{
    padding: var(--space-5);
  }

  .calendar-filter-item{
    padding:6px 12px;
    font-size: var(--fs-200);
  }

}




/* --- calendar_tabs.css --- */
/* =========================================================
   CALENDAR TABS (server-side)
========================================================= */

.calendar-tabs__nav{
  display:flex;
  gap:var(--space-2);
  margin-bottom:var(--space-4);
}

.calendar-tabs__btn{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;

  border-radius:999px;
  font-size:var(--fs-300);
  text-decoration:none;

  background:var(--color-surface);
  color:var(--color-text-muted);
  border:1px solid var(--color-border);

  transition:background .15s ease, color .15s ease;
}

.calendar-tabs__btn:hover{
  background:var(--color-surface-hover);
  color:var(--color-text);
}

.calendar-tabs__btn.is-active{
  background:var(--color-primary-soft);
  color:var(--color-primary);
  border-color:var(--color-primary);
}

.calendar-tabs__body{
  margin-top:var(--space-4);
}



/* --- captcha.css --- */
/* === 📄 /styles_core/front/blocks/captcha.css — карточки капчи Camp Altai === */

.captcha_options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

/* Карточка */
.captcha-card {
  width: 140px;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);

  cursor: pointer;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform 0.15s ease;
}

.captcha-card:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Активная карточка */
.captcha-card.active {
  background: color-mix(in srgb, var(--color-primary-light) 50%, var(--color-surface));
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: scale(0.98);
}

/* Иконка */
.captcha-card-icon svg {
  width: 110px;
  height: 110px;
  display: block;
}

/* Подпись */
.captcha-card-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-fg);
  text-align: center;
}


.captcha-card.error {
    border: 2px solid #ff4d4d !important;
}




.captcha-header {
    margin-bottom: var(--space-6);
}

.captcha-title-tech {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: var(--space-2);
    letter-spacing: 0.3px;
}

.captcha-title-question {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-fg);
    line-height: 1.3;
}


/* === Footer капчи === */
.captcha_footer {
  text-align: center;
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* увеличили расстояние между кнопкой и текстом */
}

/* Кнопка */
.captcha_footer .button {
  padding: var(--space-3) var(--space-8);
  font-size: 1rem;
  font-weight: 700;
}

/* Юридическая строка */
.captcha_privacy {
  margin-top: var(--space-8);
  max-width: 320px;            /* текст не растягивается на модалку */
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.captcha_privacy a {
  color: var(--color-primary);
  text-decoration: underline;
}

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


/* ============ БЛОК ОТВЕТА ============ */

.captcha-answer-icon {
    margin: 0 auto var(--space-4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.captcha-answer-icon svg {
    width: 160px;   /* 👉 РАЗМЕР ИКОНКИ УСПЕХА */
    height: auto;
    display: block;
}

/* Текст под иконкой */
.captcha-answer-text {
    font-size: 1rem;
    line-height: 1.45;
    text-align: center;
    color: var(--color-fg);
    max-width: 420px;
    margin: 0 auto var(--space-6);
}



/* антибот*/
.captcha-intro{
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-muted);
  opacity: 0.8;
  margin-bottom: var(--space-4);
}

.captcha-intro small{
  font-size: inherit;
}

/*Ответ в случае успеха*/

.captcha-result-title{
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-fg);
  text-align: center;
  margin-bottom: var(--space-3);
}

.captcha-result-message{
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: center;
  margin-bottom: var(--space-5);
}

.captcha-result-text{
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-fg);
  max-width: 480px;
  margin: 0 auto var(--space-6);
  text-align: left;
}

.captcha-result-text{
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-fg);
  max-width: 480px;
  margin: 0 auto var(--space-6);
  text-align: left;
}


/* Для мобильных */
@media (max-width: 480px) {
  .captcha-card {
    width: 120px;
    padding: var(--space-3);
  }
  .captcha-card-icon svg {
    width: 60px;
    height: 60px;
  }
}
  


/* --- cookie_banner.css --- */
/* =========================================================
   🍪 COOKIE BANNER (INVERTED THEME)
========================================================= */

.cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--space-4);
  z-index: 9999;

  display: none;
  padding: 0 var(--space-4);

  /* animation */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-banner.show{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   INNER CONTAINER (DEFAULT = DARK)
========================= */

.cookie-banner__inner{
  max-width: 1100px;
  margin: 0 auto;

  background: var(--footer-bg);   /* тёмный */
  color: var(--footer-fg);

  border-radius: var(--radius-lg);
  padding: var(--space-4);

  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;

  box-shadow: var(--shadow-md);
}

/* =========================
   TEXT
========================= */

.cookie-banner__text{
  font-size: 0.9rem;
  line-height: var(--lh-default);
  color: var(--footer-muted);

  max-width: 720px;
}

/* =========================
   LINK
========================= */

.cookie-banner__link{
  color: var(--accent-ui);
  margin-left: var(--space-2);
  text-decoration: underline;
}

/* =========================
   BUTTON
========================= */

.cookie-banner__btn{
  background: var(--color-primary);
  color: var(--color-on-primary);

  border: 0;
  border-radius: var(--radius-md);

  padding: 10px 16px;
  cursor: pointer;

  white-space: nowrap;
  transition: var(--transition-base);
}

.cookie-banner__btn:hover{
  background: var(--color-primary-light);
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){
  .cookie-banner__inner{
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner__btn{
    width: 100%;
  }
}

/* =========================================================
   🌙 DARK THEME — INVERT (LIGHT CARD)
========================================================= */

html[data-theme="dark"] .cookie-banner__inner{
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
}

html[data-theme="dark"] .cookie-banner__text{
  color: var(--color-muted);
}


/* --- debug.css --- */
/* =========================================================
   🛠 GLOBAL DEBUG STYLES — KOCHUY
   Включается ТОЛЬКО через body.is-debug
   Назначение: визуальная диагностика структуры страницы
   ========================================================= */
/* =========================================================
   🔴 DEBUG — SECTION MARGINS (кто даёт воздух)
   ========================================================= */

body.is-debug section{
  box-shadow:
    inset 0 -16px 0 rgba(255,0,0,0.12); /* нижний отступ */
}

/* если нужен верхний */
body.is-debug section + section{
  box-shadow:
    inset 0 16px 0 rgba(0,0,255,0.12); /* верх следующей */
}


/* =========================================================
   🔴 DEBUG — VERTICAL SPACING (HORIZONTAL LINES)
   ========================================================= */

/* верх и низ каждой секции */
body.is-debug section{
  position: relative;
}

/* верхняя линия */
body.is-debug section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:0;
  border-top:1px dashed rgba(255,0,0,0.6);
  pointer-events:none;
}

/* нижняя линия */
body.is-debug section::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0;
  border-bottom:1px dashed rgba(255,0,0,0.6);
  pointer-events:none;
}


/* =========================================================
   🟢 CONTAINER — ШИРИНА, ЦЕНТР, БОКОВОЙ ВОЗДУХ
   ========================================================= */

body.is-debug .container{
  outline:1px solid rgba(0,200,0,0.7);
  outline-offset:-1px;
  position:relative;
}

/* центральная ось контейнера */
body.is-debug .container::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:rgba(0,200,0,0.4);
  pointer-events:none;
}


/* =========================================================
   🔵 GRID / FLEX / INNER — ВНУТРЕННИЕ СЕТКИ
   ========================================================= */

body.is-debug [class*="grid"],
body.is-debug [class*="layout"],
body.is-debug [class*="inner"],
body.is-debug [class*="wrap"]{
  outline:1px dotted rgba(0,140,255,0.6);
}


/* =========================================================
   🟡 BLOCK / CARD / ITEM — КОМПОНЕНТЫ
   ========================================================= */

body.is-debug [class*="card"],
body.is-debug [class*="item"],
body.is-debug [class*="block"],
body.is-debug [class*="col"]{
  outline:1px solid rgba(255,200,0,0.6);
}


/* =========================================================
   🟣 MEDIA — IMAGE / VIDEO / GALLERY
   ========================================================= */

body.is-debug img,
body.is-debug picture,
body.is-debug video,
body.is-debug .gallery,
body.is-debug .gallery__item{
  outline:1px solid rgba(180,0,255,0.5);
}


/* =========================================================
   🟠 OVERLAY / BACKGROUND / HERO-LAYERS
   ========================================================= */

body.is-debug [class*="overlay"],
body.is-debug [class*="bg"],
body.is-debug [class*="background"],
body.is-debug [class*="hero"]::before,
body.is-debug [class*="hero"]::after{
  outline:1px dashed rgba(255,120,0,0.7);
}


/* =========================================================
   ⚪ ABSOLUTE / FIXED — ИСТОЧНИКИ БАГОВ
   ========================================================= */

body.is-debug [style*="position:absolute"],
body.is-debug [style*="position:fixed"],
body.is-debug .position-absolute,
body.is-debug .position-fixed{
  outline:1px solid rgba(255,255,255,0.7);
}


/* =========================================================
   🔷 LISTS / ACCORDION / UI-STRUCTURE
   ========================================================= */

body.is-debug ul,
body.is-debug ol,
body.is-debug .accordion,
body.is-debug .accordion-item{
  outline:1px dotted rgba(0,255,255,0.6);
}


/* =========================================================
   ⚠️ HORIZONTAL OVERFLOW — КРАЯ VIEWPORT
   ========================================================= */

body.is-debug{
  background-image:
    linear-gradient(
      to right,
      rgba(255,0,0,0.2) 0,
      rgba(255,0,0,0.2) 1px,
      transparent 1px,
      transparent calc(100% - 1px),
      rgba(255,0,0,0.2) calc(100% - 1px),
      rgba(255,0,0,0.2) 100%
    );
}


/* --- decor.css --- */




/* =========================================================
   DECO — GLOBAL CANON
========================================================= */

.section.section-deco{
  position: relative;
  overflow: hidden;
  width: 100%;

  /* НИКАКИХ внешних отступов */
  padding: 0;
}

/* SVG-фон */
.section-deco .deco-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.section-deco .deco-bg svg{
  display:block;
  width:100%;
  height:auto;
  
  opacity:.85; /* прозрачность */
}

/* контент */
.section-deco .deco-content{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0 auto;
  text-align:center;
}








/* =========================================================
   DECO — TEXT (decorative, theme-independent)
========================================================= */

.section-deco .deco-text{
  /* размер — чуть больше обычного текста */
  font-size: clamp(1.4rem, 4vw, 2rem);

  /* чуть плотнее, чем body */
  font-weight: 500;

  /* мягкий светлый цвет, НЕ из tokens */
  color: #f2f2f2;

  /* читаемость */
  line-height: 1.35;

  /* декоративная подача */
  letter-spacing: 0.01em;
}


/* =========================================================
   Высота блока регулируется паддингом у текста
========================================================= */

.section-deco .deco-text{
  padding-top: 40px;
  padding-bottom: 40px;
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px){
  .section-deco .deco-text{
    padding-top: 0px;
    padding-bottom: 0px;
  }
}





/* --- footer.css --- */
/* =========================================================
   📄 /styles_core/front/blocks/footer.css
========================================================= */


/* =========================================================
   BASE
========================================================= */

.footer{
  background:var(--footer-bg);
  color:var(--footer-fg);

  padding:var(--space-16) 0 var(--space-12);

  font-size:var(--fs-300);
  line-height:var(--lh-default);

  width:100%;
  overflow:hidden;

  box-sizing:border-box;
}


/* =========================================================
   LAYOUT
========================================================= */

.footer__layout{
  display:grid;

  grid-template-columns:
    minmax(280px,360px)
    minmax(180px,240px)
    minmax(220px,280px)
    minmax(260px,320px);

  gap:64px;

  align-items:start;
}


/* =========================================================
   COLUMNS
========================================================= */

.footer__form-col,
.footer__mini-block,
.footer__contacts-col{
  min-width:0;
}

.footer__mini-block,
.footer__contacts-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;

  gap:var(--space-2);
}


/* =========================================================
   TITLES
========================================================= */

.footer__col-title{
  margin:0 0 var(--space-2);

  font-size:var(--fs-400);
  font-weight:700;
  line-height:var(--lh-heading);

  color:var(--footer-fg);
}

.footer__col-title--sub{
  margin-top:var(--space-8);
}


/* =========================================================
   LINKS
========================================================= */

.footer__link{
  display:inline-block;

  color:var(--footer-muted);

  text-decoration:none;

  transition:color var(--transition-base);
}

.footer__link:hover{
  color:var(--footer-fg);
}


/* =========================================================
   CONTACTS
========================================================= */

.footer .header__contacts-compact{
  display:block;
}

.footer .header__contact-icons{
  display:flex;
  align-items:center;

  gap:var(--space-4);
}

.footer .contact-icon{
  background:var(--footer-border);
  color:var(--footer-fg);

  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform .15s ease;
}

.footer .contact-icon:hover{
  background:var(--color-primary);
  color:var(--color-on-primary);

  transform:translateY(-1px);
}

.footer-contact__icon svg{
  width:16px;
  height:16px;

  display:block;
}


/* =========================================================
   NOTE
========================================================= */

.footer__note{
  margin-top:var(--space-2);

  font-size:13px;
  line-height:1.35;

  color:var(--footer-muted);
}


/* =========================================================
   FORM
========================================================= */

.footer input,
.footer textarea{
  background:var(--footer-input-bg);

  border:1px solid var(--footer-input-border);

  color:var(--footer-fg);
}

.footer input::placeholder,
.footer textarea::placeholder{
  color:var(--footer-muted);
}

.footer .form-block,
.footer form{
  gap:var(--space-6);
  
  
}

.footer .form-consent{
  color: rgba(255,255,255,0.82);
}

.footer .form-consent a{
  color: #ffffff;
}

/* =========================================================
   BRAND
========================================================= */

.footer__bottom{
  margin-top:var(--space-16);
}

.footer__brand{
  display:flex;
  flex-direction:column;
  align-items:center;

  margin-top:var(--space-16);

  color:var(--color-muted);
}

.footer__brand-logo{
  display:flex;
  align-items:center;

  opacity:.6;
}

.footer__brand-logo svg{
  display:block;

  height:40px;
  width:auto;
}

.footer__brand-logo svg *{
  fill:currentColor;
  stroke:currentColor;
}

.footer__registry-note{
  margin-top:var(--space-3);

  text-align:center;

  font-size:11px;
  line-height:1.3;

  opacity:.7;
}


.footer__form-col .form{
  width:100%;
  max-width:none;
}

.footer .header__contact-icons{
  margin-top:var(--space-4);
}

.footer__contacts-col .footer-contact + .footer-contact{
  margin-top:var(--space-2);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:1200px){

  .footer__layout{
    grid-template-columns:
      repeat(2,minmax(260px,1fr));

    gap:56px;
  }

}


@media (max-width:768px){

  .footer{
    padding:
      var(--space-12)
      0
      var(--space-10);
  }

  .footer__layout{
    grid-template-columns:1fr;

    gap:48px;
  }

  .footer__brand{
    display:none;
  }

}
/* =========================================================
   MOBILE FOOTER POLISH
========================================================= */

@media (max-width:768px){

  .footer{
    padding-top:var(--space-16);
  }

  .footer__layout{
    padding-left:var(--space-4);
    padding-right:var(--space-4);
  }

  .footer__form-col{
    padding-top:var(--space-4);
  }

}

/* =========================================================
   END FOOTER
========================================================= */


/* --- gallery.css --- */

/* ============================================================
   BADGE — OVERLAY (GLOBAL)
============================================================ */

.badge{
  display:inline-flex;
  align-items:center;

  padding:6px 10px;
  border-radius:999px;

  font-size:0.7rem;
  line-height:1;
  font-weight:500;

  background:rgba(0,0,0,.75);   /* тёмный фон */
  color:#fff;                   /* светлый текст */

  backdrop-filter:blur(6px);
}


/* ============================================================
   GALLERY — INTRO MODE
============================================================ */

.gallery[data-mode="intro"]{
  display:grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-3);
}



/* ============================================================
   GALLERY — BASE
============================================================ */

.gallery{
  width:100%;
}

.gallery__item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
}

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

/* ============================================================
   GALLERY — GRID MODE
============================================================ */

.gallery[data-mode="grid"]{
  display:grid;
  gap:var(--space-3);
}

/* ============================================================
   GALLERY — STRIP MODE
============================================================ */

/* ============================================================
   GALLERY — STRIP MODE (КАНОН)
============================================================ */

.gallery[data-mode="strip"]{
  display:flex;
  gap:var(--space-3);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}

.gallery[data-mode="strip"] .gallery__item{
  flex:0 0 auto;
  aspect-ratio:4 / 3;
  scroll-snap-align:start;
  border-radius:var(--radius-lg);
  overflow:hidden;
}

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




/* ============================================================
   GALLERY — SLIDER MODE
============================================================ */

.gallery[data-mode="slider"]{
  position:relative;
}

.gallery[data-mode="slider"] .gallery__item{
  width:100%;
}


/* --- gallery_slider.css --- */
/* /front/blocks/gallery_slider.css
 * 
 * =========================================================
   1️⃣ ROOT
   ========================================================= */

[data-slider],
[data-desktop-gallery]{
  width:100%;
}


/* =========================================================
   2️⃣ TRACKS
   ========================================================= */

/* mobile */
[data-slider-track]{
  display:flex;
  gap:var(--space-3);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

[data-slider-track]::-webkit-scrollbar{
  display:none;
}

/* desktop */
[data-desktop-track]{
  display:flex;
  gap:var(--space-3);
  overflow-x:auto;
  scrollbar-width:thin; /* Firefox */
}

[data-desktop-track]::-webkit-scrollbar{
  height:6px;
}

[data-desktop-track]::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.25);
  border-radius:999px;
}

[data-desktop-track]::-webkit-scrollbar-track{
  background:transparent;
}


/* =========================================================
   3️⃣ SLIDES
   ========================================================= */

[data-slider-track] > *{
  flex:0 0 100%;
  scroll-snap-align:start;
}


/* =========================================================
   4️⃣ IMAGES
   ========================================================= */

[data-slider] img,
[data-desktop-gallery] img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-md);
}



/* =========================================================
   🖥️ GALLERY — DESKTOP (CORE)
   /front/blocks/gallery_desktop.css
   ========================================================= */

@media (max-width:768px){
  [data-desktop-gallery]{
    display:none;
  }
}

[data-desktop-gallery]{
  margin-bottom:16px;
}

[data-desktop-track]{
  display:flex;
  gap:16px;

  overflow-x:auto;
  overflow-y:hidden;

  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
}

[data-desktop-track] > *{
  flex:0 0 auto;
  margin:0;

  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  background:var(--color-surface);

  overflow:hidden;
}

[data-desktop-track] img{
  display:block;

  height:240px;
  width:auto;

  max-width:none;
  max-height:none;
}

/* =========================================================
   📱 GALLERY — MOBILE (CORE)
   

   ========================================================= */

@media (min-width:769px){
  [data-slider]{
    display:none;
  }
}

[data-slider]{
  position:relative;
  margin-bottom:16px;
}

[data-slider-track]{
  display:flex;
  gap:16px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

[data-slider-track] > *{
  flex:0 0 100%;
  scroll-snap-align:start;
}

[data-slider-track] img{
  display:block;
  width:100%;
  height:auto;

  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  background:var(--color-surface);
}


/* ограничение высоты карточки, чтобы не ломала сетку */
[data-slider-track] > *{
  max-height:260px;
  overflow:hidden;
}

/* изображение вписываем по высоте */
[data-slider-track] img{
  max-height:260px;
  width:100%;
  height:100%;
  object-fit:cover;
}



/* --- header.base.css --- */
/* === header.base.css — CARCAS HEADER (device-independent) === */

/* -------------------------
   Header container
------------------------- */

/* эмулятор хлебных крошек */
.breadcrumbs-spacer{
  height: var(--space-12);
}


.header{
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border,#eee);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

}

/* 

*/
nav.breadcrumbs{
  margin-top: 86px;
}



/* -------------------------
   Grid layout
------------------------- */
.header__grid{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:var(--space-4);
  padding:0 var(--space-6);
  box-sizing:border-box;
}

/* -------------------------
   Logo
------------------------- */
.header__logo{
  justify-self:start;

}


.site-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:none;
  padding:0;
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
  transform-origin:center;
}

.site-logo:hover{
  transform:scale(1.035);
}

.logo-item{
  width:160px;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-item svg{
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}

/* Light / Dark logo */
@media (prefers-color-scheme: light){
  .logo-light{display:flex;}
  .logo-dark{display:none;}
}
@media (prefers-color-scheme: dark){
  .logo-light{display:none;}
  .logo-dark{display:flex;}
}


/* -------------------------
   Contacts block
------------------------- */
.header__contacts{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  text-align:right;
}

/* Phone */
.header__phone{
  font-family:'Roboto Mono',monospace;
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:.5px;
  color:var(--color-accent);
  text-decoration:none;
  transition:color .2s ease;
}

.header__phone:hover,
.header__phone:focus{
  color:var(--color-primary);
  text-decoration:none;
}

/* -------------------------
   CTA block
------------------------- */
.header__cta{
  text-align:right;
}

/* -------------------------
   Burger button (visual only)
------------------------- */
.header__burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:42px;
  height:42px;
  border:none;
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}

/* -------------------------
   Global header link hygiene
------------------------- */
.header a:hover{
  text-decoration:none;
}


/* -------------------------
   Header links (унификация a и span)
------------------------- */

.header__link{
  display:inline-flex;
  align-items:center;
  cursor:pointer; /* чтобы span вел себя как ссылка */
  text-decoration:none;
}

/* hover для всех */
.header__link:hover{
  text-decoration:none;
}


/* --- header.desktop.css --- */
/* =========================================================
   header.desktop.css — DESKTOP HEADER & MENU
   ========================================================= */

/* -------------------------
   Навигация (контейнер)
   ВАЖНО: НЕ ЛОМАЕМ внутренние блоки
------------------------- */
.header__nav{
  display:block;
   grid-column: 2 / 3; /* ТОЛЬКО колонка навигации */
    padding-left:48px; /* ← ВОТ ЭТО */
}



.menu-row{
  display:flex;
}

/* === align top menu with second row === */
.menu-row--top{
  padding-left: 0;
   margin-top: 10px; /* ← ВОЗДУХ */
}


/* -------------------------
   Главное меню (1 строка)
------------------------- */
.header__menu{
  display:flex;
  align-items:center;
  gap:24px;
  list-style:none;
  margin:0;
  padding:0;
}

.header__menu > li{
  position:relative;
  list-style:none;
}

/* -------------------------
   Ссылки меню
------------------------- */
.header__link{
  font-family:var(--font-display,'Manrope'),sans-serif;
  font-weight:600;
  font-size:1.1rem;
  line-height:1;
  letter-spacing:.02em;
  color:var(--color-fg);
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}

.header__link:hover,
.header__link.active{
   opacity:.9;
 
}

/* =========================================================
   MENU TYPOGRAPHY OVERRIDE
   bg === null → обычный пункт меню
   ========================================================= */

.header__menu-item.no-bg > .header__link{
  font-family: inherit;
  font-weight: 600; /* ← вернули нормальную жирность */
  font-size: .95rem;
  letter-spacing: .01em;
}


/* -------------------------
   Подменю (2 уровень)
------------------------- */
.header__menu ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:180px;
  margin:0;
  padding:var(--space-2) 0;
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  list-style:none;
  z-index:1000;
}

.header__menu li:hover > ul{
  display:block;
}

.header__menu ul li{
  padding:var(--space-2) var(--space-4);
  white-space:nowrap;
}

.header__menu ul li .header__link{
  font-weight:500;
  font-size:.95rem;
  transform:none;
}

.header__menu ul li .header__link:hover{
  color:var(--color-accent);
}




/* -------------------------
   Вторая строка меню
------------------------- */
.second-menu{
  width:100%;
  border-top:1px solid var(--color-border);
  background:transparent;
}

.second-menu-list{
  margin:0;             /* ← ключ */
  padding:8px 0;        /* ← без левого сдвига */
  display:flex;
  align-items:center;
  gap:0;
  list-style:none;
}


.second-menu-item{
  white-space:nowrap;
}

.second-menu-link{
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--color-fg);
  opacity:.95;
  text-decoration:none;
  transition:color .2s ease, opacity .2s ease;
}


.second-menu-link:hover{
  color:var(--color-primary);
  opacity:1;
}

.second-menu-item.active .second-menu-link{
  font-weight:600;
  color:var(--color-accent);
}

/* === second menu — remove dot separators === */

.second-menu-list{
  list-style:none;
}

.second-menu-list li{
  list-style:none;
}

.second-menu-list li::before,
.second-menu-list li::marker{
  content:none !important;
}


/* === РАЗДЕЛИТЕЛЬ (ЦЕНТРИРОВАННЫЙ) === */
.second-menu-item:not(:last-child)::after{
  content:"·";
  display:inline-flex;
  align-items:center;
  justify-content:center;
 margin:0 12px;   /* ← симметрия */
  opacity:.8;
  line-height:1;
}

/* === FINAL FIX: override base typography list marker === */

.header__menu ul,
.header__menu ul li{
  list-style: none !important;
  padding-left: 0;
  padding-left: var(--space-4);
}

/* === DESKTOP NAV LAYOUT === */
.header__nav--two-rows{
  display:flex;
  align-items:flex-start;
  gap:32px;
}

/* === DESKTOP CONTACTS ALIGN === */
.header__nav--two-rows .header__contacts{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

/* === DESKTOP NAV MENUS COLUMN === */
.header__nav-menus{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}




/* --- header.mobile.css --- */
/* =========================================================
   📄 /styles_core/front/blocks/header/header.mobile.css
   MOBILE HEADER & MENU — CANON
   ========================================================= */


/* =========================================================
   Mobile header layout
========================================================= */
.header__grid{
  grid-template-columns:auto 1fr auto;
  padding:0 var(--space-4);
  min-height:72px;
}


/* =========================================================
   Logo (mobile)
========================================================= */
@media (max-width: 768px){
  .logo-item{
    width:110px;
    height:64px;
  }
}


/* =========================================================
   Burger button — rounded square (mainstream)
========================================================= */
.mobile-burger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;

  width:44px;
  height:44px;

  border-radius:10px;
  border:1px solid var(--color-border-subtle);

  background:var(--color-surface);
  cursor:pointer;
  justify-self:end;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .15s ease;
}

.mobile-burger span{
  width:20px;
  height:2px;
  background:var(--color-fg);
  display:block;
  transition:transform .25s ease, opacity .25s ease;
}

/* hover / tap */
.mobile-burger:hover{
  background:var(--color-muted);
}

/* active (menu open) */
.mobile-burger.active{
  background:var(--color-muted);
  transform:scale(0.94);
}

.mobile-burger.active span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.mobile-burger.active span:nth-child(2){
  opacity:0;
}
.mobile-burger.active span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}




/* =========================================================
   Mobile menu overlay
========================================================= */
.mobile-menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:998;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.mobile-menu-overlay.active{
  opacity:1;
  pointer-events:auto;
}


/* =========================================================
   Mobile nav panel (KEY BLOCK)
========================================================= */
.header__nav.header__nav--mobile{
  position:fixed;
  top:0;
  right:0;
  left:auto;
  bottom:auto;

  top:72px;
height:auto;

max-height:calc(100vh - 36px);

  width:88%;
  max-width:420px;

  background:var(--color-bg);
  z-index:999;

  padding:96px var(--space-6) var(--space-6);

  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);

  overflow-y:auto;
  overscroll-behavior:contain;

  box-shadow:-8px 0 24px rgba(0,0,0,.12);
  border-bottom-left-radius: 16px;
}


/* open state */
.header__nav.header__nav--mobile.open{
  transform:translateX(0);
}


/* Light theme — soften mobile menu */
html[data-theme="light"] .header__nav.header__nav--mobile{
  background:var(--color-surface);
}



/* =========================================================
   Body lock
========================================================= */
@media (max-width: 768px){
  body.menu-open{
    overflow:hidden;
  }
}


/* =========================================================
   Mobile menu (root)
========================================================= */
.mobile-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.mobile-menu--primary{
  gap:28px;
}

.mobile-menu--secondary{
  margin-top:24px;
  padding-top:12px;
  border-top:1px solid var(--color-border-subtle);
  gap:8px;
}

.mobile-menu-item{
  list-style:none;
}


/* =========================================================
   📞 Телефон в мобильном меню
========================================================= */

.mobile-menu-phone{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--color-border-subtle);
}

.mobile-menu-phone .header__phone{
  display:block;
  font-size:1rem;
  font-weight:600;
  color:var(--color-accent);
  text-decoration:none;
}


/* =========================================================
   Main links
========================================================= */
.mobile-menu-link{
  font-family:var(--font-display,'Manrope'),sans-serif;
  font-size:1.15rem;
  font-weight:600;
  color:var(--color-fg);
  text-decoration:none;

  display:block;
  max-width:100%;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.mobile-secondary-link{
  display:block;
  max-width:100%;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}


/* active */
.mobile-menu-item.active > .mobile-menu-link{
  color:var(--color-accent);
}

/* =========================================================
   MOBILE MENU TYPOGRAPHY OVERRIDE
   bg === null → обычный пункт меню
   ========================================================= */

.mobile-menu-item.no-bg > .mobile-menu-link{
  font-family: inherit;   /* ← КЛЮЧ */
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
}


/* =========================================================
   Submenu (second level)
========================================================= */
.mobile-submenu{
  margin-top:8px;
  padding-left:16px;
  display:none;
  flex-direction:column;
  gap:10px;
}

.mobile-menu-item.open > .mobile-submenu{
  display:flex;
}

.mobile-submenu a{
  font-family:var(--font-base);
  font-size:.9rem;
  font-weight:500;
  line-height:1.3;
  letter-spacing:0;
  text-transform:none;
  color:var(--color-fg);
  opacity:.85;

  display:block;
  max-width:100%;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}


/* =========================================================
   Mobile menu close button
========================================================= */
.mobile-menu-close{
  margin:32px auto 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--color-border-subtle);
  background:transparent;
  color:var(--color-fg);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  opacity:.8;
}

.mobile-menu-close:hover{
  opacity:1;
}


/* =========================================================
   Theme toggle (mobile)
========================================================= */
.mobile-theme-toggle{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--color-border-subtle);
  background:var(--color-surface);
  color:var(--color-fg);
  border-radius:12px;
  font-size:.95rem;
  cursor:pointer;
  text-align:center;
}

@media (max-width: 768px){

  /* desktop nav off */
  .header__nav:not(.header__nav--mobile){
    display:none;
  }

  /* mobile nav on */
  .header__nav--mobile{
    display:block;
  }

}

@media (max-width: 768px){

  .header__grid{
    grid-template-columns:auto 1fr auto;
    align-items:center;
  }

}

@media (max-width: 768px){
.header__nav.header__nav--mobile{
  position:fixed; /* уже есть, но важно */
}

/* =========================================================
 Кнопка закрытия
========================================================= */

.header__nav.header__nav--mobile .mobile-menu-close{
  position:absolute;
  top:16px;
  right:16px;

  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  border:1px solid var(--color-border-subtle);

  background:transparent;
  color:var(--color-fg);

  font-size:20px;
  line-height:1;
  font-weight:400;

  cursor:pointer;
  opacity:.6;

  transition:opacity .2s ease, transform .2s ease;
}

.header__nav.header__nav--mobile .mobile-menu-close:hover{
  opacity:1;
  transform:scale(1.05);
}


}



/* --- legal_docs.css --- */
/* =========================================================
   LEGAL DOCS — ЧИСТЫЙ ДОКУМЕНТНЫЙ СТИЛЬ
========================================================= */

.doc-page{
  padding: var(--space-16) 0;
}

.doc-page .container{
  max-width: 820px;
}

/* ОСНОВНОЙ БЛОК */
.doc-page{
  color: var(--color-fg);
  line-height: 1.65;
}

/* ЗАГОЛОВОК */
.doc-page h1{
  font-size: 2rem;
  margin-bottom: var(--space-12);
}

/* ПОДЗАГОЛОВКИ */
.doc-page h2,
.doc-page h3{
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
  font-size: 1.25rem;
}

/* ПАРАГРАФЫ */
.doc-page p{
  margin-bottom: var(--space-6);
}

/* СПИСКИ */
.doc-page ul{
  margin-bottom: var(--space-6);
  padding-left: 18px;
}

.doc-page li{
  margin-bottom: 4px;
}

/* ССЫЛКИ */
.doc-page a{
  color: var(--color-primary);
  text-decoration: underline;
}

/* МЕЛКИЙ ТЕКСТ */
.doc-page small{
  color: var(--color-muted);
}


/* --- lightbox.css --- */
/* =========================================================
   LIGHTBOX (global)
   ========================================================= */

.lightbox{
  position:fixed;
  inset:0;
  z-index:3000;

  opacity:0;
  pointer-events:none;

  transition:opacity .25s ease;
}

/* активное состояние */
.lightbox.open{
  opacity:1;
  pointer-events:auto;
}

/* =========================================================
   LIGHTBOX — OVERLAY (VISIBLE + CLICKABLE)
   ========================================================= */

.lightbox__overlay{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.85);
  backdrop-filter: blur(1px);

  opacity:0;
  transition:opacity .25s ease;

  z-index:3000;
  cursor:zoom-out;
}

.lightbox.open .lightbox__overlay{
  opacity:1;
}

/* =========================================================
   LIGHTBOX — КОНТЕНТ (ФОТО + КНОПКИ)
   ========================================================= */

.lightbox__content{
  position:absolute;
  inset:2vh 2vw;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:3001;

  /* КЛЮЧ: пустое место не ловит клики */
  pointer-events:none;
}

/* изображение */
.lightbox__img{
  max-width:100%;
  max-height:100%;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  cursor:zoom-out;
  user-select:none;

  opacity:0;
  transform:scale(0.96);

  pointer-events:auto;

  transition:
    opacity .25s ease,
    transform .3s cubic-bezier(.2,.8,.2,1);
}

.lightbox.open .lightbox__img{
  opacity:1;
  transform:scale(1);
}

/* =========================================================
   LIGHTBOX — КНОПКИ ЛИСТАНИЯ
   ========================================================= */

.lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:92px;
  height:92px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,0.55);
  border:none;
  border-radius:50%;

  color:#fff;
  font-size:64px;
  line-height:1;

  cursor:pointer;
  opacity:.85;

  pointer-events:auto;

  transition:
    opacity .2s ease,
    background .2s ease,
    transform .15s ease;

  z-index:3005;
}

/* hover */
.lightbox__nav:hover{
  opacity:1;
  background:rgba(0,0,0,0.7);
  transform:translateY(-50%) scale(1.05);
}

/* позиции */
.lightbox__nav--prev{ left:16px; }
.lightbox__nav--next{ right:16px; }

/* адаптив размера */
@media (max-width:768px){
  .lightbox__nav{
    width:72px;
    height:72px;
    font-size:40px;
  }
}

/* автоскрытие стрелок на мобилке */
@media (max-width:768px){
  .lightbox__nav{
    display:none !important;
  }
}

/* =========================================================
   LIGHTBOX — COUNTER
   ========================================================= */

.lightbox__counter{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);

  padding:6px 12px;
  border-radius:999px;

  background:rgba(0,0,0,0.6);
  color:#fff;

  font-size:0.85rem;
  font-weight:500;
  letter-spacing:0.02em;

  pointer-events:none;
  user-select:none;

  z-index:3006;
}

/* =========================================================
   UX ДЛЯ КЛИКАБЕЛЬНЫХ ФОТО НА САЙТЕ
   ========================================================= */

[data-lightbox]{
  cursor:zoom-in;
}

[data-lightbox]:hover img,
img[data-lightbox]:hover{
  filter:brightness(0.95);
}


/* --- notices.css --- */
/* === 📌 Universal Notice / Highlight ===
   Используется для памяток, предупреждений, поясняющих блоков
   Поддерживает светлую и тёмную тему через tokens.css
*/

.notice,
.highlight{
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);

  background: color-mix(
    in srgb,
    var(--color-accent) 8%,
    var(--color-surface)
  );

  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);

  font-size: 0.95rem;
  line-height: 1.5;
}

/* списки внутри */
.notice ul,
.highlight ul{
  margin: 0;
  padding-left: 1.2em;
}

.notice li,
.highlight li{
  margin-bottom: var(--space-2);
}

/* текстовые акценты */
.notice strong,
.highlight strong{
  font-weight: 600;
}



/* --- slider_counter.css --- */
/* =========================================================
   📄 /front/blocks/slider_counter.css
  
   ========================================================= */



/* =========================================================
 Счетчиик под гаолерей
   ========================================================= */

/* =========================================================
   5️⃣ COUNTER — LEFT / UNDER TRACK (PREMIUM)
   ========================================================= */

.slider-counter{
  margin-top:var(--space-3);

  display:flex;
  align-items:baseline;
  gap:6px;

  font-size:0.9rem;
  line-height:1;

  color:var(--color-fg-muted);
}

/* текущий слайд — акцент */
.slider-counter .current{
  font-weight:600;
  font-size:1.05rem;
  color:var(--color-fg);
}

/* разделитель */
.slider-counter .sep{
  opacity:0.4;
}

/* общее количество — спокойно */
.slider-counter .total{
  font-weight:400;
  opacity:0.65;
  font-variant-numeric:tabular-nums;
}




/* =========================================================
   6️⃣ DESKTOP — COUNTER OFF
   ========================================================= */

@media (min-width:769px){
  [data-desktop-gallery] .slider-counter{
    display:none;
  }
}


/* --- social_contacts.css --- */
/* =========================================================
   🔗 Render: Social Contacts (Header)
   Тёплая брендовая схема (без чёрного и белого)
   ========================================================= */
   

   

.header__contacts-compact{
  display:flex;
  flex-direction:column;
  align-items:flex-end;   /* ✅ КЛЮЧ */
  gap:6px;
  white-space:nowrap;
  text-align:right;       /* ✅ КЛЮЧ */
}


.header__contacts-compact .header__contact-icons{
  display:flex;
  gap:8px;
  justify-content:flex-end; /* ✅ КЛЮЧ */
}


/* === Кружок === */
.header__contacts-compact .contact-icon{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--color-primary);        /* тёмный / насыщенный фон */
  color:#ffffff; /* ← БЕЛЫЕ ИКОНКИ */
  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform .15s ease;
  text-decoration:none;стоп давай по одному шагу.. 
}

/* Hover — инверсия */
.header__contacts-compact .contact-icon:hover{
  background:#ffffff;     /* ← БЕЛЫЙ КРУЖОК */
  color:var(--color-primary); /* иконка остаётся брендовой */
  transform:translateY(-1px);
}



/* SVG */
.header__contacts-compact .contact-icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}




/* === Адаптив === */
@media (max-width:1024px){
  .header__contacts-compact{
    gap:4px;
  }
  .header__contacts-compact .contact-icon{
    width:32px;
    height:32px;
  }
  .header__contacts-compact .contact-icon svg{
    width:16px;
    height:16px;
  }
}




/* --- sta_calender_home.css --- */
/* ===============================
     CTA: Календарь туров
     =============================== */

  .home-calendar-cta{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:var(--space-12) 0;
  }


/* --- theme_toggle.css --- */
/* =========================================================
   🌗 Floating theme toggle
   ========================================================= */

.theme-toggle-float{
  position:fixed;
  right:16px;
  top:16px;
  bottom:auto;
  z-index:1500;

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  border:1px solid var(--color-border-subtle);

  background:var(--color-surface);
  color:var(--color-fg);

  box-shadow:var(--shadow-sm);
  cursor:pointer;

  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform .15s ease,
    box-shadow var(--transition-base);
}

/* hover */
.theme-toggle-float:hover{
  background:var(--color-primary-light);
  color:var(--color-primary);
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

/* active */
.theme-toggle-float:active{
  transform:translateY(0);
  box-shadow:var(--shadow-sm);
}

/* скрываем текст */
.theme-toggle-float span{
  display:none;
}

/* иконка */
.theme-toggle-float::before{
  content:'';
  width:20px;
  height:20px;
  background:currentColor;

  mask:url('/assets/icons/moon.svg') center / contain no-repeat;

  transition:transform .25s ease, opacity .25s ease;
}

/* dark → sun */
html[data-theme="dark"] .theme-toggle-float::before{
  mask:url('/assets/icons/sun.svg') center / contain no-repeat;
  transform:rotate(180deg);
}

/* tooltip */
.theme-toggle-float::after{
  content:'Сменить тему';
  position:absolute;
  right:56px;
  white-space:nowrap;

  padding:6px 10px;
  border-radius:8px;

  background:var(--color-surface);
  color:var(--color-fg);
  box-shadow:var(--shadow-sm);

  font-size:.75rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}

/* tooltip только если НЕ отключён */
html:not([data-theme-tooltip-off]) .theme-toggle-float:hover::after{
  opacity:1;
}


.theme-toggle-float.is-hidden{
  transform:translateY(-80px);
  opacity:0;
  pointer-events:none;
}


.mobile-theme-toggle{
  width:100%;
  text-align:left;
  padding: var(--space-4);
  background:none;
  border:0;
  font:inherit;
  color: var(--color-fg);
  cursor:pointer;
}

/* =========================================================
   🌗 Theme toggle on breadcrumbs (mobile only)
   ========================================================= */

/* =========================================================
   🌗 Theme toggle — mobile approximate positioning
   ========================================================= */

@media (max-width: 768px){

  .theme-toggle-float{
    position: fixed;

    /* ⬇️ ниже header + breadcrumbs */
    top: calc(42px + 40px);
    right: 12px;

    z-index: 120;
  }

}

/* скрываем переключатель темы, когда открыто мобильное меню */
body.menu-open .theme-toggle-float{
  opacity:0;
  pointer-events:none;
}