/* ============================================================
   ACTOR-PAGE.CSS — Специфика страницы актёра
   Театр на Таганке

   ПЕРЕИСПОЛЬЗУЕТ:
     style.css   → .header, .header__brand-block, .header__menu,
                   .header__burger, .overlay-gradient,
                   .overlay-gradient--top, .overlay-gradient--bottom
     menu.css    → меню (тот же оверлей что на главной)
     page.css    → ничего (страница не использует .header--page,
                   шапка тут тёмная как на главной)

   Инкремент 1: Hero (мобилка) + блок биографии.
   Инкремент 2: десктоп hero + двухколоночная композиция.
   Инкремент 3: цитаты + СМИ (слайдер).
   Инкремент 4: репертуар (переиспользует repertoire-page__card).
   ============================================================ */


/* ══════════════════════════════════════════════════
   КОРЕНЬ СТРАНИЦЫ
   Светлый фон под всем контентом, hero отдельной чёрной зоной
   сверху. Шапка лежит абсолютом поверх hero (как на главной).
   ══════════════════════════════════════════════════ */
.actor {
  background-color: var(--color-bg-warm);
  position: relative;
}


/* ══════════════════════════════════════════════════
   HERO — мобилка
   Высота: 80% от высоты вьюпорта (используем dvh для iOS).
   Внутри:
     — фото актёра во весь блок (object-fit: cover)
     — видео-оверлей поверх фото (создаётся JS, fade)
     — градиент сверху (как на главной — overlay-gradient--top)
     — градиент снизу (для читаемости кнопки play/pause)
     — крошка «← Актеры» — сверху-слева, ПОД логотипом-квадратом
     — кнопка play/pause — снизу-слева
   ══════════════════════════════════════════════════ */
.actor__hero {
  position: relative;
  width: 100%;
  height: 83dvh;
  overflow: hidden;
  background-color: var(--color-black-soft);
}

.actor__hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

/* Видео-оверлеи. Создаются JS только при наличии data-video на .actor__hero.
   Два элемента (forward + reverse) наложены друг на друга.
   В активной фазе hero (is-playing/is-reversing/is-paused) ОБА имеют
   opacity: 1 одновременно. Какое видно СВЕРХУ — определяется классом
   .is-active через z-index: неактивное лежит ниже (z-index: 1), активное
   сверху (z-index: 2). Так переключение direction происходит мгновенно
   без transition и без просвета фото сквозь (оба видео непрозрачны,
   промежуточного состояния нет). Кадры forward и reverse в момент
   переключения совпадают (последний кадр прямого = первый кадр
   обращённого файла), поэтому визуально не видно шва. */
.actor__hero-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;
  z-index: 1;
}
.actor__hero.is-playing   .actor__hero-video,
.actor__hero.is-reversing .actor__hero-video,
.actor__hero.is-paused    .actor__hero-video { opacity: 1; }
.actor__hero-video.is-active { z-index: 2; }


/* ══════════════════════════════════════════════════
   КРОШКА «← Актеры» — внутри hero
   Позиционирована сверху-слева, под красным логотипом.
   Логотип на мобилке 132×132 (top:0 left:0, см. style.css).
   Крошка лежит ПОД ним по высоте — слева 10px, top чуть выше
   нижнего края логотипа (см. Figma node 2197:3522).
   ══════════════════════════════════════════════════ */
.actor__hero-back {
  position: absolute;
  top: 144px;            /* под логотипом 132 + 12px воздуха */
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0;
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.5;
  z-index: 11;           /* поверх обоих градиентов (z-index: 10) */
  transition: opacity var(--duration-fast) ease;
}
.actor__hero-back:hover { opacity: 0.85; }
.actor__hero-back:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
  opacity: 1;
}

.actor__hero-back-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transform: rotate(180deg);
}

.actor__hero-back-text {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* ── Мобильная крошка «← Актеры» в bio-секции (над именем) ──
   В отличие от hero-крошки (absolute, белая, на фото) — эта в потоке,
   чёрная, на светлом фоне. Показывается только на мобилке; на десктопе
   скрыта (там работает hero-крошка). */
.actor__hero-back--bio {
  position: static;
  top: auto;
  left: auto;
  display: inline-flex;
  color: var(--color-black-soft);
  opacity: 1;
  z-index: auto;
  /* Сверху — воздух от нижнего края hero; снизу — небольшой отступ
     до имени (меньше прежнего 16px). */
  margin: 24px 0 8px;
  padding: 0 10px;         /* выравнивание с боковым padding bio-секции */
}
.actor__hero-back--bio:hover { opacity: 0.65; }
.actor__hero-back--bio:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
  opacity: 1;
}


/* ══════════════════════════════════════════════════
   КНОПКА PLAY/PAUSE — снизу-слева hero
   Визуал и геометрия — как .troupe__card-play и .controls__btn-square
   на главной: чёрный квадрат 50×50, без border-radius, иконки border'ами.
   ══════════════════════════════════════════════════ */
.actor__hero-play {
  position: absolute;
  left: 10px;
  bottom: 24px;
  width: 50px;
  height: 50px;
  background-color: var(--color-black-ui);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 11;           /* поверх градиента и видео */
}
.actor__hero-play:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

/* Если у актёра нет видео — кнопка не показывается (страховка). */
.actor__hero:not([data-video]) .actor__hero-play { display: none; }

.actor__hero-play-icon--pause {
  display: block;
  width: 14px;
  height: 16px;
  border-left: 4px solid var(--color-white);
  border-right: 4px solid var(--color-white);
}

.actor__hero-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. */
.actor__hero-play .actor__hero-play-icon--pause { display: none; }
.actor__hero.is-playing   .actor__hero-play .actor__hero-play-icon--play,
.actor__hero.is-reversing .actor__hero-play .actor__hero-play-icon--play  { display: none; }
.actor__hero.is-playing   .actor__hero-play .actor__hero-play-icon--pause,
.actor__hero.is-reversing .actor__hero-play .actor__hero-play-icon--pause { display: block; }


/* ══════════════════════════════════════════════════
   ИМЯ АКТЁРА
   По Figma — лежит ПОВЕРХ верха светлой секции (top: 8px от
   начала .actor__bio-section). Стиль идентичен .troupe__card-title:
   Pragmatica Book 60px / line-height 0.85 / tracking -1.5px / uppercase.
   На мобилке имя занимает почти всю ширину контента (355px), JS не
   нужен — это статичный заголовок страницы, под него выделено место.
   Перенос — словарными hyphens.
   ══════════════════════════════════════════════════ */
.actor__name {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 60px;
  line-height: 0.85;
  letter-spacing: -0.025em;
  color: var(--color-black-soft);
  text-transform: uppercase;
  margin: 0 0 80px;            /* 80px от низа имени до "Биография" */
  padding: 6px 8px 0;
  width: 100%;
  /* Переносы запрещены — каждая строка nowrap. Если не влезает —
     JS (fitName) уменьшает font-size. */
  overflow-wrap: normal;
  -webkit-hyphens: none;
  hyphens: none;
}
.actor__name-row {
  display: block;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════
   БЛОК БИОГРАФИИ
   Светлая секция под hero. Внутри:
     — имя актёра (см. .actor__name выше)
     — секции с заголовками (Биография / Возраст / Спектакли)
     — копирайт фотографа внизу
   Структура (по Figma):
     .actor__bio-section
       .actor__name            (имя — первое внутри секции)
       .actor__bio-groups      (список секций, gap: 64px от имени)
         .actor__bio-group     (gap: 48px между группами)
           .actor__bio-title
           .actor__bio-text    (один или несколько параграфов)
       .actor__bio-credit      (копирайт фото, opacity 55%)
   ══════════════════════════════════════════════════ */
.actor__bio-section {
  background-color: var(--color-bg-warm);
  position: relative;
  padding: 0;
}

.actor__bio-groups {
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: 0 10px;
}

/* Разделитель после группы «Биография» — flex-item внутри
   .actor__bio-groups. Мобилка — линия 1px чёрного (100%) на ширину
   колонки; десктоп — та же ширина контейнера (2 колонки сетки
   из 4) и 40% чёрного (см. медиа ≥1024). Воздух вокруг даётся
   gap'ом контейнера, собственные margin обнулены. */
.actor__bio-divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-black-soft);
}

/* Мобилка: отступ от разделителя до «Спектаклей» вдвое меньше
   отступа над разделителем. gap контейнера 96px с обеих сторон,
   гасим нижний на 48px → разделитель→Спектакли = 48px. */
.actor__bio-divider {
  margin-bottom: -48px;
}

.actor__bio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* В группах со списком спектаклей/архивных «заголовок → список»
   нужен больший зазор. Удваиваем gap группы (8 → 16 на мобилке,
   12 → 24 на десктопе). Группу «Биография» (без shows-list)
   не трогаем — там 8px подходит для расстояния между параграфами. */
.actor__bio-group:has(.actor__shows-list) {
  gap: 16px;
}

.actor__bio-title {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-bold);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-black-soft);
  margin: 0;
}

.actor__bio-text {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  margin: 0;
}
.actor__bio-text + .actor__bio-text { margin-top: 0; }

/* ────────────────────────────────────────────
   СПИСОК СПЕКТАКЛЕЙ / АРХИВНЫХ (строчками)
   Каждая строка: слева название (ссылка или текст), справа роль.
   Разделители — линии 25% чёрного ТОЛЬКО между строками (li + li),
   без верхней и нижней. Используется и в группе «Спектакли», и в
   группе «Архивные» — одинаковый визуал.
   ──────────────────────────────────────────── */
.actor__shows-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* На мобилке — одна колонка; на десктопе переопределяется на две.
     row-gap — воздух между ячейками вертикально, column-gap —
     горизонтально между двумя колонками на десктопе. */
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 19px;
  column-gap: var(--inner-col-gap, 24px);
}

.actor__shows-item {
  /* Горизонтальный flex: превью 80×80 слева, текстовый стек справа.
     Превью фиксированной ширины, текст растягивается на остаток.
     align-items: center — превью и текстовый стек выровнены по центру
     высоты ячейки (высота ячейки = высота превью 80px, а текстовый
     стек обычно ниже — он центрируется по вертикали). */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;                     /* зазор между превью и текстом */
  padding: 0;
}

/* Превью спектакля — обложка из библиотеки.
   Квадрат 80×80, 4:3-thumb обрезается по центру через object-fit:cover.
   Может быть обёрнут в <a class="actor__shows-thumb-link"> (см. ниже).
   Если страницы спектакля нет (архивные) — <img> лежит прямо в <li>. */
.actor__shows-thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
  border-radius: 1px;
  background: var(--color-black-soft-10);  /* плейсхолдер, пока картинка грузится */
}

/* Кликабельная обёртка превью — ссылка на страницу спектакля.
   Дублирует ту же ссылку, что у названия (.actor__shows-name).
   Для скринридеров — aria-hidden + tabindex=-1, чтобы не дублировать
   в фокусе и в озвучке (название уже даёт всю информацию). */
.actor__shows-thumb-link {
  flex: 0 0 80px;
  display: block;
  width: 80px;
  height: 80px;
  text-decoration: none;
  transition: opacity var(--duration-fast) ease;
}
.actor__shows-thumb-link:hover { opacity: 0.85; }
.actor__shows-thumb-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
/* img внутри обёртки уже не нуждается в собственном flex —
   обёртка занимает 80×80, img растягивается на 100%. */
.actor__shows-thumb-link .actor__shows-thumb {
  flex: none;
  width: 100%;
  height: 100%;
}

/* Текстовый стек: название сверху, роли под ним.
   Раньше стек был на самом li; теперь li горизонтальный, стек
   переехал во внутренний контейнер. */
.actor__shows-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;                  /* для wrap длинных названий */
  flex: 1 1 auto;
}

/* Разделителей между ячейками нет — структура стек с воздухом
   row-gap у списка. */

/* Название спектакля — первая строка стека внутри ячейки.
   Может быть <a> (ссылка на страницу спектакля) или <span>
   (для архивных без страницы). */
.actor__shows-name {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  min-width: 0;
}

/* Ссылка-название — подчёркивание появляется ТОЛЬКО при наведении. */
a.actor__shows-name {
  text-decoration-line: none;
  text-decoration-style: dotted;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 8%;
  text-underline-offset: 10%;
  text-underline-position: from-font;
  transition: opacity var(--duration-fast) ease;
}
a.actor__shows-name:hover {
  text-decoration-line: underline;
}
a.actor__shows-name:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
/* span-название (архивные без страницы) — без подчёркивания, не кликабельно. */
span.actor__shows-name {
  text-decoration: none;
}

/* Роли актёра — под названием, выровнены по ЛЕВОМУ краю. Одна строка
   с запятыми, переносится на несколько строк при нехватке ширины. */
.actor__shows-role {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  opacity: 0.55;
  min-width: 0;
  text-align: left;
}


/* Копирайт фотографа. opacity 0.55 как в Figma.
   На мобилке лежит под текстом группы «Биография» (внутри
   .actor__bio-group) — отступ сверху даёт gap группы, поэтому
   собственный margin/padding не нужен. На десктопе скрыт. */
.actor__bio-credit {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  opacity: 0.55;
  /* Отступ от текста биографии вдвое больше обычного gap группы (8px):
     gap 8 + margin-top 8 = 16px суммарно. */
  margin: 8px 0 0;
  padding: 0;
}


/* ══════════════════════════════════════════════════
   РАЗДЕЛИТЕЛЬ МЕЖДУ КРУПНЫМИ СЕКЦИЯМИ СТРАНИЦЫ
   Чёрная линия 1px, на 100% ширины контейнера, с боковыми
   отступами 10px (как у остальных секций).
   Используется между:
     1. Биография ↔ Цитаты      (модификатор --after-bio)
     2. Цитаты ↔ Репертуар       (модификатор --after-quotes)
   Вертикальные отступы зашиты в модификатор — общий компонент
   .actor__divider остаётся минимальным (только сам line).
   ══════════════════════════════════════════════════ */
.actor__divider {
  height: 1px;
  background-color: var(--color-black-soft);
  margin: 0 10px;
}

/* После био: 60px сверху от фотографа, 24px снизу до галереи/цитат. */
.actor__divider--after-bio      { margin-top: 60px;    margin-bottom: 24px; }

/* После галереи: 60px от индикатора, 24px до цитат. */
.actor__divider--after-gallery  { margin-top: 60px;    margin-bottom: 24px; }

/* После цитат: 0 сверху (точки уже дали 60px своим padding-bottom),
   24px снизу до "Репертуар". */
.actor__divider--after-quotes   { margin-top: 0;       margin-bottom: 24px; }


/* ══════════════════════════════════════════════════
   ГАЛЕРЕЯ — горизонтальный scroll-slider
   Перенесена 1-в-1 со страницы спектакля (show-page.css),
   классы переименованы show__gallery-* → actor__gallery-*.
   Мобилка: одно фото на экран, свайп.
   Десктоп: 2 фото видимых (1024–1439), 3 фото (1440+), gap по сетке.
   Видео-слайды (.actor__gallery-photo--video) и лайтбокс — логика
   в actor-page.js (перенесена из show-page.js).
   ══════════════════════════════════════════════════ */

/* Контролы-стрелки появляются только на десктопе при ховере на секцию */
.actor__gallery-nav {
  display: none;
}

.actor__gallery-section {
  background-color: var(--color-bg-warm);
  padding: 108px 0 0;
  margin-top: 0;
}

.actor__gallery-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--card-radius);
  scroll-snap-align: start;
  /* .actor__gallery-photo — <button> (a11y: фокус, Enter/Space).
     Сбрасываем нативные стили кнопки. */
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.actor__gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Видео-слайд галереи. Обложки-картинки нет — кадр берётся из
   самого <video> (preload="metadata" + #t=0.1 показывает первый кадр).
   Поверх — белый квадрат-контрол с play-иконкой. */
.actor__gallery-photo--video {
  position: relative;
}

.actor__gallery-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.actor__gallery-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: var(--z-elevated);
}

/* Иконка play — SVG-ассет фоном. Путь /play-dark.svg (как в show). */
.actor__gallery-play-icon {
  width: 16px;
  height: 18px;
  margin-left: 4px;
  border: 0;
  background-color: transparent;
  background-image: url("/play-dark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ── Safari/Chrome fix для правого края слайдера (1-в-1 из show) ──
   Edge-отступы и ширина карточки через переменные. */
.actor__gallery-section {
  --gallery-edge-x: 10px;
  --gallery-gap: 10px;
  --gallery-card-w: calc(100vw - var(--gallery-edge-x) - var(--gallery-edge-x));
}

.actor__gallery-track {
  padding-left: var(--gallery-edge-x);
  padding-right: 0;
  scroll-padding-left: var(--gallery-edge-x);
  scroll-padding-right: var(--gallery-edge-x);
  -webkit-overflow-scrolling: touch;
}

/* НЕ возвращаем width: max-content — именно он ломал Safari. */
.actor__gallery-items.scroll-slider__items {
  width: auto;
  min-width: 100%;
  gap: var(--gallery-gap);
}

/* Левый spacer не нужен — левый отступ даёт padding-left трека. */
.actor__gallery-items.scroll-slider__items::before {
  content: none !important;
  display: none !important;
}

/* Правый spacer: gap перед ::after компенсируем отрицательным
   margin-left — фактический воздух справа = ровно --gallery-edge-x. */
.actor__gallery-items.scroll-slider__items::after {
  content: "" !important;
  display: block !important;
  flex: 0 0 var(--gallery-edge-x) !important;
  width: var(--gallery-edge-x) !important;
  min-width: var(--gallery-edge-x) !important;
  margin-left: calc(0px - var(--gallery-gap)) !important;
  pointer-events: none;
  scroll-snap-align: none;
}

.actor__gallery-photo {
  flex: 0 0 var(--gallery-card-w);
  width: var(--gallery-card-w);
  max-width: var(--gallery-card-w);
  min-width: 0;
}

.actor__gallery-photo:last-child {
  margin-right: 0 !important;
  scroll-snap-align: end;
}

.actor__gallery-indicator {
  margin-top: 24px;
  padding-left: var(--gallery-edge-x);
  padding-right: var(--gallery-edge-x);
}


/* ══════════════════════════════════════════════════
   ЗАГОЛОВОК СЕКЦИИ СТРАНИЦЫ АКТЁРА
   Универсальный стиль заголовка для крупных секций
   ("Цитаты и СМИ", "Репертуар"). По выбору пользователя —
   переиспользуемый стиль, в перспективе пойдёт ещё в др. секции
   страницы актёра.
   На мобилке: Pragmatica Extended Black 32px, по левому краю,
   padding 10px по бокам как у остальных секций.
   ══════════════════════════════════════════════════ */
.actor__section-title {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-black);
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--color-black-soft);
  text-transform: none;
  margin: 0;
  padding: 0 10px;
  white-space: pre-line;        /* "\n" в тексте даёт перенос строки */
}


/* ══════════════════════════════════════════════════
   БЛОК «РЕПЕРТУАР»
   Использует .repertoire-page__card (см. repertoire-page.css):
   карточки спектаклей 1-в-1 как на странице репертуара, включая
   плашку "Премьера". Здесь — только обвязка: заголовок секции,
   сетка под колонки страницы актёра, кнопка "Показать ещё".

   Сетка:
     — мобилка:    1 колонка, gap 80px (как в репертуаре по умолчанию)
     — десктоп:    инкремент 2 (4 колонки на 1024+)
   Под мобилку используем стандартные значения от .page__grid не
   подключаем (page.css не подключён к actor.html), пишем сетку
   отдельно. На десктопе скейлинг через --inner-* токены.
   ══════════════════════════════════════════════════ */
.actor__repertoire-section {
  background-color: var(--color-bg-warm);
  padding: 0 0 80px;            /* нижний отступ до футера / следующего блока */
}

/* Если цитат нет — секция .actor__quotes-section не рендерится CMS.
   В норме она занимает место между галереей и репертуаром; без неё
   репертуар прилипает к галерее. Компенсируем padding-top через
   :has() на корне страницы. Десктопная компенсация — ниже в @media. */
.actor:not(:has(.actor__quotes-section)) .actor__repertoire-section {
  padding-top: 96px;
}

/* Если НЕТ НИ галереи, НИ цитат — bio-section идёт сразу к репертуару.
   Нужен визуальный разделитель между ними (как .actor__divider--after-bio
   в случае с галереей) + типичный отступ.

   МОБИЛКА: рисуем линию через ::before репертуара (отступы 10px по бокам
   как у .actor__divider). bio даёт margin-bottom 60px. Под линией 24px
   воздуха до содержимого. Итог: bio → 60 → 1px → 24 → репертуар.

   ДЕСКТОП: разделитель .actor__repertoire-divider в начале секции
   уже есть всегда (часть header'а с "Полная афиша"). Дополнительный
   ::before НЕ рисуем, чтобы не было ДВУХ линий. Существующее правило
   :not(:has(quotes)) → padding-top: 224px ниже в @media даёт нужный
   отступ от bio до этого разделителя. */
@media (max-width: 1023.98px) {
  .actor:not(:has(.actor__gallery-section)):not(:has(.actor__quotes-section)) .actor__bio-section {
    margin-bottom: 60px;
  }
  .actor:not(:has(.actor__gallery-section)):not(:has(.actor__quotes-section)) .actor__repertoire-section {
    position: relative;
    padding-top: 24px;          /* воздух от линии до содержимого */
  }
  .actor:not(:has(.actor__gallery-section)):not(:has(.actor__quotes-section)) .actor__repertoire-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    /* height 0 + border-top — рендерится одинаково с <hr> на retina,
       в отличие от height 1 + background-color (антиалиасинг). */
    height: 0;
    border-top: 1px solid var(--color-black-soft);
  }
}

/* Десктоп-only элементы: разделитель репертуара, ссылка «Полная афиша»,
   обёртка заголовка. На мобилке заголовок стоит через .actor__section-title
   без flex-ряда. */
.actor__repertoire-divider,
.actor__repertoire-header,
.actor__repertoire-link { display: none; }

/* Сетка карточек репертуара актёра — повторяет поведение .page__grid
   со страницы репертуара 1-в-1. Все breypoints, gap, padding-ы и
   fluid-скейл идентичны, чтобы карточки выглядели одинаково.
   На 1440+ — 4 колонки с fluid-gap clamp(72,10vw-72,96). */
.actor__repertoire-grid {
  /* ── Мобилка (до 767px) ── */
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 80px;
  padding: 64px 10px 80px;
  margin-top: 0;                 /* padding-top задаёт отступ от заголовка */
}

/* Локальное расширение карточки .repertoire-page__card в контексте
   сетки страницы актёра: нужно position:relative, чтобы плашка
   "Премьера" (position:absolute) могла позиционироваться от карточки.
   Стили карточки как компонента не трогаем — изменение живёт только
   внутри .actor__repertoire-grid. */
.actor__repertoire-grid .repertoire-page__card {
  position: relative;
}


/* ══════════════════════════════════════════════════
   БЕЙДЖ "ПРЕМЬЕРА"
   Используем те же CSS-классы что в afisha.css (.afisha__card-badge*),
   стили скопированы 1-в-1 из afisha.css (Figma node 3053:3461).
   На странице актёра HTML-разметка плашки внутри карточки повторяет
   паттерн из afisha.html.
   Дублирование стилей — осознанное, чтобы не расширять компонент
   репертуара. Когда плашка появится и на странице репертуара —
   стоит вынести в общий слой (style.css или отдельный компонент).
   ══════════════════════════════════════════════════ */
.afisha__card-badge {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

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

/* Кнопка "Показать ещё" — стиль идентичен .troupe__more.
   Обёртка центрирует кнопку по горизонтали и даёт нижний padding.
   Если кнопка скрыта (показаны все карточки) — обёртку схлопываем
   через :has(), чтобы не было пустого блока снизу. */
.actor__more-wrap {
  display: flex;
  justify-content: center;
  padding: 14px 10px 0;         /* отступ от грида до кнопки ÷2 (было 27) */
}

.actor__more {
  width: 100%;                  /* кнопка во всю ширину (с боковыми отступами wrap) */
  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;
}
.actor__more:hover         { opacity: 0.8; }
.actor__more:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.actor__more[hidden]       { display: none; }

.actor__more-wrap:not(:has(.actor__more:not([hidden]))) {
  display: none;
}


/* ══════════════════════════════════════════════════
   ЦИТАТЫ И СМИ — слайдер
   Структура (рендерится в HTML, JS не клонирует):
     .actor__quotes-section
       .actor__quotes-inner             (контейнер 355px ширины)
         h2.actor__quotes-title         "Цитаты\nи СМИ"
         .actor__quotes-viewport        (overflow-hidden, swipe-зона)
           .actor__quotes-track         (flex, transform: translateX)
             .actor__quote              (width: 100%, shrink: 0)
               svg.actor__quote-icon    (кавычка)
               p.actor__quote-text
               .actor__quote-divider    (чёрная полоса 10px)
               p.actor__quote-source
         .actor__quotes-controls
           button.actor__quotes-prev    (квадратная стрелка)
           .actor__quotes-dots          (точки-индикаторы)
             button.actor__quotes-dot
           button.actor__quotes-next

   Логика слайдера в actor-page.js:
     — авто-прокрутка раз в 8 сек (пауза при наведении/тапе/свайпе)
     — клавиатурная навигация ←/→ когда фокус внутри слайдера
     — touch-свайп (горизонтальный, > 30px)
     — стрелки prev/next (циклически)
     — точки-индикаторы (клик переводит на конкретный слайд)
   ══════════════════════════════════════════════════ */
.actor__quotes-section {
  background-color: var(--color-bg-warm);
  padding: 0 0 60px;             /* сверху — задаёт divider, снизу под точками 60 */
  display: flex;
  flex-direction: column;
  align-items: stretch;          /* viewport на всю ширину */
}

/* Отступы между блоками секции цитат — точечно, не через общий gap.
   От заголовка до viewport: 70px.
   От низа цитаты (viewport) до квадратиков-индикаторов: 64px. */
.actor__quotes-viewport  { margin-top: 70px; }
.actor__quotes-controls  { margin-top: 64px; }

/* Контролы цитат (квадратики-индикаторы) лежат в "узком" контейнере
   355px с padding 10px слева — в одной вертикали с заголовком
   "Цитаты и СМИ" и с заголовком "Репертуар".
   Заголовок НЕ ограничиваем — он использует общий .actor__section-title
   с padding 0 10px; дополнительное max-width: 355px сдвигало бы его
   вправо на экранах шире 355 из-за margin auto + padding. */
.actor__quotes-controls {
  max-width: 355px;
  margin-right: auto;          /* прижимаем к левому краю как заголовок */
  padding: 0 10px;
  box-sizing: border-box;
  width: 100%;
}


/* ── Viewport + track (full-bleed: на всю ширину секции) ── */
.actor__quotes-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* touch-action: pan-y чтобы вертикальный скролл страницы не
     блокировался — горизонтальный свайп ловим JS'ом, вертикальный
     отдаём системе. */
  touch-action: pan-y;
}

.actor__quotes-track {
  display: flex;
  /* gap НЕ ставим — каждый слайд занимает 100% ширины viewport,
     зазор между слайдами не виден, transform листает по 100%. */
  transition: transform var(--duration-base) var(--ease-out-smooth);
  will-change: transform;
}

/* Во время свайпа отключаем transition — track двигается за пальцем. */
.actor__quotes-track.is-dragging {
  transition: none;
}


/* ── Один слайд цитаты ──
   Full-bleed: ширина = 100% viewport-а (на мобилке = ширина экрана).
   Внутренний padding 10px по бокам — текст не упирается в края и
   совпадает с горизонтальной сеткой остальных секций (имя, био). */
.actor__quote {
  flex: 0 0 100%;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;                    /* блок текста ↔ источник */
}

.actor__quote-body {
  display: flex;
  flex-direction: column;
  gap: 16px;                    /* кавычки → текст → полоса */
}

.actor__quote-icon {
  width: 28px;
  height: 21px;
  display: block;
  color: var(--color-black-soft);
  flex-shrink: 0;
}

.actor__quote-text {
  font-family: var(--font-main);
  font-weight: var(--font-weight-book);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
  margin: 0;
}

.actor__quote-divider {
  width: 100%;
  height: 10px;
  background-color: var(--color-black-soft);
}

.actor__quote-source {
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin: 0;
}


/* ── Контролы (только точки на мобилке, стрелки добавляются на десктопе) ── */
.actor__quotes-controls {
  display: flex;
  align-items: center;
}

/* Стрелки prev/next — только на десктопе. На мобилке скрыты,
   листание там осуществляется свайпом. */
.actor__quotes-arrows {
  display: none;
}


/* Точки-индикаторы по числу слайдов.
   Figma (node 1899:4171): неактивные — мелкие 3×3, активный — 16×16.
   
   Чтобы смена размера не дёргала layout, каждый .actor__quotes-dot
   имеет ФИКСИРОВАННЫЙ layout-бокс 16×16. Видимый квадратик рисуется
   через ::after — у него width/height меняются, но сам dot не двигается.
   Зазоры между dots одинаковые (10px), layout стабилен. */
.actor__quotes-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.actor__quotes-dot {
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Видимый квадратик — ::after внутри фиксированного бокса.
   Неактивный: 3×3. Активный: 16×16 (заполняет весь бокс). */
.actor__quotes-dot::after {
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  background-color: var(--color-black-soft);
  transition: width var(--duration-fast) ease,
              height var(--duration-fast) ease;
}

.actor__quotes-dot.is-active::after {
  width: 16px;
  height: 16px;
}

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

/* Если цитата всего одна — точки не показываем.
   .actor__quotes-section получает класс .has-single-quote из JS. */
.actor__quotes-section.has-single-quote .actor__quotes-controls {
  display: none;
}


/* ════════════════════════════════════════════════════════════════════
   ▓▓▓  ДЕСКТОП (≥ 1024px)  ▓▓▓
   Layout shift на 1024: hero становится двухколоночным с двумя
   квадратными колонками, появляется блок "имя + копирайт" под hero,
   биография в две колонки, цитаты 4 в ряд (со слайдером при >4),
   репертуар 4 в ряд. Скейлинг — через --inner-* токены, baseline 1680.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ────────────────────────────────────────────
     HERO — двухколоночный: квадратное фото слева,
     пустая правая колонка (фон страницы).
     Высота hero = ширина одной колонки = 50% viewport.
     ──────────────────────────────────────────── */
  /* Обёртка первого экрана = hero + meta занимают вместе ровно
     100dvh. Flex-колонка:
       hero — свою высоту (flex-shrink: 0)
       спейсер (псевдоэлемент ::before у meta не нужен — используем
         margin-top: auto на самом meta) — растягивается на весь остаток
       meta — естественная высота (имя + padding)
     Эффект: имя прижато к низу viewport с 20px; при сжатии hero
     спейсер схлопывается до 0, meta упирается в hero с 20px воздуха
     сверху (padding-top meta). */
  .actor__first-screen {
    /* Переменная размера шрифта имени актёра — общая для hero
       (формула высоты завязана на title_fs) и для .actor__hero-name. */
    --actor-title-fs: clamp(80px, 7.619vw, 128px);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .actor__hero {
    /* Двухколоночная раскладка:
         ЛЕВАЯ колонка — светлый фон страницы. Несёт логотип
           (через шапку) и блок «крошка + имя» внизу.
         ПРАВАЯ колонка — фото-видео + кнопка play/pause +
           копирайт фотографа поверх фото.
       Высота hero — как на странице спектакля (show.html):
         calc(100dvh − 49px − title_fs × 0.62)
       Под hero ничего не лежит — имя и крошка теперь ВНУТРИ hero
       в левой колонке, прижаты к низу. Низ имени совпадает
       с нижней границей фото в правой колонке. */
    width: 100%;
    height: 98dvh;
    flex-shrink: 0;
    display: grid;
    /* minmax(0, 1fr) — колонки могут сжаться ниже min-content.
       Без этого nowrap-имя в левой колонке раздувало бы её, выталкивая
       фото за пределы viewport. С minmax(0, 1fr) колонки строго 50/50,
       а длинное имя ловится через JS (fitName) и уменьшается. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
    overflow: visible;
    background: transparent;
  }

  /* Левая колонка — flex-стек, прижатый к низу. Содержит крошку
     «← Актеры» и имя. Стек снизу вверх через justify-content: flex-end
     и flex-direction: column. Шапка (логотип) лежит абсолютом из
     глобального style.css — на этот flex не влияет. */
  .actor__hero-left {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    /* Воздух между крошкой и именем. Колонка прижата к низу, поэтому
       увеличение gap поднимает крошку, не трогая имя: 16 → 24 = крошка
       выше на 8px. */
    gap: 24px;
    /* Низ имени (базовая линия прописных) должен совпасть с нижней
       границей фото справа.
       Считаем по реальным метрикам Pragmatica Book (upm 1000,
       hhea ascent 920, descent 240 → content area 1.16em):
         line-height 0.885em → half-leading = (0.885 − 1.16) / 2 = −0.1375em
         базовая линия выше низа line-box на  −0.1375 + 0.24 = 0.1025em
         у имени margin-bottom: −0.13em → бордер-бокс опускается на 0.13em
       Итог: базовая линия выше низа колонки на (nudge − 0.13 + 0.1025)em.
       Приравниваем к нулю → nudge = 0.0275em.
       Множитель — единственное число для подстройки:
       больше → имя выше, меньше → имя ниже. */
    --name-bottom-nudge: calc(var(--actor-title-fs) * 0.0275);
    padding: 0 var(--inner-pad-x) var(--name-bottom-nudge);
    min-width: 0;                /* для корректного wrap длинного имени */
  }

  /* Правая колонка — медиа (фото + видео-оверлей).
     position:relative нужен, чтобы кнопка play и копирайт
     позиционировались абсолютом относительно него. */
  .actor__hero-media {
    position: relative;
    inset: auto;                  /* перекрываем мобильный absolute inset:0 */
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* Шапка растягивается на обе колонки грида:
     лого слева на светлом, header__right поверх фото справа.
     position и top/right у .header и потомков берутся из глобального
     style.css — НЕ переопределяем. */
  .actor__hero > .header {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Градиенты — ограничиваем правой колонкой (где фото). */
  .actor__hero .overlay-gradient {
    grid-column: 2;
    grid-row: 1;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* Крошка «← Актеры» внутри .actor__hero-left — обычный flex-item,
     не absolute (перебиваем мобильное правило). На десктопе фон
     левой колонки светлый — крошка ЧЁРНАЯ. */
  .actor__hero-left .actor__hero-back {
    position: static;
    top: auto;
    left: auto;
    bottom: auto;
    color: var(--color-black-soft);
    opacity: 1;
    z-index: auto;
  }
  .actor__hero-left .actor__hero-back:hover { opacity: 0.65; }
  .actor__hero-left .actor__hero-back:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 4px;
    opacity: 1;
  }

  /* Мобильную bio-крошку на десктопе скрываем — там работает
     hero-крошка в .actor__hero-left. */
  .actor__hero-back--bio {
    display: none;
  }

  /* Имя актёра — последний flex-item в левой колонке, прижат к низу.
     Низ имени должен совпадать с нижней границей фото в правой
     колонке. Ключевой момент: НЕ используем отрицательный
     margin-bottom — он тянул бы геометрический низ блока вверх,
     заставляя глифы свисать ниже колонки (и ниже фото).
     При line-height 0.8 строка-бокс меньше кегля, поэтому глифы
     и так плотно прилегают к низу; компенсацию half-leading даём
     через padding-bottom на самой колонке (.actor__hero-left). */
  .actor__hero-name {
    display: block;             /* перебиваем мобильный display: none */
    font-family: var(--font-main);
    font-weight: var(--font-weight-book);
    font-size: var(--actor-title-fs);
    /* Метрики 1-в-1 как на странице спектакля (.show__hero-meta-name):
       line-height 0.885 + отрицательные margin-top/-bottom для
       компенсации ascender/descender Pragmatica. */
    line-height: 0.885;
    letter-spacing: -0.04em;
    color: var(--color-black-soft);
    text-transform: uppercase;
    margin: -0.1em 0 -0.13em;
    /* LSB-компенсация Pragmatica: визуальный левый край буквы
       не совпадает с метрическим краем символа; сдвигаем влево
       на 10px, чтобы вертикаль буквы совпадала с --inner-pad-x. */
    padding: 0 8px 0 0;
    margin-left: -10px;
    /* Переносы запрещены — каждая строка (.actor__hero-name-row)
       nowrap. Если не влезает — JS (fitName) уменьшает font-size. */
    overflow-wrap: normal;
    -webkit-hyphens: none;
    hyphens: none;
  }
  .actor__hero-name-row {
    display: block;
    white-space: nowrap;
  }

  /* Кнопка play/pause — снизу-слева ПРАВОЙ колонки, поверх фото. */
  .actor__hero-play {
    grid-column: 2;
    grid-row: 1;
    left: 24px;
    bottom: 24px;
  }

  /* Копирайт фотографа поверх фото — снизу-СПРАВА правой колонки.
     Нижняя граница текста совпадает с нижней границей чёрного
     квадрата play (низ play = bottom: 24px). Для этого у копирайта
     тот же bottom: 24px и line-height: 1 — нижний край строки
     ложится на 24px от низа, как и низ квадрата. */
  .actor__hero-credit {
    grid-column: 2;
    grid-row: 1;
    position: absolute;
    right: 24px;
    bottom: 24px;
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    font-weight: var(--font-weight-book);
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-white);
    pointer-events: none;
    z-index: 11;                  /* поверх градиента (10) и видео */
    white-space: nowrap;
  }


  /* ────────────────────────────────────────────
     БЛОК .actor__hero-meta — на десктопе НЕ используется
     В V2-раскладке имя живёт ВНУТРИ hero (в .actor__hero-left),
     внешний .actor__hero-meta больше не нужен. Прячем CSS на случай
     если в HTML он остался (для совместимости со старым шаблоном).
     ──────────────────────────────────────────── */
  .actor__hero-meta {
    display: none;
  }

  /* Разделитель под блоком имя+копирайт — полная ширина viewport,
     без боковых отступов, 1px чёрный 100%. Живёт внутри
     .actor__first-screen, flex-shrink: 0. */
  .actor__hero-divider {
    width: 100%;
    height: 1px;
    border: none;
    background: var(--color-black-soft);
    margin: 1px 0 0;            /* 1px вниз — уходит за нижний край viewport */
    flex-shrink: 0;
  }

  /* На десктопе мобильное имя в био-секции и копирайт фотографа
     внутри неё прячем — они теперь в .actor__hero-meta. */
  .actor__name,
  .actor__bio-credit {
    display: none;
  }

  /* На мобилке скрываем блок hero-meta — он только для десктопа. */
  /* (см. ниже за пределами медиа — на мобилке блок display:none) */


  /* ────────────────────────────────────────────
     БИО-СЕКЦИЯ — 2 колонки, заполнена только левая
     (как .page__intro в репертуаре).
     ──────────────────────────────────────────── */
  .actor__bio-section {
    /* ═══ РЕГУЛИРОВКА: отступ между первым экраном (hero — фото,
       имя-фамилия, крошка) и контентом ниже, начинающимся с блока
       «Биография». Крути это значение. ═══ */
    --first-to-content-gap: 80px;
    padding: var(--first-to-content-gap) var(--inner-pad-x) 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--inner-col-gap);
  }

  /* Группы переезжают в первую колонку. Padding сетки убираем —
     паддинг теперь у самой секции. Расстояние между группами
     (Биография / Спектакли / Архивные) — 128px. */
  .actor__bio-groups {
    grid-column: 1;
    padding: 0;
    gap: 128px;
  }

  /* Разделитель после Биографии — по ширине левой колонки bio-секции,
     то есть 2 колонки сетки страницы из 4 (раньше растягивался на все
     четыре: 200% + --inner-col-gap). width: 100% = ширина
     .actor__bio-groups, поэтому левый край совпадает с --inner-pad-x
     секции, а правый — с правым краем колонки со списком спектаклей.
     Цвет — 40% чёрного: на толщине 1px линия читается темнее своей
     реальной прозрачности, 60% визуально почти не отличалось от 100%.

     Воздух вокруг линии асимметричный: контейнер даёт gap 128px
     с обеих сторон, гасим его отрицательными margin до нужных
     величин — над линией 128/1.5 ≈ 85px, под линией 128/2.5 ≈ 51px.
     margin-top:  -(128 − 85) = -43px
     margin-bottom: -(128 − 51) = -77px */
  .actor__bio-divider {
    width: 100%;
    border-top-color: var(--color-black-soft-40);
    margin-top: -43px;
    margin-bottom: -77px;
  }

  /* Расстояние между заголовком группы и её содержимым — 12px.
     Для групп со списком — удвоено до 24px (см. базовый стиль). */
  .actor__bio-group {
    gap: 12px;
  }
  .actor__bio-group:has(.actor__shows-list) {
    gap: 24px;
  }

  /* Заголовки "Биография / Возраст / Спектакли" — как у десктопных
     табов (.section-tab): font-accent bold 28px, line-height 1.15.
     На мобилке они font-accent bold 22px (исходный мобильный стиль),
     здесь только переопределение размера под десктоп. */
  .actor__bio-title {
    font-size: 28px;
  }

  /* Тексты под заголовками — как .page__intro-desc на десктопе:
     font-main body 20px, line-height 1.25, letter-spacing -0.015em. */
  .actor__bio-text {
    font-family: var(--font-main);
    font-weight: var(--font-weight-body);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.015em;
  }

  /* Список спектаклей/архивных на десктопе — название 20px,
     роль чуть мельче (18px). */
  .actor__shows-name {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.015em;
  }
  .actor__shows-role {
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.015em;
  }

  /* На десктопе список — две колонки в пределах левой половины
     bio-секции. Каждая ячейка остаётся горизонтальной (превью + стек). */
  .actor__shows-list {
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
    column-gap: var(--inner-col-gap);
  }
  .actor__shows-item {
    padding: 0;
  }
  .actor__shows-text {
    gap: 6px;
  }


  /* ────────────────────────────────────────────
     РАЗДЕЛИТЕЛИ — на десктопе следуют той же сетке, что секции:
     отступы по бокам = --inner-pad-x, не 10px как на мобилке.
     ──────────────────────────────────────────── */
  .actor__divider {
    margin-left: var(--inner-pad-x);
    margin-right: var(--inner-pad-x);
  }
  /* Отступ от био до галереи — 96px сверху. */
  .actor__divider--after-bio      { margin-top: 96px;  margin-bottom: 24px; }
  /* Разделитель после галереи — не нужен на десктопе, галерея
     и цитаты разделяются только отступом. */
  .actor__divider--after-gallery  { display: none; }
  .actor__divider--after-quotes   { margin-top: 0;     margin-bottom: 0; }


  /* ────────────────────────────────────────────
     SECTION-TITLE — 36px на 1680, скейл вниз до 1024.
     Паддинг по сетке.
     ──────────────────────────────────────────── */
  .actor__section-title {
    font-size: clamp(28px, 2.143vw, 36px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    padding: 0 var(--inner-pad-x);
    white-space: nowrap;         /* на десктопе "Цитаты и СМИ" в одну строку */
  }


  /* ────────────────────────────────────────────
     ГАЛЕРЕЯ (десктоп ≥1024) — перенос 1-в-1 из show-page.css
     2 фото видимых на 1024–1439, gap по сетке. Стрелки-навигация
     появляются при ховере на секцию. padding-top 172px.
     ──────────────────────────────────────────── */
  .actor__gallery-section {
    position: relative;       /* для абсолютных стрелок */
    padding: 172px 0 0;
    margin-top: 0;
    --gallery-edge-x: 16px;
    --gallery-gap: var(--inner-col-gap);
    /* 1024–1439: 2 карточки в ряд (один gap между ними). */
    --gallery-card-w: calc(
      (100vw - var(--gallery-edge-x) - var(--gallery-edge-x) - var(--gallery-gap)) / 2
    );
  }

  .actor__gallery-track {
    scroll-padding-right: var(--gallery-edge-x);
  }

  .actor__gallery-indicator {
    margin-top: 36px;
  }

  /* Стрелки-навигация. Центр стрелки = верх секции + padding-top
     + половина высоты фото (aspect 4/3 → высота = card-w · 3/4,
     центр = card-w · 3/8). padding-top 172px. */
  .actor__gallery-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(172px + var(--gallery-card-w) * 3 / 8);
    transform: translateY(-50%);
    z-index: var(--z-elevated);
    width: 46px;
    height: 46px;
    background: var(--color-black-soft);
    color: var(--color-white);
    border: 1px solid var(--color-white);
    box-sizing: border-box;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease;
  }
  .actor__gallery-nav svg {
    width: clamp(18px, 1.310vw, 22px);
    height: clamp(18px, 1.310vw, 22px);
    flex-shrink: 0;
  }
  .actor__gallery-nav:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }
  .actor__gallery-nav--prev { left: calc(var(--gallery-edge-x) + 20px); }
  .actor__gallery-nav--next { right: calc(var(--gallery-edge-x) + 20px); }

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


  /* ────────────────────────────────────────────
     ЦИТАТЫ — 3 в ряд + слайдер карусельного типа.
     Если цитат ≤ 3 — статично, контролы скрыты.
     Если > 3 — track шире viewport, листается по 1.

     Текст цитаты: 25.2px, line-height 1.25.
     gap заголовок → цитаты: 80px.
     gap цитаты → индикаторы: 28px.
     ──────────────────────────────────────────── */
  .actor__quotes-section {
    padding: 0 0 128px;          /* с квадратиками-индикаторами */
    margin-top: 96px;
  }

  /* Без квадратиков (≤3 цитат, .has-static-quotes) — отступ больше,
     т.к. нет визуального "якоря" внизу секции. */
  .actor__quotes-section.has-static-quotes {
    padding-bottom: 144px;
  }

  .actor__quotes-viewport  { margin-top: 80px; }
  .actor__quotes-controls  { margin-top: 28px; }

  .actor__quotes-controls {
    max-width: none;
    margin-right: 0;
    padding: 0 var(--inner-pad-x);
    display: flex;
    align-items: center;
  }

  /* Viewport / track */
  .actor__quotes-viewport {
    padding: 0 var(--inner-pad-x);
  }

  /* Слайд = 1/3 ширины viewport минус gap.
     Gap между цитатами = 96px (больше чем --inner-col-gap 72px,
     по макету Figma node 3176:9679). */
  .actor__quote {
    flex: 0 0 calc((100% - 2 * 96px) / 3);
    width:    calc((100% - 2 * 96px) / 3);
    padding: 0;
    margin-right: 96px;
  }
  .actor__quote:last-child {
    margin-right: 0;
  }

  /* Текст цитаты на десктопе — 25.2px. */
  .actor__quote-text {
    font-size: 25.2px;
    line-height: 1.25;
    letter-spacing: -0.005em;
  }

  /* Стрелки убраны из макета на десктопе — только квадратики. */
  .actor__quotes-arrows {
    display: none;
  }

  /* Если цитат ≤ 3 (.has-static-quotes) — контролы спрятаны,
     слайдер не двигается. JS добавляет класс. */
  .actor__quotes-section.has-static-quotes .actor__quotes-controls {
    display: none;
  }


  /* ────────────────────────────────────────────
     РЕПЕРТУАР — разделитель сверху + заголовок слева
     + ссылка «Полная афиша →» справа.
     4 в ряд, gap из --inner-* токенов.
     ──────────────────────────────────────────── */
  .actor__repertoire-section {
    padding: 0 0 var(--inner-pad-bottom);
  }

  /* Если у актёра НЕТ цитат — секция .actor__quotes-section не
     рендерится CMS, вместе с ней пропадает и разделитель
     .actor__divider--after-quotes, который служит линией над
     репертуаром. Компенсируем через ::before на самой секции
     репертуара: рисуем линию сверху с отступами как у .actor__divider
     (--inner-pad-x на десктопе) и даём воздух от bio/галереи до линии
     через padding-top секции. */
  .actor:not(:has(.actor__quotes-section)) .actor__repertoire-section {
    position: relative;
    /* 120 = 96 воздуха над линией + 24 под линией до содержимого */
    padding-top: 120px;
  }
  .actor:not(:has(.actor__quotes-section)) .actor__repertoire-section::before {
    content: '';
    position: absolute;
    top: 96px;
    left: var(--inner-pad-x);
    right: var(--inner-pad-x);
    /* height 0 + border-top рендерится так же, как у обычного <hr>
       с border-top: пиксель-в-пиксель совпадает с .actor__bio-divider.
       Раньше height: 1px + background-color давало другой рендер
       на retina (антиалиасинг создавал визуальную "глубину"). */
    height: 0;
    border-top: 1px solid var(--color-black-soft);
  }

  /* На десктопе мобильный заголовок «Репертуар» прячется,
     его заменяет .actor__repertoire-header с ссылкой. */
  .actor__repertoire-title-mobile { display: none; }

  /* Заголовочный бар: разделитель + заголовок + ссылка */
  .actor__repertoire-divider {
    margin: 0 var(--inner-pad-x);
  }

  .actor__repertoire-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--inner-pad-x);
    margin-top: 28px;            /* оптически = 40px с учётом ascender-gap шрифта */
  }

  /* Заголовок «Репертуар» — берёт стиль от .actor__section-title,
     но внутри flex-контейнера поэтому без отдельного padding. */
  .actor__repertoire-header .actor__section-title {
    padding: 0;
  }

  /* Ссылка «Полная афиша →» */
  .actor__repertoire-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-family: var(--font-accent);
    font-weight: var(--font-weight-bold);
    font-size: clamp(22px, 1.667vw, 28px);
    line-height: 0.9;
    letter-spacing: -0.035em;
    color: var(--color-black-soft);
    text-decoration: none;
    transition: opacity var(--duration-fast) ease;
  }
  .actor__repertoire-link:hover { opacity: 0.65; }
  .actor__repertoire-link:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 4px;
  }
  .actor__repertoire-link svg {
    width: 40px;
    height: 40px;
    display: block;
    transform: rotate(90deg);    /* стрелка вправо (иконка стрелка-вверх повёрнута) */
  }

  .actor__repertoire-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--inner-col-gap);
    row-gap: var(--inner-row-gap);
    padding: var(--inner-pad-top) var(--inner-pad-x) var(--inner-pad-bottom);
  }

  .actor__more-wrap {
    padding: 0 var(--inner-pad-x);
  }

  /* Кнопка «Показать ещё» — ширина = одна колонка при 3-кол сетке.
     Формула та же что у .actor__quote (1/3 минус gap'ы). */
  .actor__more {
    width: calc((100% - 2 * var(--inner-col-gap)) / 3);
    padding: 0;
  }


  /* ────────────────────────────────────────────
     ЭКСПЕРИМЕНТАЛЬНОЕ ВЕРХНЕЕ МЕНЮ (десктоп)
     Figma node 3158:9136. Только на странице актёра, только ≥1024.
     Поведение: иконки билета и поиска (без текста), справа — чёрная
     плашка Menu с бургером.
     Scope: .actor__hero .header — чтобы не зацепить другие страницы.
     В V2-раскладке шапка лежит над ФОТО (правая колонка hero),
     поэтому иконки белые (а не чёрные как было на светлой колонке).
     ВАЖНО: position и top/right у .header__right берутся из
     глобального style.css (position: absolute; top: 0; right: 0)
     — НЕ переопределяем, иначе шапка налезает на логотип.
     Здесь только gap и padding — отступы внутри шапки. ──────────────────────────────────────────── */
  .actor__hero .header__right {
    gap: 40px;              /* между группой иконок и кнопкой Menu */
    padding: 20px 30px;
  }

  /* Две иконки (билет + поиск) с gap 28 между ними. Группу
     оборачиваем псевдо-классом :has() — в разметке actor.html
     добавим .actor__header-icons. */
  .actor__header-icons {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .actor__header-icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    /* Цвет белый — иконки лежат над фото. На SVG-картинки внутри
       (<img src="...svg">) сам color не действует — для них
       применяем filter: brightness(0) invert(1) ниже. */
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--duration-fast) ease;
    text-decoration: none;
  }
  .actor__header-icon-btn:hover { opacity: 0.65; }
  .actor__header-icon-btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 4px;
  }

  .actor__header-icon-btn svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* SVG-иконки подключены как <img> — цвет управляется не через
     currentColor, а через filter. brightness(0) делает изображение
     полностью чёрным независимо от исходного цвета SVG, invert(1)
     инвертирует в белый. */
  .actor__header-icon-btn img {
    filter: brightness(0) invert(1);
  }

  /* Кнопка Menu — чёрная плашка с текстом и иконкой-бургером.
     Figma: padding 4 10 4 22, gap 10, border-radius 2, текст
     Pragmatica Extended Bold 18, иконка 56×56 (SVG файл). */
  .actor__header-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 22px;
    background: var(--color-black-ui);
    color: var(--color-white);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--font-accent);
    font-weight: var(--font-weight-bold);
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    transition: opacity var(--duration-fast) ease;
  }
  .actor__header-menu-btn:hover { opacity: 0.85; }
  .actor__header-menu-btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 4px;
  }
  .actor__header-menu-btn img {
    width: 56px;
    height: 56px;
    display: block;
  }

  /* ────────────────────────────────────────────
     БРЕНД-БЛОК (красный квадрат) — fluid-размер
     Вместо скачков по брейкпоинтам (как на главной 128→180→256
     или на внутренних 120→160→180) — плавный clamp.
     128px на 1024, 180px на 1680, линейный рост между ними.
     Привязка к ширине колонки hero: 180/840 ≈ 21.4% от 50vw.
     ──────────────────────────────────────────── */
  .actor__hero .header__brand-block {
    width:  clamp(128px, 10.714vw, 180px);
    height: clamp(128px, 10.714vw, 180px);
  }

  /* На десктопе actor лого-анимации НЕТ (по требованию — анимация
     только на мобилке). Глобальный style.css вешает на .is-video-mode
     transform translate+scale в @media min-width:1024px — перебиваем
     его, возвращая лого в статичное состояние (красный квадрат,
     логотип скрыт), даже если JS повесил .is-video-mode. */
  .actor__hero .header__brand-block.is-video-mode {
    transform: none;
    background-color: var(--color-brand);
  }
  .actor__hero .header__brand-block.is-video-mode .header__logo--final {
    opacity: 0;
  }
}


/* Мобильные правила для V2-обёртки .actor__hero-left.
   На мобилке обёртка прозрачна (display: contents) — все потомки
   (.actor__hero-back и .actor__hero-name) ведут себя как прямые
   дети .actor__hero. Это позволяет мобильному absolute-позиционированию
   .actor__hero-back (top: 144px; left: 10px) работать как раньше.

   Имя .actor__hero-name на мобилке скрыто — имя на мобилке живёт
   в .actor__name внутри .actor__bio-section.

   ВАЖНО: правила обёрнуты в @media (max-width: 1023.98px) явно,
   иначе они в каскаде (как идущие позже по файлу) перебили бы
   десктопные правила .actor__hero-left { display: flex; ... }
   и .actor__hero-name { display: block; ... } из @media (min-width: 1024px). */
@media (max-width: 1023.98px) {
  .actor__hero-left {
    display: contents;
  }

  .actor__hero-name {
    display: none;
  }

  /* hero-крошку на мобилке скрываем — её роль выполняет
     .actor__hero-back--bio в начале bio-секции. */
  .actor__hero .actor__hero-back {
    display: none;
  }

  /* ────────────────────────────────────────────
     ЛОГОТИП — анимация is-video-mode на мобилке (1-в-1 как show).
     В show мобильное поведение переопределено локально: квадрат НЕ
     уезжает влево-вверх (как в глобальной базе style.css), а просто
     «оседает» в свой угол — transform-origin: bottom right, лёгкое
     scale(0.92), без translate. Проявляется логотип с текстом.
     Специфичность (0,3,0) перебивает глобальное (0,2,0).
     transform-transition берётся из глобального .header__brand-block
     (transform 1.25s ease-out-smooth) — не трогаем. ──────────────────────────────────────────── */
  .actor__hero .header__brand-block.is-video-mode {
    transform-origin: bottom right;
    transform: scale(0.92);
    background-color: transparent;
  }
  .actor__hero .header__brand-block.is-video-mode .header__logo--final {
    opacity: 1;
  }
}


/* ══════════════════════════════════════════════════
   ПЛАНШЕТ (768–1023.98px) — сетка репертуара 2 колонки
   Повторяет .page__grid @media (min-width: 768px) из page.css.
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .actor__repertoire-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 80px;
    padding: 60px 16px 100px;
  }
}


/* ══════════════════════════════════════════════════
   ШИРОКИЙ ДЕСКТОП (≥1440px) — сетка репертуара 4 колонки
   с fluid-gap. Повторяет repertoire-page.css @media (min-width: 1440px).
   ══════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .actor__repertoire-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(72px, 10vw - 72px, 96px);
    row-gap: clamp(72px, 10vw - 72px, 96px);
  }

  /* Галерея на 1440+ — 3 карточки в ряд (два gap), стрелки 50×50.
     Перенос 1-в-1 из show-page.css. */
  .actor__gallery-section {
    --gallery-card-w: calc(
      (100vw - var(--gallery-edge-x) - var(--gallery-edge-x) - var(--gallery-gap) - var(--gallery-gap)) / 3
    );
  }

  .actor__gallery-nav {
    width: 50px;
    height: 50px;
  }
}