/* ============================================================
   SHOW-PAGE.CSS — Специфика страницы спектакля
   Театр на Таганке

   Форк actor-page.css. Hero, play/pause, crumb — идентичны.
   Отличия:
     — бейдж (аватар + жанр) в правом нижнем углу hero
     — блок info (название + мета-поля + CTA) вместо bio
     — на десктопе hero на всю ширину (не двухколоночный)

   Инкремент 1: мобилка
   ============================================================ */


/* ══════════════════════════════════════════════════
   КОРЕНЬ
   ══════════════════════════════════════════════════ */
.show {
  background-color: var(--color-bg-warm);
  position: relative;
}


/* ══════════════════════════════════════════════════
   HERO — мобилка
   83dvh, фото cover, градиенты, крошка, play/pause.
   ══════════════════════════════════════════════════ */
.show__hero {
  position: relative;
  width: 100%;
  height: 89.5svh;
  overflow: hidden;
  background-color: var(--color-black-soft);
}

.show__hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.show__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Видео-оверлей. Создаётся JS при наличии data-video.
   Один элемент, loop, без реверса. */
.show__hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) ease;
  z-index: 1;
}
.show__hero.is-playing .show__hero-video,
.show__hero.is-paused  .show__hero-video { opacity: 1; }

/* Видео закончилось — плавный fade-out к фото */
.show__hero.is-video-ending .show__hero-video {
  opacity: 0;
  transition: opacity 600ms ease;
}


/* ══════════════════════════════════════════════════
   HERO OVERLAY — затемнение поверх фото/видео
   ══════════════════════════════════════════════════ */
.show__hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .035);
  pointer-events: none;
  z-index: 2;
}


/* ══════════════════════════════════════════════════
   КНОПКА PLAY/PAUSE
   ══════════════════════════════════════════════════ */
.show__hero-play {
  position: absolute;
  left: 10px;
  bottom: 24px;
  width: 50px;
  height: 50px;
  background-color: var(--color-black-ui);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 11;
}
.show__hero-play:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

.show__hero:not([data-video]) .show__hero-play { display: none; }

.show__hero-play-icon--pause {
  display: block;
  width: 14px;
  height: 16px;
  border-left: 4px solid var(--color-white);
  border-right: 4px solid var(--color-white);
}

.show__hero-play-icon--play {
  display: block;
  width: 0;
  height: 0;
  border-left: 14px solid var(--color-white);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 4px;
}

.show__hero-play .show__hero-play-icon--pause { display: none; }
.show__hero.is-playing .show__hero-play .show__hero-play-icon--play  { display: none; }
.show__hero.is-playing .show__hero-play .show__hero-play-icon--pause { display: block; }


/* ══════════════════════════════════════════════════
   БЕЙДЖ HERO — правый нижний угол
   Аватар режиссёра (круг с backdrop-blur) + жанр/возраст.
   ══════════════════════════════════════════════════ */
.show__hero-badge {
  position: absolute;
  right: 13px;
  bottom: 33px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  z-index: 11;
  /* Не даём длинному жанру дойти до кнопки плеера слева
     (плеер: 10+50=60px, right бейджа 13px, минимум ~8px воздуха) */
  max-width: calc(100vw - 90px);
}

/* ── ВИДЕО АКТИВНО: логотип схлопывается в свой правый нижний угол ──
   Глобальный style.css анимирует .is-video-mode от top-left со
   сдвигом translate. На странице спектакля нужно масштабирование
   от bottom-right без сдвига (квадрат «оседает» в свой угол).
   Переопределяем локально, глобальный style.css не трогаем (он
   общий для главной). Специфичность (0,3,0) > глобальной (0,2,0).
   Десктопное значение — в @media min-width:1024px ниже. */
.show__hero .header__brand-block.is-video-mode {
  transform-origin: bottom right;
  transform: scale(0.92);
  background-color: transparent;
}

.show__hero-badge-pushka {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  backdrop-filter: blur(17.5px);
  -webkit-backdrop-filter: blur(17.5px);
  background: rgba(138, 138, 138, 0.5);
  flex-shrink: 0;
}

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

.show__hero-badge-genre {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-bg-warm);
  text-align: right;
  margin: 0;
}


/* ══════════════════════════════════════════════════
   HERO-META + DIVIDER — десктоп-only
   На мобилке скрыт.
   ══════════════════════════════════════════════════ */
.show__hero-meta    { display: none; }
.show__hero-divider { display: none; }


/* ══════════════════════════════════════════════════
   БЛОК INFO: название + бар + подзаголовок + мета + CTA
   ══════════════════════════════════════════════════ */
.show__info {
  background-color: var(--color-bg-warm);
  padding: 10px 8px 80px;
}

.show__info-inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.show__info-heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.show__info-title-wrap {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  gap: 12px;
}

.show__info-title-wrap .show__info-bar {
  height: 16px;
}

.show__info-title {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 74px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--color-black-soft);
  text-transform: uppercase;
  margin: 0;
hyphens: manual;
-webkit-hyphens: manual;
overflow-wrap: normal;
}

.show__info-bar {
  width: 100%;
  height: 1px;
  background-color: var(--color-black-soft);
}

.show__info-subtitle {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 0;
}

.show__info-details {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.show__info-fields {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.show__info-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.show__info-label {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-black-soft);
  margin: 0;
}

.show__info-value {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 0;
}

.show__info-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  background-color: var(--color-black-soft);
  color: var(--color-bg-warm);
  border: none;
  border-radius: var(--card-radius);
  /* Типографика — как у кнопок покупки билета (.ticket-btn в style.css):
     акцидентная гарнитура, body-вес, 18px, тот же трекинг. Правило базовое,
     поэтому одинаково работает и в мобильном блоке .show__info, и в CTA
     под hero (.show__hero-meta-cta). Шаг на 20px с 1680 — в конце файла,
     там же, где он у .ticket-btn. */
  font-family: var(--font-accent);
  font-weight: var(--font-weight-body);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration-fast) ease;
}
.show__info-cta:hover { opacity: 0.8; }
.show__info-cta:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}


/* ══════════════════════════════════════════════════
   О СПЕКТАКЛЕ — серый фон
   Структура по Figma (node 3190:10390):
     — Заголовок: Pragmatica Extended Extra Bold 32px
     — Видеоплеер: иконка play + таймкод + прогресс-линия
     — Краткий лид (18px Book)
     — Описание (20px Book, line-height 1.35)
     — Ссылка «Полное описание» (20px Medium, dotted underline)
     — Дата премьеры (20px Medium)
   ══════════════════════════════════════════════════ */
.show__about {
  background-color: var(--color-grey-warm, #ebeae4);
  padding: 40px 10px 80px;
  display: flex;
  flex-direction: column;
}

.show__about-title {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-black);
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-black-soft);
  margin: 0;
}


/* ── Аудиоплеер ── */
/* Плашка целиком работает как прогресс-бар: полупрозрачная серая
   подложка заливается чёрным слева направо по мере воспроизведения,
   а иконка, лейбл и таймкод в закрашенной части читаются белыми.
   Механика — слой-двойник .show__about-player-fill (см. ниже). */
.show__about-player {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 64px;
  padding: 16px;
  border-radius: var(--card-radius);
  background: var(--color-black-soft-04);
  overflow: hidden;
  transition: background var(--duration-fast) ease;
}
@media (hover: hover) {
  .show__about-player:hover { background: var(--color-black-soft-10); }
}

/* Чёрный слой поверх контента. Внутри — копия строки кнопки
   (создаёт JS, aria-hidden), поэтому геометрия совпадает 1-в-1.
   Виден только слева от границы прогресса: clip-path режет справа.
   pointer-events: none — клики проходят насквозь на кнопку и seek. */
.show__about-player-fill {
  position: absolute;
  inset: 0;
  padding: 16px;
  background: var(--color-black-soft);
  clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0);
  pointer-events: none;
  transition: clip-path var(--duration-fast) linear;
}

.show__about-player-fill .show__about-player-label,
.show__about-player-fill .show__about-player-time,
.show__about-player-fill .show__about-player-icon {
  color: var(--color-white);
}

.show__about-audio { display: none; }

.show__about-player-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.show__about-player-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Лейбл — виден на всех разрешениях (десктоп переопределяет размер) */
.show__about-player-label {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
}

.show__about-player-icon {
  width: 19px;
  height: 24px;
  color: var(--color-black-soft);
  flex-shrink: 0;
}

.show__about-player-icon--pause { display: none; }
.show__about-player.is-playing .show__about-player-icon--play  { display: none; }
.show__about-player.is-playing .show__about-player-icon--pause { display: block; }

.show__about-player-time {
  margin-left: auto;
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  flex-shrink: 0;
}

/* Полоса перемотки — полностью невидимая хит-зона 12px по низу плашки.
   Лежит поверх заливки (у той pointer-events: none), поэтому клик
   по низу перематывает, а по остальной площади — play/pause. */
.show__about-player-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  padding: 0;
  cursor: pointer;
  z-index: var(--z-elevated);
}

/* Обе полоски не рисуются: единственный индикатор прогресса —
   чёрная заливка плашки. Элементы оставлены в разметке как хит-зона
   и точка опоры для расчёта seek. */
.show__about-player-progress-bg,
.show__about-player-progress-fill { display: none; }


/* ── Скрытый текст (expand/collapse) ── */
.show__about-text-more[hidden] {
  display: none;
}

.show__about-text-more {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 28px;
}

.show__about-expand.is-hidden {
  display: none;
}


/* ── Лид (подпись «кто читает») ── */
.show__about-lead {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-black-50);
  margin: 8px 0 0;
}


/* ── Описание (полный текст) ── */
.show__about-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 64px;

  /* Выключка по ширине на всех ширинах — запрос заказчика.
     Словарные переносы обязательны: без них колонка 355px рвётся
     пробелами. Требуется lang="ru" на <html> (есть).

     Вариант «на мобилке по левому краю» пробовали и откатили: правый край
     получался слишком рваным. Замер ровности (недобор строки до правого
     края, в долях ширины колонки): без переносов 86.2%, с 8 3 3 — 92.6%,
     с полностью снятыми ограничениями — 93.8%, и выше по левому краю
     не поднять, дальше упирается в длину слов. Выключка даёт 100%,
     и заказчик выбрал её, приняв растяжку пробелов как цену.

     Пороги замерены на живых абзацах «Вишнёвого сада», колонка 355px,
     Chrome (средняя растяжка пробела / строк растянутых сильнее чем втрое):
       7 4 3 + pretty   ×2.85 / 4, переносов 3
       9 3 3            ×2.76 / 3
       8 3 3            ×2.43 / 1, переносов 5   ← принято
     Первое число — минимальная длина слова, и именно оно защищает
     короткие слова: при пороге 3 буквы до дефиса рвутся только слова
     от 8 букв, «дома» и «песни» остаются целыми.

     Важно про механику: разбивка в Chrome жадная — берётся самая поздняя
     разрешённая точка, которая влезает. Поэтому поднятие порога НЕ
     переносит разрыв правее, а просто отнимает вариант, слово остаётся
     целым и строка растягивается сильнее. Так вело себя прежнее 7 4 3.

     text-wrap: pretty убран — замер показал, что он либо ничего не
     меняет, либо ухудшает: на этих настройках давал ×3.20 вместо ×2.43.

     Safari hyphenate-limit-chars не поддерживает — для него пороги
     префиксными свойствами (аналога минимальной длины слова там нет,
     поэтому Safari ведёт себя как «auto 3 3»). -webkit-hyphenate-limit-lines
     даёт жёсткий запрет лесенки, но только в Safari; в Chrome и Firefox
     аналога нет.

     text-align и hyphens наследуются, поэтому правило покрывает весь
     rich-text внутри, включая .show__about-text-more. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 3 3;       /* Chrome 109+, Firefox 137+ */
  -webkit-hyphenate-limit-before: 3;  /* Safari: те же пороги префиксами */
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-lines: 2;   /* жёсткий лимит лесенки — только Safari */
  overflow-wrap: break-word;          /* страховка от длинных URL и имён из CMS */
}


/* Защита от инлайновых стилей из CMS.
   На бою у каждого параграфа описания стоит собственный
   style="text-align: justify" — контент выравнивали в WYSIWYG-редакторе.
   Инлайн сильнее любого правила без !important, поэтому выравнивание,
   заданное на .show__about-text, до текста не доходило — любая правка
   выравнивания в CSS была бы бесполезной.
   Возвращаем управление контейнеру — это и есть контракт .rich-text:
   типографику задаёт родитель, контент только наследует. Один из немногих
   случаев, где !important оправдан: перебить инлайн иначе нечем.
   Ограничено p и div намеренно — у .rich-text th/td своё выравнивание,
   его ломать нельзя. Если бэкенд перестанет писать инлайн, правило
   можно удалить. */
.show__about-text p,
.show__about-text div {
  text-align: inherit !important;
}

.show__about-text p {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
  margin: 0;
}


/* ── Ссылка «Полное описание» ── */
.show__about-expand {
  display: inline;
  padding: 0;
  margin-top: 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 8%;
  text-underline-offset: 10%;
  text-align: left;
  transition: opacity var(--duration-fast) ease;
}
.show__about-expand:hover { opacity: 0.7; }
.show__about-expand:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}


/* ── Дата премьеры ── */
.show__about-premiere {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  margin: 28px 0 0;
  padding-bottom: 28px;
}


/* Контролы появляются только на десктопе при ховере на секцию */
.show__gallery-nav {
  display: none;
}


/* ══════════════════════════════════════════════════
   ГАЛЕРЕЯ — горизонтальный scroll-slider
   Собственные классы (не actor-page).
   Мобилка: одно фото на экран, свайп.
   Десктоп: 3 фото видимых, gap 96px.
   ══════════════════════════════════════════════════ */
.show__gallery {
  background-color: var(--color-bg-warm);
  padding: 108px 0 0;
  margin-top: 0;
}

.show__gallery-track {
  padding-left: 10px;
  scroll-padding-left: 10px;
  /* Симметрично с scroll-padding-left: говорим браузеру,
     при snap-end считать офсет 10px от правой границы viewport.
     Парный фикс с .show__gallery-photo:last-child ниже. */
  scroll-padding-right: 10px;
}

.show__gallery-items {
  gap: 10px;
}

.show__gallery-items::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 10px;
}

.show__gallery-photo {
  flex: 0 0 calc(100vw - 20px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--card-radius);
  scroll-snap-align: start;
  /* .show__gallery-photo теперь <button> (a11y: фокус, Enter/Space).
     Сбрасываем нативные стили кнопки. */
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

/* Последняя карточка снапится по правому краю — она
   останавливается вровень с правым padding'ом (scroll-padding-right
   на .show__gallery-track), а слева виден peek предыдущей.
   Без этого правила последняя карточка прилипает к ЛЕВОМУ краю
   viewport (snap-align: start), и справа остаётся пустота шириной
   100vw минус одна карточка. Проверенный паттерн из schedule. */
.show__gallery-photo:last-child {
  scroll-snap-align: end;
}

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

/* Видео-слайд галереи.
   Обложки-картинки нет — кадр берётся из самого <video>
   (preload="metadata" + #t=0.1 показывает первый кадр).
   Поверх — чёрный квадрат-контрол с белым play (стиль 1-в-1
   с .show__hero-play, иконка через бордеры, без ассетов). */
.show__gallery-photo--video {
  position: relative;
}

.show__gallery-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.show__gallery-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: var(--z-elevated);
}

/* Иконка play — отдельный SVG-ассет фоном (не border-триангл:
   зазубрины на диагонали; не mask/data-URI: нестабильный рендер
   в части движков). Внешний .svg браузер рендерит как полноценное
   векторное изображение со сглаживанием. Цвет фигуры — внутри
   самого файла (fill #111111 = --color-black-ui): при смене токена
   обновить и play-dark.svg. Разметка не меняется.
   Путь: из components/show-page/ два уровня вверх до корня Layout/. */
.show__gallery-play-icon {
  width: 16px;
  height: 18px;
  margin-left: 4px;
  border: 0;
  background-color: transparent;
  background-image: url("/play-dark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.show__gallery-indicator {
  margin-top: 24px;
}


/* ══════════════════════════════════════════════════
   ПУБЛИКАЦИИ СМИ — слайдер цитат
   Собственные классы (не actor-page).
   ══════════════════════════════════════════════════ */
.show__press {
  background-color: var(--color-bg-warm);
  padding: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 40px;
}

.show__press-divider {
  height: 1px;
  border: none;
  background: var(--color-black-soft);
  margin: 0 10px;
}

.show__press-title {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-black);
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--color-black-soft);
  margin: 0;
  padding: 0 10px;
}

.show__press-viewport { margin-top: 70px; }
.show__press-controls { margin-top: 64px; }

.show__press-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.show__press-track {
  display: flex;
  transition: transform var(--duration-base) var(--ease-out-smooth);
  will-change: transform;
}

.show__press-track.is-dragging {
  transition: none;
}

.show__press-quote {
  flex: 0 0 100%;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.show__press-quote-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.show__press-quote-icon {
  width: 28px;
  height: 21px;
  display: block;
  color: var(--color-black-soft);
  flex-shrink: 0;
}

.show__press-quote-text {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  margin: 0;
}

.show__press-quote-divider {
  width: 100%;
  height: 10px;
  background-color: var(--color-black-soft);
}

.show__press-quote-source {
  font-family: var(--font-main);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 0;
}

/* Ссылка = название издания. Цвет наследует от source (чёрный),
   подчёркнута — это и есть единственный кликабельный элемент
   (текст цитаты без ссылки, кнопки «Читать» больше нет). */
.show__press-quote-link {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) ease;
}

.show__press-quote-link:hover {
  color: var(--color-brand);
}

.show__press-quote-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Контролы */
.show__press-controls {
  max-width: 355px;
  margin-right: auto;
  padding: 0 10px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
}

.show__press-arrows { display: none; }

.show__press-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.show__press-dot {
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show__press-dot::after {
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  background-color: var(--color-black-soft);
  transition: width var(--duration-fast) ease,
              height var(--duration-fast) ease;
}

.show__press-dot.is-active::after {
  width: 16px;
  height: 16px;
}

/* Одна цитата — скрываем контролы */
.show__press.has-single-quote .show__press-controls { display: none; }
.show__about-sponsors {
  margin-top: 0;
  padding-top: 64px;
}

.show__about-sponsors .show__section-line {
  margin-left: 0;
  margin-right: 0;
  height: 1px;
  border: none;
  background: var(--color-black-soft-25);
}


.show__about-sponsors .show__section-label {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-l);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-black-soft);
  padding: 0;
  margin: 28px 0 0;
}

.show__sponsors-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 48px;
  margin-top: 40px;
  align-items: center;
}

.show__sponsors-logo img {
  display: block;
  height: auto;
  max-height: 28px;
}

.show__tickets-pushka-text {
  padding: 0;
  margin-bottom: 28px;
}

/* ══════════════════════════════════════════════════
   ДАТЫ И БИЛЕТЫ
   Тёплый фон. Структура по Figma (node 3190:10451):
     — Заголовок: Extended Black 32px
     — Маркер Пушкинской карты (точка 6px + текст 18px Medium)
     — Разделитель 1px
     — Список карточек дат, gap 48px
   Каждая карточка:
     — Дата: Extended Bold 56px / 0.85
     — День + время: Medium 18px
     — Кнопка «Купить билеты» (чёрная, 60px)
     — Кнопка «Ticketland» (outlined, 60px)
     — Опционально: бейдж Пушкинской карты (круг 58px, чёрный фон)
   ══════════════════════════════════════════════════ */
.show__tickets {
  background-color: var(--color-bg-warm);
  padding: 40px 10px 0;
}

.show__tickets-header {
  display: flex;
  flex-direction: column;
}

.show__tickets-divider {
  height: 1px;
  border: none;
  background: var(--color-black-soft);
  margin: 0 0 40px;
}

.show__tickets-title {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-black);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: var(--color-black-soft);
  margin: 0;
  white-space: pre-line;
}


/* ── Список дат ── */
/* На мобилке tickets-info и tickets-dates — скрыты (отдельные блоки) */
.show__tickets-columns { display: contents; }
.show__tickets-info { display: none; }
.show__tickets-dates { display: contents; }

/* Мобильные аккордеоны: ПК + Полезная информация */
.show__tickets-extras {
  margin-top: 64px;
}

.show__tickets-extras .show__extras-panel-inner {
  padding: 28px 0;
}

.show__tickets-extras .show__extras-btn {
  padding-left: 0;
  padding-right: 0;
}

.show__tickets-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 64px;
}


/* ── Одна карточка даты ── */
.show__ticket {
  display: flex;
  flex-direction: column;
  gap: 12.8px;
}

.show__ticket-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.show__ticket-date-col {
  display: flex;
  flex-direction: column;
  gap: 6.4px;
}

.show__ticket-date {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 0;
  text-transform: uppercase;
}

.show__ticket-day {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 0;
}

.show__ticket-dot {
  margin: 0 2px;
}


/* ── Бейдж Пушкинской карты у даты ── */
.show__ticket-pushka-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-black-ui);
  flex-shrink: 0;
}

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


/* ── Кнопки ── */
.show__ticket-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Сами кнопки билетов — общий компонент .ticket-btn из style.css
   (.ticket-btn--primary / --secondary / --partner / --ticketland +
   .ticket-btn__sep). Слот-контракт партнёра, эталон Ticketland и
   разделитель переехали туда без изменений. Здесь — только
   раскладка-обёртка .show__ticket-buttons выше. */


/* ══════════════════════════════════════════════════
   ДВОЙНОЙ АККОРДЕОН: Пушкинская карта + Полезная информация
   Паттерн из footer__btns — две склеенные кнопки.
   Адаптация на тёплый фон (чёрный текст, border чёрный 10%).
   Grid-trick для плавного раскрытия (как в footer).
   ══════════════════════════════════════════════════ */
.show__extras-accordion {
  display: flex;
  flex-direction: column;
}

.show__extras-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 0 var(--space-m);
  background: none;
  border: none;
  color: var(--color-black-soft);
  font-family: var(--font-accent);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: opacity var(--duration-fast) ease;
}
.show__extras-btn:hover        { opacity: 0.70; }
.show__extras-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }

.show__extras-btn--top    { border-radius: var(--card-radius) var(--card-radius) 0 0; }
.show__extras-btn--bottom {
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  border-top: 1px solid var(--color-black-soft);
}

/* При открытии кнопка затемняется */
.show__extras-btn[aria-expanded="true"] { opacity: 0.50; }

/* Шеврон */
.show__extras-chevron {
  transition: transform var(--duration-fast) ease;
  flex-shrink: 0;
}
.show__extras-btn[aria-expanded="true"] .show__extras-chevron {
  transform: rotate(180deg);
}

/* Панель: grid-trick для плавного раскрытия */
.show__extras-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out-smooth);
  overflow: hidden;
}

.show__extras-panel[aria-hidden="false"] {
  grid-template-rows: 1fr;
}

.show__extras-panel > * {
  overflow: hidden;
  min-height: 0;
}

.show__extras-panel-inner {
  display: flex;
  flex-direction: column;
  padding: 28px var(--space-m);
  gap: 28px;
}

/* Группа: label + value */
.show__extras-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-black-soft);
}
.show__extras-group:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Мобильная «Полезная информация»: без разделителей между группами */
.show__tickets-extras .show__extras-group {
  border-bottom: none;
  padding-bottom: 0;
}

.show__extras-label {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 0;
}

.show__extras-value,
.show__extras-text {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 16.5px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
  margin: 0;
}

.show__extras-link {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--color-black-soft);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 8%;
  text-underline-offset: 10%;
  transition: opacity var(--duration-fast) ease;
}
.show__extras-link:hover { opacity: 0.7; }


/* ══════════════════════════════════════════════════
   РАЗДЕЛИТЕЛЬ МЕЖДУ СЕКЦИЯМИ
   ══════════════════════════════════════════════════ */
.show__divider {
  height: 1px;
  border: none;
  background: var(--color-black-soft-25);
  margin: 0 10px;
}

/* Внутренний разделитель над списком — вертикальный воздух между
   header и list. На мобилке горизонталь = 0 (section padding 10 уже
   даёт нужный отступ от края экрана, совпадая с внешним divider'ом). */
.show__divider--inner {
  margin: 40px 0;
}

/* Оба divider'а (внутри cast и сразу после cast) показываются
   ТОЛЬКО в режиме списка. В режиме карточек — скрыты. */
.show__cast + .show__divider,
.show__cast .show__divider {
  display: none;
}
.show__cast.is-list-view + .show__divider,
.show__cast.is-list-view .show__divider {
  display: block;
}


/* ══════════════════════════════════════════════════
   РОЛИ И ИСПОЛНИТЕЛИ
   Паттерн 1-в-1 как schedule/news на главной.
   Секция → заголовок → табы → slider → track → cards → индикатор.
   ══════════════════════════════════════════════════ */
.show__cast {
  background-color: var(--color-grey-warm, #ebeae4);
  padding: 40px 10px 60px;
  overflow-x: hidden;
}

/* Режим карточек: разделителя перед «Командой» нет, поэтому нижний
   воздух секции складывается с padding-top команды и зазор выходит
   больше, чем в режиме списка. Уравниваем — итог 40px (24 + 16). */
.show__cast:not(.is-list-view) {
  padding-bottom: 24px;
}

/* Шапка cast — CSS-grid 2 колонки × 2 ряда:
   col 1 row 1: h2; col 1 row 2: tabs (если есть); col 2: toggle.
   align-items: baseline — тоггл по text-baseline даты в табе
   (или h2 в --no-tabs на десктопе; на мобилке --no-tabs тоггл по
   верху h2 — отдельный override через align-self: start). */
.show__cast-header {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: baseline;
}

/* Заголовок «Роли и исполнители». Глобальный .section-title даёт
   36px/0.85/-0.035em — локально приводим к единому виду с
   «Команда спектакля»: 32px/0.9/-0.035em. show-page.css грузится
   после style.css → одного класса достаточно для перебивания.
   Глобальный .section-title не трогаем (общий для других страниц). */
.show__cast-heading {
  grid-column: 1;
  grid-row: 1;
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin: 0;                   /* отступ до табов задаём margin-top на них */
}

/* Табы: компенсируем padding секции слева (-10), скролл на мобилке.
   Справа negative margin не нужен — там теперь живёт тоггл вида,
   расширять scroll-зону на 10px вправо некуда.
   В grid-шапке табы — col 1 row 2; margin-top задаёт отступ от h2. */
.show__cast-tabs {
  grid-column: 1;
  grid-row: 2;
  margin-top: 28px;            /* десктопное значение — в @media 1024+ */
  display: flex;
  gap: 40px;
  margin-left: -10px;
  margin-right: 0;
  padding-left: 10px;
  padding-right: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.show__cast-tabs::-webkit-scrollbar { display: none; }

.show__cast-tab {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Slider-section: margin -10 компенсирует padding секции */
.show__cast-slider {
  margin-top: 40px;
  margin-left: -10px;
  margin-right: -10px;
  transition: opacity 120ms ease, transform 120ms ease;
}

.show__cast-nav {
  display: none;
}

.show__cast-slider.is-transitioning {
  opacity: 0;
  transform: translateY(5px);
}

/* Track: нативный горизонтальный скролл со snap */
.show__cast-track {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-left: 10px;
  scroll-padding-left: 10px;
  scroll-padding-right: 10px;
  overscroll-behavior-x: contain;
  box-sizing: content-box;
}
.show__cast-track::-webkit-scrollbar { display: none; }

/* Cards: flex-ряд */
.show__cast-cards {
  display: flex;
  gap: 48px;
  width: max-content;
}

.show__cast-cards::after {
  content: '';
  display: block;
  width: 10px;
  flex-shrink: 0;
}

/* Карточка: 280px фиксированная ширина */
.show__cast-card {
  flex: 0 0 280px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}

.show__cast-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--card-radius);
  overflow: hidden;
  background-color: var(--color-placeholder);
  flex-shrink: 0;
}

.show__cast-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ────────────────────────────────────────────
   ЛАЙВ-ФОТО актёра — видео-превью поверх фото.

   <video> создаётся JS-ом по первому hover/intersection
   (не в HTML — экономим запросы и память на карточках без
   взаимодействия). Размещается абсолютно поверх .show__cast-card-img,
   fade 400ms через класс .is-playing на карточке.

   Механика: forward → ended → src=reverse → ended → src=forward → ...
   пока триггер активен (см. show-page.js, секция castLive).

   Контракт CMS: data-video и data-video-reverse на .show__cast-card
   (см. README). Если атрибутов нет — карточка остаётся статичным
   фото, JS пропускает её.
   ──────────────────────────────────────────── */
.show__cast-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 400ms var(--ease-out-smooth);
  pointer-events: none;
  /* iOS Scroll Anchoring — тот же фикс, что в галерее.
     Без этого декод lazy-видео может откатывать scrollLeft трека. */
  overflow-anchor: none;
}

.show__cast-card.is-playing .show__cast-card-video {
  opacity: 1;
}

.show__cast-card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.show__cast-card-role {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-black-soft);
  margin: 0;
}

.show__cast-card-name {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 60px;
  line-height: 0.875;
  letter-spacing: -0.025em;
  color: var(--color-black-soft);
  text-transform: uppercase;
  margin: 0;
  overflow: visible;
  width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-chars: 7 3 3;
  hyphenate-limit-chars: 7 3 3;
}


/* Scroll-индикатор — как schedule__indicator */
.show__cast-indicator {
  margin-top: 40px;
  padding: 0 10px;
}

.show__cast-indicator-track {
  position: relative;
  width: 100%;
  height: 3px;
  background: var(--color-black-soft-10);
  border-radius: 2px;
}

.show__cast-indicator-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-black-soft);
  border-radius: 2px;
}


/* Когда у спектакля только один состав (нет табов) — компенсируем
   отступ от заголовка до карточек, пустой контейнер табов внутри
   шапки скрываем (иначе он добавил бы вертикальный gap под h2),
   а тоггл переезжает в row 1 — встаёт рядом с h2 (по нижнему
   краю h2 на мобилке / по text-baseline h2 на десктопе). */
.show__cast--no-tabs .show__cast-tabs {
  display: none;
}
.show__cast--no-tabs .show__cast-view-toggle {
  grid-row: 1;
  align-self: start;            /* мобилка: по верху h2 (десктоп — baseline ниже) */
}
.show__cast--no-tabs .show__cast-slider {
  margin-top: 40px;
}


/* ──────────────────────────────────────────────────
   ПЕРЕКЛЮЧАТЕЛЬ ВИДА: карточки ⇄ список
   Мобилка (база): прямоугольная коробка 80×48 — иконка внутри;
     фон совпадает с фоном секции (--color-grey-warm),
     рамка 1px black-soft-25 — кнопка визуально «висит» над табами,
     даты в длинной полосе скроллятся под ней не задевая иконку.
     Наследует align-items: baseline от .show__cast-header.
   Десктоп: текст-ссылка без коробки (override в @media 1024+).
   В --no-tabs на мобилке тоггл переезжает в row 1 и встаёт по
     верху h2 (align-self: start).
   Подпись/иконка показывают ЦЕЛЬ переключения:
     вид карточек     → «Списком» / иконка «три полосы»
     вид списка       → «Плиткой» / иконка «4 клетки»
   Активный вид помечается классом .is-list-view на .show__cast.
   ────────────────────────────────────────────────── */
.show__cast-view-toggle {
  grid-column: 2;
  grid-row: 2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  background: var(--color-grey-warm, #ebeae4);
  border: none;
  color: var(--color-black-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.show__cast-view-toggle:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Текстовые подписи — только десктоп */
.show__cast-view-toggle-text { display: none; }

/* Иконки — мобилка */
.show__cast-view-toggle-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.show__cast-view-toggle-icon svg { display: block; }

/* По умолчанию (вид карточек) показываем иконку «список» */
.show__cast-view-toggle-icon--grid { display: none; }
/* В режиме списка — иконку «плитка» */
.show__cast.is-list-view .show__cast-view-toggle-icon--list { display: none; }
.show__cast.is-list-view .show__cast-view-toggle-icon--grid { display: inline-flex; }


/* ──────────────────────────────────────────────────
   ВИД «СПИСКОМ» — типографика и раскладка 1-в-1 с
   блоком «Команда спектакля» (.show__team-list).
   Наполняется JS из карточек. По умолчанию скрыт.
   ────────────────────────────────────────────────── */
.show__cast-list {
  display: none;          /* активируется .is-list-view; display:none убирает из a11y-дерева */
  flex-direction: column;
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
}

/* В режиме списка слайдер целиком скрыт (трек, навигация, индикатор-
   прогресс) — список показывается на его месте. Разделение блока
   cast от Команды даёт нижний .show__divider в HTML. */
.show__cast.is-list-view .show__cast-slider {
  display: none;
}
.show__cast.is-list-view .show__cast-list { display: flex; }

.show__cast-list-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.show__cast-list-role {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  margin: 0;
}

.show__cast-list-name {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 0;
}

/* ══════════════════════════════════════════════════
   КОМАНДА СПЕКТАКЛЯ
   Тёплый фон. Список пар: должность Book 18px / имя Medium 20px.
   ══════════════════════════════════════════════════ */
.show__team {
  background-color: var(--color-grey-warm, #ebeae4);
  padding: 16px 10px 80px;
}

.show__team-title {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-black);
  /* Единый размер с «Роли и исполнители» на мобилке:
     32px / 0.9 / -0.035em (см. .show__cast-heading ниже). */
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--color-black-soft);
  margin: 0 0 55px;
}

.show__team-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.show__team-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.show__team-role {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  margin: 0;
}

.show__team-name {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 0;
}

/* Верхний воздух у «Сцены» задаёт предыдущая секция.
   .show__tickets — на случай, когда CMS не отдала ни галерею,
   ни публикации: у билетов нет нижнего padding, и без этого
   правила «Сцена» вплотную прилипает к блоку билетов. */
.show__gallery + .show__stage,
.show__tickets + .show__stage {
  margin-top: 60px;
}
/* ══════════════════════════════════════════════════
   СЦЕНА — карточка-ссылка с фото зала
   Полная ширина, затемнение, название красным,
   ссылка «Полный состав» + шеврон, адрес внизу.
   ══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   СЦЕНА
   Фото зала, overlay, контент поверх.
   Мобилка: aspect-ratio 375/502, контент сверху-слева.
   Десктоп: aspect-ratio 2/1, контент по центру, кнопка.
   ══════════════════════════════════════════════════ */
.show__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 502;
  overflow: hidden;
  background-color: var(--color-black-soft);
}

.show__stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.show__stage-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(53,53,53,0.2), rgba(53,53,53,0.2)),
    linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  pointer-events: none;
}

.show__stage-content {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.show__stage-name {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-black);
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-white);
  margin: 0;
}

.show__stage-address {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--color-white);
  margin: 0;
}

.show__stage-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 0 16px;
  margin-top: 32px;
  background: var(--color-brand);
  color: var(--color-black-soft);
  border: none;
  border-radius: var(--card-radius);
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
}

.show__stage-btn svg {
  width: 28px;
  height: 24px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════
   ПОХОЖИЕ СПЕКТАКЛИ (переиспользует actor__repertoire)
   Специфика: отступ сверху 40px от сцены,
   стартовое скрытие карточек до инициализации JS.
   ══════════════════════════════════════════════════ */
.show__repertoire {
  padding-top: 40px;
  padding-bottom: 40px;
  
}

/* Мобилка: показываем только первые 2 карточки */
.show__repertoire .repertoire-page__card {
  display: flex;
}
.show__repertoire .repertoire-page__card:nth-child(n+3) {
  display: none;
}

/* Названия других спектаклей: переносы только по словам и существующим
   дефисам — JS подбирает шрифт чтобы слово влезло целиком в карточку.
   Без этого при узких карточках срабатывает наследуемый hyphens: auto
   из repertoire-page.css и режет «маньяк-цирюль-ник» по слогам. */
.show__repertoire .repertoire-page__card-title {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
}

/* ══════════════════════════════════════════════════
   ДЕСКТОПНЫЕ ИКОНКИ ШАПКИ (скрыты на мобилке)
   ══════════════════════════════════════════════════ */
.show__header-icons,
.show__header-menu-btn { display: none; }

.show__header-menu-icon {
  width: 24px;
  height: 24px;
  display: block;
  margin-left: 10px;
  flex-shrink: 0;
}

/* Десктопные элементы hero-meta скрыты на мобилке */
.show__hero-meta-side { display: none; }
.show__hero-quote { display: none; }

/* Десктопные элементы О спектакле скрыты на мобилке */
.show__about-divider,
.show__about-left { display: none; }
.show__about-columns { display: contents; }



.show__extras-accordion--pushka {
  display: none;
}


@media (max-width: 1023.98px) {
  .show__info-subtitle {
    margin-bottom: 24px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ▓▓▓  ДЕСКТОП (≥ 1024px)  ▓▓▓
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ────────────────────────────────────────────
     FIRST SCREEN — hero + название
     ──────────────────────────────────────────── */
  .show__first-screen {
    display: flex;
    flex-direction: column;
  }

  .show__header-menu-icon {
    display: none;
  }

  
.show__hero {
    width: 100%;
    /* Hero занимает экран так, что разделитель под названием
       оказывается на 1px ниже нижней границы viewport.
       
       Видимая часть hero-meta до разделителя:
         padding-top: 28px
       + одна строка h1: font-size × line-height (0.85)
       - ascender compensation: font-size × 0.1
       - descender compensation: font-size × 0.13
       + gap до разделителя: 20px
       + разделитель: 1px
       
       = 28 + fs×0.85 - fs×0.1 - fs×0.13 + 20 + 1
       = 49 + fs × 0.62
       
       fs = clamp(80px, 7.619vw, 128px)
       Нельзя clamp внутри calc напрямую, используем --show-title-fs */
    --show-title-fs: clamp(80px, 7.619vw, 128px);
    height: calc(100dvh - 49px - var(--show-title-fs) * 0.62);
    flex-shrink: 0;
    overflow: hidden;
  }

  .show__hero .header__brand-block {
    width:  clamp(128px, 10.714vw, 180px);
    height: clamp(128px, 10.714vw, 180px);
  }

 /* ────────────────────────────────────────────
     ЛОГОТИП — hover-анимация
     (правый нижний угол неподвижен, сверху/слева появляются отступы 16px)
     ──────────────────────────────────────────── */
  .show__hero .header__brand-block {
    --logo-size: clamp(128px, 10.714vw, 180px);
    --logo-inset: 16px;
    transform-origin: bottom right;
    transition: background-color var(--duration-base) ease,
                transform var(--duration-base) var(--ease-out-smooth);
  }

  .show__hero .header__brand-block .header__logo--final {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity var(--duration-base) ease;
    pointer-events: none;
  }

  .show__hero .header__brand-block:hover {
    background-color: transparent;
    transform: scale(calc((var(--logo-size) - var(--logo-inset)) / var(--logo-size)));
  }

  .show__hero .header__brand-block:hover .header__logo--final {
    opacity: 1;
  }

  /* ── ВИДЕО АКТИВНО: десктоп работает как мобилка ──
     На спектакле локальная hover-анимация логотипа (origin
     bottom-right, свой opacity:0) перебивает глобальный механизм
     .is-video-mode из style.css. Когда видео играет/на паузе —
     возвращаем поведение к глобальному эталону: лого с текстом
     видно, геометрия — translate(16,16) scale(0.7) от top-left
     (ровно как .header__brand-block.is-video-mode в style.css,
     @media min-width:1024px). Триггер .is-video-mode вешает JS. */
  .show__hero .header__brand-block.is-video-mode {
    transform-origin: bottom right;
    transform: scale(0.91);
    background-color: transparent;
  }

  .show__hero .header__brand-block.is-video-mode .header__logo--final {
    opacity: 1;
  }

  .show__hero-img,
.show__hero-video {
  object-position: center 35%;
}

  /* ────────────────────────────────────────────
     HERO BADGE — жанр + ПК, выравнивание по 4-й колонке
     ──────────────────────────────────────────── */
  .show__hero-badge {
    /* Начало 4-й колонки в hero-meta grid.
       Hero-meta gap = clamp(72px, 10vw-72px, 96px), не --inner-col-gap.
       left = pad + 3 * (colWidth + gap) = pad + 3*(W-2pad+gap)/4 */
    --hero-gap: clamp(72px, 10vw - 72px, 96px);
    left: calc(var(--inner-pad-x) + 3 * (100% - 2 * var(--inner-pad-x) + var(--hero-gap)) / 4);
    right: var(--inner-pad-x);
    bottom: 24px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .show__hero-badge-pushka {
    order: 1;
    flex-shrink: 0;
  }

  .show__hero-badge-genre {
    font-size: 22px;
    text-align: left;
    flex: 1;
  }

  .show__hero-play {
    left: var(--inner-pad-x);
  }

  .show__sponsors-logo img {
    max-height: 40px;
  }

  .show__about-sponsors .show__section-label {
  font-size: var(--font-size-xl);
}

  /* ────────────────────────────────────────────
     HERO-META — белая полоса под hero
     Grid 4 колонки. Название (3 кол) и мета-блок (4-я кол)
     выровнены по верху. Под ними — разделитель и подзаголовок
     на ширину 3 колонок.
     ──────────────────────────────────────────── */
  .show__hero-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--inner-col-gap);
    padding: 24px var(--inner-pad-x) 136px;
    align-items: start;
  }

  /* Левый блок: 3 колонки.
     Название → цитата (40px) → подзаголовок.
     Разделитель и подзаголовок ограничены 2/3 ширины. */
  .show__hero-meta-main {
    grid-column: 1 / 4;
    display: flex;
    flex-direction: column;
  }

  .show__hero-meta-name {
    font-family: var(--font-main);
    font-weight: var(--font-weight-book);
    font-size: clamp(80px, 7.619vw, 128px);
    line-height: 0.885;
    letter-spacing: -0.04em;
    color: var(--color-black-soft);
    text-transform: uppercase;
    margin: 0;
    margin-top: -0.1em;
    margin-bottom: -0.13em;
    margin-left: -10px;
    padding: 0 8px 0 0;
    hyphens: manual;
-webkit-hyphens: manual;
overflow-wrap: normal;
  }

  /* ── Крупная цитата (только десктоп) ── */
  .show__hero-quote {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 28px 0 0;
    padding: 0;
    border: none;
    width: calc((200% + var(--inner-col-gap)) / 3);
  }

  .show__hero-quote-wrap {
    position: relative;
  }

 .show__hero-quote-icon {
    position: absolute;
    top: 0.15em;
    left: 0;
    width: 36px;
    height: 28px;
    color: var(--color-brand);
    z-index: 1;
  }

  .show__hero-quote-text {
    font-family: var(--font-main);
    font-weight: var(--font-weight-book);
    font-size: clamp(28px, 2.679vw, 45px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-black-soft);
    margin: 0;
    text-indent: 48px;
  }

  /* Черта под кратким описанием — ровно одна колонка 4-колоночной
     сетки hero-meta.

     Считаем от ширины родителя (.show__hero-quote), потому что % внутри
     bar меряется от него. Пусть c — колонка, g — --inner-col-gap:
       main  (3 колонки)  = 3c + 2g
       quote = (2·main + g) / 3           (см. .show__hero-quote выше)
     Отсюда main = (3·quote − g) / 2, а
       c = (main − 2g) / 3 = quote/2 − 5g/6.
     На 1440: 718.28/2 − 60 = 299.14px = (1412.6 − 3·72)/4. ✔ */
  .show__hero-quote-bar {
    /* Две трети ширины цитаты (решение от 30.08). Процент считается от
       .show__hero-quote, поэтому привязки к колонкам сетки больше нет —
       черта тянется за цитатой на любом брейкпоинте. */
    width: calc(200% / 3);
    height: 16px;
    background-color: var(--color-black-soft);
  }

  /* 4-я колонка: мета-поля + CTA */
  .show__hero-meta-side {
    grid-column: 4;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: start;
    margin-top: 16px;
  }

  .show__hero-meta-cta {
    margin-top: 8px;
  }

  /* Скрываем мобильный info целиком на десктопе */
  .show__info { display: none; }

  /* Показываем десктопные элементы */
  .show__hero-meta-side { display: flex; }
  .show__hero-quote { display: flex; }


  .show__press-quote-source {
    font-size: 20px;
  }


  /* ────────────────────────────────────────────
     О СПЕКТАКЛЕ — заголовок full-width,
     контент в двух колонках (всё в правой).
     ──────────────────────────────────────────── */
  .show__about {
    margin-top: 144px;
    padding: 40px var(--inner-pad-x) 144px;
  }

  .show__about-title {
    font-size: clamp(28px, 2.143vw, 36px);
    line-height: 0.95;
    letter-spacing: -0.025em;
  }

  /* Разделитель скрыт */
  .show__about-divider {
    display: none;
  }

  /* Две колонки под заголовком */
  .show__about-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 96px;
    align-items: start;
    margin-top: 40px;
  }

  /* Левая колонка — col 1 */
  .show__about-left {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: calc((100vw - 2 * var(--inner-pad-x) - 2 * 96px) / 3);
  }

  /* Правая колонка — col 2, верх вровень с левой.
     Отрицательный margin поднимает до уровня заголовка. */
  .show__about-right {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    /* Поднимаем колонку так, чтобы ВЕРХНЯЯ ГРАНИЦА плашки плеера
       совпала с верхней границей заголовка «О спектакле»:
         40px  — margin-top у .show__about-columns
         clamp × 0.95 — высота строки заголовка (font-size × line-height) */
    margin-top: calc(-40px - clamp(28px, 2.143vw, 36px) * 0.95);
  }

  .show__about-subtitle {
    font-family: var(--font-main);
    font-weight: var(--font-weight-medium);
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--color-black-soft);
    margin: 0;
  }

  /* Премьера — одна строка: «Премьера 2024 год».
     Слово статичное в разметке, дата приходит из CMS. */
  .show__about-left-field {
    margin: 0;
  }

  .show__about-left-label {
    font-family: var(--font-main);
    font-weight: var(--font-weight-medium);
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--color-black-soft);
    margin: 0;
  }

  .show__about-left-value {
    font-family: var(--font-main);
    font-weight: var(--font-weight-book);
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--color-black-soft);
    margin: 0;
  }

  /* Правая колонка — плеер десктоп.
     Паддинг плашки и слоя-заливки должен совпадать, иначе
     строка-двойник разъедется относительно оригинала. */
  .show__about-right .show__about-player,
  .show__about-right .show__about-player-fill {
    padding: 20px 24px;
  }

  /* margin-top плеера обнуляется общим правилом
     .show__about-right > *:first-child ниже: аудиоблок опционален,
     и к верху нужно прижимать тот элемент, который окажется первым. */

  .show__about-player-label {
    font-size: 26px;
  }

  .show__about-player-time {
    font-size: 22px;
  }

  .show__about-player-icon {
    width: 24px;
    height: 30px;
  }

  /* Подпись — 18px, opacity 0.6, отступ 16px */
  .show__about-right .show__about-lead {
    font-size: 18px;
    margin: 16px 0 0;
  }

  /* ВЕРХ ПРАВОЙ КОЛОНКИ — вровень с заголовком «О спектакле».
     Саму колонку поднимает отрицательный margin-top у .show__about-right
     (выше), но этого мало: совпасть должен ещё и верх первого
     видимого элемента — поэтому гасим его верхний отступ.

     Через :first-child, а не через конкретный класс, потому что
     аудиоблок опционален: если аудиоинтро не загружено, CMS не выводит
     .show__about-player, и первым оказывается .show__about-lead
     (margin-top: 16px) или сразу .show__about-text (margin-top: 64px) —
     текст уезжал вниз относительно заголовка.

     Правило обязано стоять ПОСЛЕ .show__about-right .show__about-lead:
     специфичность та же (0,2,0), решает порядок в файле. */
  .show__about-right > *:first-child {
    margin-top: 0;
  }

  /* Текст описания — 22px */
  .show__about-right .show__about-text p {
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.005em;
  }

  .show__about-right .show__about-text-more p {
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.005em;
  }

  .show__about-right .show__about-expand {
    font-size: 22px;
  }

  /* Премьера скрыта — есть в левой колонке */
  .show__about-right .show__about-premiere {
    display: none;
  }

  .show__about-right .show__about-sponsors {
    margin-top: 80px;
  }

  /* Чтобы кнопки могли позиционироваться по центру по вертикали — секция relative */
  .show__gallery {
    position: relative;
  }

  .show__gallery-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* Центр стрелки = верх секции + padding-top + половина высоты фото.
       Фото aspect-ratio 4/3, высота = card-w · 3/4, центр = card-w · 3/8.
       padding-top галереи на десктопе = 172px (см. .show__gallery ниже).
       translateY(-50%) ниже центрирует стрелку по этой точке.
       Привязка через --gallery-card-w — формула одна для любого
       количества карточек (2 на 1024–1439, 3 на 1440+). */
    top: calc(172px + var(--gallery-card-w) * 3 / 8);
    transform: translateY(-50%);
    z-index: var(--z-elevated);
    /* Явный квадрат: Safari не вычисляет aspect-ratio:1/1 при
       width И height = auto (схлопывает в прямоугольник). Тот же
       фикс, что у .show__cast-nav. SVG центрируется flex'ом
       (align/justify center выше), padding не нужен. Шаг на 1440. */
    width: 46px;
    height: 46px;
    background: var(--color-black-soft);
    color: var(--color-white);
    border: 1px solid var(--color-white);
    box-sizing: border-box;
    border-radius: 2px;
    cursor: pointer;
    /* По умолчанию скрыты — появляются при ховере на секцию */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease;
  }

  .show__gallery-nav svg {
    width: clamp(18px, 1.310vw, 22px);
    height: clamp(18px, 1.310vw, 22px);
    flex-shrink: 0;
  }

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

  /* 20px внутрь от края карточек */
  .show__gallery-nav--prev {
    left: calc(var(--inner-pad-x) + 20px);
  }
  .show__gallery-nav--next {
    right: calc(var(--inner-pad-x) + 20px);
  }

  /* Появляются при ховере на секцию — только если JS снял hidden */
  .show__gallery:hover .show__gallery-nav:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }

  /* hidden перебивает display:flex */
  .show__gallery-nav[hidden] {
    display: none;
  }

  .show__gallery + .show__stage,
  .show__tickets + .show__stage {
    margin-top: 128px;
  }

  /* ────────────────────────────────────────────
     ПУБЛИКАЦИИ СМИ — 3 в ряд на десктопе
     ──────────────────────────────────────────── */
  .show__press {
    padding: 0 0 128px;
    margin-top: 64px;
  }

  .show__press.has-static-quotes {
    padding-bottom: 144px;
  }

  .show__press-title {
    font-size: clamp(28px, 2.143vw, 36px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    padding: 0 var(--inner-pad-x);
    white-space: nowrap;
  }

  .show__press-divider {
    margin: 0 var(--inner-pad-x) 28px;
  }

  .show__press-viewport { margin-top: 80px; }
  .show__press-controls { margin-top: 28px; }

  .show__press-controls {
    max-width: none;
    margin-right: 0;
    padding: 0 var(--inner-pad-x);
    display: flex;
    align-items: center;
  }

  .show__press-viewport {
    padding: 0 var(--inner-pad-x);
  }

  .show__press-quote {
    flex: 0 0 calc((100% - 2 * var(--inner-col-gap)) / 3);
    width: calc((100% - 2 * var(--inner-col-gap)) / 3);
    padding: 0;
    margin-right: var(--inner-col-gap);
  }

  .show__press-quote:last-child {
    margin-right: 0;
  }

  .show__press-quote-text {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .show__press-arrows { display: none; }

  .show__press.has-static-quotes .show__press-controls {
    display: none;
  }


  /* ────────────────────────────────────────────
     ГАЛЕРЕЯ — 3 фото видимых, gap 96px
     ──────────────────────────────────────────── */
  .show__gallery {
    padding: 172px 0 0;
  }

  /* Десктоп: scroll-padding-right переопределяется под inner-pad-x,
     чтобы snap-align: end на последней карточке выровнял её правый
     край с правым краем сетки контента (а не на 10px от viewport,
     как на мобиле). */
  .show__gallery-track {
    scroll-padding-right: var(--inner-pad-x);
  }

  .show__gallery-items {
    gap: var(--inner-col-gap);
  }

  .show__gallery-items::before {
    width: var(--inner-pad-x);
    margin-right: calc(var(--inner-col-gap) * -1);
  }

  .show__gallery-items::after {
    width: 20px;
    margin-left: calc(var(--inner-col-gap) * -1);
  }

   .show__gallery-photo {
    flex: 0 0 calc((100vw - 2 * var(--inner-pad-x) - 2 * var(--inner-col-gap)) / 3);
  }

  .show__gallery-indicator {
    margin-top: 36px;
    padding: 0 var(--inner-pad-x);
  }


  /* ────────────────────────────────────────────
     ДАТЫ И БИЛЕТЫ — паддинги по сетке
     ──────────────────────────────────────────── */
  /* Вся секция = grid 2 колонки.
     Разделитель full-width. Заголовок слева, даты справа на одной линии.
     Info под заголовком слева. */
 .show__tickets {
    padding: 40px var(--inner-pad-x) 0;
  }

  .show__tickets-divider {
    margin-bottom: 40px;
  }

  /* header — contents, чтобы title встал в grid-area секции */
  .show__tickets-header {
    display: contents;
  }

  .show__tickets-title {
    white-space: nowrap;
    font-size: clamp(28px, 2.143vw, 36px);
    line-height: 0.95;
    letter-spacing: -0.025em;
  }

  /* Раскладка через grid-areas. Левая дорожка: title сверху,
     под ним info. Правая дорожка: dates, верх выровнен по верху
     title. Колонки независимы — высота dates (много билетов)
     НЕ влияет на info, и наоборот. divider — над всем, full-width.

       divider  divider
       title    dates
       info     dates

     Ряд title определяется высотой заголовка, ряд info — высотой
     info. dates занимает обе строки правой колонки (span), но т.к.
     каждый ряд по высоте задаёт ЛЕВЫЙ элемент (title/info), высота
     dates наружу не вытекает — расхождения колонок больше нет. */
  .show__tickets {
    display: grid;
    grid-template-areas:
      "title dates"
      "info  dates";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;
    column-gap: 96px;
    align-items: start;
  }

  .show__tickets-title {
    grid-area: title;
  }

  /* columns был обёрткой с display:contents — оставляем contents,
     чтобы info и dates сами встали в свои grid-области секции. */
  .show__tickets-columns {
    display: contents;
  }

  .show__tickets-info {
    grid-area: info;
    border: none;
    border-radius: 0;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-self: start;
    width: 66.6667%;
  }

  .show__tickets-dates {
    grid-area: dates;
    display: block;
    align-self: start;
  }

  .show__tickets-dates .show__tickets-list {
    margin-top: 0;
  }

  /* Мобильные аккордеоны скрыты на десктопе */
  .show__tickets-extras {
    display: none;
  }
.show__extras-accordion--pushka {
  display: block;
}
  .show__extras-text,
  .show__extras-value,
  .show__extras-label,
  .show__extras-link {
    font-size: 18px;
  }
  .show__tickets-info .show__extras-panel-inner {
    padding: 0;
  }

  /* Убираю разделители между группами */
  .show__tickets-info .show__extras-group {
    border-bottom: none;
    padding-bottom: 0;
  }


.show__cast--no-tabs .show__cast-slider {
    margin-top: 40px;
  }

  /* Один разделитель между ПК и Полезная информация */
  .show__tickets-info .show__extras-accordion + .show__extras-accordion {
    border-top: 1px solid var(--color-black-soft);
    padding-top: 28px;
  }

  /* На десктопе аккордеоны раскрыты, кнопки скрыты */
  .show__tickets-info .show__extras-btn { display: none; }
  .show__tickets-info .show__extras-panel {
    grid-template-rows: 1fr !important;
  }
  .show__tickets-info .show__extras-panel[aria-hidden="true"] {
    grid-template-rows: 1fr !important;
  }

  /* ПК аккордеон в правой колонке — раскрыт */
  .show__tickets-dates .show__extras-accordion--pushka {
    margin-top: 64px;
    border: none;
  }
  .show__tickets-dates .show__extras-accordion--pushka .show__extras-btn { display: none; }
  .show__tickets-dates .show__extras-accordion--pushka .show__extras-panel {
    grid-template-rows: 1fr !important;
  }
  .show__tickets-dates .show__extras-accordion--pushka .show__extras-panel[aria-hidden="true"] {
    grid-template-rows: 1fr !important;
  }
  .show__tickets-dates .show__extras-accordion--pushka .show__extras-panel-inner {
    padding: 0;
    gap: 0;
  }

  .show__tickets-dates .show__extras-accordion--pushka .show__extras-link {
    margin-top: 8px;
  }

  /* Кнопки билетов в ряд, gap как в 4-колоночной сетке.
     Раскладка страничная — общий .ticket-btn ширину не задаёт,
     поэтому flex задаём здесь, заскоупив под контейнер. */
  .show__ticket-buttons {
    flex-direction: row;
    gap: var(--inner-col-gap);
  }

  .show__ticket-buttons .ticket-btn {
    flex: 1;                 /* две кнопки — равная ширина, заполняют ряд */
  }

  .show__ticket-buttons .ticket-btn:only-child {
    flex: 0 0 calc((100% - var(--inner-col-gap)) / 2);  /* одна — половина ряда */
  }

  /* Бейдж ПК: правая сторона первой кнопки, низ = низ день·время */
  .show__ticket-head {
    position: relative;
  }

  .show__ticket-pushka-badge {
    position: absolute;
    right: calc((100% + var(--inner-col-gap)) / 2);
    bottom: 0;
  }


  /* ────────────────────────────────────────────
     РАЗДЕЛИТЕЛЬ — паддинги по сетке
     ──────────────────────────────────────────── */
  .show__divider {
    margin: 0 var(--inner-pad-x);
  }
  /* Внутренний divider: горизонталь = inner-pad-x - 10, чтобы линия
     визуально шла от той же координаты, что и внешний (cast имеет
     padding-left/right 10px, внешний divider — margin inner-pad-x). */
  .show__divider--inner {
    margin: 28px calc(var(--inner-pad-x) - 10px);
  }


  /* ────────────────────────────────────────────
     РОЛИ И ИСПОЛНИТЕЛИ — 4 карточки в ряд
     Паттерн schedule на десктопе.
     ──────────────────────────────────────────── */
  .show__cast {
    padding: 40px 10px 80px;     /* нижний воздух перед divider→team */
  }

  /* Карточки: весь зазор до «Команды» отдаём её padding-top (64px),
     чтобы он совпал с зазором «разделитель → команда» в режиме списка. */
  .show__cast:not(.is-list-view) {
    padding-bottom: 0;
  }

  .show__cast-heading {
    font-size: clamp(28px, 2.143vw, 36px);
    line-height: 0.95;
    letter-spacing: -0.025em;
  }

  /* Десктоп: горизонтальный margin сдвигает контент шапки от section
     padding (10px) к inner-pad-x — выравнивание с заголовками
     .show__about и .show__team. align-items: baseline унаследован
     из базы — text-baseline даты в табе и подписи «Списком»
     совпадают (а в --no-tabs — baseline h2 ↔ baseline текста). */
  .show__cast-header {
    margin-left: calc(var(--inner-pad-x) - 10px);
    margin-right: calc(var(--inner-pad-x) - 10px);
  }

  /* В --no-tabs на десктопе возвращаем baseline (на мобилке базовое
     правило выше задаёт align-self: start). Toggle на десктопе —
     текст, baseline alignment с h2 здесь корректнее верхнего. */
  .show__cast--no-tabs .show__cast-view-toggle {
    align-self: baseline;
  }

  .show__cast-tabs {
    margin-top: 32px;            /* h2 крупнее → отступ слегка больше */
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    overflow-x: visible;
  }

  .show__cast-slider {
    margin-top: 28px;
  }

  .show__cast-track {
    padding-left: 16px;
    scroll-padding-left: 16px;
  }

  .show__cast-cards {
    gap: var(--inner-col-gap);
  }

  .show__cast-card {
    /* 1024–1439: 4 карточки в ряд (три gap между ними).
       На 1440+ переопределяется с собственным --cast-gap. */
    flex: 0 0 calc((100vw - 2 * var(--inner-pad-x) - 3 * var(--inner-col-gap)) / 4);
    width: calc((100vw - 2 * var(--inner-pad-x) - 3 * var(--inner-col-gap)) / 4);
  }

  .show__cast-card-name {
    font-size: 64px;
    /* Десктоп: переносы по слогам не нужны — JS подбирает шрифт.
       overflow-wrap: normal чтобы слова не разламывались посреди букв,
       а переносились целиком на следующую строку. (паттерн из troupe.css) */
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: normal;
  }

  .show__cast-card-role {
    font-size: 22px;
  }

  .show__cast-indicator {
    padding: 0 16px;
  }

  .show__cast-cards::after {
    width: 16px;
    margin-left: -96px;
  }


  /* Slider — relative для absolute-кнопок */
  .show__cast-slider {
    position: relative;
  }

  .show__cast-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* Центр фото актёра = половина ширины карточки (фото 1:1).
       1024–1439: карточка = (vw - 2×pad - 3×gap) / 4, центр = /8. */
    top: calc((100vw - 2 * var(--inner-pad-x) - 3 * var(--inner-col-gap)) / 8);
    transform: translateY(-50%);
    z-index: var(--z-elevated);
    /* Явный квадрат: Safari не вычисляет aspect-ratio:1/1 когда
       width И height = auto (игнорирует, схлопывает в прямоугольник).
       Фиксированный размер = SVG + отступы. SVG центрируется flex'ом
       (align/justify center выше), padding не нужен. Шаг на 1440. */
    width: 46px;
    height: 46px;
    background: var(--color-black-soft);
    color: var(--color-white);
    border: 1px solid var(--color-white);
    box-sizing: border-box;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease;
  }

  .show__cast-nav svg {
    width: clamp(18px, 1.310vw, 22px);
    height: clamp(18px, 1.310vw, 22px);
    flex-shrink: 0;
  }

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

  .show__cast-nav--prev {
    left: calc(var(--inner-pad-x) + 20px);
  }
  .show__cast-nav--next {
    right: calc(var(--inner-pad-x) + 20px);
  }

  /* Появляются при ховере на slider — только если JS снял hidden */
  .show__cast-slider:hover .show__cast-nav:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }

  .show__cast-nav[hidden] {
    display: none;
  }

  /* ────────────────────────────────────────────
     ПЕРЕКЛЮЧАТЕЛЬ ВИДА — десктоп: пунктирная ссылка
     Иконки прячем, показываем текст. Декорация подчёркивания
     1-в-1 с .show__about-expand (dotted underline).
     Снимаем мобильную коробку (width/height/background/border),
     возвращаемся к inline-тексту. Выравнивание унаследовано от
     .show__cast-header (baseline); --no-tabs override выше
     возвращает baseline на десктопе.
     ──────────────────────────────────────────── */
  .show__cast-view-toggle {
    width: auto;
    height: auto;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    transition: opacity var(--duration-fast) ease;
  }
  .show__cast-view-toggle:hover { opacity: 0.7; }

  /* Иконки на десктопе НЕТ. Перечисляем все три селектора в
     одной декларации, чтобы перебить мобильные правила
     `.show__cast.is-list-view .show__cast-view-toggle-icon--*`
     (specificity 0,3,0). Иначе на десктопе в режиме списка
     иконка-сетка вылезает поверх текста — мобильный rule
     `display: inline-flex` выигрывает у нашего общего 0,1,0. */
  .show__cast-view-toggle-icon,
  .show__cast.is-list-view .show__cast-view-toggle-icon--list,
  .show__cast.is-list-view .show__cast-view-toggle-icon--grid {
    display: none;
  }

  .show__cast-view-toggle-text {
    display: inline;
    font-family: var(--font-main);
    font-weight: var(--font-weight-body);
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-black-soft);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 8%;
    text-underline-offset: 10%;
  }

  /* По умолчанию (вид карточек) — «Списком», в режиме списка — «Плиткой» */
  .show__cast-view-toggle-text--grid { display: none; }
  .show__cast.is-list-view .show__cast-view-toggle-text--list { display: none; }
  .show__cast.is-list-view .show__cast-view-toggle-text--grid { display: inline; }

  /* ────────────────────────────────────────────
     ВИД «СПИСКОМ» — десктоп
     Секция НЕ перестраивается (никакого display:grid, никакого
     изменения padding) — это давало layout shift при переключении.
     Сама геометрия списка повторяет правую колонку .show__team-list:
     левый край (50vw + 48px) и правый край (100vw - inner-pad-x).
     Достигается через width + margin-left:auto + margin-right:
     auto = прижимаемся к правому краю section content (10px от
     viewport), margin-right компенсирует разницу между этим
     краем и краем «Команды» (inner-pad-x от viewport).
     Внутри сам список — газетный multi-column поток.
     ──────────────────────────────────────────── */
  .show__cast.is-list-view .show__cast-list {
    margin-top: 28px;
    margin-left: auto;
    margin-right: calc(var(--inner-pad-x) - 10px);
    width: calc((100vw - 2 * var(--inner-pad-x) - 96px) / 2);
    display: block;
    column-count: 2;
    column-gap: var(--inner-col-gap);
  }
  /* Элемент списка наследует поведение .show__team-item:
     не разрывается между колонками, нижний ритм через margin. */
  .show__cast-list-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 28px;
  }
  .show__cast-list-item:last-child {
    margin-bottom: 0;
  }
  /* Размер имени — 1в1 как .show__team-name на десктопе. */
  .show__cast-list-name {
    font-size: 24px;
  }

  /* ────────────────────────────────────────────
     КОМАНДА — две колонки
     ──────────────────────────────────────────── */
  .show__team {
    padding: 64px var(--inner-pad-x) 128px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 96px;
    align-items: start;
  }

  .show__team-title {
    grid-column: 1;
    font-size: clamp(28px, 2.143vw, 36px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    margin-bottom: 0;
  }

  .show__team-list {
    grid-column: 2;
    /* CSS multi-column вместо grid: колонки заполняются
       независимым газетным потоком. Высота длинной роли
       (2 строки) в одной колонке больше НЕ растягивает
       соседний элемент в другой — у grid это создавало зазоры
       (ряд выравнивался по самому высокому элементу). */
    display: block;
    column-count: 2;
    column-gap: var(--inner-col-gap);
  }

  /* Элемент не должен разрываться между колонками
     (роль вверху одной, имя внизу другой). */
  .show__team-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    /* row-gap грида больше нет — вертикальный ритм через margin */
    margin-bottom: 28px;
  }

  /* Последний в каждой колонке не должен тянуть лишний отступ
     вниз (визуально выравнивает низ колонок). */
  .show__team-item:last-child {
    margin-bottom: 0;
  }

  .show__team-name {
    font-size: 24px;
  }


  /* ────────────────────────────────────────────
     ДРУГИЕ СПЕКТАКЛИ — все 4 карточки видны
     ──────────────────────────────────────────── */
  .show__repertoire .repertoire-page__card:nth-child(3) {
    display: flex;
  }
  .show__repertoire .repertoire-page__card:nth-child(4) {
    display: none;
  }


  /* ────────────────────────────────────────────
     СЦЕНА — 2:1, контент по центру, кнопка
     ──────────────────────────────────────────── */
  .show__stage {
    aspect-ratio: 2 / 1;
    margin: 0 var(--inner-pad-x);
    width: auto;
    border-radius: var(--card-radius);
  }

  .show__stage-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: calc((100% - 2 * var(--inner-pad-x) - 2 * var(--inner-col-gap)) / 3);
  }

  .show__stage-name {
    font-size: clamp(23.4px, 2.143vw, 36px);
    line-height: 0.9;
    letter-spacing: -0.04em;
  }

  .show__stage-address {
    font-size: 22px;
  }

  .show__stage-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    padding: 0 20px;
    margin-top: 52px;
    background: var(--color-brand);
    color: var(--color-black-soft);
    border: none;
    border-radius: var(--card-radius);
    font-family: var(--font-accent);
    font-weight: var(--font-weight-bold);
    font-size: 22px;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--duration-fast) ease;
  }
  .show__stage-btn:hover { }
  .show__stage-btn:hover svg {
    transform: translateX(6px);
  }
  .show__stage-btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 4px;
  }
  .show__stage-btn svg {
    width: 33px;
    height: 28px;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-out-smooth);
  }

  /* ────────────────────────────────────────────
     ДЕСКТОПНЫЕ ИКОНКИ ШАПКИ — форк actor-page
     ──────────────────────────────────────────── */
  .show__hero .header__right {
    gap: 40px;
    padding: 20px 30px;
  }

  .show__header-icons {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .show__header-icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--duration-fast) ease;
    text-decoration: none;
  }
  
  .show__header-icon-btn:hover { opacity: 0.65; }
  .show__header-icon-btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 4px;
  }

.show__header-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.595vw, 10px);
    padding: clamp(2px, 0.238vw, 4px) clamp(5px, 0.595vw, 10px)
             clamp(2px, 0.238vw, 4px) clamp(11px, 1.31vw, 22px);
    background: var(--color-black-ui);
    color: var(--color-white);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--font-accent);
    font-weight: var(--font-weight-bold);
    font-size: clamp(9px, 1.071vw, 18px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    transition: opacity var(--duration-fast) ease;
  }
  .show__header-menu-btn:hover { opacity: 0.85; }
  .show__header-menu-btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 4px;
  }
  .show__header-menu-btn-icon {
    width: clamp(28px, 3.33vw, 56px);
    height: clamp(28px, 3.33vw, 56px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .show__header-menu-btn-icon img {
    width: clamp(16px, 1.905vw, 32px);
    height: clamp(16px, 1.905vw, 32px);
    display: block;
  }
}


/* ══════════════════════════════════════════════════
   ШИРОКИЙ ДЕСКТОП (≥1440px)
   ══════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .show__hero-meta {
    column-gap: clamp(72px, 10vw - 72px, 96px);
  }

  /* Стрелки слайдера «Роли и исполнители» — крупнее на широком
     десктопе (SVG до 22px + отступы). Явный размер, см. @1024. */
  .show__cast-nav {
    width: 50px;
    height: 50px;
  }

  /* Стрелки галереи — тот же шаг, та же причина (Safari fix) */
  .show__gallery-nav {
    width: 50px;
    height: 50px;
  }

  .show__cast-tab {
    font-size: 28px;
  }

  .show__cast-cards {
    --cast-gap: clamp(72px, 10vw - 72px, 96px);
    gap: var(--cast-gap);
  }

  .show__cast-card {
    flex: 0 0 calc((100vw - 2 * var(--inner-pad-x) - 3 * var(--cast-gap)) / 4);
    width: calc((100vw - 2 * var(--inner-pad-x) - 3 * var(--cast-gap)) / 4);
  }

  .show__repertoire .repertoire-page__card:nth-child(4) {
    display: flex;
  }
}


/* ============================================================
   FINAL SAFARI/CHROME FIX — gallery right edge space
   ============================================================ */

.show__gallery {
  --gallery-edge-x: 10px;
  --gallery-gap: 10px;
  --gallery-card-w: calc(100vw - var(--gallery-edge-x) - var(--gallery-edge-x));
}

.show__gallery-track {
  padding-left: var(--gallery-edge-x);
  padding-right: 0;

  scroll-padding-left: var(--gallery-edge-x);
  scroll-padding-right: var(--gallery-edge-x);

  -webkit-overflow-scrolling: touch;
}

/* Важно: НЕ возвращаем width: max-content.
   Именно max-content в связке со spacer'ом ломал Safari. */
.show__gallery-items.scroll-slider__items {
  width: auto;
  min-width: 100%;
  gap: var(--gallery-gap);
}

/* Левый spacer больше не нужен: левый отступ даёт padding-left трека. */
.show__gallery-items.scroll-slider__items::before {
  content: none !important;
  display: none !important;
}

/* Правый spacer нужен, но аккуратный:
   flex gap перед ::after компенсируем отрицательным margin-left,
   поэтому фактический воздух справа = ровно --gallery-edge-x,
   а не gap + edge. */
.show__gallery-items.scroll-slider__items::after {
  content: "" !important;
  display: block !important;

  flex: 0 0 var(--gallery-edge-x) !important;
  width: var(--gallery-edge-x) !important;
  min-width: var(--gallery-edge-x) !important;

  margin-left: calc(0px - var(--gallery-gap)) !important;

  pointer-events: none;
  scroll-snap-align: none;
}

.show__gallery-photo {
  flex: 0 0 var(--gallery-card-w);
  width: var(--gallery-card-w);
  max-width: var(--gallery-card-w);
  min-width: 0;
}

/* Отменяем предыдущую попытку через margin-right */
.show__gallery-photo:last-child {
  margin-right: 0 !important;
  scroll-snap-align: end;
}

.show__gallery-indicator {
  padding-left: var(--gallery-edge-x);
  padding-right: var(--gallery-edge-x);
}

@media (min-width: 1024px) {
  .show__gallery {
    --gallery-edge-x: 16px;
    --gallery-gap: var(--inner-col-gap);
    /* 1024–1439: 2 карточки в ряд (один gap между ними). */
    --gallery-card-w: calc(
      (
        100vw
        - var(--gallery-edge-x)
        - var(--gallery-edge-x)
        - var(--gallery-gap)
      ) / 2
    );
  }

  .show__gallery-nav--prev {
    left: calc(var(--gallery-edge-x) + 20px);
  }

  .show__gallery-nav--next {
    right: calc(var(--gallery-edge-x) + 20px);
  }
}


/* ============================================================
   ШИРОКИЙ ДЕСКТОП — 1440+: возврат к 3 карточкам в галерее.
   Блок ДОЛЖЕН идти ПОСЛЕ всех @media (min-width: 1024) выше,
   иначе следующий 1024+ блок перебивает (1440+ ⊂ 1024+).
   ============================================================ */
@media (min-width: 1440px) {
  .show__gallery {
    --gallery-card-w: calc(
      (
        100vw
        - var(--gallery-edge-x)
        - var(--gallery-edge-x)
        - var(--gallery-gap)
        - var(--gallery-gap)
      ) / 3
    );
  }
}


/* ══════════════════════════════════════════════════
   ДИЗАЙН-БАЗА (≥1680px)
   ══════════════════════════════════════════════════ */
@media (min-width: 1680px) {
  /* .ticket-btn в style.css с 1680 переходит на 20px — CTA под hero
     набран как кнопка билета, поэтому повторяем шаг. Источник правды
     по кеглю — .ticket-btn, при его правке синхронизировать здесь. */
  .show__info-cta {
    font-size: 20px;
  }
}