/* ============================================================
   HISTORICAL-PERFORMANCES.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

   ЭТОТ ФАЙЛ содержит только специфику страницы:
     — карточка постановки (.historical__card*) с фото, заголовком,
       описанием и блоком метаданных (год, режиссёр, автор)
     — переопределение --grid-cols сетки: 1 → 2 → 3 (на десктопе
       не 4, как у репертуара, а 3 — карточки крупнее и с описанием)
   ============================================================ */


/* ══════════════════════════════════════════════════
   СЕТКА КАРТОЧЕК
   База — .page__grid из page.css.
   На десктопе остаётся 3 колонки (как и в page.css по умолчанию),
   поэтому переопределений не нужно. На широком десктопе тоже 3 —
   страница не переходит на 4 колонки в отличие от репертуара,
   потому что карточки здесь крупнее и с большим текстом.
   ══════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════
   КАРТОЧКА ПОСТАНОВКИ
   В отличие от .repertoire-page__card — это <article>,
   а не <a>: исторические постановки не кликабельны
   (отдельной страницы спектакля нет).
   ══════════════════════════════════════════════════ */
.historical__card {
  display: flex;
  flex-direction: column;
  gap: 7px;                        /* фото → заголовок (Figma 2716:2147) */
  color: var(--color-black-soft);
}

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


/* ── Фото ── */
.historical__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);
}

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


/* ── Текстовый блок ── */
.historical__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;                       /* заголовок → описание → метаданные */
}

.historical__card-title {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 56px;                 /* стартовый размер для мобилки;
                                      JS пересчитает в TagankaPage.bindCardTitlesFit */
  line-height: 0.9;
  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;

  -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;
}

.historical__card-desc {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 0;
  width: 100%;
}

/* ── Метаданные (год, режиссёр, автор) ── */
.historical__card-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

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

/* Лейбл и значение визуально отличаются весом: лейбл — medium,
   значение — book. Это намеренное исключение из общего --font-weight-body:
   без контраста веса между «Год премьеры:» и «1964» не читается
   структура записи. Используем физические токены напрямую. */
.historical__card-meta-label {
  font-weight: var(--font-weight-medium);
}
.historical__card-meta-value {
  font-weight: var(--font-weight-book);
}


/* ══════════════════════════════════════════════════
   ПЛАНШЕТ — стартовый размер заголовка карточки
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .historical__card-title { font-size: 60px; }
}


/* ══════════════════════════════════════════════════
   НОУТБУК + ДЕСКТОП (≥1024px)
   Описание и метаданные остаются 18px (как на мобилке/планшете) —
   для лучшего контраста body-текста на большом макете. Меняется
   только стартовый размер заголовка: узкий 1024-1279 — 52px,
   широкий ≥1280 — 60px.
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .historical__card-title {
    font-size: 52px;
  }
}

@media (min-width: 1280px) {
  .historical__card-title {
    font-size: 60px;
  }
}