/* ПЕРЕНОС ИЗ ЭТАЛОНА. Файл `ui.css` из corona-travel, взят целиком.
 *
 * Почему целиком, а не выборкой нужных правил. Первая попытка выдёргивала
 * правила скриптом — и часть из них потеряла обёртку `@media`: десктопная
 * шапка начала применяться на всех ширинах. На широком экране значения
 * совпадают с правильными, поэтому браузерная проверка на 1440 ничего не
 * показала. Целый файл такой ошибки не допускает по построению, а лишние
 * правила для классов, которых в теме ещё нет, безвредны.
 *
 * Изменено при переносе ровно два вида вещей, оба механические:
 *
 *   1. `data-theme` -> `data-ct-theme`. Тема переименовала атрибут, чтобы
 *      не пересекаться с чужими скриптами на странице партнёра.
 *   2. Пути картинок `../img/` -> `{% static %}`-совместимые. Django
 *      отдаёт статику с другого префикса, относительный путь от CSS сюда
 *      не годится.
 *
 * Правила и комментарии эталона не трогались: в них записаны замеры
 * макета, и пересказ своими словами потерял бы основание.
 */

/* Corona Travel — интерактивные слои: шиты, поповеры, меню, календарь.
 *
 * В макете все состояния полей нарисованы как полноэкранные экраны 390 px
 * (страна + клавиатура, календарь, тип тура). На десктопе таких кадров нет,
 * поэтому там тот же контент показывается поповером под полем —
 * см. second-brain/markup-conventions.md.
 */

/* ============================================================== подложка */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgb(11 20 70 / 45%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.backdrop[data-open] {
  opacity: 1;
}

body[data-locked] {
  overflow: hidden;
}

/* ================================================================== шит */

.sheet {
  position: fixed;
  z-index: 110;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--bg);
}

/* мобильный: снизу на весь экран */
.sheet {
  inset: auto 0 0;
  max-height: 92vh;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.sheet[data-open] {
  transform: translateY(0);
}

.sheet__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-m) var(--sheet-pad) var(--space-s);
}

.sheet__title {
  flex: 1;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
}

.sheet__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--text);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.sheet__close::before {
  content: "×";
  font-size: 20px;
  line-height: 1;
}

.sheet__body {
  flex: 1;
  min-height: 0;
  /* нижний паддинг обязателен: без футера контент упирался в край экрана */
  padding: 0 var(--sheet-pad) var(--space-m);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet__foot {
  padding: var(--space-s) var(--sheet-pad)
    calc(var(--space-m) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--surface-border);
}

/* когда футера нет, низ тела должен учитывать вырез */
.sheet:not(:has(.sheet__foot)) .sheet__body {
  padding-bottom: calc(var(--space-m) + env(safe-area-inset-bottom, 0px));
}

/* десктоп: поповер под полем */
@media (min-width: 960px) {
  .sheet[data-popover] {
    position: fixed;
    inset: auto;
    width: max-content;
    min-width: 320px;
    max-width: min(560px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-m);
    box-shadow: 0 24px 48px rgb(11 20 70 / 18%);
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .sheet[data-popover][data-open] {
    transform: translateY(0);
    opacity: 1;
  }

  .sheet[data-popover] .sheet__foot {
    padding-bottom: var(--space-m);
  }

  /* в поповере месяцы встают в ряд — так он вдвое ниже и влезает под поле */
  .sheet[data-popover] .calendar__months {
    display: flex;
    gap: var(--space-xs);
  }

  .sheet[data-popover] .calendar__month {
    flex: 1 1 0;
    min-width: 240px;
    margin-bottom: 0;
  }

  /* на десктопе подложка невидима, но продолжает ловить клик мимо */
  .backdrop--popover {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ======================================================= список опций */

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

.options__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--surface-border);
  cursor: pointer;
}

.options__item:last-child {
  border-bottom: 0;
}

.options__item:hover,
.options__item:focus-visible,
.options__item[data-active] {
  color: var(--accent);
  outline: none;
}

.options__item[aria-selected="true"]::after {
  content: "✓";
  color: var(--accent);
}

.options__empty {
  padding: var(--space-m) 0;
  color: var(--text-muted);
  text-align: center;
}

.options__status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-m) 0;
  color: var(--text-muted);
}

.options__status::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: search-submit-spin 0.8s linear infinite;
}

/* чипы-опции (тип тура нарисован набором пилюль) */
.options--chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* Группа опций: подзаголовок мельче заголовка шита, иначе иерархия
   переворачивается — раньше «Туристов» было крупнее «Дополнительно». */
.options-group + .options-group {
  margin-top: var(--space-m);
}

.options-group__title {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.options--chips .options__item {
  padding: var(--space-xs) var(--space-s);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-pill);
}

.options--chips .options__item[aria-selected="true"] {
  color: var(--accent-text);
  background: var(--accent);
}

.options--chips .options__item[aria-selected="true"]::after {
  content: none;
}

/* Reference presentation for the future typed travellers state. */
.travellers {
  min-width: min(360px, calc(100vw - 40px));
}

.travellers__summary {
  margin-bottom: var(--space-s);
  color: var(--text-muted);
}

.travellers__row,
.travellers__age {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--surface-border);
}

.travellers__counter {
  display: grid;
  grid-template-columns: 36px 32px 36px;
  align-items: center;
  text-align: center;
}

.travellers__counter button {
  width: 36px;
  height: 36px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 50%;
}

.travellers__ages {
  margin-top: var(--space-s);
}

.travellers__age select {
  min-width: 76px;
  min-height: 36px;
  padding-inline: var(--space-2xs);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-s);
}

/* ============================================================= календарь */

.calendar__tabs {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
}

.calendar__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  text-align: left;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
}

.calendar__tab[aria-selected="true"] {
  border-color: var(--accent);
}

.calendar__tab b {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.calendar__month {
  padding: var(--space-xs);
  margin-bottom: var(--space-xs);
  background: var(--panel-bg);
  border-radius: var(--radius-m);
}

.calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.calendar__nav button {
  width: 28px;
  height: 28px;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.calendar__nav button[disabled] {
  opacity: 0.3;
  cursor: default;
}

.calendar__label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-medium);
}

.calendar__week,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar__week {
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
  text-align: center;
  border-bottom: 1px solid var(--surface-border);
}

.calendar__day {
  aspect-ratio: 1;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
}

.calendar__day[disabled] {
  color: var(--text-muted);
  opacity: 0.4;
  cursor: default;
}

.calendar__day[data-in-range] {
  background: var(--tab-active-bg);
  border-radius: 0;
}

.calendar__day[data-edge="from"] {
  border-radius: var(--radius-s) 0 0 var(--radius-s);
}

.calendar__day[data-edge="to"] {
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.calendar__day[data-selected] {
  color: var(--accent-text);
  background: var(--accent);
  border-radius: var(--radius-s);
}

/* ============================================================ поиск в шите */

.sheet__search {
  position: sticky;
  top: 0;
  z-index: 1;
  /* липкое поле не должно наезжать на шапку шита и на первый пункт списка */
  padding-block: var(--space-2xs) var(--space-xs);
  margin-top: calc(-1 * var(--space-2xs));
  background: var(--bg);
}

.sheet__search .field {
  background: var(--surface);
  border: 1px solid var(--surface-border);
}

/* у type="search" свои сбросы в вебките */
.sheet__search input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}

.sheet__search input[type="search"]::-webkit-search-decoration,
.sheet__search input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
}

/* ================================================================== меню */

.menu {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 110;
  display: flex;
  flex-direction: column;
  width: min(320px, 88vw);
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: var(--space-s) var(--gutter)
    calc(var(--space-s) + env(safe-area-inset-bottom, 0px));
  border: 0;
  color: var(--text);
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.menu:not([open]) {
  display: none;
}

.menu[data-open],
.menu[open] {
  transform: translateX(0);
}

.menu__head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-m);
}

.menu__theme {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

/* Видна иконка ВЫБРАННОЙ темы: залитое солнце — светлая, контурное — тёмная.
   Атрибут data-ct-theme на :root проставляет theme.js всегда, поэтому обе ветки
   детерминированы и не зависят от системной темы. */
:root[data-ct-theme="dark"] .menu__theme-icon--light,
:root:not([data-ct-theme="dark"]) .menu__theme-icon--dark {
  display: none;
}

/* Заголовок занимает остаток строки, тема и «закрыть» прижаты вправо. */
.menu__title {
  flex: 1;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.menu__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu__list a {
  padding: var(--space-xs) 0;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  border-bottom: 1px solid var(--surface-border);
}

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

.menu__foot {
  margin-top: auto;
  padding-top: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.menu__phone {
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
}

.menu__rates {
  display: flex;
  gap: var(--space-s);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}

/* ====================================================== прочая механика */

/* «Дополнительно» — раскрывающийся блок */
.search__extra {
  display: none;
  flex-direction: column;
  gap: var(--space-xs);
}

.search__extra[data-open] {
  display: flex;
}

/* карточки, скрытые до «Показать еще» */
.card[hidden] {
  display: none;
}

.cards-more[data-done] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sheet,
  .menu,
  .backdrop {
    transition: none;
  }

  .options__status::before,
  [data-search-submit][data-search-loading] .btn__icon:first-child {
    animation: none;
  }
}

/* ============================================= отладочные направляющие
 * Ctrl+G сетка · Ctrl+K колонки · Ctrl+B боксы · Ctrl+H панель
 * или ?grid / ?cols / ?boxes / ?debug
 */

html[data-grid] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgb(255 0 90 / 30%) 0 1px,
      transparent 1px calc(var(--baseline) * 8)
    ),
    repeating-linear-gradient(
      to bottom,
      rgb(255 0 90 / 11%) 0 1px,
      transparent 1px var(--baseline)
    );
}

.dbg-cols {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9997;
  display: flex;
  pointer-events: none;
}

.dbg-cols span {
  display: block;
  height: 100%;
  background: rgb(0 200 255 / 12%);
  border-inline: 1px solid rgb(0 200 255 / 30%);
}

.dbg-text-box {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9997;
  pointer-events: none;
  border-inline: 1px dashed rgb(255 180 0 / 70%);
  background: rgb(255 180 0 / 5%);
}

.dbg-hud {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 6px 12px;
  font: 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff;
  background: rgb(11 20 70 / 92%);
  pointer-events: none;
}

/* ============================================ вертикальная навигация (rail)
 * В макете — пять коротких штрихов у левого края; активный длиннее и темнее.
 * Прячется на мобильном: там на неё нет места и есть таб-бар.
 */

.rail {
  display: none;
}

.rail__dash {
  padding: 0;
}

@media (min-width: 960px) {
  .rail {
    position: fixed;
    top: 50%;
    visibility: hidden;
    /* в поле слева от контейнера; если поля не хватает — прячем,
       иначе штрихи налезают на текст */
    left: max(var(--space-s), calc((100% - var(--container-max)) / 2 - 36px));
    z-index: 15;
    display: block;
    transform: translateY(-50%);
  }

  .rail__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .rail__dash {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dot);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
  }

  .rail__dash:hover {
    background: var(--text-muted);
  }

  .rail__dash--active {
    width: 40px;
    background: var(--dot-active);
  }

  /* подпись появляется при наведении — иначе штрихи ничего не сообщают */
  .rail__tip {
    position: absolute;
    top: 50%;
    left: calc(100% + var(--space-2xs));
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--text-muted);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.15s ease;
    pointer-events: none;
  }

  .rail__dash:hover .rail__tip,
  .rail__dash:focus-visible .rail__tip {
    opacity: 1;
  }
}

/* Показываем rail только когда слева реально есть свободное поле:
   контейнер 1144 + 2x(36 штрих + 16 отступ) = 1248. */
@media (min-width: 1248px) {
  .rail {
    visibility: visible;
  }
}

/* ================================================ бенто-сетка направлений
 * На десктопе в макете не скроллер, а мозаика из карточек разного размера.
 */

@media (min-width: 960px) {
  .destinations__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 168px;
    gap: var(--space-xs);
    padding-inline: 0;
    overflow: visible;
    width: min(100% - 2 * var(--gutter), var(--container-max));
    margin-inline: auto;
  }

  .dest-card {
    flex: initial;
    height: auto;
    border-radius: var(--radius-s);
  }

  .dest-card--wide { grid-column: span 2; grid-row: span 1; }
  .dest-card--mid { grid-column: span 2; grid-row: span 1; }
  .dest-card--tall { grid-column: span 2; grid-row: span 2; }
  .dest-card--small { grid-column: span 2; grid-row: span 1; }
  .dest-card--wide2 { grid-column: span 2; grid-row: span 1; }

  /* точки нужны только пока это слайдер */
  .destinations .dots {
    display: none;
  }
}

/* Водяной знак Corona в левом верхнем углу карточек.
   Был скрыт, пока не появился ассет эмблемы: волнистая черта для этого не
   годится — это другой элемент. Владелец прислал логотип-локап 2026-08-12,
   эмблема вырезана из него геометрически в img/corona-mark.svg.

   Замер макета на 1920 (карточка 320 px, первая в ряду): знак занимает
   x 32..77, y 32..58 от угла карточки, то есть 45x26 при отступе 32.
   Взято долями от стороны карточки — 14 % ширины при отступе 10 %, — чтобы
   знак не оказался огромным на мобильной карточке 195 px. Пропорцию держит
   aspect-ratio самого файла (1.663), поэтому высота не задаётся.

   Знак декоративный: элементы пустые и помечены aria-hidden, в поток не
   вмешиваются (position: absolute), на базовую сетку не влияют. */
.dest-card__mark,
.card__mark {
  position: absolute;
  top: 10%;
  left: 10%;
  z-index: 1;
  width: 14%;
  aspect-ratio: 1.663;
  background: url("/static/partners__corona/img/corona-mark.svg") center / contain no-repeat;
  /* В макете знак приглушён и не спорит с подписью карточки. */
  opacity: 0.85;
  pointer-events: none;
}

/* ==================================== r2: каскад P, месяцы TR, панель фильтров */

/* Пустая клетка перед первым числом месяца: сетка календаря начинается с
   понедельника, и без заполнителей числа съезжают на чужие дни недели. */
.calendar__pad {
  aspect-ratio: 1;
}

/* Дискретный календарь тура. Даты приходят перечнем допустимых дней, а не
   диапазоном, поэтому недоступные дни здесь ФИЗИЧЕСКИ невыбираемы: это
   `<button disabled>`, а не просто бледная клетка. Приглушение — следствие,
   а не способ: если бы день гасили только цветом, его всё равно можно было бы
   нажать с клавиатуры. */
.calendar--discrete .calendar__day[data-search-day="unavailable"] {
  color: var(--text-muted);
  opacity: 0.32;
  text-decoration: line-through;
}

.calendar--discrete .calendar__day[data-search-day="available"] {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.calendar__hint {
  margin: 0 0 var(--space-s);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}

/* Месяцы TR: двенадцать значений сеткой, а не списком в столбик — так виден
   весь год сразу, и выбор трёх месяцев читается как выбор, а не как прокрутка. */
.options--months {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs);
}

.options--months .options__item {
  justify-content: flex-start;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-s);
}

.options--months .options__item[aria-pressed="true"] {
  color: var(--accent-text);
  background: var(--accent);
  border-color: transparent;
}

.options--months .options__item[aria-pressed="true"]::after {
  content: "";
}

@media (min-width: 600px) {
  .options--months {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------------------------- панель «Дополнительно» */

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.filters__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.filters__title {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

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

/* Курортов и отелей бывают сотни. Прокрутка живёт ВНУТРИ группы: иначе панель
   растянулась бы на три экрана, и до кнопки «Найти» пришлось бы скроллить
   мимо всего списка. */
.filters__list[data-filters-scroll] {
  max-height: 208px;
  overflow-y: auto;
  padding-inline-end: var(--space-2xs);
}

.filters__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-3xs);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  cursor: pointer;
}

/* Дочерние курорты принадлежат родителю, и отступ — единственное, что об этом
   говорит: разметка у них та же. */
.filters__item[data-filter-child] {
  padding-inline-start: var(--space-m);
}

.filters__item--any {
  font-weight: var(--fw-medium);
}

.filters__find,
.filters__select {
  width: 100%;
  min-height: var(--control-h);
  padding-inline: var(--space-xs);
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-s);
}

.filters__empty,
.filters__status {
  margin: 0;
  padding-block: var(--space-s);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* Между выбором направления и появлением фильтров есть заметная пауза:
   панель грузится запросом. Скелет показывает, что именно там появится. */
.filters__skeleton {
  height: var(--control-h);
  border-radius: var(--radius-s);
  background: var(--surface);
  opacity: 0.7;
}

.filters__foot {
  display: flex;
  justify-content: stretch;
}

.filters__foot .btn {
  flex: 1;
  justify-content: center;
}

/* Группа удобств содержит вложенные блоки, число которых заранее неизвестно.
   Безымянный блок — одиночный чекбокс без заголовка, он не должен получать
   отступ как у озаглавленной группы. */
.filters__group--features {
  gap: var(--space-s);
}

/* Вложенные блоки «Удобств» прокручиваются ВМЕСТЕ внутри родительской группы.
   Им нельзя сжиматься: иначе flex пытается уместить все блоки в высоту колонки
   и их строки накладываются друг на друга. */
.filters__group--features > .filters__group {
  flex: 0 0 auto;
}

.filters__group--features [data-feature-untitled] .filters__list {
  margin-top: calc(-1 * var(--space-2xs));
}

/* ------------------------------- широкая панель фильтров на десктопе -------
 * В проде расширенные фильтры — блок ПОД полосой поиска во всю её ширину, а не
 * поповер у кнопки. Шесть групп в одну колонку давали свиток на два экрана:
 * курорты и отели прокручиваются внутри себя, но сами группы шли стопкой.
 */
@media (min-width: 960px) {
  .sheet[data-popover][data-wide] {
    max-width: min(100vw - 32px, 1280px);
    max-height: min(76vh, 640px);
  }

  .sheet[data-popover][data-wide] .filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-m) var(--space-s);
    align-items: start;
  }

  /* Удобства — обычная колонка, а не полоса во всю ширину снизу.
     Полосой они всегда оказывались ЗА обрезом: панель зажата высотой вьюпорта
     (поповер не уходит за экран), первая строка равнялась по самой высокой
     группе, и до удобств приходилось прокручивать — то есть узнать об их
     существовании можно было только случайно. Колонкой все шесть групп стоят
     в один ряд и видны сразу.

     Внутри колонки блоки идут стопкой и прокручиваются вместе: число блоков
     заранее неизвестно, и раскладывать их в ряд внутри узкой колонки нечем. */
  .sheet[data-popover][data-wide] .filters__group--features {
    max-height: 140px;
    overflow-y: auto;
    padding-inline-end: var(--space-2xs);
  }

  /* Кнопка панели прижата вправо, как «Найти» в самой полосе. */
  .sheet[data-popover][data-wide] .filters__foot {
    justify-content: flex-end;
  }

  .sheet[data-popover][data-wide] .filters__foot .btn {
    flex: 0 0 auto;
    min-width: 200px;
  }

  /* Списки внутри групп ниже: панель широкая, и высокий свиток в каждой
     колонке снова растянул бы её по вертикали. */
  /* Ограничены ВСЕ списки, а не только заведомо длинные. Курорты и отели
     прокручивались и раньше, но «Категория» и «Питание» по шесть пунктов
     давали колонку в 252 px, первая строка равнялась по самой высокой, и ряд
     «Удобств» вместе с кнопкой уезжал под обрез — чтобы узнать, что они
     вообще есть, панель приходилось прокручивать.

     148 подобрано так, чтобы пять групп первой строки, ряд удобств и кнопка
     умещались на 1440 без внешнего свитка. Внутри группы свиток остаётся —
     это и есть заявленное поведение «много элементов». */
  .sheet[data-popover][data-wide] .filters__list {
    max-height: 116px;
    overflow-y: auto;
    padding-inline-end: var(--space-2xs);
  }

  /* У удобств свитка нет: там вложенные блоки, и прокрутка внутри каждого
     превратила бы ряд в набор окошек. */
  .sheet[data-popover][data-wide] .filters__group--features .filters__list {
    max-height: none;
    overflow-y: visible;
  }
}

/* Средний desktop — не уменьшенная версия шести колонок, а самостоятельный
   лоток фильтров. 3 × 2 сохраняет ширину подписей и не оставляет «Удобства»
   одинокой группой на последней строке. Высота задаётся позиционером, поэтому
   body и группы растягиваются, а длинные списки прокручиваются внутри себя. */
@media (min-width: 960px) and (max-width: 1399px) {
  .sheet[data-popover][data-filters-tray] {
    max-height: none;
  }

  .sheet[data-popover][data-filters-tray] .sheet__body {
    display: flex;
  }

  .sheet[data-popover][data-filters-tray] .filters {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .sheet[data-popover][data-filters-tray] .filters__group {
    min-height: 0;
  }

  .sheet[data-popover][data-filters-tray] .filters__group:not(.filters__group--features) .filters__list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .sheet[data-popover][data-filters-tray] .filters__group--features {
    max-height: none;
    min-height: 0;
  }
}

/* С 1400 полоса достаточно широка: все шесть групп стоят в один ряд. Здесь
   короткие группы должны растянуться до высоты самой высокой, а их списки —
   занять всё место, оставшееся в sheet body. Ниже 1400 такое растяжение
   сжало бы две строки до нечитаемых высот, поэтому там остаётся внешний
   scroll панели и локальные max-height списков. */
@media (min-width: 1400px) {
  .sheet[data-popover][data-wide] .sheet__body {
    display: flex;
  }

  .sheet[data-popover][data-wide] .filters {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }

  .sheet[data-popover][data-wide] .filters__group {
    min-height: 0;
  }

  .sheet[data-popover][data-wide] .filters__group:not(.filters__group--features) .filters__list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .sheet[data-popover][data-wide] .filters__group--features {
    max-height: none;
    min-height: 0;
  }
}