/* ============================================================
   TROUPE.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, но специфику пересоздаём локально —
                   фильтр-кит трогать не стоит ради одной страницы).

   ЭТОТ ФАЙЛ содержит только специфику страницы труппы:
     — карточка персоны (.troupe__card*) с квадратным фото
     — кнопка play/pause на фото (визуал из hero главной страницы)
     — поле поиска (.troupe__search*) в стиле кнопки-дропдауна
     — мобильный поиск внутри .filter__bar
     — кнопка «Показать ещё»
     — переопределение --grid-cols сетки на широком десктопе (4 колонки)
     — переопределение .page__empty-reset (инвертированный стиль)
   ============================================================ */


/* ══════════════════════════════════════════════════
   КАРТОЧКА ПЕРСОНЫ
   Квадратное фото + имя (JS-подгонка размера).
   Скрытие для пагинации и фильтрации — через [hidden].
   ══════════════════════════════════════════════════ */
.troupe__card {
  display: flex;
  flex-direction: column;
  gap: 8px;                      /* photo → body */
  text-decoration: none;
  color: var(--color-black-soft);
}

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

.troupe__card[hidden] { display: none !important; }


/* Фото: квадрат 1:1 */
.troupe__card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--card-radius);
  background-color: var(--color-black-soft-04);
}

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


/* ══════════════════════════════════════════════════
   КНОПКА PLAY/PAUSE НА ФОТО
   Визуал и позиционирование — как .controls__btn-square в hero
   на главной странице (style.css):
     — чёрный квадрат 50×50, без border-radius
     — иконки нарисованы border'ами (без SVG)
     — позиция: левый нижний угол, 10px слева / 24px снизу
   Клик проваливается на карточку — pointer-events: none.
   Анимация перехода к видео будет добавлена на следующем шаге
   через переключение класса .is-playing на .troupe__card.
   ══════════════════════════════════════════════════ */
.troupe__card-play {
  position: absolute;
  left: 10px;
  bottom: 24px;
  width: 50px;
  height: 50px;
  background-color: var(--color-black-ui);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Поверх .troupe__card-video (который получает implicit z-index 0).
     Без этого видео, появляясь поверх кнопки в DOM, рисуется сверху
     и кнопка исчезает. */
  z-index: 2;
}

/* Pause — две вертикальные палочки (14×16, border-left/right 4px) */
.troupe__card-play-icon--pause {
  display: block;
  width: 14px;
  height: 16px;
  border-left: 4px solid var(--color-white);
  border-right: 4px solid var(--color-white);
}

/* Play — треугольник (border-left 14px + border-top/bottom 8px transparent) */
.troupe__card-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;
}

/* По умолчанию видно play (готово к воспроизведению).
   При .is-playing на карточке — показываем pause.
   При .is-paused — снова play (видео замерло на кадре, можно возобновить). */
.troupe__card-play .troupe__card-play-icon--pause { display: none; }
.troupe__card.is-playing .troupe__card-play .troupe__card-play-icon--play  { display: none; }
.troupe__card.is-playing .troupe__card-play .troupe__card-play-icon--pause { display: block; }


/* ══════════════════════════════════════════════════
   ВИДЕО-ОВЕРЛЕЙ
   <video> создаётся JS'ом только для карточек с data-video,
   позиционируется абсолютом поверх .troupe__card-img.
   По умолчанию opacity:0 (видно фото); при .is-playing ИЛИ .is-paused
   на карточке — opacity:1 (видно видео). Два класса:
     .is-playing — видео играет, иконка pause
     .is-paused  — видео замерло на кадре, иконка play (возобновление)
   object-fit: cover чтобы видео адаптировалось под квадрат.
   ══════════════════════════════════════════════════ */
.troupe__card-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;
}
.troupe__card.is-playing .troupe__card-video,
.troupe__card.is-paused  .troupe__card-video { opacity: 1; }


/* ══════════════════════════════════════════════════
   КНОПКА PLAY/PAUSE — ВИДИМОСТЬ И КЛИКАБЕЛЬНОСТЬ
   Кнопка отображается ТОЛЬКО на карточках с data-video.
   Если у актёра нет видео, бэкенд НЕ должен рендерить разметку
   .troupe__card-play вообще (см. README, раздел data-атрибутов
   страницы труппы). Это правило — CSS-страховка на случай если
   разметка всё-таки попала: квадрат не показывается, place pointer-events
   на auto не выставляется.

   На карточках с data-video кнопка кликабельна на обоих платформах —
   это полноценный контрол play/pause. JS обрабатывает клик с
   e.preventDefault() чтобы не провалиться на <a> карточки. На десктопе
   помимо кнопки видео также управляется через hover (mouseenter/mouseleave).
   ══════════════════════════════════════════════════ */
.troupe__card:not([data-video]) .troupe__card-play {
  display: none;
}

.troupe__card[data-video] .troupe__card-play {
  pointer-events: auto;
  cursor: pointer;
}


/* Тело: имя — такой же типографический стиль как у названия
   спектакля в репертуаре (uppercase, JS-подгонка размера). */
.troupe__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.troupe__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 7 3 3 — переносить слова от 7 букв,
     отрезая минимум по 3 буквы с каждой стороны. */
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-chars: 7 3 3;
  hyphenate-limit-chars: 7 3 3;
}


/* ══════════════════════════════════════════════════
   ПОИСК В БАРЕ — десктоп
   Визуально копирует .filter__drop-btn (десктопная версия):
     height: 56px, background: var(--color-black-soft-10),
     border-radius: var(--card-radius), без бордера.
   Внутри — <svg class="troupe__search-icon"> + <input>.

   На мобилке (<1024) живёт внутри .filter__bar, но ведёт себя иначе:
     h:60px, border: 1px solid black, на всю ширину бара (одна кнопка).
   Медиазапросы — внизу файла.

   Никаких реакций на hover и focus — мигающая каретка в инпуте
   даёт достаточную индикацию активности поля.
   ══════════════════════════════════════════════════ */
.troupe__search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--btn-h-l);             /* 60px — как .filter__bar-btn */
  padding: 0 16px;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-black-soft);
  border-radius: 0;                    /* совпадает с .filter__bar-btn */
  color: var(--color-black-soft);
}

.troupe__search-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: currentColor;
}

.troupe__search-input {
  flex: 1;
  min-width: 0;                        /* иначе input распирает флекс */
  height: 100%;
  border: none;
  background: none;
  outline: none;
  padding: 0;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
}
.troupe__search-input::placeholder {
  color: var(--color-black-soft-40);
}
/* Убираем нативный крестик Safari/Chrome у type="search" */
.troupe__search-input::-webkit-search-cancel-button,
.troupe__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Кнопка очистки — крестик справа, появляется когда есть значение */
.troupe__search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-black-soft-40);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--duration-fast) ease;
}
.troupe__search-clear:hover { color: var(--color-black-soft); }
.troupe__search.has-value .troupe__search-clear { display: inline-flex; }


/* ══════════════════════════════════════════════════
   ОБЁРТКА ПОИСКА В БАРЕ (десктоп)
   Повторяет логику .filter__drops — контейнер в правой колонке .page__bar.
   На мобилке скрыта, на десктопе занимает всю правую колонку.
   ══════════════════════════════════════════════════ */
.troupe__search-wrap {
  display: none;                      /* на мобилке поиск живёт в .filter__bar */
}


/* ══════════════════════════════════════════════════
   КНОПКА «ПОКАЗАТЬ ЕЩЁ»
   Стиль .filter__dropdown-apply: чёрная с белым текстом,
   Pragmatica 16px body, высота --btn-h-m. Ширина — padding 0 32px,
   без min-width (совпадает с шириной кнопки «Сбросить» в empty-state).
   ══════════════════════════════════════════════════ */
.troupe__more-wrap {
  display: flex;
  justify-content: center;
  padding: 0 10px 80px;
}

.troupe__more {
  height: var(--btn-h-m);
  padding: 0 32px;
  background: var(--color-black-soft);
  color: var(--color-white);
  border: 1px solid var(--color-black-soft);
  border-radius: var(--card-radius);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: var(--font-weight-body);
  cursor: pointer;
  transition: opacity var(--duration-fast) ease;
}
.troupe__more:hover         { opacity: 0.8; }
.troupe__more:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.troupe__more[hidden]       { display: none; }

/* Когда кнопка скрыта — прячем всю обёртку, иначе её padding-bottom
   создаёт пустое пространство снизу страницы. :has() — baseline ≥ Safari 15.4,
   Chrome 105, что совпадает с минимальной поддержкой проекта. */
.troupe__more-wrap:not(:has(.troupe__more:not([hidden]))) {
  display: none;
}


/* ══════════════════════════════════════════════════
   EMPTY STATE — кнопка «Сбросить»
   Переопределяем .page__empty-reset (из page.css) только
   для страницы труппы: вместо большой чёрной кнопки —
   инвертированная, как .filter__dropdown-reset в футере
   десктопных фильтров. Высота, шрифт, рамка — оттуда;
   горизонтальные паддинги оставляем текущие (32px).
   ══════════════════════════════════════════════════ */
.page--troupe .page__empty-reset {
  height: var(--btn-h-m);
  background: none;
  color: var(--color-black-soft-40);
  border: 1px solid var(--color-black-soft-25);
  border-radius: var(--card-radius);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: var(--font-weight-body);
  transition: border-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}
.page--troupe .page__empty-reset:hover {
  opacity: 1;
  border-color: var(--color-black-soft);
  color: var(--color-black-soft);
}


/* ══════════════════════════════════════════════════
   ПЛАНШЕТ (768–1023.98px)
   Поиск всё ещё в .filter__bar (мобильный режим),
   но отступы бара 16px (наследуются из filter-kit.css).
   Кнопка «Показать ещё» — симметрично 16px.
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .troupe__more-wrap { padding: 0 16px 100px; }
}


/* ══════════════════════════════════════════════════
   ДЕСКТОП (≥1024px)
   Поиск уезжает в правую колонку .page__bar, мобильный
   .filter__bar-troupe скрывается (filter-kit.css уже скрывает
   .filter__bar целиком на ≥1024). Инпут занимает всю правую
   колонку бара (симметрично табам слева) и визуально становится
   как .filter__drop-btn — фон #131313 @ 10%, без бордера, h:56px.
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .troupe__search-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
  }

  .troupe__search {
    width: 100%;
    height: 56px;
    background: var(--color-black-soft-10);
    border: none;
    border-radius: var(--card-radius);
    padding: 0 16px;
  }

  .troupe__more-wrap {
    padding: 0 var(--inner-pad-x) var(--inner-pad-bottom);
  }
  .page--troupe .page__grid {
    --grid-row-gap: clamp(80px, 7.381vw, 124px);
  }

  /* Десктоп: переносы слов по слогам не нужны — JS подбирает шрифт.
     overflow-wrap: normal чтобы слова не разламывались посреди букв,
     а переносились целиком на следующую строку.
     Совпадает с паттерном из repertoire-page.css. */
  .troupe__card-title {
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: normal;
  }
}

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

  }