/* Каталог сценариев. Общая раскладка страниц Catalog, Catalog Section и
   Catalog Location: слева колонка разделов, справа мастер шагов, поиск,
   фильтры и сетка карточек. На планшете и мобильном колонка разворачивается
   в полосу над контентом. */

.catalog__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.catalog__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

@media (min-width: 1024px) {
  .catalog__body {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .catalog__sidebar { flex: 0 0 288px; }

  .catalog__content { flex: 1 1 0; }

  /* На десктопе следом сразу футер (адаптивная CTA-панель скрыта), соседа
     снизу нет - секция добирает стык сама. */
  .catalog { padding-bottom: var(--section-gap); }
}

/* ============================================================
   БОКОВАЯ КОЛОНКА
   ============================================================ */

.catalog__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-5) var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: 0 8px 12px rgba(156, 141, 128, 0.1);
}

.cat-list__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Ссылка «ко всем разделам» стоит над подписью колонки. */
.cat-list__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: 2px var(--space-3) var(--space-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-link);
  margin-bottom: var(--space-3);
}

.cat-list__back:hover { color: var(--text-link-hover); }

.cat-list__back .icon { width: var(--icon-sm); height: var(--icon-sm); }

.cat-list__caption {
  padding: 2px var(--space-3) var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-overline);
  color: var(--text-muted);
  text-transform: uppercase;
}

.cat-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-lg);
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cat-item__label {
  flex: 1 1 auto;
  min-width: 0;
}

.cat-item .icon:last-child {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-strong);
}

.cat-item:hover { background: var(--sky-50); color: var(--text-link); }

.cat-item.is-current {
  background: var(--sky-50);
  color: var(--text-link);
}

.cat-item.is-current .icon:last-child { color: var(--text-strong); }

/* Цветной значок раздела. Цвет приходит переменной: он разный у каждого. */
.cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--tone, var(--primary-500));
  color: var(--neutral-white);
}

.cat-item .cat-icon .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--neutral-white) !important;
}

/* Подсказка под списком. */
.cat-help {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px var(--space-5);
  border: var(--border-hairline) solid var(--sand-200);
  border-radius: var(--radius-xl);
  background: var(--sand-50);
}

.cat-help__top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-strong);
}

.cat-help__top .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--sand-500);
}

.cat-help__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.cat-list__items {
  display: grid;
  gap: 2px;
}

/* На планшете список разделов ложится в две колонки, на десктопе снова
   в одну — колонка там всего 288 шириной. Порядок правил важен: правило
   для более узкого брейкпоинта должно стоять выше. */
@media (min-width: 768px) {
  .cat-list__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--space-6);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .catalog-page .catalog__controls { gap: 32px; }

  .catalog .places__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .catalog .place {
    width: 100%;
    min-width: 0;
    gap: 6px;
    padding-inline: 8px;
    font-size: var(--fs-xs);
  }

  .place__icon { width: 24px; height: 24px; }

  /* Раньше здесь по номерам переставлялись разделы 1, 3, 5, 6, 4 - порядок
     из макета, где их было ровно шесть. Список приходит из базы, состав и
     порядок меняются в админке, поэтому перестановка по позиции ломала бы
     любой другой набор. Осталось только правило, не зависящее от данных:
     нечётный последний раздел занимает строку целиком. */
  .catalog-page .cat-list__items .cat-item:nth-child(odd):last-child,
  .catalog-section-page .cat-list__items .cat-item:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

  .catalog-page .filter-bar__actions,
  .catalog-section-page .filter-bar__actions,
  .catalog-location-page .filter-bar__actions {
    display: flex;
    width: 100%;
    margin-top: 4px;
    justify-content: flex-end;
  }
}

@media (max-width: 1023px) {
  /* Второй раздел здесь прятался целиком - и в списке слева, и в сетке.
     На данных из базы это уносило с планшета и телефона живой раздел
     вместе со всеми его сценариями: Hotels с тремя карточками просто
     не существовал ниже 1024. Правило снято, скрывать элементы списка
     по номеру нельзя. Пятый фильтр прятался там же, а пункт 13 ТЗ требует
     фильтры на мобильном, и Scenario Type входит в рабочий набор. */
  .catalog-section-page .cat-help,
  .catalog-section-page .catalog__content > .places {
    display: none;
  }
}

@media (min-width: 1024px) {
  .catalog__popular--responsive-only { display: none; }
}

@media (max-width: 767px) {
  .catalog-page .page-header h1 { max-width: 280px; }

  .catalog-page .cat-help__text { max-width: 212px; }

  .catalog-page .catalog__controls { gap: 32px; }

  .catalog-page .filter-bar.is-enhanced .filter-bar__toggle { display: none; }

  .catalog-page .filter-bar.is-enhanced .filter-bar__panel[hidden] {
    display: contents;
    position: static;
    inset: auto;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .catalog-page .filter-bar.is-enhanced .filter-bar__panel-head { display: none; }

  .catalog-page .filter-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Пятый фильтр раньше прятался вовсе, и Scenario Type пропадал с телефона,
     хотя пункт 13 ТЗ требует фильтры на мобильном, а рабочий набор на запуск
     состоит из пяти. Нечётный последний тянется на всю ширину сетки. */
  .catalog-page .filter-set .filter-drop:nth-child(odd):last-child,
  .catalog-section-page .filter-set .filter-drop:nth-child(odd):last-child,
  .catalog-location-page .filter-set .filter-drop:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

  .catalog-page .filter { padding-block: 6px; }

  .catalog-page .filter-bar { display: block; }

  /* Кнопку «Show results» прячем только там, где выбор применяет скрипт:
     без JavaScript она остаётся единственным способом отправить форму. */
  .catalog-page .filter-bar.is-enhanced .filter-bar__actions,
  .catalog-section-page .filter-bar.is-enhanced .filter-bar__actions,
  .catalog-location-page .filter-bar.is-enhanced .filter-bar__actions { display: none; }

  .catalog-page .catalog__popular--responsive-only .place {
    padding-block: 9px;
  }

  .catalog-section-page .catalog__controls,
  .catalog-location-page .catalog__controls {
    gap: 32px;
  }

  .catalog-section-page .filter-bar.is-enhanced .filter-bar__toggle,
  .catalog-location-page .filter-bar.is-enhanced .filter-bar__toggle {
    display: none;
  }

  .catalog-section-page .filter-bar.is-enhanced .filter-bar__panel[hidden],
  .catalog-location-page .filter-bar.is-enhanced .filter-bar__panel[hidden] {
    position: static;
    inset: auto;
    display: contents;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .catalog-section-page .filter-bar.is-enhanced .filter-bar__panel-head,
  .catalog-location-page .filter-bar.is-enhanced .filter-bar__panel-head {
    display: none;
  }

  .catalog-section-page .filter-bar,
  .catalog-location-page .filter-bar {
    display: block;
  }

  .catalog-section-page .filter-set,
  .catalog-location-page .filter-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-section-page .filter,
  .catalog-location-page .filter {
    padding-block: 6px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .catalog-page .catalog__grid .section-card:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    height: 250px;
  }

  .catalog-page .catalog__grid .section-card:last-child .section-card__cover {
    flex: 0 0 340px;
    height: auto;
  }

  .catalog-page .catalog__grid .section-card:last-child .section-card__body {
    padding: var(--space-6);
  }

  .catalog-page .catalog__popular--responsive-only { gap: 24px; }

  .catalog-page .catalog__popular--responsive-only .places__list { gap: var(--space-2); }

  .catalog-page .catalog__popular--responsive-only .place {
    padding: 9px 8px;
    font-size: var(--fs-sm);
  }

  .catalog-page .catalog__popular--responsive-only .place__icon {
    width: 28px;
    height: 28px;
  }
}

@media (min-width: 1024px) {
  .cat-list__items {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ============================================================
   МАСТЕР ШАГОВ
   Пять шагов пути к сценарию. Пройденные помечены галочкой, текущий залит.
   ============================================================ */

.wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: 0 8px 12px rgba(156, 141, 128, 0.1);
}

.wizard__step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.wizard__label { flex: 1 1 auto; }

.wizard__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--level-md);
  height: var(--level-md);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-2xs);
  line-height: 1;
  letter-spacing: var(--ls-badge);
}

.wizard__arrow {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-disabled);
}

.wizard__step.is-current { color: var(--text-link); }

.wizard__step.is-current .wizard__dot {
  border-color: var(--action-primary-bg);
  background: var(--action-primary-bg);
  color: var(--text-inverse);
}

.wizard__step.is-done { color: var(--text-body); }

.wizard__step.is-done .wizard__dot {
  border-color: var(--action-primary-bg);
  color: var(--action-primary-bg);
}

.wizard__step.is-done .wizard__dot .icon { width: 14px; height: 14px; }

@media (min-width: 768px) {
  /* Планшет: два ряда по три шага. Стрелка остаётся у первых двух в ряду. */
  .wizard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px var(--space-4);
  }
}

/* В одну строку мастер помещается только на 1440: пять шагов со стрелками
   требуют около 960, а колонка контента доходит до этой ширины лишь там.
   Ниже он остаётся сеткой из трёх колонок, как на планшете. */
@media (min-width: 1440px) {
  .wizard {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
  }

  .wizard__step { flex: none; }

  .wizard__label { flex: none; white-space: nowrap; }
}

/* ============================================================
   ФИЛЬТРЫ
   Псевдо-селекты: подпись сверху, значение снизу, шеврон справа.
   ============================================================ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.filter-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
}

.filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-block: 7px; padding-inline: var(--space-4) 14px;
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter:hover { border-color: var(--border-strong); }

.filter:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.filter__col {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.filter__label {
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.filter__value {
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter .icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text-muted);
}

/* Компактная сортировка стоит отдельной строкой справа над выдачей. */
.catalog-sort-row {
  display: flex;
  justify-content: flex-end;
  min-height: var(--control-sm);
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: calc(var(--space-6) * -1);
}

.sort {
  position: relative;
  flex: none;
}

.sort__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-sm);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
}

.sort__label {
  color: var(--text-muted);
}

.sort__value {
  font-weight: 600;
  color: var(--text-link);
}

.sort__toggle .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-link);
}

.sort__toggle:hover .sort__value,
.sort__toggle:hover .icon { color: var(--text-link-hover); }

@media (max-width: 767px) {
  .catalog-sort-row { justify-content: flex-end; }
}

@media (min-width: 768px) {
  .filter-set { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Фильтры выстраиваются в строку тоже от 1200: на 1024 колонка контента
   уже 592, и четыре поля своей ширины в неё не влезают. */
@media (min-width: 1200px) {
  .filter-bar { flex-wrap: nowrap; }

  /* Поля растут от ширины своей подписи: при равных долях длинные подписи
     («Язык сценариев», «Idioma do cenário», «لغة السيناريو») резались многоточием. */
  .filter-set {
    display: flex;
    flex: 1 1 auto;
  }

  .filter-set > .filter-drop {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Поиск в каталоге сохраняет одну рамку и не рисует вторую форму при фокусе,
   но сам фокус обязан быть виден: правило гасило подсветку из components.css,
   и клавиатурный пользователь не понимал, где находится. */
.catalog .search:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 25%, transparent);
}

/* ============================================================
   ПОПУЛЯРНЫЕ МЕСТА
   ============================================================ */

.places {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.places__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.places__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2);
}

.place {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px var(--space-3);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-body);
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.place:hover { border-color: var(--action-secondary-border); color: var(--text-link); }

.place__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--tone, var(--primary-500));
  color: var(--neutral-white);
}

.place__icon .icon { width: var(--icon-sm); height: var(--icon-sm); }

@media (min-width: 768px) {
  .places__list { justify-content: flex-start; }
}

@media (min-width: 1200px) {
  .places__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .place { width: auto; }
}

/* ============================================================
   СЕТКА КАРТОЧЕК И СЧЁТЧИК
   ============================================================ */

.catalog__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Последняя карточка нечётного ряда занимает полосу целиком. */
  .catalog__grid > .section-card--wide { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .catalog__grid > .section-card--wide { grid-column: auto; }
}

.result-count {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* ============================================================
   ЦВЕТА РАЗДЕЛОВ И ОБЛОЖКИ
   Значок раздела красится переменной --tone, снимок приходит в
   --media-image. Оба объявляются здесь, а не в атрибуте style: относительный
   адрес внутри пользовательского свойства браузер считает от файла стилей,
   где свойство подставляется, а не от страницы.
   ============================================================ */

.tone-primary  { --tone: var(--primary-500); }
.tone-sand     { --tone: var(--sand-500); }
.tone-sky      { --tone: var(--sky-500); }
.tone-sky-deep { --tone: var(--sky-600); }

@media (min-width: 1024px) {
  .catalog__popular--responsive-only { display: none; }
}

/* ============================================================
   ПУСТОЙ РЕЗУЛЬТАТ
   Состояние списка, когда фильтры ничего не нашли.
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-16) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  text-align: center;
}

.empty-state__icon {
  width: var(--space-8);
  height: var(--space-8);
  color: var(--sand-500);
}

.empty-state__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
}

.empty-state__text {
  max-width: 480px;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.empty-state__action { margin-top: var(--space-2); }

/* ============================================================
   РАСКРЫТАЯ СОРТИРОВКА
   Список вариантов под полем «Sort by».
   ============================================================ */

.sort-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 5;
  display: none;
  min-width: 240px;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--elevation-lg);
  list-style: none;
}

.sort.is-open .sort-menu { display: block; }

.sort-menu__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.sort-menu__option:hover { background: var(--primary-50); color: var(--text-link); }

.sort-menu__option .icon { width: var(--icon-sm); height: var(--icon-sm); }

.sort-menu__option[aria-current="true"] {
  background: var(--sky-100);
  font-weight: 600;
  color: var(--text-link);
}

.sort-menu__option[aria-disabled="true"] {
  color: var(--text-disabled);
  pointer-events: none;
}