/* Модалка профиля эксперта — общий блок partials/shared/jury-modal.html.
   Открывается поверх главной, пяти страниц треков и общей страницы жюри;
   отдельных страниц профилей больше нет.

   Оформление «Проявка» (вариант 01 из стенда jury-modal-variants-2.html):
   карточка разложена на две колонки — слева вертикальный кадр во всю высоту,
   справа титры, текст и подвал. Кадр вертикальный намеренно: портрет 4:5 в
   широкой полосе приходилось зумить до срезанной макушки, а в узкой высокой
   колонке он подрезается только по бокам. Под портретом подложкой размытый hero
   трека (видна у 11 профилей без фото и пока снимок грузится). Плёнка, зерно и
   реперные уголки контрольного отпечатка живут только внутри кадра: под ними
   настоящий снимок. Текстовая колонка — монолит на --panel, никакого
   backdrop-filter, потому что под окном лежит страница, а не изображение.
   Золото — на метке лидера, коде кадра, нити стыка и состояниях ссылок.

   Движение — в scripts/jury-modal.js (WAAPI, не view-transitions): окно
   вырастает из миниатюры, по которой нажали, и снимок в нём проявляется.
   Здесь только конечные состояния — все анимации идут с fill: backwards и
   после отыгрыша отдают элемент обратно этим правилам.

   Шкала --text-* живёт только в базе главной, на страницах треков её нет —
   в каждом shorthand font обязателен фоллбэк, иначе правило отвалится целиком.
   То же для --radius-* и --panel, которых нет на главной. */

.jury-modal {
  /* Ширина с запасом на стрелки по бокам: карточка шире — кадр эксперта
     получает больше горизонтали без зума макушки. */
  width: min(1180px, 100% - 2rem);
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  overflow: visible;
  background: none;
  color: var(--ink, #f4f1ea);
}

/* display:grid только у открытой: иначе перебивает UA dialog:not([open]){display:none}
   и закрытая модалка остаётся в вёрстке — чёрная дыра под футером. */
.jury-modal[open] {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 14px;
}

/* Подложка гаснет своим переходом, карточка — своей анимацией. Класс
   is-closing вешает скрипт в начале выхода, поэтому к моменту close()
   подложка уже прозрачна и исчезновение окна не видно. */
.jury-modal::backdrop {
  /* Никакого blur: под подложкой лежит страница, а не снимок */
  background: rgba(4, 5, 7, 0.86);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.jury-modal[open]::backdrop {
  opacity: 1;
}

.jury-modal[open].is-closing::backdrop {
  opacity: 0;
}

@starting-style {
  .jury-modal[open]::backdrop {
    opacity: 0;
  }
}

.jury-modal__card {
  grid-column: 2;
  position: relative;
  display: grid;
  /* Кадр · нить · текст по горизонтали; титры · текст · подвал по вертикали */
  grid-template-columns: clamp(320px, 46%, 520px) 1px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Высота жёсткая: у экспертов разный объём текста, и на резиновой высоте окно
     прыгало бы по вертикали при каждом листании. Разницу забирает прокрутка.
     Она же задаёт пропорцию кадра — менять только вместе с шириной колонки. */
  height: min(80vh, 800px);
  border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.16));
  border-radius: var(--radius-lg, 18px);
  background: var(--panel, #10141a);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  /* Точка отсчёта разворота из миниатюры — скрипт считает сдвиг от левого
     верхнего угла карточки. Менять только вместе с grow() в jury-modal.js. */
  transform-origin: top left;
}

/* ── Кадр ── */

.jury-modal__stage {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  min-height: 0;
  background: #0a0d11;
  overflow: hidden;
}

/* Hero трека под портретом: у 11 профилей без фото на нём стоят инициалы,
   у остальных он виден только пока грузится снимок. */
.jury-modal__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.jury-modal__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  filter: blur(24px) saturate(0.5) brightness(0.45);
}

.jury-modal__portrait {
  position: absolute;
  inset: 0;
}

.jury-modal__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Колонка уже портрета 4:5, поэтому cover тянет снимок по высоте и режет
     только по бокам: кадр берётся целиком сверху донизу, центром по ширине. */
  object-position: 50% 50%;
  filter: contrast(0.97) saturate(0.94);
}

/* Заглушка для 11 профилей без фото: на фоне кадра трека инициалы читаются
   как знак, а не как дыра на месте портрета. */
.jury-modal__portrait--initials {
  display: grid;
  place-items: center;
  color: rgba(244, 241, 234, 0.28);
  font: 700 clamp(52px, 7vw, 96px) / 1 var(--font-display, 'IBM Plex Sans Condensed', sans-serif);
  letter-spacing: 0.04em;
}

/* Плёнка печати: осталась только тонкая тень справа, в сторону стыка — чтобы
   снимок не упирался в золотую нить встык.

   Подпечатки сверху и снизу убраны: они держали читаемость того, что лежало
   на кадре — реперных уголков, кода кадра и титров. Всё это уехало из кадра
   (титры — в текстовую колонку, уголки и код сняты), и затемнение осталось
   просто грязью по краям снимка. Возвращать — только вместе с тем, что на
   кадре снова появится. */
.jury-modal__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(5, 6, 8, 0) 74%, rgba(6, 8, 11, 0.45));
  pointer-events: none;
}

.jury-modal__grain {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
}

/* Титры — шапка текстовой колонки. На снимке они лежали на лице, поэтому
   переехали на панель: имя читается крупно и ничего не перекрывает. */
.jury-modal__ident {
  grid-column: 3;
  grid-row: 1;
  padding: clamp(24px, 2.8vw, 34px) clamp(22px, 2.6vw, 32px) clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--line-soft, rgba(255, 255, 255, 0.08));
}

.jury-modal__eyebrow {
  display: block;
  color: rgba(244, 241, 234, 0.6);
  font: 500 var(--text-xs, 11px) / 1.4 var(--font-ui, Manrope, sans-serif);
  letter-spacing: var(--ls-caps, 0.16em);
  text-transform: uppercase;
}

/* Лидер трека — единственное золото в титрах, точкой, как на карточках секций.
   Точка идёт inline: на узком экране строка переносится, и флекс оторвал бы её. */
.jury-modal__eyebrow--leader {
  color: var(--gold, #e8c36a);
}

.jury-modal__eyebrow--leader::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.jury-modal__name {
  margin: 10px 0 8px;
  font: 700 clamp(26px, 2.8vw, 38px) / 1.04 var(--font-display, 'IBM Plex Sans Condensed', sans-serif);
  letter-spacing: -0.015em;
}

.jury-modal__role {
  margin: 0;
  color: rgba(244, 241, 234, 0.68);
  font: 400 var(--text-sm, 13.5px) / 1.5 var(--font-body, Manrope, system-ui, sans-serif);
}

/* Золотая нить по стыку кадра и текста — единственная линия такого рода.
   На широком экране вертикальная во всю высоту, на узком ложится строкой.
   Скрипт рисует её одним scale(0) → none: у линии в 1px растёт только длина,
   поэтому одна анимация годится для обеих раскладок. */
.jury-modal__seam {
  grid-column: 2;
  grid-row: 1 / -1;
  background: linear-gradient(to bottom, var(--gold-border, rgba(232, 195, 106, 0.55)), transparent 72%);
  transform-origin: top left;
}

/* ── Тело ── */

.jury-modal [hidden] {
  display: none;
}

.jury-modal__scroll {
  grid-column: 3;
  grid-row: 2;
  display: grid;
  align-content: start;
  gap: clamp(16px, 2vw, 22px);
  padding: clamp(22px, 2.6vw, 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.jury-modal__lead {
  margin: 0;
  color: var(--ink, #f4f1ea);
  font: 400 var(--text-md, 15px) / 1.55 var(--font-body, Manrope, system-ui, sans-serif);
}

/* Абзацы биографии приходят массивом; одиночные переносы внутри абзаца
   (перечисления строка-в-строку) держит pre-line. */
.jury-modal__bio {
  display: grid;
  gap: 0.9em;
  color: rgba(244, 241, 234, 0.72);
  font: 400 var(--text-sm, 13px) / 1.65 var(--font-body, Manrope, system-ui, sans-serif);
}

.jury-modal__bio p {
  margin: 0;
  white-space: pre-line;
}

/* Ссылки: знак сети и идентификатор аккаунта (@voloshinsport, /scoutway.pro).
   Идентификатор набран моноширинным — тем же голосом, что коды и номера. */

.jury-modal__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 18px;
  min-width: 0;
}

/* Одна группа в подвале — прижата вправо, как было. Появились обе (контакты и
   проекты) — контакты уходят влево, проекты остаются справа за волоском:
   класс --split вешает скрипт. */
.jury-modal__foot:not(.jury-modal__foot--split) > .jury-modal__links,
.jury-modal__foot:not(.jury-modal__foot--split) > .jury-modal__projects {
  margin-left: auto;
}

/* Волосок отделяет проекты от контактов — без контактов ему нечего делить */
.jury-modal__foot:not(.jury-modal__foot--split) > .jury-modal__projects {
  padding-left: 0;
  border-left: 0;
}

.jury-modal__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(244, 241, 234, 0.78);
  font: 500 var(--text-sm, 13px) / 1 var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.3s ease;
}

.jury-modal__links svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
  opacity: 0.72;
  transition: opacity 0.3s ease;
}

.jury-modal__links a:hover,
.jury-modal__links a:focus-visible {
  color: var(--gold, #e8c36a);
}

.jury-modal__links a:hover svg,
.jury-modal__links a:focus-visible svg {
  opacity: 1;
}

.jury-modal__projects {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 18px;
  border-left: 1px solid var(--line, rgba(255, 255, 255, 0.12));
}

.jury-modal__projects[hidden] {
  display: none;
}

.jury-modal__projects-kicker {
  flex: none;
  color: rgba(244, 241, 234, 0.34);
  font: 500 9px / 1 var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  letter-spacing: var(--ls-caps, 0.16em);
  text-transform: uppercase;
}

/* ── Подвал: sticky-ссылки эксперта (вне зоны скролла) ── */

.jury-modal__foot {
  grid-column: 3;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 14px clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line-soft, rgba(255, 255, 255, 0.08));
  background: rgba(10, 12, 16, 0.92);
}

.jury-modal__foot[hidden] {
  display: none;
}

.jury-modal__counter {
  color: rgba(244, 241, 234, 0.42);
  font: 500 var(--text-xs, 11px) / 1 var(--font-ui, Manrope, sans-serif);
  letter-spacing: var(--ls-caps, 0.16em);
  text-transform: uppercase;
}

.jury-modal__counter:empty {
  display: none;
}

/* ── Кнопка закрытия ── */

.jury-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 50%;
  background: rgba(10, 12, 16, 0.5);
  color: rgba(244, 241, 234, 0.72);
  cursor: pointer;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

.jury-modal__close span {
  position: relative;
  width: 12px;
  height: 12px;
}

.jury-modal__close span::before,
.jury-modal__close span::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}

.jury-modal__close span::before {
  transform: rotate(45deg);
}

.jury-modal__close span::after {
  transform: rotate(-45deg);
}

.jury-modal__close:hover,
.jury-modal__close:focus-visible {
  color: var(--gold, #e8c36a);
  border-color: var(--gold-border, rgba(232, 195, 106, 0.55));
}

/* ── Листание ── */

.jury-modal__nav {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 50%;
  background: rgba(10, 12, 16, 0.55);
  color: rgba(244, 241, 234, 0.62);
  cursor: pointer;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease;
}

.jury-modal__nav--prev {
  grid-column: 1;
}

.jury-modal__nav--next {
  grid-column: 3;
}

.jury-modal__nav:hover,
.jury-modal__nav:focus-visible {
  color: var(--gold, #e8c36a);
  border-color: var(--gold-border, rgba(232, 195, 106, 0.55));
}

/* Список кончился — кнопка гаснет, но остаётся на месте: карточка не должна
   ездить по горизонтали при листании до края. */
.jury-modal__nav[disabled] {
  opacity: 0.22;
  cursor: default;
}

.jury-modal__nav-chev {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.jury-modal__nav--prev .jury-modal__nav-chev {
  transform: rotate(135deg) translate(-1px, -1px);
}

.jury-modal__nav--next .jury-modal__nav-chev {
  transform: rotate(-45deg) translate(-1px, -1px);
}

/* Единственный эксперт в списке — навигация не нужна вовсе */
.jury-modal[data-solo] .jury-modal__nav,
.jury-modal[data-solo] .jury-modal__counter {
  display: none;
}

/* ── Появление ──
   Движение целиком в scripts/jury-modal.js: окно вырастает из миниатюры, снимок
   проявляется. Здесь только гашение для тех, кто просил меньше движения. */

@media (prefers-reduced-motion: reduce) {
  .jury-modal::backdrop {
    transition-duration: 0.01ms;
  }
}

/* ── Узкие экраны ──
   Переключатели экспертов на мобиле скрыты: на кадре мешают портрету,
   листание через них выключено. */

@media (max-width: 900px) {
  /* [open] обязателен: базовая сетка задана на .jury-modal[open] (0,2,0),
     и голый .jury-modal в media её не перебивает — карточка падала в первую
     колонку 52px и открывалась полоской. */
  .jury-modal,
  .jury-modal[open] {
    grid-template-columns: minmax(0, 1fr);
    width: min(760px, 100% - 1.5rem);
    gap: 0;
  }

  .jury-modal__card {
    grid-column: 1;
    grid-row: 1;
  }

  .jury-modal__nav {
    display: none;
  }
}

@media (max-width: 700px) {
  /* Две колонки в 700px не живут: кадр ложится сверху полосой, титры и текст
     уходят под него. Кадр в поток не выносим — он остаётся слоёным блоком,
     поэтому уголки, код и плёнка работают как были. */
  .jury-modal__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1px auto minmax(0, 1fr) auto;
    height: min(88vh, 760px);
  }

  .jury-modal__stage {
    grid-column: 1;
    grid-row: 1;
    height: clamp(260px, 36vh, 360px);
  }

  /* Полоса шире портрета — теперь режем по вертикали, окно держим на лице */
  .jury-modal__portrait img {
    object-position: 50% 18%;
  }

  .jury-modal__seam {
    grid-column: 1;
    grid-row: 2;
    background: linear-gradient(to right, var(--gold-border, rgba(232, 195, 106, 0.55)), transparent 62%);
  }

  .jury-modal__ident {
    grid-column: 1;
    grid-row: 3;
  }

  .jury-modal__scroll {
    grid-column: 1;
    grid-row: 4;
  }

  .jury-modal__foot {
    grid-column: 1;
    grid-row: 5;
  }
}

@media (max-width: 560px) {
  .jury-modal__name {
    font-size: 25px;
  }

  .jury-modal__foot {
    padding: 12px 20px;
  }
}