/* ============================================================
   REPERTOIRE.CSS — Блок «В репертуаре», главная страница
   Театр на Таганке
   components/repertoire/repertoire.css
   ============================================================ */

/* ------------------------------------------------------------
   ПРАВКА 29.07: кнопка «Показать ещё» перекрашена — заливка
   --color-black-soft-10, текст --color-black-soft. Заодно hover
   переведён с opacity на смену фона, а обводка фокуса с белой
   на брендовую. См. блок «КНОПКА «ЗАГРУЗИТЬ ЕЩЁ»».
   ------------------------------------------------------------ */

/* ══════════════════════════════════════════════════════════════
   БЛОК
   ══════════════════════════════════════════════════════════════ */
.repertoire {
  width: 100%;
  background-color: var(--color-white);
  overflow-x: hidden; /* сдерживает tabs с margin:-10px/-16px */
}

/* ══════════════════════════════════════════════════════════════
   ЗАГОЛОВОЧНАЯ СЕКЦИЯ
   padding 10px (мобилка), 16px (десктоп)
   ══════════════════════════════════════════════════════════════ */
.repertoire__head {
  padding: 0 10px;
}

/* Разделитель 1px #131313, отступ 60px до заголовка */
.repertoire__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-black-20);
  margin-bottom: 60px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .repertoire__divider {
    display: none;
  }
}

/* Шапка: заголовок + ссылка на десктопе, отступ 40px до табов */
.repertoire__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* .repertoire__title — базовые стили в style.css (.section-title) */

.repertoire__all-header {
  /* Мобилка: скрыта — ссылка в футере */
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   ТАБЫ — отступ 24px до карточек через margin-bottom
   ══════════════════════════════════════════════════════════════ */
.repertoire__tabs {
  display: flex;
  gap: 40px;
  margin-bottom: 28px;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.repertoire__tabs::-webkit-scrollbar { display: none; }

/* .rep-tab и .rep-tab__line — базовые стили в style.css (.section-tab).
   Специфика: white-space и flex-shrink для горизонтального скролла табов. */
.rep-tab {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   СПИСОК КАРТОЧЕК
   ══════════════════════════════════════════════════════════════ */
.repertoire__cards {
  transition: opacity 200ms ease, transform 200ms ease;
}

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

/* ══════════════════════════════════════════════════════════════
   КАРТОЧКА
   ══════════════════════════════════════════════════════════════ */
   /* До инициализации JS все карточки скрыты — JS покажет нужные по активному табу */
.repertoire__cards .rep-card {
  display: none;
}

.rep-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--color-black-soft);  /* предотвращает белый sub-pixel gap по краям */
}

/* Медиа — фиксированная высота на мобилке */
.rep-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* Ставим вашу пропорцию. Если нужен вертикальный постер — ставьте 3 / 4 */
  overflow: hidden;
  background-color: var(--color-black-soft);
}

.rep-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Сплошной тинт 5% поверх всей карточки */
.rep-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-black-soft-05);
  pointer-events: none;
  z-index: var(--z-base);
}

/* Градиент: 70% высоты снизу вверх */
.rep-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  background: linear-gradient(
    to top,
    var(--color-card-overlay-80) 0%,
    var(--color-card-overlay-65) 20%,
    
    transparent 100%
  );
  pointer-events: none;
  z-index: var(--z-base);
}

/* Бейдж даты: 10px слева, 24px сверху */
.rep-card__date {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-brand);
  color: var(--color-black-soft);
  font-family: var(--font-accent);
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  letter-spacing: -0.025em;
  padding: 7px 4px;
  min-height: 48px;
  display: flex;
  align-items: center;
  z-index: var(--z-elevated);
}

/* ══════════════════════════════════════════════════════════════
   ТЕКСТОВЫЙ БЛОК: position:absolute — создаёт containing block
   для .rep-card__premiere без дополнительного position:relative
   ══════════════════════════════════════════════════════════════ */
.rep-card__text {
  position: absolute;   /* NB: создаёт containing block для дочерних position:absolute */
  bottom: 40px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: var(--z-elevated);
  overflow: visible;    /* бейдж может выходить за пределы блока вверх */
}

/* Бейдж «Премьера» — нависает над заголовком слева, как в hero-блоке.
   Позиционируется относительно .rep-card__text (position:absolute = containing block). */
.rep-card__premiere {
  position: absolute;
  bottom: calc(100% - 0px); /* нижний край бейджа = 20px ниже верха .rep-card__text */
  left: 0;
  background-color: var(--color-black-soft);
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.035em;
  padding: 4px 12px;
  border-radius: 1px;
  height: 48px;
  display: flex;
  align-items: center;
  transform: rotate(-9deg);
  transform-origin: left bottom;
  z-index: calc(var(--z-elevated) + 1);
  white-space: nowrap;
  pointer-events: none;
}

/* Заголовок: Pragmatica Book, font-size управляется JS (72 → 48px) */
.rep-card__name {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 80px;
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--color-white);
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: break-word;   /* при min 56px длинные слова переносятся */
  /* Автоматические переносы по русскому словарю браузера.
     Работает благодаря lang="ru" на <html>. */
  hyphens: auto;
  -webkit-hyphens: auto;
  /* ПРАВКА 02.08: лимиты подтянуты к schedule (было 4 2 2).
     При 4 2 2 браузер имел право резать 7-буквенные слова на куски
     по 2–3 буквы — отсюда «LЁ ТАР-/ТЮФ. КО-/МЕДИЯ». */
  hyphenate-limit-chars: 7 3 4;   /* слово ≥7 букв, ≥3 до и ≥4 после дефиса */
  hyphenate-limit-before: 3;
  hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-chars: 7 3 4;
  overflow: visible;
  width: 100%;
  order: 2;
}

/* Описание: как schedule__card-meta, белый */
/* ──────────────────────────────────────────────────────────────
   ЕДИНАЯ ТИПОГРАФИКА «ЗАГОЛОВОК КАРТОЧКИ / ЛИД»
   Один и тот же набор действует в четырёх местах главной:
     .news__card-title      components/news/news.css
     .visitors__intro       components/visitors/visitors.css
     .rep-card__desc        components/repertoire/repertoire.css
     .schedule__card-meta   components/schedule/schedule.css
   Копии сделаны намеренно, при правке значений менять все четыре.

     кегль          18px → 20px (768) → 24px (1440)
     насыщенность   regular (book) на всех ширинах
     интерлиньяж    1.12 на мобилке → 1.1 с 768
     трекинг        -0.015em на мобилке → -0.025em с 768

   Цвет в набор НЕ входит: у .rep-card__desc он белый (текст поверх
   фото), у остальных трёх --color-black-soft.

   Ступени на 1024 нет намеренно: планшетные 20px тянутся до 1439,
   поэтому в блоках 1024 правил нет — не ищи их там.
   ────────────────────────────────────────────────────────────── */
.rep-card__desc {
  font-family: var(--font-main);
  font-size: 18px;
  /* ПРАВКА 01.09: было var(--font-weight-regular) — такого токена
     в tokens.css нет, объявление отбрасывалось и вес наследовался
     от родителя. Правильный токен для 400 — --font-weight-book. */
  font-weight: var(--font-weight-book);
  color: var(--color-white);
  line-height: 1.12;
  letter-spacing: -0.015em;
  order: 1;
}

/* Белый разделитель между карточками — 12px (только мобилка) */
.rep-card__sep {
  height: 12px;
  background-color: var(--color-white);
  border-radius: 1.4px;
  flex-shrink: 0;
  width: 100%;
}


/* Последняя видимая карточка в табе — скрываем разделитель.
   Класс .rep-card--last проставляется JS при смене таба. */
.rep-card--last .rep-card__sep { display: none; }
/* ══════════════════════════════════════════════════════════════
   КНОПКА «ВЕСЬ РЕПЕРТУАР» — мобилка
   ══════════════════════════════════════════════════════════════ */
.repertoire__footer {
  display: flex;
  align-items: center;
  justify-content: center;   /* ПРАВКА 29.07: было прижато влево */
  height: 96px;
  padding: 0 10px;
}

.repertoire__all-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-accent);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-black-soft);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration-fast) ease;
}

.repertoire__all-btn:hover { opacity: 0.50; }

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

.repertoire__all-btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   КНОПКА «ЗАГРУЗИТЬ ЕЩЁ» — пагинация по 6 (мобилка + десктоп)
   Текст кнопки живёт в HTML (.repertoire__more-btn), здесь только вид.
   ПРАВКА 29.07: полоса перекрашена дважды — сначала с брендового
   красного (--color-brand) в чёрный, затем в светло-серую заливку
   --color-black-soft-10 с чёрным текстом.
   Светлая полоса во всю ширину секции, примыкает к карточкам снизу
   (без верхнего отступа). Текст по центру, --color-black-soft, accent bold.
   60px моб / 80px десктоп. Видимостью управляет JS через hidden на обёртке.
   ══════════════════════════════════════════════════════════════ */
.repertoire__more {
  padding: 0;
}

.repertoire__more[hidden] { display: none; }

.repertoire__more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  margin: 0;
  background: var(--color-black-soft-10);  /* ПРАВКА 29.07: brand → black-soft → black-soft-10 */
  color: var(--color-black-soft);          /* ПРАВКА 29.07: black-soft → white → black-soft */
  border: none;
  border-radius: 0;
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  /* ПРАВКА 29.07: кегль и трекинг приведены к «Полной афише»
     и «Всему репертуару» — было 18px без letter-spacing. */
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════════════════════════
   ПЛАНШЕТ (≥ 768px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Средняя ступень общей шкалы, см. комментарий у базового
     правила .rep-card__desc */
  .rep-card__desc {
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.025em;
  }
}

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

  .repertoire__head {
    padding: 88px 16px 0; /* 60px (убранный разделитель) + 28px доп. отступ сверху */
  }

  /* ПРАВКА 07.08: сквозной скейл заголовка секции вместо ступеньки
     36 → 44px на 1440. База 1680px = 60px, проектная формула
     clamp(BASE × 0.5, BASE/1680 × 100vw, BASE). Нижняя граница 36px
     совпадает с базовым .section-title, поэтому до ~1008px величина
     не меняется; выше 1680 упирается в потолок 60px.
     Глобальный .section-title не трогаем — он общий для внутренних
     страниц, скейлим точечно только блок главной. */
  .repertoire__title {
    font-size: clamp(36px, 3.571vw, 60px);
  }

  /* Выравниваем отступ от заголовка до табов как у schedule и news */
  .repertoire__header {
    padding-bottom: var(--space-m); /* 24px — идентично schedule__header и news__header */
  }

  /* Ссылка «Весь репертуар» — в строке с табами, прижата вправо.
     Стиль как у неактивного таба, но без линии. */
  .repertoire__all-header {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    font-family: var(--font-accent);
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-black-soft-40);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;   /* прижимает ссылку к правому краю */
    transition: color var(--duration-fast) ease;
    user-select: none;
  }

  .repertoire__all-header:hover {
    color: var(--color-black-soft);
  }

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

  .repertoire__all-header-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 6px;
    vertical-align: middle;
  }

  /* Компенсируем padding 16px для скролла табов */
  .repertoire__tabs {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    align-items: baseline; /* выравниваем табы и ссылку «Весь репертуар» по базовой линии текста */
  }

  /* 2 × 2, квадратные карточки, 4px между колонками, 60px между рядами */
  .repertoire__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4px;
    row-gap: 60px;
  }

  /* Квадрат: aspect-ratio переопределяет height:500px */
.rep-card__media {
    height: auto;
    aspect-ratio: 4 / 3; /* Меняем 1 / 1 на 4 / 3 (или 3 / 4) */
  }

  /* rep-row-sep вставляется JS, но gap 80px уже всё делает */
  .rep-row-sep { display: none; }

  /* Десктоп: переносы слов по слогам и разломы посреди слова не нужны —
     слова переносятся целиком, JS подбирает шрифт чтобы всё влезло в 2 строки */
  .rep-card__name {
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: normal;
  }

  /* Белые сепараторы — только мобилка */
  .rep-card__sep { display: none; }

  /* Изображение чуть больше контейнера — убирает sub-pixel щель по краям.
     overflow: hidden на .rep-card__media гарантирует, что выход не виден. */
  .rep-card__img {
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
  }

  /* Hover: быстрый zoom → долгий drift вправо.
     Keyframes: scale за первые 15%, затем translateX до конца.
     При снятии ховера — transition на .rep-card__img даёт плавный откат. */
  .rep-card .rep-card__img {
    animation: rep-card-hover-out 2s cubic-bezier(0.08, 0.82, 0.17, 1) forwards;
  }

  .rep-card:hover .rep-card__img {
    animation: rep-card-hover 4s cubic-bezier(0.08, 0.82, 0.17, 1) forwards;
  }

  /* Мобильная кнопка скрыта */
  .repertoire__footer { display: none; }

  /* «Показать ещё» — чёрная полоса во всю ширину, 80px */
  .repertoire__more-btn {
    height: 80px;
    font-size: 22px;
    transition: opacity var(--duration-fast) ease;
  }
  /* ПРАВКА 29.07: hover через фон, а не opacity.
     На светлой плашке opacity: 0.85 съедала и заливку, и текст —
     кнопка выглядела выцветшей, а не подсвеченной. */
  .repertoire__more-btn:hover { background: var(--color-black-soft-15); }

  /* ПРАВКА 29.07: обводка была белой — на светлом фоне не видна */
  .repertoire__more-btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: -4px;
  }
}

/* Hover: быстрый старт (zoom+drift вместе), долгое замедление в конце */
@keyframes rep-card-hover {
  0%   { transform: scale(1)    translateX(0); }
  100% { transform: scale(1.04) translateX(1.5%); }
}

@keyframes rep-card-hover-out {
  0%   { transform: scale(1.04) translateX(1.5%); }
  100% { transform: scale(1)    translateX(0); }
}
/* ══════════════════════════════════════════════════════════════
   ДЕСКТОП ШИРОКИЙ (≥ 1440px)
   Увеличиваем шрифты заголовочной секции
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

  /* .repertoire__title — скейлится с 1024px, см. блок выше */

  /* Названия табов и ссылка «Весь репертуар»: 22px → 30px */
  .rep-tab,
  .repertoire__all-header {
    font-size: 24px;
  }

  /* Иконка стрелки: 20px → 40px */
  .repertoire__all-header-icon {
    width: 40px;
    height: 40px;
  }

  /* Название спектакля: стартовый размер для JS (пересчитывает вниз до ≤ 2 строк).
     На ≥1680px JS начинает со 160px, на 1440–1679 со 108px. */
  .rep-card__name {
    font-size: 108px;
  }

  /* Дата-бейдж: 28px → 40px */
  .rep-card__date {
    font-size: 40px;
  }

  /* Верхняя ступень общей шкалы, см. комментарий у базового правила */
  .rep-card__desc {
    font-size: 24px;
  }

  /* Дата: левый верхний угол без отступов */
  .rep-card__date {
    left: 0;
    top: 0;
  }

  .rep-card__text {
    left: 16px;
    right: 16px;
    bottom: 40px;
  }

  /* Бейдж «Премьера»: 22px × 1.33 ≈ 29px */
  .rep-card__premiere {
    font-size: 29px;
    height: 56px;           /* пропорционально высота */
    padding: 4px 16px;      /* пропорционально padding */
  }
}