/* ============================================================
   REPERTOIRE-PAGE.CSS — Специфика страницы «Репертуар»
   Театр на Таганке

   ПЕРЕИСПОЛЬЗУЕТ:
     style.css   → body.page--light, .section-tab, .section-tabs,
                   .section-tabs--scrollable
     page.css    → .header--page, .page, .page__intro*, .page__bar,
                   .page__divider, .page__empty*, .page__grid
     filter-kit.css → .filter__bar*, .filter__drops, .filter__drop-btn,
                   .filter__dropdown*, .filter__check-*, .filter__panel*
                   (фильтр-кит универсален и используется афишей и репертуаром)
                   (всё это уйдёт в filter-kit в PR 3)

   ЭТОТ ФАЙЛ содержит только специфику страницы репертуара:
     — карточка спектакля (.repertoire-page__card*)
     — алфавитный список (.repertoire-page__alpha*) — светлая и тёмная версии
     — специфика дропдауна и панели «Название»
     — переопределение --grid-cols сетки на широком десктопе (4 колонки)
   ============================================================ */


/* ══════════════════════════════════════════════════
   СЕТКА КАРТОЧЕК
   База — .page__grid из page.css (1 → 2 → 3 колонки).
   Здесь только переопределение для широкого десктопа.
   ══════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .page--repertoire .page__grid {
    --grid-cols: 4;
    --grid-col-gap: clamp(72px, 10vw - 72px, 96px);  /* 4 col: 72→96 (1440→1680) */
    --grid-row-gap: clamp(72px, 10vw - 72px, 96px);  /* 4 col: 72→96 (1440→1680) */
  }
}


/* ══════════════════════════════════════════════════
   КАРТОЧКА СПЕКТАКЛЯ
   ══════════════════════════════════════════════════ */
.repertoire-page__card {
  display: flex;
  flex-direction: column;
  gap: 8px;                      /* photo → body */
  text-decoration: none;
  color: var(--color-black-soft);
}

.repertoire-page__card:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

.repertoire-page__card[hidden] { display: none !important; }


.repertoire-page__card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-aspect-poster);
  overflow: hidden;
  border-radius: var(--card-radius);
  background-color: var(--color-black-soft-04);
}

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


.repertoire-page__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.repertoire-page__card-title {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 60px;                  /* стартовый размер для мобилки;
                                       JS пересчитает в TagankaPage.bindCardTitlesFit */
  line-height: 0.875;
  letter-spacing: -0.025em;
  color: var(--color-black-soft);
  text-transform: uppercase;
  margin: 0;
  width: 100%;
  overflow: visible;
  white-space: normal;

  /* Перенос длинных слов целиком, если не влезают */
  overflow-wrap: break-word;

  /* Автоматические переносы по словарю.
     lang="ru" задан на <html> — браузер использует русский словарь.
     hyphenate-limit-chars 4 3 3 — переносить слова от 4 букв,
     отрезая минимум по 3 буквы с каждой стороны. */
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-chars: 6 4 3;
  hyphenate-limit-chars: 6 4 3;
}

.repertoire-page__card-desc {
  font-family: var(--font-main);
  font-weight: var(--font-weight-body);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
  margin: 8px 0 0;
}

.repertoire-page__card-director {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 12px 0 0;
}


/* ── Метаданные архивных карточек (год, режиссёр, автор) ──
   Аналог .historical__card-meta, но в namespace репертуара.
   Используется только в карточках с data-archive="true". */
.repertoire-page__card-meta {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.repertoire-page__card-meta-item {
  font-family: var(--font-main);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
}

.repertoire-page__card-meta-label {
  font-weight: var(--font-weight-medium);
}
.repertoire-page__card-meta-value {
  font-weight: var(--font-weight-book);
}


/* ══════════════════════════════════════════════════
   АЛФАВИТНЫЙ СПИСОК (общая база, светлая)
   Используется и в десктопном дропдауне «Название»,
   и в мобильной панели «Название».
   Структура (рендерится JS):
     .repertoire-page__alpha
       .repertoire-page__alpha-section
         .repertoire-page__alpha-letter
         ul.repertoire-page__alpha-list
           li.repertoire-page__alpha-item
             button.repertoire-page__alpha-btn
       hr.repertoire-page__alpha-divider
   ══════════════════════════════════════════════════ */
.repertoire-page__alpha {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 10px;
}

.repertoire-page__alpha-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.repertoire-page__alpha-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.repertoire-page__alpha-item {
  margin: 0;
  max-width: 100%;
}

.repertoire-page__alpha-btn {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font-family: var(--font-main);
  font-weight: var(--font-weight-body);
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
  cursor: pointer;
  user-select: none;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--duration-fast) ease;
}
.repertoire-page__alpha-btn:hover { opacity: 0.7; }
.repertoire-page__alpha-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}
.repertoire-page__alpha-btn.is-selected {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.repertoire-page__alpha-divider {
  border: none;
  border-top: 1px solid var(--color-black-soft-20);
  margin: 0;
}


/* ── Тёмный вариант (для мобильной панели «Название») ── */
.repertoire-page__alpha--dark .repertoire-page__alpha-letter,
.repertoire-page__alpha--dark .repertoire-page__alpha-btn {
  color: var(--color-white);
}
.repertoire-page__alpha--dark .repertoire-page__alpha-divider {
  border-top-color: rgba(255, 255, 255, 0.20);
}


/* ══════════════════════════════════════════════════
   ДРОПДАУН «НАЗВАНИЕ» — десктопная специфика
   Базовые стили дропдауна — в filter-kit.css (.filter__dropdown).
   Здесь только высота с прокруткой и минимальная ширина.
   ══════════════════════════════════════════════════ */
.repertoire-page__dropdown--title {
  display: flex;
  flex-direction: column;
  max-height: 50vh;
  min-width: 320px;
}

.repertoire-page__dropdown--title .repertoire-page__alpha {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}


/* ══════════════════════════════════════════════════
   КНОПКА «НАЗВАНИЕ» В БАРЕ — индикация выбора
   При .has-value (есть выбранное название):
     1. Иконка-документ скрывается (на её месте бейдж со счётчиком)
     2. Лейбл показывает название с обрезкой text-overflow: ellipsis
   ══════════════════════════════════════════════════ */
.filter__drop-btn[data-dropdown="title"].has-value .filter__drop-cal-icon {
  display: none;
}

.filter__drop-btn[data-dropdown="title"] .filter__drop-label {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════
   МОБИЛЬНАЯ ПАНЕЛЬ «НАЗВАНИЕ»
   Использует .filter__panel--scroll из filter-kit.css —
   вся панель скроллится единым потоком. Здесь только
   паддинги для алфавитного списка и обёртка кнопки «Сбросить».
   ══════════════════════════════════════════════════ */
#repPanelTitle .repertoire-page__alpha {
  padding: 24px 10px 24px;
}

.repertoire-page__title-reset-wrap {
  padding: 16px 10px 24px;
}

media (min-width: 1024px) {
  .repertoire-page__card-desc {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.005em;  
  margin: 8px 0 0;
}
}