/* То, чего в эталоне нет.
 *
 * main.css и ui.css — перенос markup/css целиком, и сверяются с эталоном
 * построчно. Сюда попадает только то, чему в макете пары не нашлось:
 * данные партнёра, которых у дизайнера не было (группы ссылок в подвале,
 * логотип из админки, несколько тегов на карточке), и каркас страниц,
 * которых в макете нет (выдача).
 *
 * Соглашения из kirov-frontend-arhitektura:
 *   - BEM с префиксом ct-;
 *   - значения только через токены --ct-* / семантические из tokens.css;
 *   - никакого !important;
 *   - тёмные значения не объявляются здесь вовсе — они уже в tokens.css
 *     под [data-ct-theme="dark"], оболочка читает семантические имена.
 *
 * Базового сброса здесь больше нет. Он был копией начала main.css, но с
 * разошедшимся значением: body получал `--fw-light` вместо `--fw-medium`
 * эталона, и, поскольку shell.css грузится последним, светлее становился
 * весь сайт разом. Сброс живёт в main.css, дублировать его нечем.
 */

/* Единственный utility-слой темы — см. «только маленький системный utility
   layer» в архитектуре. Разрастаться ему нельзя.

   Обёртка прикладывается там, где в макете её роль играет сам блок:
   страница выдачи и служебная панель предпросмотра, которых в макете нет
   вовсе. Секции лендинга её не используют — там контейнер задаёт эталон. */
.u-container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

/* ---------- заглушка секции без данных ----------

   Не отладочный вывод: пока секция держится на фикстуре, показывать её
   молча значит выдавать заглушку за наполненную страницу. */
.ct-hero__stub {
  margin: 0;
  padding: var(--space-s);
  color: var(--text-muted);
  border: 1px dashed var(--surface-border);
  border-radius: var(--radius-m);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* ---------- карточка ----------

   В макете карточка не ссылка: это статичный кадр. У нас каждая ведёт на
   тур или отель, и ссылка обёрнута вокруг заголовка — так у неё есть имя
   для скринридера, — а нажимается вся карточка целиком через растянутый
   псевдоэлемент. `.card` в main.css уже `position: relative`, а фон
   карточки лежит на `z-index: -1`, поэтому перекрытие ничего не прячет. */
.ct-card__link {
  color: inherit;
  text-decoration: none;
}

.ct-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Подпись карточки отеля. В макете там цена и длительность, а у отеля из
   партнёрского каталога ни того ни другого нет — есть страна и звёзды.
   Классы `card__price` / `card__duration` по имени сюда не подходят,
   типографика при этом ровно их. */
.ct-card__meta-item {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-light);
  color: var(--text-on-media-muted);
}

/* В макете бэйдж у карточки один и он прямой ребёнок `.card`. У партнёра
   их может быть несколько: без общей обёртки каждый встал бы отдельной
   строкой из-за `align-self: flex-start`. */
.ct-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: var(--space-3xs);
}

/* Цвет тега приходит из админки на каждый тег, поэтому переменная
   ставится инлайном. Без значения работает фон эталона. */
.ct-card__tag--partner {
  background: var(--ct-tag-color);
}

/* ---------- промо ----------

   Обёртка одного баннера. В макете у промо один кадр и ссылки нет вовсе,
   у партнёра баннеров в линии несколько и каждый ведёт на свою страницу.
   Раскладку повторяет `.promo` эталона, чтобы кадр с подписью держались
   вместе так же, как там. */
.ct-promo__banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  color: inherit;
}

/* Подборки над списком туров. В макете это кнопки-вкладки, у нас пока
   метки: переключение выдачи делает отдельный запрос движка, и он не
   подключён. Курсор возвращается к обычному, чтобы метка не выдавала
   себя за нажимаемую. */
.ct-chips__item--static {
  cursor: default;
}

/* ---------- ящик меню ----------

   В макете меню — плоский список ссылок: разделы сайта там одноуровневые.
   У партнёра они лежат деревом, а группа сама по себе адреса обычно не
   имеет — адреса у её детей. Родитель раскрывается отдельной кнопкой,
   а не `<summary>` с вложенной ссылкой: ссылка «перейти» и кнопка
   «раскрыть» — две разные, валидные для клавиатуры операции. Плоским
   списком у coronatours выходило 163 пункта в одном ящике на мобильном.

   Типографика заголовка заимствована у `.menu__list a` эталона, чтобы
   список остался одним списком, а не превратился в два разных. */
.ct-menu__tree,
.ct-menu__children,
.ct-menu__booking-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-menu__node {
  margin: 0;
}

.ct-menu__row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
  border-bottom: 1px solid var(--surface-border);
}

.ct-menu__link,
.ct-menu__label {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-xs) 0;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
}

.ct-menu__link {
  color: inherit;
  text-decoration: none;
}

/* ui.css задаёт базовый вид прямых ссылок старого плоского drawer. Новая
   строка уже держит разделитель и вертикальный ритм, поэтому не рисуем их
   второй раз на ссылке внутри неё. */
.menu__list .ct-menu__link {
  padding: var(--space-xs) 0;
  border-bottom: 0;
}

.ct-menu__link:hover,
.ct-menu__link:focus-visible {
  color: var(--accent);
}

.ct-menu__link--current {
  color: var(--accent);
}

.ct-menu__toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.ct-menu__toggle > span[aria-hidden="true"] {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}

.ct-menu__toggle[aria-expanded="true"] > span[aria-hidden="true"] {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.ct-menu__node[data-depth="1"] > .ct-menu__row {
  padding-left: var(--space-s);
}

.ct-menu__node[data-depth="2"] > .ct-menu__row {
  padding-left: var(--space-m);
}

/* Четвёртый и все следующие уровни остаются данными, но визуально не
   выталкивают ссылку за границы узкого drawer. */
.ct-menu__node[data-depth="3"] > .ct-menu__row {
  padding-left: var(--space-l);
}

.ct-menu__tabs {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-s);
  border-bottom: 1px solid var(--surface-border);
}

.ct-menu__tab {
  flex: 1 1 50%;
  min-height: 44px;
  padding: var(--space-xs) var(--space-2xs);
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  cursor: pointer;
}

.ct-menu__tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.ct-menu__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ct-menu__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.ct-menu__panel[hidden] {
  display: none;
}

.ct-menu__booking-list > li {
  border-bottom: 1px solid var(--surface-border);
}

/* ---------- подвал ----------

   Ссылки подвала партнёр заводит группами в админке, в макете такого
   блока нет вовсе. Оформление минимальное и намеренно: придумывать за
   дизайнера композицию, которой он не рисовал, хуже, чем дать читаемый
   список. */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--space-xs) var(--space-m);
  margin-top: var(--space-m);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* Группа с детьми становится столбиком — как в старой теме, где под
   заголовком раздела шли его ссылки. Плоским рядом дети слились бы с
   заголовками соседних групп в одну кашу. */
.ct-footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

/* Название группы без собственного адреса. Не ссылка и не должно на неё
   походить: у coronatours это «Наши сайты», и вести им некуда. */
.ct-footer__label,
.ct-footer__child {
  color: var(--text-muted);
}

/* ---------- страница выдачи ----------

   Каркас страницы приехал с results.css эталона: `.results`,
   `.results__grid`, `.results__aside` и `.results__list` там свои и
   полные. Здесь остаётся один случай, которого в макете нет: выдача без
   формы — DEBUG-предпросмотр и страницы, где форму собрать не из чего.
   Без этого единственный ребёнок сетки встал бы в колонку сайдбара и
   сжался до 20rem на всю ширину экрана. */
@media (min-width: 960px) {
  /* Селектор с родителем не для красоты: results.css грузится ПОСЛЕ
     shell.css (в макете он последний, и порядок повторён), и при равной
     специфичности его `.results__grid` перебил бы это правило. Лишний
     класс поднимает специфичность и снимает зависимость от порядка. */
  .results .results__grid--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- строка разделов в шапке ----------

   У эталона в шапке шесть коротких разделов, и `white-space: nowrap`
   там безопасен: строка всегда помещается. У партнёра разделы свои — у
   coronatours их восемь, и длинные («Экскурсионные туры», «Правила
   въезда»). Замер на 1024: список 892 px при ширине шапки 960, телефон
   выталкивался за правый край и страница уезжала в горизонтальную
   прокрутку — `scrollWidth` 1182 против вьюпорта 1024.

   Лечится прокруткой самой строки, а не переносом: перенос увеличил бы
   высоту шапки, а она в макете задана и держит вертикальный ритм.
   Приём тот же, что у `.chips` эталона — полоса прокручивается, полосы
   прокрутки не видно.

   `min-width: 0` обязателен: без него флекс-элемент не сжимается ниже
   своего content-size, и `overflow` не наступает вовсе. */
@media (min-width: 960px) {
  .header__nav {
    min-width: 0;
    position: relative;
    /* Содержимое прокручиваемой строки не должно расширять документ. */
    overflow: clip;
  }

  .header__nav-scrollbox {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .header__nav-scrollbox::-webkit-scrollbar {
    display: none;
  }

  .header__nav-scrollbox > ul {
    min-width: max-content;
  }

  .header__nav li {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--space-3xs);
  }

  .header__nav-link,
  .header__nav-label {
    padding-block: var(--space-xs);
  }

  .header__nav-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 32px;
    padding: 0;
    color: inherit;
    font: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .header__nav-caret {
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 160ms ease;
  }

  .header__nav li[data-open] .header__nav-caret {
    transform: rotate(180deg);
  }

  /* Панель является прямым ребёнком .header, а не li в scrollbox: overflow
     по оси X неизбежно обрезает дочерний dropdown и по второй оси. */
  .header__dropdown {
    position: absolute;
    z-index: 30;
    min-width: 220px;
    max-height: min(60vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2xs);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-s);
    color: var(--text);
    background: var(--surface-solid, var(--bg));
    box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
  }

  .header__dropdown[hidden] {
    display: none;
  }

  .header__dropdown-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .header__dropdown-list a {
    display: block;
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-s);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }

  .header__dropdown-list a:hover,
  .header__dropdown-list a:focus-visible {
    background: var(--surface);
  }

  /* Явные стрелки вместо edge fade: список всегда остаётся одной строкой,
     а каждая кнопка сдвигает его на половину реально видимой ширины. */
  .header__nav-scroll {
    position: absolute;
    inset-block: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    padding: 0;
    color: var(--text);
    background: var(--header-control-glass-wash);
    backdrop-filter: blur(22.8px);
    -webkit-backdrop-filter: blur(22.8px);
    border: 0;
    cursor: pointer;
  }

  .header__nav-scroll[hidden] {
    display: none;
  }

  .header__nav-scroll--previous {
    inset-inline-start: 0;
    border-inline-end: 1px solid var(--surface-border);
  }

  .header__nav-scroll--next {
    inset-inline-end: 0;
    border-inline-start: 1px solid var(--surface-border);
  }

  .header__nav-scroll span[aria-hidden="true"] {
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
  }

  .header__nav-scroll--next span[aria-hidden="true"] {
    transform: rotate(45deg);
  }

  .header__nav-scroll--previous span[aria-hidden="true"] {
    transform: rotate(-135deg);
  }

  .header__nav-scroll:focus-visible,
  .header__nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  .header__nav[data-scroll-left] .header__nav-scrollbox {
    padding-inline-start: 40px;
  }

  .header__nav[data-scroll-right] .header__nav-scrollbox {
    padding-inline-end: 40px;
  }
}

/* ---------- логотип партнёра ----------

   В эталоне логотип — inline-SVG Corona, и правило `.header__logo svg`
   из main.css задаёт ему высоту; встроенный `logotype_svg` партнёра
   получает его же. Здесь — размеры растра: <img> из `partnerheader`,
   светлый и тёмный.

   Эти правила уже были и пропали вместе со сгенерированным header.css,
   когда main.css поехал целиком. Пропажу не было видно на партнёре
   предпросмотра — у него логотипа нет вовсе, — и вскрылась она только на
   настоящем: рядом встали обе картинки, светлая и тёмная, без размеров. */
.header__logo img {
  display: block;
  width: auto;
  height: 24px;
}

.header__logo-asset--dark {
  display: none;
}

[data-ct-theme="dark"] .header__logo-asset--light {
  display: none;
}

[data-ct-theme="dark"] .header__logo-asset--dark {
  display: inline-flex;
}

@media (min-width: 960px) {
  /* Та же интерполяция, что у SVG эталона: 25 при 1024, 35 при 1920. */
  .header__logo img {
    height: clamp(25px, 1.116vw + 13.57px, 35px);
  }
}