/* ============================================================
   AFISHA.CSS — Специфика страницы «Афиша», Театр на Таганке

   ПЕРЕИСПОЛЬЗУЕТ:
     style.css       → body.page--light, .section-tab, .section-tab__line,
                       .section-tabs, .section-tabs--scrollable
     page.css        → .header--page, .page, .page--afisha, .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__cal-*, .filter__calendar*

   ЭТОТ ФАЙЛ содержит только специфику страницы афиши:
     — .afisha__months          табы месяцев (3 коротких таба)
     — .afisha__content         контейнер групп дней
     — .afisha__group*          группа дня (sticky day header на мобилке)
     — .afisha__group-date      строка с датой дня
     — .afisha__card*           карточка показа (фото + body + время + кнопки)
     — .afisha__badge*          бейджи на фото
     — .afisha__partner-btn     партнёрская кнопка
     — .afisha__next*           переход к следующему месяцу
   ============================================================ */


/* ══════════════════════════════════════════════════
   ТАБЫ МЕСЯЦЕВ
   Кол-во месяцев задаёт CMS и может быть >3, поэтому контейнер несёт
   .section-tabs--scrollable (style.css) — как табы репертуара. Скролл,
   скрытый скроллбар, сброс padding бара через :has() и боковые отступы
   крайних табов даёт утилита. Здесь — только страничная специфика поверх:
   табы-месяцы это ссылки <a>, поэтому убираем у них подчёркивание.
   На десктопе (≥1024) утилита выключает скролл; ниже задаём gap 48px.
   ══════════════════════════════════════════════════ */
.afisha__months {
  display: flex;
  gap: 40px;
  flex: 1;
  margin-top: 0;
  padding-bottom: 0px; /* запас для section-tab__line */
}

.afisha__months .section-tab {
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;

  /* ПЕРЕХОД СНЯТ НАМЕРЕННО — не менять на duration-*.

     Активность таба показывается двумя средствами сразу: линией
     .section-tab__line (через display, то есть скачком) и насыщенностью
     текста (opacity 0.4 → 1). Базовые 200мс из style.css рассинхронизируют
     их между собой.

     Замер на живой странице, момент 5мс после тапа:
       Август   — line: none,  opacity: 1     (линию потерял, но чёрный)
       Сентябрь — line: block, opacity: 0.4   (линию получил, но бледный)
     И так все 200мс, пока идёт переход. Глаз считывает насыщенность,
     а не полоску, поэтому старый месяц продолжает выглядеть выбранным,
     хотя формально уже не активен.

     Без перехода оба средства срабатывают в одном кадре и состояние
     переключается однозначно. На тач-устройствах анимация тут вообще
     ничего не давала: ховера нет, а переключение должно быть резким —
     это смена раздела, а не наведение. */
  transition: none;
}

/* ПРАВЫЙ ОТСТУП КОНЦА СКРОЛЛА — ПОЧИНКА ПОСЛЕ ДОБАВЛЕНИЯ КНОПКИ «ЕЩЁ».

   Утилита .section-tabs--scrollable вешает margin-right на :last-child.
   Но последним ребёнком контейнера теперь ВСЕГДА является кнопка «Ещё»,
   а на мобилке она hidden → display: none. Селектор :last-child
   структурный, он матчит скрытый элемент как ни в чём не бывало, и отступ
   уходит в никуда: последний месяц упирается в край вьюпорта и при скролле
   выглядит обрезанным.

   Целимся в последний <a> вместо последнего ребёнка: месяцы — это <a>,
   кнопка — <button>, поэтому :last-of-type среди <a> всегда даёт последний
   реальный месяц независимо от состояния кнопки.

   Спейсер через ::after здесь не годится: контейнер флексовый с gap,
   и псевдоэлемент получил бы ещё и gap перед собой — отступ вышел бы
   в 40px + 10px вместо 10px. */
.afisha__months a.section-tab:last-of-type {
  margin-right: 10px;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .afisha__months a.section-tab:last-of-type { margin-right: 16px; }
}

/* Десктоп: скролла нет, боковые отступы возвращает padding бара */
@media (min-width: 1024px) {
  .afisha__months a.section-tab:last-of-type { margin-right: 0; }
}


/* ══════════════════════════════════════════════════
   СВОРАЧИВАНИЕ МЕСЯЦЕВ В ДРОПДАУН «ЕЩЁ» (только ≥1024)

   Проблема: количество месяцев задаёт CMS. На мобилке лишние месяцы
   уезжают в горизонтальный скролл (.section-tabs--scrollable), но на
   десктопе утилита скролл выключает, и строка табов начинает распирать
   свою колонку в .page__bar и наезжать на фильтры.

   Решение: на десктопе в строке остаётся N табов, остальные уходят
   в дропдаун. N задаётся переменной --js-months-visible и читается
   из JS (initMonthsCollapse) — в скрипте нет ни одного хардкода
   размеров и брейкпоинтов.

   ВАЖНО: переменная живёт на .afisha__months, а не на :root — тогда
   значение можно переопределить каскадом, не трогая глобал. До 1024px
   переменная не задана вовсе: JS это читает как «не сворачивать»
   и возвращает все табы в строку.

   Подбор N: тюнится ОДНИМ числом здесь, JS не трогается. Если самые
   длинные названия («Сентябрь Октябрь Ноябрь Декабрь») на каком-то
   брейкпоинте перестанут влезать — уменьшить значение на 1.
   ══════════════════════════════════════════════════ */

/* ОБЯЗАТЕЛЬНОЕ ПРАВИЛО, БЕЗ НЕГО НИЧЕГО НЕ СПРЯЧЕТСЯ.
   Свёрнутые табы и неактивная кнопка «Ещё» гасятся атрибутом hidden
   (TagankaPage.toggleHidden). Но .section-tab задаёт display: inline-flex,
   а класс перебивает display: none из UA-стилей для [hidden] —
   элемент останется видимым. Возвращаем display: none явно. */
.afisha__months .section-tab[hidden] {
  display: none;
}

/* Кнопка «Ещё» — визуально обычный таб.
   .section-tab уже даёт шрифт, цвет и opacity: 0.40.
   Здесь только внутренняя раскладка под шеврон: .section-tab —
   это flex-column (подпись + .section-tab__line), поэтому подпись
   с шевроном заворачиваются в свою строку .afisha__months-more-inner. */
.afisha__months-more:hover,
.afisha__months-more[aria-expanded="true"] {
  opacity: 1;
}

.afisha__months-more-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;   /* em, а не px: зазор растёт вместе с кеглем таба */
}

/* Размер в em, а не в px: таб — 22px на 1024–1439 и 28px на ≥1440,
   фиксированные 14px из width/height в разметке выглядели мелко рядом
   с bold-подписью. CSS перебивает презентационные атрибуты SVG,
   поэтому HTML править не нужно — атрибуты остаются как фолбэк. */
.afisha__months-more-chevron {
  width:  0.75em;
  height: 0.75em;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out-smooth);
}

/* Открытый дропдаун — шеврон вверх */
.afisha__months-more[aria-expanded="true"] .afisha__months-more-chevron {
  transform: rotate(180deg);
}

/* У кнопки «Ещё» нет .section-tab__line — активным месяцем она никогда
   не бывает: окно видимых табов всегда включает активный месяц
   (см. initMonthsCollapse). Подпись у кнопки постоянная, ширина
   не скачет при переходах между месяцами. */


/* ── СОДЕРЖИМОЕ ДРОПДАУНА ──────────────────────────
   Панель — .filter__dropdown из filter-kit.css (фон, тень, радиус,
   позиционирование через JS). Здесь только список месяцев внутри. */

/* Выравнивание названий месяцев по левому краю слова «Ещё».
   toggleDropdown ставит инлайновый left = левому краю кнопки, то есть
   по краю ПАНЕЛИ. Названия внутри при этом сдвинуты вправо на padding
   списка и с «Ещё» не совпадают. Утягиваем панель влево ровно на этот
   padding — тогда текст встаёт в одну вертикаль с кнопкой.
   Правится в CSS, а не в JS: инлайновый left остаётся нетронутым,
   общая механика дропдаунов не меняется. */
.afisha__months-dropdown {
  margin-left: calc(-1 * var(--space-l));
}

.afisha__months-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
  padding: var(--space-l);
}

/* Свёрнутые месяцы в панели: тот же .section-tab, но всегда в полную
   непрозрачность — 40% в выпадающем списке читались бы как disabled.
   Размер фиксируем базовым 22px: правило ≥1440 (28px) сюда не достаёт,
   т.к. оно scoped на .afisha__months, а панель лежит вне контейнера —
   но лучше зафиксировать явно, чтобы панель не поехала при рефакторинге. */
.afisha__month-option {
  font-size: 22px;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
}

.afisha__month-option:hover {
  opacity: 0.6;
}


/* ══════════════════════════════════════════════════
   СМЕНА МЕСЯЦА БЕЗ ПЕРЕЗАГРУЗКИ — СОСТОЯНИЕ ЗАГРУЗКИ

   initMonthSwap вешает .is-loading на время запроса и снимает после
   подмены разметки. Вся анимация здесь, JS только переключает класс.
   При прогретом кеше класс живёт меньше кадра и подгасания не видно —
   оно проявляется только когда сеть реально тормозит.
   ══════════════════════════════════════════════════ */
.afisha__content {
  transition: opacity var(--duration-base) var(--ease-out-smooth);
}

.afisha__content.is-loading {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .afisha__content { transition: none; }
}


/* ══════════════════════════════════════════════════
   РАЗДЕЛИТЕЛЬ + БЫСТРЫЕ ЧЕКБОКСЫ
   .afisha__divider удалён — используется .page__divider из page.css.
   ══════════════════════════════════════════════════ */

/* quickfilters убраны */


/* ══════════════════════════════════════════════════
   КОНТЕНТ: СПИСОК ГРУПП ПО ДАТАМ (Figma 3089:6141)

   Каждая группа — плоский grid: дата + карточки.
     < 768     — 1 колонка, дата сверху, карточки стопкой
     768–1023  — 2 колонки, дата спан сверху, карточки по 2
     1024–1439 — 3 колонки, дата спан сверху, карточки по 3
     ≥ 1440    — 4 колонки как в Figma: дата в кол.1,
                 карточки в кол.2-4. 4-я карточка на переносе
                 встаёт в (2,2) — под 1-ю карточку, под датой пусто.


   ── ПРОПОРЦИОНАЛЬНОЕ МАСШТАБИРОВАНИЕ ──────────────

   Базовая ширина макета Figma — 1680px. На десктопе (≥1024)
   все горизонтальные величины (боковой padding, column-gap,
   row-gap) скейлятся единым коэффициентом --afisha-scale.
   Это гарантирует:
     • на 1680+ всё ровно по макету (scale = 1)
     • на узких десктопах всё уменьшается синхронно,
       вертикали между группами не расходятся
     • визуальный ритм сохраняется при любой ширине

   Нижняя граница scale = 0.65 (≈1092px) предотвращает
   слишком мелкие значения.


   ── КЛЮЧЕВОЕ ПРАВИЛО ГРИДА ────────────────────────

   grid-template-columns использует `minmax(0, 1fr)`,
   а не `1fr`. По умолчанию `1fr` = `minmax(auto, 1fr)`,
   где auto = min-content ребёнка. Заголовки карточек —
   это uppercase-слова, которые не переносятся
   и создают огромный min-content. Это раздувает колонки
   по-разному в каждой группе → вертикали съезжают.
   minmax(0, 1fr) форсирует равные колонки, игнорируя
   min-content. Дополнительно .afisha__card { min-width: 0 }
   разрешает карточке сжиматься ниже своего min-content.

   Разделитель между группами — border-bottom на самой группе.
   ══════════════════════════════════════════════════ */

.afisha__content {
  background: var(--color-bg-warm);
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

/* База — мобилка: flex column, дата сверху, карточки стопкой */
.afisha__group {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 10px;
  border-bottom: 1px solid var(--color-black-soft-25);
}

/* Последняя группа без нижней границы — под ней всегда идёт
   .afisha__next-divider, два разделителя встык давали бы двойную линию.
   На мобилке border-bottom уже отключён своим медиа-блоком. */
.afisha__group:last-of-type {
  border-bottom: none;
}

/* Критично: разрешает карточке сжиматься ниже min-content
   родительской grid-колонки. Без этого uppercase-заголовок
   (одно длинное слово) раздувает колонку, и вертикали съезжают. */
.afisha__group .afisha__card { min-width: 0; }

/* Колонка даты: Pragmatica Extended Bold 40→56px + Medium 18px,
   оба красные (Figma 3081:5738–5740), gap 8px. */
.afisha__group-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-brand);
  min-width: 0; /* та же причина, что и для карточки */
}

.afisha__group-date time {
  font-family: var(--font-accent);
  font-size: 40px;
  font-weight: var(--font-weight-bold);
  line-height: 0.85;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.afisha__group-date span {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: 0.95;
  letter-spacing: -0.025em;
}


/* ══════════════════════════════════════════════════
   МОБИЛКА (до 767px) — переопределения группы дня
   База афиши стилизована под десктоп (grid-раскладка).
   Здесь возвращаем оригинальный мобильный layout
   на плоской HTML-структуре
   (.afisha__group > .afisha__group-date + .afisha__card[]).

   Лежит ПОСЛЕ базовых .afisha__group-date правил чтобы перебить их
   при одинаковой специфичности (файл — перевёрнутый mobile-first).

   Что восстанавливается:
   — sticky-заголовок дня (дата прилипает при скролле);
   — дата 56px слева, день недели 18px справа в одну строку;
   — отступы: дата→карточка 60px, карточка→карточка 80px;
   — воздух 80px под последней карточкой перед разделителем;
   — разделитель сверху группы (кроме первой).
   ══════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* Группа дня: stack с большими отступами, без бокового padding —
     горизонтальные отступы переезжают на дату и карточки,
     чтобы sticky-заголовок мог растянуться на всю ширину экрана.
     padding-bottom:80px — воздух под последней карточкой:
     gap работает только между детьми, у последней карточки снизу пусто. */
  .afisha__group {
    gap: 80px;
    padding: 0 0 80px;
    border-bottom: none;
  }

  /* Разделитель на каждой группе кроме первой ВИДИМОЙ.

     ДЕФОЛТ ЗАДАЁТ РАЗМЕТКА, А НЕ JS. Граница есть у любой группы,
     перед которой в разметке стоит другая группа.

     Раньше правило было завязано на :not(.is-first-visible), и это
     давало мигание при каждой загрузке страницы месяца: applyFilters()
     выполняется только на DOMContentLoaded, до него класс не проставлен
     никому, поэтому в первом кадре границу получала И первая группа —
     под баром промигивала лишняя чёрная линия и исчезала, как только
     отрабатывал скрипт. На мобилке это было особенно заметно, потому
     что правило живёт только здесь, в max-width: 767.98px.

     Сиблинг-комбинатор `~`, а не `+`: `+` смотрит только на предыдущего
     соседа, а после фильтрации между группами могут оказаться скрытые.
     Скрытые группы `~` тоже считает существующими — это чинится
     правилом .is-first-visible ниже. */
  .afisha__group ~ .afisha__group {
    border-top: 1px solid var(--color-black-soft);
  }

  /* Поверх дефолта: после фильтрации первой видимой может стать любая
     группа. applyFilters() вешает на неё .is-first-visible и снимает
     границу.

     ВАЖНО: специфичность обоих правил одинаковая (0,2,0), решает
     порядок в файле. Это правило должно идти ПОСЛЕ базового — не
     переставлять и не разносить по разным медиаблокам. */
  .afisha__group.is-first-visible {
    border-top: none;
  }

  /* Заголовок дня: sticky, растянут на всю ширину экрана.
     Оригинал: дата 56px слева, день недели 18px справа,
     выровнены по базовой линии через align-items: flex-end. */
  .afisha__group-date {
    position: sticky;
    top: -1px;
    z-index: var(--z-elevated);
    background: var(--color-bg-warm);
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0;
    padding: 16px 10px 8px;
  }

  .afisha__group-date time {
    font-size: 56px;
  }

  /* Компенсация разницы высот от line-height крупного заголовка */
  .afisha__group-date span {
    padding-bottom: 6px;
  }

  /* Карточки: горизонтальные отступы 10px.
     Первая карточка дня ближе к дате на 20px —
     даёт 60px (дата→карточка) вместо 80px (карточка→карточка). */
  .afisha__group > .afisha__card {
    margin-left: 10px;
    margin-right: 10px;
  }

  .afisha__group > .afisha__card:first-of-type {
    margin-top: -20px;
  }

}


/* ══════════════════════════════════════════════════
   КАРТОЧКА АФИШИ (новый вертикальный layout)
   Figma 3053:3450 — image → body → btns
   ══════════════════════════════════════════════════ */
.afisha__card {
  display: flex;
  flex-direction: column;
  gap: 7px;         /* gap между photo и body (Figma gap-[7px]) */
  position: relative;
}

/* Фото: пропорция 16:9 на всех ширинах, object-fit cover (Figma 3053:3451)

   Было: фиксированная height 176px на мобилке и планшете, а с 1024px
   правило перебивалось на aspect-ratio. Из-за этого пропорция на мобилке
   зависела от ширины экрана и не совпадала с десктопной: на узком
   телефоне фото выходило почти квадратным, на широком — вытянутым.

   Стало: пропорция задаётся один раз здесь и дальше не переопределяется.

   ═══ НЕ ЗАМЕНЯТЬ НА aspect-ratio ═══
   Это не устаревший приём, а обход бага Safari 15.5: блоки с aspect-ratio
   не инвалидируют композитные слои при зуме, из-за чего карточка
   пересчитывается с опозданием и кнопки под фото прыгают. Баг уже ловили
   на этой странице, чинили padding-bottom'ом и однажды случайно откатили
   обратно на aspect-ratio — после чего он вернулся.

   padding-bottom считается от ШИРИНЫ содержащего блока, поэтому
   56.25% = 9/16 даёт кадр 16:9 независимо от ширины карточки.
   height: 0 обязателен — иначе паддинг добавится к автовысоте. */
.afisha__card-photo {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Картинка вынута из потока и растянута по слоту.

   Так высота блока задаётся ИСКЛЮЧИТЕЛЬНО паддингом родителя и не зависит
   ни от атрибутов width/height, ни от момента декодирования файла.
   Это вторая половина обхода: без неё атрибуты вроде 600×600 при кадре
   16:9 заставляют Safari зарезервировать квадрат до декода, а после
   декода переложить блок — и всё, что ниже фото, съезжает. Кнопки
   карточки прыгают, зум перезапускает цикл, на прогретом кеше
   не воспроизводится вовсе. Это и есть баг со «съехавшими кнопками».

   Атрибуты в разметке всё равно стоит держать в пропорции 16:9
   (1600×900) — они резервируют место до загрузки CSS. Но вёрстка
   на них больше не опирается, что бы ни проставила CMS. */
.afisha__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Бейдж Премьера (Figma 3053:3461): чёрный, повёрнут 8.56°, сверху-слева */
.afisha__card-badge {
  position: absolute;
  z-index: 5; /* выше sticky date header (z-index:elevated=10) */
  pointer-events: none;
}

/* Бейдж «Премьера» (Figma 3053:3461):
   position:absolute относительно .afisha__card.
   top:-26px — торчит выше фото (вне overflow:hidden фотоблока).
   rotate(8.56deg) идентично главной странице. */
.afisha__card-badge--premiere {
  top: -26px;
  left: 13px;
  display: inline-block;
  background: var(--color-black-ui);
  color: var(--color-white);
  font-family: var(--font-main);
  font-weight: var(--font-weight-bold);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.035em;
  padding: 7px 8px 6px;
  border-radius: 1px;
  transform: rotate(8.56deg);
  transform-origin: left center;
  pointer-events: none;
  white-space: nowrap;
}

/* Pushka badge: 48×48 круг, правый край time-row.
   position:static перебивает .afisha__card-badge { position:absolute }. */
.afisha__card-badge--pushka {
  position: static;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;       /* скругляет картинку */
}
.afisha__card-badge--pushka img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* картинка заполняет круг */
  border-radius: 50%;
  display: block;
}

/* Строка «время + pushka badge»: время слева, бейдж справа */
.afisha__card-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Тело карточки: info + time, gap 11px (Figma 3053:3453 gap-[11px]) */
.afisha__card-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* Info: title + genre + scene без внутренних отступов (Figma 3053:3454) */
.afisha__card-info {
  display: flex;
  flex-direction: column;
}

/* Заголовок: Pragmatica Book 52px, line-height 0.9, uppercase, tracking -1.5px.
   JS fitCardTitles масштабирует под ширину — JS читает класс afisha__card-title */
.afisha__card-title {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 52px;
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--color-black-soft);

  /* Длинные цельные слова («Вестсайдская») должны переноситься, иначе
     слово вылезает за карточку и распирает страницу вбок на мобилке.
     Тот же приём, что в .repertoire-page__card-title:
       overflow-wrap — разрыв слова целиком, если иначе не влезает;
       hyphens: auto — мягкий перенос по словарю (нужен lang="ru" на <html>).
     JS fitCardTitles (pass 2) опирается ровно на этот hyphens-перенос. */
  overflow-wrap: break-word;
  -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;
}

/* Жанр и сцена: Medium 18px, line-height 1.25, tracking -0.27px */
.afisha__card-meta {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
}

/* Время: Extended Bold 32px, line-height 0.9 (Figma 3053:3458) */
.afisha__card-time {
  font-family: var(--font-accent);
  font-size: 32px;
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  color: var(--color-black-soft);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

/* Кнопки: gap 13px (≈12.8px из Figma 3053:3463) */
.afisha__card-btns {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 6px;  /* визуальный воздух между time и кнопками */
}

/* Кнопки карточки: Pragmatica Extended 20px, высота 60px (Figma 3053:3465) */
.afisha__card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border-radius: 2px;
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: var(--font-weight-body);
  letter-spacing: -0.015em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration-fast) ease;
}

.afisha__card-btn--primary {
  background: var(--color-black-soft);
  color: var(--color-white);
  border: none;
}
.afisha__card-btn--primary:hover { opacity: 0.8; }

/* Партнёрская кнопка: border 1px black, белый фон (Figma 3053:3468) */
.afisha__card-btn--partner {
  background: var(--color-white);
  color: var(--color-black-soft);
  border: 1px solid var(--color-black-soft);
  gap: 5px;
}
.afisha__card-btn--partner:hover { background: var(--color-black-soft-04); }

.afisha__card-partner-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
}


/* ══════════════════════════════════════════════════
   БЕЙДЖИ НА ФОТО
   Premiere: тот же угол 8.5° что у .global-info__badge в hero.
   ══════════════════════════════════════════════════ */
.afisha__badge {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.afisha__badge--premiere {
  top: 14px;
  left: 10px;
  background-color: var(--color-black-ui);
  color: var(--color-white);
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  line-height: 1;
  padding: 5px 10px;
  transform: rotate(8.5deg);
  transform-origin: left center;
}

.afisha__badge--pushka {
  bottom: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-shadow: 0 2px 8px var(--color-black-20);
}
.afisha__badge--pushka img { width: 100%; height: 100%; object-fit: contain; }


/* ══════════════════════════════════════════════════
   ПАРТНЁРСКАЯ КНОПКА
   ══════════════════════════════════════════════════ */
.afisha__partner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  border: 1.5px solid var(--color-black-soft-20);
  border-radius: 2px;
  background: none;
  font-family: var(--font-accent);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  color: var(--color-black-soft);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--duration-fast) ease;
}
.afisha__partner-btn:hover        { background: var(--color-black-soft-04); }
.afisha__partner-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }


/* ══════════════════════════════════════════════════
   ПУСТОЕ СОСТОЯНИЕ
   Перенесено в page.css как .page__empty* — используется
   на всех внутренних страницах. JS вешает обработчик
   #afishaEmptyReset на кнопку с классом .page__empty-reset.
   ══════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════
   ПЕРЕХОД К СЛЕДУЮЩЕМУ МЕСЯЦУ
   Постоянный блок внизу страницы: разделитель на всю
   ширину + ссылка в стиле .schedule__afisha-btn со стрелкой,
   отцентрованная в контейнере (и на мобилке, и на десктопе).
   Не зависит от фильтров — всегда предлагает пользователю
   продолжить просмотр в следующем месяце.

   Название месяца и href проставляются из JS на основе
   активного таба месяца в шапке страницы. Если следующего
   месяца нет — весь блок скрывается.

   Типографика ссылки совпадает с .schedule__afisha-btn:
   Pragmatica Extended Bold 22px + стрелка 24px, gap 10px.
   ══════════════════════════════════════════════════ */
.afisha__next {
  padding: 0 10px 80px;
  text-align: center; /* центрирует inline-flex ссылку внутри блока */
}

.afisha__next[hidden] {
  display: none;
}

.afisha__next-divider {
  width: 100%;
  height: 1px;
  background: var(--color-black-soft);
  margin: 0 0 40px;
}

.afisha__next-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 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;
}

.afisha__next-link:hover { opacity: 0.50; }
.afisha__next-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

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



/* ══════════════════════════════════════════════════
   ПЛАНШЕТ (768–1023)
   Только специфика страницы афиши. Базовые intro/bar/divider —
   в page.css. Размеры здесь фиксированные, без scale-логики.
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Группа — 2 колонки, дата спаном сверху */
  .afisha__group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 40px;
    padding: 40px 16px 28px;
  }
  .afisha__group-date { grid-column: 1 / -1; }
}


/* ══════════════════════════════════════════════════
   НОУТБУК И ДЕСКТОП (≥1024px)
   Только специфика страницы афиши. Базовые шапка/.page/.page__intro/
   .page__bar/.page__divider — в page.css. Фильтр-кит — в filter-kit.css.
   Использует токены --inner-* для горизонтальных величин.
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  .afisha__months { overflow-x: visible; flex-shrink: 1; gap: 48px; }

  /* ── ПРОПОРЦИОНАЛЬНЫЕ ГОРИЗОНТАЛЬНЫЕ ВЕЛИЧИНЫ ──────
     Используем токены --inner-* (см. tokens.css).
     Афиша использует свой row-gap (60px база, не 80) — задаёт
     значение локально через clamp.

     Все величины скейлятся одним коэффициентом → вертикальные
     границы карточек никогда не расходятся между разными
     группами и разными ширинами экрана. */
  .afisha__content {
    margin-top: 16px;
    padding-left:  var(--inner-pad-x);
    padding-right: var(--inner-pad-x);
  }

  /* Группа — 3 колонки (1024–1439), дата спаном сверху.
     minmax(0, 1fr) вместо 1fr — чтобы uppercase-заголовки
     карточек не распирали колонки до своего min-content. */
  .afisha__group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--inner-col-gap);
    row-gap:    clamp(39px, 3.571vw, 60px);
    padding:    clamp(26px, 2.381vw, 40px) 0
                clamp(23.4px, 2.143vw, 36px);
  }
  .afisha__group-date { grid-column: 1 / -1; }

  .afisha__group-date time { font-size: 56px; }

  .afisha__card-badge--premiere { font-size: 18px; }

  /* ── РАВНАЯ ВЫСОТА КАРТОЧЕК + РАСПРЕДЕЛЕНИЕ КОНТЕНТА ──
     Карточки в ряду уже равны по высоте (grid align-items: stretch).
     Здесь распределяем содержимое внутри карточки: фото + название
     прижаты вверх, мета + время + кнопки — к низу. Разную высоту
     названий (1–3 строки) забирает гибкий зазор над мета-блоком. */
  .afisha__card-body { flex: 1; }   /* тело заполняет высоту карточки → кнопки к низу */
  .afisha__card-info { flex: 1; }   /* инфо заполняет тело → время к низу тела */
  .afisha__card-info > .afisha__card-meta:first-of-type {
    margin-top: auto;               /* мета-блок к низу инфо, название остаётся вверху */
  }

  /* ── РОВНЫЙ РИТМ: название→мета = мета→время (≈11px) ──
     meta→время задаёт gap тела (11px). Тот же минимальный зазор
     название→мета — через margin-bottom названия; гибкая слабина
     из margin-top:auto выше добавляется поверх него. На самой высокой
     карточке ряда оба зазора ровно 11px, на коротких — верхний больше. */
  .afisha__card-title { margin-bottom: 11px; }

  /* ── ФОТО ──
     Переопределения нет: aspect-ratio 16:9 задан в базовом правиле
     и действует на всех ширинах. Не дублировать здесь — иначе при
     следующей правке пропорции разъедутся между мобилкой и десктопом,
     что уже однажды и произошло. */
}


/* ══════════════════════════════════════════════════
   ШИРОКИЙ ДЕСКТОП (≥1440px)
   Переключение на 4-колоночную раскладку афиши.
   Шапка/.page/.page__intro-title — в page.css.
   Scale-коэффициент и горизонтали наследуются с 1024+.
   ══════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .afisha__months .section-tab { font-size: 28px; }

  /* Падинги и margin-top intro/bar наследуются с 1024+ блока через clamp —
     не переопределяем, чтобы sclae-формула работала однородно до 1680+ */

  /* Группа — 4 колонки ровно по Figma 3089:6092:
     [дата] [карточка] [карточка] [карточка]
     Дата перестаёт спанить — садится строго в первую ячейку.
     Нижний padding увеличен относительно 1024–1439 для большего
     визуального воздуха между группами на широком десктопе. */
  .afisha__group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: clamp(48px, 4.286vw, 72px);
  }
  .afisha__group-date {
    grid-column: 1;
    grid-row: 1;
  }

  /* Карточки распределены по колонкам 2-4 первой и второй строки.
     `:nth-of-type` корректен: .afisha__group-date — <div>,
     .afisha__card — <article>, счётчик идёт только по <article>.

     ЭТИ ШЕСТЬ ПРАВИЛ — ФОЛБЭК, НЕ ОСНОВНАЯ РАСКЛАДКА. Реальные
     координаты проставляет layoutGroup() из afisha.js через
     data-col/data-row (см. два блока ниже). Здесь остаётся раскладка
     на случай, когда скрипт не отработал: ошибка в JS, отключённый
     JS, момент до DOMContentLoaded. Не удалять. */
  .afisha__group > article:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .afisha__group > article:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .afisha__group > article:nth-of-type(3) { grid-column: 4; grid-row: 1; }
  .afisha__group > article:nth-of-type(4) { grid-column: 2; grid-row: 2; }
  .afisha__group > article:nth-of-type(5) { grid-column: 3; grid-row: 2; }
  .afisha__group > article:nth-of-type(6) { grid-column: 4; grid-row: 2; }

  /* ── ДЕФОЛТ ДО ОТРАБОТКИ СКРИПТА ───────────────────
     applyFilters() зовётся на DOMContentLoaded, а первый кадр длинной
     страницы браузер может нарисовать раньше. Без этого правила дни
     с одним показом успевали мигнуть в колонке 2 и прыгнуть в третью —
     та же природа, что у промигивания разделителя в мобильном блоке
     выше по файлу.

     Считаем карточки в разметке, а не видимые: до первого прогона
     фильтров ещё нет, поэтому одно равно другому. Покрыты дни
     с одним-двумя показами — большинство и ровно тот случай, ради
     которого сдвиг затевался. Дни с 3+ до отработки скрипта
     раскладываются по-старому, с колонки 2, то есть тоже без скачка. */
  .afisha__group:not(:has(> article:nth-of-type(3))) > article:nth-of-type(1) { grid-column: 3; }
  .afisha__group:not(:has(> article:nth-of-type(3))) > article:nth-of-type(2) { grid-column: 4; }

  /* ── РАСКЛАДКА ПО data-col / data-row ──────────────
     Координаты считает layoutGroup() в afisha.js: ряд из трёх карточек
     начинается с колонки 2, ряд из одной-двух — с колонки 3, чтобы
     левый край неполных рядов вставал в одну вертикаль по левой
     стороне третьей колонки. Раскладка по рядам — там же в JS.

     ПРЕФИКС .afisha__content НУЖЕН ДЛЯ СПЕЦИФИЧНОСТИ, НЕ ДЛЯ ОБЛАСТИ
     ДЕЙСТВИЯ. Дефолт выше даёт (0,3,2) — :not() и :has() берут
     специфичность своего самого специфичного аргумента, поэтому
     цепочка внутри :has() считается целиком. Без префикса эти правила
     дали бы (0,3,0) и проиграли бы дефолту: в дне с двумя показами
     карточки после фильтрации остались бы на дефолтных местах.
     С префиксом выходит (0,4,0) — перебивает, и порядок правил
     в файле уже ничего не решает. Не убирать при рефакторинге.

     Рядов заложено три — до девяти показов в дне. Если CMS отдаст
     больше, дописать data-row="4" и дальше; JS считает любое число
     рядов сам и в правке не нуждается. */
  .afisha__content .afisha__group > .afisha__card[data-col="2"] { grid-column: 2; }
  .afisha__content .afisha__group > .afisha__card[data-col="3"] { grid-column: 3; }
  .afisha__content .afisha__group > .afisha__card[data-col="4"] { grid-column: 4; }

  .afisha__content .afisha__group > .afisha__card[data-row="1"] { grid-row: 1; }
  .afisha__content .afisha__group > .afisha__card[data-row="2"] { grid-row: 2; }
  .afisha__content .afisha__group > .afisha__card[data-row="3"] { grid-row: 3; }
}


/* ══════════════════════════════════════════════════
   СКОЛЬКО МЕСЯЦЕВ ОСТАЁТСЯ В СТРОКЕ — ЕДИНСТВЕННЫЙ ТЮНИНГ-НОБ

   Держим лестницу одним блоком в конце файла: правится одно число,
   JS не трогается вообще. Читается в initMonthsCollapse через
   getComputedStyle(nav).getPropertyValue('--js-months-visible').

   Значение НЕ включает саму кнопку «Ещё» — это количество месяцев,
   остающихся видимыми. Итоговая ширина строки = N табов + «Ещё».

   Лестница:
     до 1024   переменная не задана → JS не сворачивает,
               работает горизонтальный скролл (.section-tabs--scrollable)
     1024–1279  2 месяца + «Ещё»
     1280–1679  3 месяца + «Ещё»
     1680+      4 месяца + «Ещё»

   Почему 1440 не даёт +1: на этом брейкпоинте шрифт таба растёт
   22px → 28px (см. блок ≥1440 выше), и прибавка ширины уходит
   в увеличенные подписи. Реальный запас на четвёртый месяц
   появляется только на дизайн-базе 1680.
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) { .afisha__months { --js-months-visible: 2; } }
@media (min-width: 1280px) { .afisha__months { --js-months-visible: 3; } }
@media (min-width: 1680px) { .afisha__months { --js-months-visible: 4; } }