/* ============================================================
   SCHEDULE.CSS — Блок «На сценах театра», главная страница
   Театр на Таганке
   ============================================================ */

/* ------------------------------------------------------------
   ПРАВКИ 29.07 (главная страница)
   1. Кнопка «Билеты» в карточке заменена на обёртку
      .schedule__card-tickets с одной или двумя кнопками .ticket-btn
      (основная + опциональная партнёрская) — как на странице спектакля.
      Стили .schedule__card-btn удалены, вид кнопок берётся из style.css.
   2. Мобильный список дополнительных показов (.schedule__list*)
      удалён целиком — остаётся только лента-слайдер.
   Все места правок помечены в файле комментарием «ПРАВКА 29.07».
   ------------------------------------------------------------ */


/* ══════════════════════════════════════════════════════════════
   ПАРАМЕТРЫ ДЛЯ JS
   ПРАВКА 09.08: вертикальные смещения «лесенки» переехали сюда
   из констант CARD_OFFSETS_MOBILE / CARD_OFFSETS_DESKTOP в schedule.js.
   Схема смещений — [0, offset-1, 0, offset-3] по индексу карточки,
   поэтому нулевые позиции в переменных не хранятся.
   JS читает их через getComputedStyle(document.documentElement).
   ══════════════════════════════════════════════════════════════ */
:root {
  --js-card-offset-1: 80px;
  --js-card-offset-3: 40px;
}

@media (min-width: 1024px) {
  :root {
    --js-card-offset-1: 106px;
    --js-card-offset-3: 53px;
  }
}

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

/* ══════════════════════════════════════════════════════════════
   ШАПКА БЛОКА
   ══════════════════════════════════════════════════════════════ */
.schedule__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

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

/* Ссылка «Полная афиша» — мобилка скрыта, десктоп показан */
.schedule__afisha-header {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   ТАБЫ
   ══════════════════════════════════════════════════════════════ */
.schedule__tabs {
  display: flex;
  gap: 40px;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.schedule__tab {
  white-space: nowrap;
  flex-shrink: 0;
}

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

/* ══════════════════════════════════════════════════════════════
   СЛАЙДЕР — только мобилка / планшет
   ══════════════════════════════════════════════════════════════ */
.schedule__slider-section {
  margin-top: 40px;
  margin-left: -10px;
  margin-right: -10px;
  transition: opacity 120ms ease, transform 120ms ease;
}

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

/* Трек: нативный горизонтальный скролл со snap */
.schedule__slider-track {
  overflow-x: scroll;
  overflow-y: auto;    /* visible пробивает overflow-x: hidden на родителе */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* padding создаёт отступ от обоих краёв */
  padding-left: 10px;
  /* padding-right убран — правый зазор обеспечивает ::after */
  scroll-padding-left: 10px;
  scroll-padding-right: 10px;  /* snap последней карточки с отступом 10px */
  overscroll-behavior-x: contain;
  /* box-sizing чтобы padding не срезался */
  box-sizing: content-box;
}

.schedule__slider-track::-webkit-scrollbar {
  display: none;
}

/* До инициализации JS все карточки скрыты — JS покажет нужные */
.schedule__cards .schedule__card {
  display: none;
}

/* Флекс-контейнер карточек — движение нативное, JS только читает позицию */
.schedule__cards {
  display: flex;
  gap: 48px;
  width: max-content;
}

/* Правый зазор после последней карточки */
.schedule__cards::after {
  content: '';
  display: block;
  width: 10px;
  flex-shrink: 0;
  /* margin-left не нужен: на мобиле gap=48px, snap-align:end держит позицию */
}

/* ══════════════════════════════════════════════════════════════
   КАРТОЧКА СЛАЙДЕРА
   ══════════════════════════════════════════════════════════════ */

/* Фиксированная ширина 280px по макету */
.schedule__card {
  flex: 0 0 280px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-snap-align: start;
}

/* Враппер-ссылка: фото + текст, gap 8px (из Figma) */
.schedule__card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  color: inherit;
  text-decoration: none;
  min-height: 0;
}

/* Фото — квадрат 280×280 */
.schedule__card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--color-placeholder);
  flex-shrink: 0;
}

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

/* Оверлей: диагональный градиент.
   ПРАВКА 29.07: было равномерное затемнение по всей площади
   (два слоя linear-gradient 90deg с одинаковыми стопами — по сути
   заливка). Карточки из-за этого читались слишком тёмными.
   Теперь плотность падает по диагонали: максимум в левом верхнем
   углу — там же лежит дата, и градиент как раз держит её читаемой, —
   и полная прозрачность в правом нижнем, где фотография остаётся
   нетронутой.
   135deg в CSS направлен из левого верхнего угла в правый нижний,
   поэтому первый стоп — это верхний левый.
   Тёплый слой --color-overlay-warm убран: при 5% прозрачности поверх
   уходящего в ноль чёрного он не читался, а лишний слой мешал править. */
.schedule__card-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, var(--color-black-20) 0%, transparent 100%);
  pointer-events: none;
}

/* Дата на фото */
.schedule__card-date {
  position: absolute;
  top: 16px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}

.schedule__card-date-num {
  font-family: var(--font-accent);
  font-size: 56px;
  font-weight: var(--font-weight-bold);      /* Extended Bold = 700 */
  line-height: 0.85;
  color: var(--color-white);
  letter-spacing: -0.015em;                 /* -0.84px при 56px */
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.schedule__card-date-day {
  font-family: var(--font-main);             /* Pragmatica Medium */
  font-size: 18px;
  font-weight: var(--font-weight-medium);    /* 500 */
  line-height: 0.95;
  color: var(--color-white);
  letter-spacing: -0.025em;                 /* -0.45px при 18px */
  margin-top: 2px;
  text-transform: none;
}

/* Текст под фото */
.schedule__card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
}

.schedule__card-title {
  font-family: var(--font-main);
  font-size: 60px;
  font-weight: var(--font-weight-book);
  color: var(--color-black-soft);
  letter-spacing: -0.025em;
  line-height: 0.875;
  width: 100%;
  text-transform: uppercase;
  white-space: normal;
  
  /* Разрешаем перенос слов целиком, если они не лезут */
  overflow-wrap: break-word;
  
  /* Включаем автоматические переносы */
  -webkit-hyphens: auto;
  hyphens: auto;
  
  /* ПРАВКА 02.08: «хвост» переноса поднят с 3 букв до 4.
     Было 7 3 3 — браузер отрывал «ПРЕВРАЩЕ-/НИЕ». Теперь на новую
     строку уходит минимум 4 буквы: «ПРЕВРА-/ЩЕНИЕ».
     Переносы: слово от 7 букв, min 3 до дефиса, min 4 после. */
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-chars: 7 3 4;
  hyphenate-limit-chars: 7 3 4;

  /* ПРАВКА 01.08: лимит строк.
     По умолчанию 3 строки. JS (fitTitleLines в schedule.js) меряет
     фактическую высоту заголовка после подгонки шрифта и вешает
     .is-4lines / .is-5lines, если содержимое реально не помещается.
     Раньше .is-4lines вешался по признаку «шрифт упал до fontMin»,
     что с числом строк не связано — отсюда обрезка «ГЕРОЙ НАШЕГО
     ВРЕ-» на третьей строке. */
  /* ПРАВКА 09.08: запас под выносные элементы.
     При line-height 0.875 строчный бокс ниже content area шрифта
     (54.25px против 72px на кегле 62px), поэтому overflow: hidden
     срезал краткую у Й и точки у Ё сверху и хвосты Д/Ц/Щ снизу.
     Метрики сняты с живой страницы через canvas TextMetrics
     на Pragmatica: сверху не хватает 0.082em, снизу 0.059em.
     Паддинги дают запас, отрицательные маргины возвращают текст
     ровно на прежнее место — отступы внутри карточки не меняются.
     max-height считает паддинги: box-sizing: border-box глобальный. */
  --title-pad-top: 0.09em;
  --title-pad-bottom: 0.07em;
  padding-top: var(--title-pad-top);
  padding-bottom: var(--title-pad-bottom);
  margin-top: calc(-1 * var(--title-pad-top));
  margin-bottom: calc(-1 * var(--title-pad-bottom));

  max-height: calc(2.625em + var(--title-pad-top) + var(--title-pad-bottom));   /* 0.875 × 3 + запас */
  overflow: hidden;
}

.schedule__card-title.is-4lines {
  max-height: calc(3.5em + var(--title-pad-top) + var(--title-pad-bottom));     /* 0.875 × 4 + запас */
}

.schedule__card-title.is-5lines {
  max-height: calc(4.375em + var(--title-pad-top) + var(--title-pad-bottom));   /* 0.875 × 5 + запас */
}

/* ──────────────────────────────────────────────────────────────
   ЕДИНАЯ ТИПОГРАФИКА «ЗАГОЛОВОК КАРТОЧКИ / ЛИД»
   Один и тот же набор действует в четырёх местах главной:
     .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 правил нет — не ищи их там.
   ────────────────────────────────────────────────────────────── */
.schedule__card-meta {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-book);
  color: var(--color-black-soft);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* ── КНОПКИ БИЛЕТОВ ──
   ПРАВКА 29.07: вместо одной кнопки .schedule__card-btn («Билеты») —
   обёртка с одной или двумя кнопками, ровно как на странице спектакля.

   Сами кнопки — общий компонент .ticket-btn из style.css:
     .ticket-btn--primary                          «Купить билеты» (чёрная)
     .ticket-btn--partner .ticket-btn--ticketland  партнёрская (лого + текст)

   Вторая кнопка ОПЦИОНАЛЬНА: если у показа нет партнёра, CMS выводит
   только первую — она занимает всю ширину карточки, вёрстка не ломается.

   Здесь — только раскладка (как .show__ticket-buttons на странице
   спектакля). Вид кнопок не переопределяем: он живёт в style.css.
   В карточке всегда колонка — ширина карточки (280px моб / ~340px
   на 1680) не даёт поставить партнёрскую кнопку с лого в один ряд. */
.schedule__card-tickets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
}

.schedule__card-tickets .ticket-btn {
  width: 100%;
}

/* ── Мобильные доработки (до 1024px) ──
   На десктопе слайдер использует те же карточки, поэтому обе правки
   обёрнуты в max-width — иначе они утекут и туда. */
@media (max-width: 1023.98px) {

  /* ПРАВКА 29.07: отступ от мета-информации (сцена и время) до кнопок
     увеличен на 8px. Между .schedule__card-content и .schedule__card-tickets
     работает gap: 8px родительской карточки — добираем недостающее
     маргином на самой обёртке, не трогая gap (он же держит внутренние
     отступы контента). */
  .schedule__card-tickets {
    margin-top: 8px;
  }

  /* ПРАВКА 29.07: логотип партнёра уменьшен на 20% — тогда 32px → 25.6px.
     Базовое значение живёт в style.css (.ticket-btn--partner img) и
     с августа 2026 равно 27px, так что это переопределение отыгрывает
     всего ~1.4px. Осталось как явное значение для карточек афиши —
     если разница больше не нужна, правило можно просто удалить. */
  .schedule__card-tickets .ticket-btn--partner img,
  .schedule__card-tickets .ticket-btn--partner svg {
    max-height: 25.6px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ПУСТОЕ СОСТОЯНИЕ
   ══════════════════════════════════════════════════════════════ */
.schedule__card-photo--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-white-05);
  border: 1px dashed var(--color-white-15);
}

.schedule__card-photo--empty .schedule__card-overlay { display: none; }

.schedule__empty-icon {
  opacity: 0.20;
  color: var(--color-white);
  flex-shrink: 0;
}

.schedule__empty-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 var(--space-m);
  text-align: center;
}

.schedule__empty-title {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white-40);
  line-height: 1.35;
}

.schedule__empty-sub {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-white-25);
  line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════════
   SCROLL-ИНДИКАТОР
   ══════════════════════════════════════════════════════════════ */
.schedule__indicator {
  margin-top: 40px;
  padding: 0 10px;          /* 10px с обеих сторон → ширина трека 355px при 375px */
}

.schedule__indicator-track {
  position: relative;
  width: 100%;
  height: 3px;
  background: var(--color-black-soft-10);
  border-radius: 2px;
}

.schedule__indicator-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-black-soft);
  border-radius: 2px;
  /* Никакого transition — JS двигает напрямую без задержки */
}

/* ══════════════════════════════════════════════════════════════
   ПРАВКА 29.07: блок «СПИСОК» (.schedule__list*) удалён целиком.
   Это был мобильный список дополнительных показов под лентой
   (caption + строки с фото 100×100). Решили, что информации
   слишком много — остаётся только привычная лента-слайдер.
   Вместе с ним удалены из schedule.js: createListRow(),
   buildCaption(), _renderList(), ссылка this._list и константы
   RU_MONTHS_GEN / RU_MONTHS_SHORT (использовались только в caption).
   Из index.html удалён <ul class="schedule__list">.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   КНОПКА «ПОЛНЫЙ СПИСОК»
   Pragmatica Extended Bold 22px + стрелка →, без рамки и фона
   ══════════════════════════════════════════════════════════════ */
.schedule__afisha-btn {
  /* ПРАВКА 29.07: было inline-flex и прижато влево.
     display: flex + width: fit-content + auto-маргины центрируют кнопку,
     сохраняя кликабельную область по размеру содержимого. */
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin-top: 40px;
  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;
}

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

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

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

/* ══════════════════════════════════════════════════════════════
   КОНТРОЛЫ СЛАЙДЕРА (← →)
   Только десктоп. Появляются при наведении на .schedule__slider-section.
   Квадратные серые кнопки, высота = кнопке «Билеты».
   Выравнены по вертикальному центру блока, по краям с отступом -20px.
   ══════════════════════════════════════════════════════════════ */
.schedule__nav {
  display: none;              /* скрыты на мобилке */
}

/* ══════════════════════════════════════════════════════════════
   ДЕСКТОПНАЯ СЕТКА (скрыта на мобилке)
   ══════════════════════════════════════════════════════════════ */
.schedule__grid {
  display: none;
}

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

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

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

  .schedule {
    padding-top: var(--space-5xl);           /* 80px */
  }

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

  .schedule__header {
    padding: 0 6px var(--space-m);
  }

  /* Ссылка «Полная афиша» — стиль как у неактивного таба, без подчёркивания.
     Прижата вправо через margin-left:auto — тот же паттерн что у репертуара. */
  .schedule__afisha-header {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    margin-left: auto;   /* прижимаем к правому краю */
    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;
    transition: color var(--duration-fast) ease;
    user-select: none;
  }

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

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

  .schedule__afisha-header-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 6px;
  }

  .schedule__tabs {
    padding: 0 6px;
    align-items: baseline; /* выравниваем текст табов и ссылки по одной базовой линии */
    margin-left: 0;
margin-right: 0;
overflow-x: visible;
  }

  /* Статичная сетка — скрываем.
     ПРАВКА 29.07: строка `.schedule__list { display: none !important; }`
     удалена вместе с самим списком. */
  .schedule__grid { display: none !important; }

  /* Слайдер остаётся — показываем на десктопе тоже */
  .schedule__slider-section { display: block; }

  /* Слайдер-секция: расширяем до краёв viewport (компенсируем padding блока) */
  .schedule__slider-section {
    margin-left: calc(-1 * var(--inner-pad-x));
    margin-right: calc(-1 * var(--inner-pad-x));
    margin-top: 40px;
  }

  /* Трек: padding из тех же токенов что на внутренних страницах */
  .schedule__slider-track {
    padding-left: var(--inner-pad-x);
    scroll-padding-left: var(--inner-pad-x);
  }

  /* Карточки: gap = та же формула что на репертуаре (4 col: 72→96, 1440→1680) */
  .schedule__cards {
    gap: clamp(72px, 10vw - 72px, 96px);
  }

  /* Карточка: (100vw - 2×pad - 3×gap) / 4, pad = --inner-pad-x */
  .schedule__card {
    flex: 0 0 calc((100vw - 2 * var(--inner-pad-x) - 3 * clamp(72px, 10vw - 72px, 96px)) / 4);
    width: calc((100vw - 2 * var(--inner-pad-x) - 3 * clamp(72px, 10vw - 72px, 96px)) / 4);
  }

  /* Дата-число: 80px на 1680 → ~49px на 1024 (scale-1680) */
  .schedule__card-date-num {
    font-size: clamp(52px, 4.762vw, 80px);
  }

  /* День недели: не скейлится */
  .schedule__card-date-day {
    font-size: 22px;
    margin-top: 4px;
  }

  /* Название: 64px на 1680 → ~39px на 1024 (scale-1680).
     JS пересчитывает от computed значения вниз до fontMin. */
  .schedule__card-title {
    font-size: clamp(42px, 3.810vw, 64px);
  }

  /* Мета: правило снято, ступени на 1024 у общей шкалы нет.
     Было clamp(18px, 1.310vw, 22px). */

  /* ПРАВКА 07.08: отступ от названия до меты +8px — gap контейнера
     .schedule__card-info с 3px до 11px. На мобилке остаётся 3px:
     там карточка 280px и кегль мельче, лишний воздух не нужен. */
  .schedule__card-info {
    gap: 8px;
  }

  /* ПРАВКА 07.08: отступ от меты до кнопок +16px. Между
     .schedule__card-content и .schedule__card-tickets работает gap: 8px
     родительской карточки — добираем маргином, не трогая gap (он держит
     внутренние отступы контента). Мобильный аналог (+8px) живёт
     в @media (max-width: 1023.98px) выше. */
  .schedule__card-tickets {
    margin-top: 12px;
  }

  /* ПРАВКА 29.07: десктопный оверрайд .schedule__card-btn удалён.
     Кегль и высота кнопок теперь общие с .ticket-btn (60px, 18px → 20px
     на 1680) — так же, как на странице спектакля. */

  /* Индикатор: slider-section от 0px, поэтому padding = 16px */
  .schedule__indicator {
    padding: 0 var(--inner-pad-x);
  }

  /* ::after компенсирует gap: margin = -gap + pad-x = правый зазор */
  .schedule__cards::after {
    display: block;
    width: var(--inner-pad-x);
    margin-left: calc(-1 * clamp(72px, 10vw - 72px, 96px));
  }

  /* Кнопка «Полная афиша» снизу — скрыта на десктопе, ссылка перенесена в строку табов */
  .schedule__afisha-btn {
    display: none;
  }

  /* ── Контролы слайдера (десктоп) ──
     slider-section = relative-контейнер, кнопки абсолютные.
     Появляются при ховере на секцию; скрыты если скролл невозможен.
     Позиция: по центру высоты секции, по краям с -20px от границы карточек. */
  .schedule__slider-section {
    position: relative;
  }

  .schedule__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-elevated);

    /* ПРАВКА 29.07 (Safari): квадрат задаётся явными width/height,
       а не aspect-ratio.
       Было: width: auto; aspect-ratio: 1 / 1; height: auto; padding: 14px.
       Safari не вычисляет aspect-ratio: 1 / 1, когда И width, И height
       равны auto — просто игнорирует его и схлопывает кнопку
       в прямоугольник по контенту. Chrome и Firefox ratio разрешают,
       поэтому баг видно только в Safari.
       Тот же фикс уже применён на странице спектакля
       (.show__gallery-nav, .show__cast-nav — там квадрат 46px).
       Размер сохранён прежний: иконка + 14px отступа с каждой стороны,
       то есть 46px на 1024 → 50px на 1680. SVG центрируется флексом,
       padding больше не нужен. */
    /* ПРАВКА 10.08: размер берётся из токенов --slider-nav-* (tokens.css),
       общих с блоком новостей. Множители правятся там, в одном месте. */
    --nav-icon: var(--slider-nav-icon);
    --nav-size: var(--slider-nav-size);
    width:  var(--nav-size);
    height: var(--nav-size);
    padding: 0;
    flex-shrink: 0;

    background: var(--color-black-soft);
    color: var(--color-white);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    /* Скрыты по умолчанию — появляются при ховере на секцию */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease;
  }

  .schedule__nav svg {
    width:  var(--nav-icon);
    height: var(--nav-icon);
    flex-shrink: 0;
  }

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

  /* Позиция: 20px внутрь от края карточек (край карточек = inner-pad-x) */
  .schedule__nav--prev {
    left: calc(var(--inner-pad-x) + 20px);
  }
  .schedule__nav--next {
    right: calc(var(--inner-pad-x) + 20px);
  }

  /* Появляются при ховере на секцию — только если JS снял hidden */
  .schedule__slider-section:hover .schedule__nav:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }

  /* hidden перебивает display:flex */
  .schedule__nav[hidden] {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   НОУТБУК 1024–1280 — 3 карточки в экране вместо 4
   ПРАВКА 07.08: при делении ширины окна на 4 карточка в этом
   диапазоне получалась 197–260px — уже мобильных 280px, из-за чего
   заголовок уезжал на 4–5 строк, а кнопки билетов сжимались.
   Здесь делитель 3, промежутков между карточками 2 (было 3).
   Ниже 1024 работает мобильная лента с фиксированными 280px,
   выше 1280 — прежняя раскладка на 4.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279.98px) {

  .schedule__card {
    flex: 0 0 calc((100vw - 2 * var(--inner-pad-x) - 2 * clamp(72px, 10vw - 72px, 96px)) / 3);
    width:      calc((100vw - 2 * var(--inner-pad-x) - 2 * clamp(72px, 10vw - 72px, 96px)) / 3);
  }
}

/* ══════════════════════════════════════════════════════════════
   ДЕСКТОП ШИРОКИЙ (≥ 1440px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

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

  .schedule__tab {
    font-size: 24px;
  }

  /* Ссылка масштабируется вместе с табами */
  .schedule__afisha-header {
    font-size: 24px;
  }

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

}
/* Перенос в заголовке «На сценах театра» — только мобилка */
.schedule__title-br { display: none; }

@media (max-width: 767px) {
  .schedule__title-br { display: block; }
}