/* ============================================================
   TICKETS_NEW.CSS — Страница «Билеты» (новая версия, десктоп 2 кол.)
   Театр на Таганке

   Подключение:
     fonts.css → tokens.css → style.css → page.css → menu.css →
     search-desktop.css → tickets_new.css

   Раскладка десктопа (≥1024) переработана:

     ── Блок «Как купить» ─────────────────────────────────────
        Идёт ПЕРВЫМ, на всю ширину контента. Заголовок секции —
        во всю ширину, под ним ДВЕ внутренние колонки:
          • левая  — «На сайте» + «Онлайн у партнёров»
          • правая — «В кассе театра» + файлы для скачивания (docs)
        Под всем блоком — разделитель .tickets__split на всю
        ширину контента (с боковыми отступами).

     ── Остальные разделы ─────────────────────────────────────
        Пушкинская карта / Сертификаты / Возврат / Переоформление /
        Льготы / СВО / FAQ — идут НИЖЕ единым DOM-потоком.
        На десктопе CSS Grid автоматически распределяет секции по
        двум равным колонкам; бэкенду не нужны отдельные обёртки
        или ручное назначение колонки.

   Мобилка/планшет (<1024) — всё в один последовательный поток.

   Локальные компоненты (без изменений относительно v1):
     1. .tickets__navigator         — sticky-навигатор (моб./планшет)
     2. .tickets__accordion         — аккордеон (адрес/режим + файлы)
   ============================================================ */


/* ══════════════════════════════════════════════════
   ФОН СТРАНИЦЫ
   ══════════════════════════════════════════════════ */
.page--tickets,
.page--tickets .page__intro {
  background-color: var(--color-bg-warm);
}


/* ══════════════════════════════════════════════════
   МОБИЛЬНЫЙ НАВИГАТОР ПО РАЗДЕЛАМ
   Sticky-полоска под page__divider с кнопкой и dropdown'ом
   на 8 пунктов. При прокрутке JS добавляет .is-stuck — фон
   чёрный, лейбл/шеврон белые. Активный пункт обновляется
   через IntersectionObserver по секциям страницы.
   На десктопе (≥1024) скрыт целиком.
   ══════════════════════════════════════════════════ */
.tickets__navigator {
  position: sticky;
  top: 0;
  z-index: var(--z-ui);
  background: var(--color-bg-warm);
  transition: background-color var(--duration-fast) ease;
}

.tickets__navigator.is-stuck {
  background: var(--color-black-soft);
}

.tickets__navigator-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 10px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.tickets__navigator-label {
  font-family: var(--font-accent);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--duration-fast) ease;
}

.tickets__navigator.is-stuck .tickets__navigator-label {
  color: var(--color-white);
}

.tickets__navigator-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-black-soft);
  transition: transform var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

.tickets__navigator.is-stuck .tickets__navigator-chevron {
  color: var(--color-white);
}

.tickets__navigator.is-dropdown-open .tickets__navigator-chevron {
  transform: rotate(180deg);
}

.tickets__navigator-row:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

.tickets__navigator-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--color-black-soft);
  z-index: var(--z-overlay);
  display: none;
  flex-direction: column;
}

.tickets__navigator-dropdown.is-open {
  display: flex;
}

.tickets__navigator-item {
  display: block;
  padding: 14px 10px;
  font-family: var(--font-accent);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-white);
  text-decoration: none;
  opacity: 1;
  transition: opacity var(--duration-fast) ease;
  -webkit-tap-highlight-color: transparent;
}

.tickets__navigator-item:hover { opacity: 0.7; }

/* Активный пункт (по умолчанию «Как купить», далее ведётся
   scroll-spy'ем) — приглушён: ты уже на этом разделе. Остальные
   пункты — полностью белые. */
.tickets__navigator-item.is-active {
  opacity: 0.45;
}

.tickets__navigator-item:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}


/* ══════════════════════════════════════════════════
   БЛОК «КАК КУПИТЬ» — ОБЁРТКА (full-width)
   Несёт горизонтальный padding контента и верхний отступ
   под навигатором/divider (как раньше делал .page__columns).
   Сама секция внутри сбрасывает нижний padding — весь зазор
   до следующего блока задаёт .tickets__sections.
   ══════════════════════════════════════════════════ */
.tickets__how-wrap {
  padding: 64px 10px 0;
}

/* Нижний padding секции внутри блока «Как купить» не нужен —
   зазор до блока «Остальные разделы» держит .tickets__sections. */
.tickets__how-wrap .page__section {
  padding-bottom: 0;
}


/* ── Внутренние колонки блока «Как купить» ──
   База (мобилка/планшет) — стек. На десктопе превращается
   в две колонки (см. @media ≥1024). */
.tickets__how-cols {
  /* стек по умолчанию — display:block */
}

/* Первая статья в каждой внутренней колонке — без верхней линии
   и без верхнего padding'а. В обычной секции это делает правило
   .page__section-title + .page__article, но здесь между заголовком
   и статьёй стоит обёртка .tickets__how-cols, поэтому сбрасываем
   вручную. Срабатывает на «На сайте» (левая) и «В кассе» (правая). */
.tickets__how-col > .page__article:first-child {
  border-top: none;
  padding-top: 0;
}

/* Левая колонка: убираем линию-разделитель между «На сайте» и
   «Онлайн у партнёров» — это один смысловой блок онлайн-покупки.
   (Линию даёт базовый .page__article в page.css; гасим только в
   первой внутренней колонке, правую «В кассе» не трогаем.) */
.tickets__how-cols > .tickets__how-col:first-child > .page__article + .page__article {
  border-top: none;
}


/* ── Правая колонка «В кассе театра»: строки адреса/режима/оплаты ──
   Это обычные параграфы (.page__article-text) с bold-лейблом
   (<strong> → medium-вес из page.css). Сбрасываем дефолтные
   margin'ы <p>, чтобы вертикальные отступы держал gap контейнера
   .page__info (16px / 24px на десктопе). */
.tickets__how-col--info .page__info p {
  margin: 0;
}


/* ══════════════════════════════════════════════════
   БЛОКИ С КВАДРАТНЫМ МАРКЕРОМ
   Текст, CTA, уведомления и аккордеоны начинаются на той же
   вертикали, что и текст подзаголовка после квадратного маркера.
   Размер маркера и зазор задаются один раз через custom properties.
   ══════════════════════════════════════════════════ */
.tickets__article--marker {
  --tickets-marker-size: 12px;
  --tickets-marker-gap: 14px;
  --tickets-marker-indent: calc(var(--tickets-marker-size) + var(--tickets-marker-gap));
}

.page--tickets .tickets__article--marker > .page__article-title--marker {
  position: relative;
  padding-inline-start: var(--tickets-marker-indent);
}

.page--tickets .tickets__article--marker > .page__article-title--marker::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0.32em;
  width: var(--tickets-marker-size);
  height: var(--tickets-marker-size);
  margin: 0;
  transform: none;
}

.tickets__article--marker > .page__article-title--marker ~ * {
  margin-inline-start: var(--tickets-marker-indent);
}


/* ══════════════════════════════════════════════════
   NOTICE-БЛОКИ «ОНЛАЙН У ПАРТНЁРОВ»
   Без подложки и рамки: перед текстом — компактная иконка
   «восклицательный знак в круге».
   ══════════════════════════════════════════════════ */
/* ПРАВКА 11.08: грид применяется только когда иконка реально есть
   в разметке. Раньше правило висело на всех .page__notice — если
   шаблон отдаёт блок без <svg class="page__notice-icon">, текст
   становится ПЕРВЫМ грид-элементом и попадает в колонку 22px.
   Так и разъехались «Партнёры могут взимать комиссию» и
   «Администрация театра предупреждает» при выкатке на живой шаблон. */
.page--tickets .page__notice:has(.page__notice-icon) {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}

/* Фолбэк для разметки без иконки — прежний вид с бледной подложкой
   (майская редакция). Убрать, когда шаблон начнёт выводить иконку. */
.page--tickets .page__notice:not(:has(.page__notice-icon)) {
  border: none;
  background: var(--color-black-soft-04);
  border-radius: var(--card-radius);
}

.page--tickets .page__notice-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin-top: 0.05em;
}

.page--tickets .page__notice-text {
  min-width: 0;
}


/* ══════════════════════════════════════════════════
   РАЗДЕЛИТЕЛЬ ПОД БЛОКОМ «КАК КУПИТЬ»
   Линия на всю ширину контента, с боковыми отступами (инсет
   равен горизонтальному padding'у контента) и воздухом сверху/
   снизу. Отделяет блок «Как купить» от разделов и несёт весь
   вертикальный зазор между ними — поэтому .tickets__sections
   своего верхнего padding'а не имеет.
   Вес линии — как у основного .page__divider (--color-black-soft).
   ══════════════════════════════════════════════════ */
.tickets__split {
  height: 0;
  border: none;
  border-top: 1px solid var(--color-black-soft);
  margin: 48px 10px;
}


/* ══════════════════════════════════════════════════
   БЛОК «ОСТАЛЬНЫЕ РАЗДЕЛЫ»
   В DOM это один последовательный список секций. До десктопного
   брейкпоинта блок идёт в одну колонку; на десктопе включается
   автоматическая двухколоночная grid-раскладка.
   ══════════════════════════════════════════════════ */
.tickets__sections {
  display: block;
}

/* ПРАВКА 11.08: подстраховка от пустой секции из CMS.
   Живая страница отдаёт один .page__section без содержимого
   (innerHTML — единственный перевод строки), но он получает
   от page.css 28+40px паддингов и верхнюю линию — 81px пустоты.
   На десктопе это незаметный хвост в конце колонки, на мобилке
   колонки стекаются и дыра встаёт ровно над «Льготами».

   :empty здесь не работает: он не матчит элемент, внутри которого
   есть текстовый узел, даже если это один \n. :not(:has(*)) ловит
   отсутствие дочерних ЭЛЕМЕНТОВ и потому срабатывает.

   Чинить правильно на бэкенде — не выводить секцию без контента.
   Это защита от повторения, а не замена исправлению данных. */
.tickets__sections .page__section:not(:has(*)) {
  display: none;
}


/* ══════════════════════════════════════════════════
   МОБИЛКА/ПЛАНШЕТ (<1024) — блок «Как купить» и стыки колонок

   На <1024 блок «Как купить» стекается в один поток. Три блока
   (На сайте, Онлайн, В кассе) идут БЕЗ линий-разделителей и с
   РАВНЫМ вертикальным зазором между собой (48px). Зазор задаёт
   верхний padding каждого следующего блока, нижние padding'и
   статей обнуляются — кроме «В кассе»: у неё снизу остаётся 40px
   под разделитель над файлами для скачивания (см. базовые правила).

   Нижний блок уже является единым потоком, поэтому разделители
   между соседними секциями работают без дополнительных правил.
   ══════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
  /* Три блока «Как купить» — без линий между собой */
  .tickets__how-cols .page__article {
    border-top: none;
  }

  /* На сайте (первый блок) — без верхнего и нижнего отступа */
  .tickets__how-col:first-child > .page__article:first-child {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Онлайн (второй в левой колонке) — равный зазор сверху (48),
     без нижнего: зазор до «В кассе» держит её верхний padding. */
  .tickets__how-col:first-child > .page__article + .page__article {
    padding-top: 48px;
    padding-bottom: 0;
  }

  /* В кассе (правая колонка) — тот же зазор сверху (48).
     Нижний padding (40) остаётся из базового правила —
     это воздух над разделителем перед docs. */
  .tickets__how-col--info > .page__article:first-child {
    padding-top: 48px;
  }


  /* ПРАВКА 11.08: линия и отступ на стыке колонок при стекании.
     Живой шаблон оборачивает разделы в две .page__column, поэтому
     «Льготы» — ПЕРВАЯ секция своего контейнера, и базовое правило
     .page__section + .page__section из page.css её не достаёт:
     на мобилке пропадает разделитель между «Переоформлением»
     и «Льготами», ритм секций рвётся.

     Правило было в майской редакции; в июльской его убрали заодно
     с переходом на плоский список секций, но шаблон на плоский
     список так и не перевели. Убрать, когда бэкенд перестанет
     выводить обёртки .page__column. */
  .tickets__sections .page__column + .page__column > .page__section:first-child {
    border-top: 1px solid var(--color-black-soft-25);
    padding-top: 40px;
  }

  /* Кнопки-ссылки на мобилке/планшете — шрифт 16 (вместо 14). */
  .page--tickets .page__action {
    font-size: 16px;
  }
}


/* ══════════════════════════════════════════════════
   АККОРДЕОН (общий) — блоки «Адрес и режим работы» и
   «Файлы для скачивания» внутри «В кассе театра».
   Два идентичных блока: одинаковая кнопка-toggle, одинаковые
   отступы и линия-разделитель сверху.
   На мобилке/планшете — кнопка-toggle, контент свёрнут.
   На десктопе — кнопка скрыта, контент всегда виден.

   Тело аккордеона — .tickets__accordion-body (вешается рядом
   с .page__info / .page__docs). JS переключает .is-open.
   ══════════════════════════════════════════════════ */
.tickets__accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  margin-top: 20px;
  background: none;
  border: none;
  border-top: 1px solid var(--color-black-soft-25);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--color-black-soft);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--duration-fast) ease;
}

/* Зазор между двумя аккордеонами чуть меньше, чем от вводки до
   первого (у второго — меньший верхний отступ над линией). */
.tickets__accordion + .tickets__accordion .tickets__accordion-toggle {
  margin-top: 12px;
}

/* При раскрытии заголовок аккордеона чуть приглушается. */
.tickets__accordion-toggle[aria-expanded="true"] {
  opacity: 0.5;
}

.tickets__accordion-toggle svg {
  flex-shrink: 0;
  transition: transform var(--duration-fast) ease;
}

.tickets__accordion-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.tickets__accordion-toggle:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Мобилка: тело свёрнуто, открывается классом .is-open от JS.
   display:none перебивает flex от .page__info / .page__docs
   (тот же вес, но это правило идёт позже). Открытое — flex. */
.tickets__accordion-body {
  display: none;
  padding-top: 20px;
}

.tickets__accordion-body.is-open {
  display: flex;
}


/* ══════════════════════════════════════════════════
   ПЛАНШЕТ (768–1023.98px)
   Раскладка всё ещё в один поток (две колонки включаются с 1024).
   Подстраиваем горизонтальные отступы под планшетные 16px.
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .tickets__navigator-row,
  .tickets__navigator-item {
    padding-left: 16px;
    padding-right: 16px;
  }

  .tickets__how-wrap {
    padding: 80px 16px 0;
  }

  /* Разделитель: инсет под планшетные 16px, воздух 64px */
  .tickets__split {
    margin: 64px 16px;
  }
}


/* ══════════════════════════════════════════════════
   ДЕСКТОП (≥1024px)
   — Навигатор скрыт, аккордеон-адрес всегда развёрнут.
   — «Как купить»: две внутренние колонки.
   — Разделы: две колонки (поведение .page__columns).
   — Кнопки .page__action крупнее (шрифт 18) — правка задачи.
   — Нижний отступ секций удвоен (40 → 80) над разделителями.
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .tickets__navigator {
    display: none;
  }

  /* Аккордеоны: кнопки-toggle скрыты, тело всегда развёрнуто. */
  .tickets__accordion-toggle {
    display: none;
  }

  .tickets__accordion-body {
    display: flex;
    padding-top: 0;
    margin-top: 20px;
  }

  /* Второй блок («Файлы для скачивания») — разделитель сверху,
     как было до унификации (адрес идёт без линии, сразу под
     вводкой). Тело второго блока без своего margin — отступ под
     линией задаёт padding обёртки, чтобы не двоить. */
  .tickets__accordion + .tickets__accordion {
    border-top: 1px solid var(--color-black-soft-25);
    margin-top: 40px;
    padding-top: 40px;
  }

  .tickets__accordion + .tickets__accordion .tickets__accordion-body {
    margin-top: 0;
  }

  /* ── Центральный gap колонок контента ──
     ПРАВКА 11.08: было var(--inner-col-gap) — clamp(48px, 10vw - 72px, 72px),
     колонки читались слишком тесно. Приведено к gap между карточками
     блока «На сценах театра» (schedule.css): та же формула наклона
     10vw - 72px, сдвинуты границы — 72px до 1440, 96px на 1680.
     На 1440 старое и новое значения совпадают (оба 72px), разница
     видна только по краям диапазона.

     Локальная переменная, а НЕ переопределение --inner-col-gap:
     токен также держит сетку .page__intro и .page__bar в page.css,
     их вертикальный ритм трогать не нужно.

     ВНИМАНИЕ: ниже на контент колонок висит max-width: 75%.
     Широкий gap сужает саму колонку, 75% сужают текст ещё раз —
     на 1680 строка становится заметно у́же прежней. Если при
     проверке текст окажется слишком узким, крутить надо этот
     процент, а не gap.

     Тестовая правка на одной странице. Если заходит — значение
     переезжает в tokens.css как --inner-col-gap-wide и раскатывается
     на остальные текстовые страницы. */
  .page--tickets {
    --text-col-gap: clamp(72px, 10vw - 72px, 96px);
  }

  /* Основной двухколоночный контейнер текстовых страниц живёт
     в page.css (.page__columns, gap: var(--inner-col-gap)). Здесь
     .tickets__sections несёт оба класса, но перебиваем и общий —
     специфичность (0,2,0) против (0,1,0), значение то же самое.

     Только column-gap, не шорткат gap: последний выставляет и row-gap,
     перебивая row-gap: 0 у .tickets__sections ниже — секции
     разъезжаются по вертикали на величину центрального отступа. */
  .page--tickets .page__columns {
    column-gap: var(--text-col-gap);
  }

  /* ── Блок «Как купить»: обёртка + две внутренние колонки ── */
  .tickets__how-wrap {
    padding: 96px var(--inner-pad-x) 0;
  }

  .tickets__how-cols {
    display: flex;
    align-items: flex-start;
    gap: var(--text-col-gap);
  }

  .tickets__how-col {
    flex: 1;
    min-width: 0;
  }

  /* Контент внутри каждой десктопной колонки занимает 3/4 её
     ширины. Верхний блок ограничиваем на уровне статьи целиком,
     а в нижних секциях — на уровне непосредственных элементов,
     чтобы горизонтальные разделители секций оставались во всю
     ширину колонки. Мобильную и планшетную версии не затрагиваем.

     ПРАВКА 11.08: отключено. Правило из июльской редакции, к тесту
     центрального gap отношения не имеет — но именно оно даёт
     «колонки стали сильно уже» при выкатке этого файла на живой
     шаблон. Возвращать вместе с остальной июльской типографикой,
     осознанно и отдельной задачей.
  .tickets__how-col > .page__article,
  .tickets__sections > .page__section > * {
    max-width: 75%;
  } */

  /* ── Блок «Остальные разделы» ── */
  /* Разделитель: инсет под десктопные --inner-pad-x. Верхний
     отступ увеличен вдвое (64 → 128px), нижний остаётся 64px. */
  .tickets__split {
    margin: 128px var(--inner-pad-x) 64px;
  }

  /* Бэкенд выводит плоский список секций. Grid автоматически
     ставит блоки по строкам: первый — слева, второй — справа,
     третий — в следующей строке слева и т. д. Количество строк
     не зашито в CSS, поэтому добавление/удаление секций не требует
     правок шаблона или стилей. */
  .tickets__sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: var(--text-col-gap);
    row-gap: 0;
    align-items: stretch;
  }

  .tickets__sections > .page__section {
    min-width: 0;
    padding-bottom: 80px;
  }

  /* Первые два элемента образуют верхний ряд двух колонок. */
  .tickets__sections > .page__section:nth-child(-n + 2) {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* Начиная со второго ряда, разделители обеих колонок совпадают. */
  .tickets__sections > .page__section:nth-child(n + 3) {
    padding-top: 40px;
    border-top: 1px solid var(--color-black-soft-25);
  }

  /* Последний блок каждой колонки — без лишнего нижнего хвоста.
     Для чётного и нечётного количества секций это всегда два
     последних DOM-элемента (или все элементы, если их меньше двух). */
  .tickets__sections > .page__section:nth-last-child(-n + 2) {
    padding-bottom: 0;
  }

  /* Кнопки-ссылки на странице крупнее: шрифт 18 (вместо 15).
     Бьёт по всем .page__action страницы — и «Перейти к афише»
     в блоке «Как купить», и CTA разделов — чтобы чёрные плашки
     были единого размера. */
  .page--tickets .page__action {
    font-size: 18px;
  }

  /* Отступ от заголовка до текста — в 2 раза меньше:
     заголовок секции 70 → 35. Скоуп .page--tickets, чтобы не
     задеть другие страницы. */
  .page--tickets .page__section-title {
    margin-bottom: 35px;
  }

  /* Подзаголовок статьи (На сайте / Онлайн / В кассе): отступ до
     текста держим БОЛЬШЕ абзацного (.page__article-intro даёт
     16px между абзацами) — иначе подзаголовок «прилипает» к
     тексту. 24px даёт читаемую иерархию «подзаголовок → абзацы». */
  .page--tickets .page__article-title {
    margin-bottom: 24px;
  }

  /* ── Правая внутренняя колонка «В кассе театра» ──
     Все тексты под заголовком — 20px: вводка, строки адреса/
     режима/оплаты (.page__article-text) и ссылки на файлы.
     Заголовок h3 не трогаем. */
  .tickets__how-col--info .page__article-intro,
  .tickets__how-col--info .page__article-text,
  .tickets__how-col--info .page__doc-link {
    font-size: 20px;
  }

  /* Увеличенный отступ между строками-«абзацами» адреса/режима/
     оплаты (было 16). */
  .tickets__how-col--info .page__info {
    gap: 24px;
  }
}