/* ═══════════════════════════════════════════════════════════════════════════
   ЛЮДИ, ДЛЯ КОТОРЫХ СОЗДАВАЛИСЬ РАБОТЫ — карточки.
   Просьба автора (27.09): «карточки по каждой звезде, чтобы с описанием, потому
   что по остальным фотографиям люди не поймут, кто это… чтобы они в бок мотали
   эту карточку с людьми» и «можно написать о всех личностях небольшую информацию,
   то есть нажимая на них».

   Устройство: лента на нативном горизонтальном скролле (scroll-snap) — палец
   листает её пальцем, без библиотеки; на большом экране рядом стрелки. Карточка
   с фото — кадр передачи; без фото — типографская плитка с инициалами, потому что
   выдумывать портрет нельзя (имя к кадру ставит только автор). Клик открывает
   окно с фотографией ЦЕЛИКОМ, именем, кругом и короткой историей.

   Оформление — из светлой полосы раздела (linen): белая полупрозрачная карточка,
   тонкий шрифт, тёплый акцент. Секция светлая, поэтому цвета заданы здесь, а не
   взяты из тёмной темы.
   ══════════════════════════════════════════════════════════════════════════ */
.people { position: relative; margin: 4px 0 0; }
.people__rail {
  display: flex; gap: 14px; margin: 0; padding: 4px 2px 14px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: 2px;
  scrollbar-width: none;
}
.people__rail::-webkit-scrollbar { display: none; }

.pcard {
  flex: 0 0 194px; scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; align-items: stretch; padding: 0; margin: 0;
  border: 1px solid rgba(33, 28, 24, .12); border-radius: 22px;
  /* Карточка лежит на тёмной панели блока «Герои», поэтому подложка плотная:
     на полупрозрачной тёмный текст терял контраст (замерял на живой странице). */
  background: rgba(255, 255, 255, .9); color: #211c18;
  text-align: left; font: inherit; cursor: pointer; overflow: hidden;
  box-shadow: 0 18px 40px -34px rgba(33, 28, 24, .5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pcard:hover { transform: translateY(-3px); border-color: rgba(169, 128, 62, .45);
  box-shadow: 0 30px 48px -36px rgba(33, 28, 24, .55); }
.pcard:focus-visible { outline: 2px solid #a9803e; outline-offset: 3px; }

/* Кадр обрезается мягко: кадр 4:5 и смещение вверх, чтобы голова и работа
   оставались в видимой части. Полностью кадр видно в окне по клику. */
.pcard__ph { position: relative; display: block; aspect-ratio: 4 / 5; background: #e7e0d5; }
.pcard__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }

/* Без кадра — инициалы на тёмной плите: пустое место читается как «не загрузилось»,
   а плитка честно говорит «фотографии передачи пока нет». */
.pcard__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  /* цвет фона задан отдельно от градиента: по одной картинке проверить контраст
     текста невозможно, а тут он лежит на тёмной плите, а не на светлой карточке */
  background-color: #151220; background-image: linear-gradient(150deg, #1d1a23, #0d0b10);
  color: #cfa768; font: 300 30px/1 var(--thin); letter-spacing: .06em;
}
.pcard__n {
  position: absolute; left: 11px; top: 10px; z-index: 2;
  font: 400 9.5px/1 var(--thin); letter-spacing: .14em;
  color: rgba(255, 255, 255, .82); text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.pcard__no { position: absolute; left: 11px; top: 10px; z-index: 2;
  font: 400 9.5px/1 var(--thin); letter-spacing: .14em; color: rgba(255, 255, 255, .74); }
.pcard__body { padding: 12px 14px 15px; }
.pcard__name { display: block; font: 300 16.5px/1.25 var(--thin); color: #211c18; }
.pcard__group {
  display: block; margin-top: 6px;
  font: 400 10px/1.45 var(--thin); letter-spacing: .13em; text-transform: uppercase; color: #5f5649;
}
.pcard__more {
  display: block; margin-top: 10px;
  font: 400 11px/1 var(--thin); letter-spacing: .08em; color: #7a4f16;
}
.pcard__more::after { content: ' →'; }

.people__bar { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; }
.people__arrow {
  width: 46px; height: 46px; flex: none; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(33, 28, 24, .18); background: rgba(255, 255, 255, .6);
  color: #211c18; font: 400 16px/1 var(--thin);
  transition: background .25s, border-color .25s, transform .25s;
}
.people__arrow:hover { background: #fff; border-color: rgba(169, 128, 62, .5); transform: translateY(-1px); }
.people__arrow:focus-visible { outline: 2px solid #a9803e; outline-offset: 3px; }
.people__arrow[disabled] { opacity: .35; cursor: default; transform: none; }
/* Подпись стоит в светлой полосе раздела (лента вынесена из тёмной панели, чтобы
   карточки были видны сразу, а не за кнопкой) — значит тоном тёмным. Значение
   проверено на живой странице: 5.6:1 на фоне полосы. */
.people__hint { margin: 0; font: 400 11.5px/1.45 var(--thin); color: #5b524a; }

/* ─────────── окно человека ─────────── */
.person { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
.person::backdrop { background: rgba(9, 8, 12, .74); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.person__box {
  /* overflow-x скрыт: иначе под окном появляется горизонтальная полоса из-за
     колонки с фотографией, а она тут не нужна — это попап, а не страница */
  width: min(960px, 92vw); max-height: 86vh; position: relative;
  overflow-y: auto; overflow-x: hidden;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  background: #111014; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 26px; box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .9);
}
.person__ph { margin: 0; background: #0b0a0e; display: grid; place-items: center; }
/* фотографию показываем целиком: кадры вертикальные, обрезка в окне съедала
   работу в руках — а именно работа здесь главное */
.person__ph img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; display: block; }
.person__mono { width: 100%; min-height: 320px; background: linear-gradient(150deg, #1d1a23, #0d0b10);
  color: #cfa768; font: 300 46px/1 var(--thin); display: grid; place-items: center; letter-spacing: .08em; }
.person__body { padding: 30px 32px 28px; }
.person__no { font: 400 10px/1 var(--thin); letter-spacing: .2em; color: rgba(255, 255, 255, .58); }
.person__name { margin: 10px 0 0; font: 300 30px/1.12 var(--thin); color: #fff; }
.person__group {
  margin: 12px 0 0; font: 400 10.5px/1.5 var(--thin);
  letter-spacing: .16em; text-transform: uppercase; color: #d8ac68;
}
.person__txt { margin: 18px 0 0; font: 400 15px/1.62 var(--thin); color: rgba(255, 255, 255, .76); }
.person__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* Кнопки в окне стоят на тёмном, а «призрачный» вид у кнопки рассчитан на
   тёмный текст поверх светлого — внутри окна перекрашиваем в светлый. */
.person__acts .btn--ghost {
  border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .86); background: transparent;
}
.person__acts .btn--ghost:hover { border-color: #cfa768; color: #fff; }
.person__note {
  margin: 16px 0 0; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  font: 400 12px/1.5 var(--thin); color: rgba(255, 255, 255, .6);
}
/* Кнопка закрытия — пилюлей с подписью, а не кругом: слово «Закрыть» в круг
   не влезало и выезжало за границу. Так же честнее: гостю не нужно угадывать,
   что означает крестик. */
.person__close {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(9, 8, 12, .62); color: #fff;
  font: 400 12px/1 var(--thin); letter-spacing: .06em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.person__close:hover { background: rgba(9, 8, 12, .85); border-color: rgba(255, 255, 255, .34); }
.person__close:focus-visible { outline: 2px solid #cfa768; outline-offset: 3px; }

@media (max-width: 760px) {
  .person__box { grid-template-columns: 1fr; width: min(520px, 94vw); max-height: 90vh; }
  .person__ph img { max-height: 44vh; }
  .person__body { padding: 22px 20px 24px; }
  .person__name { font-size: 24px; }
  .pcard { flex: 0 0 158px; }
  .pcard__ph { aspect-ratio: 3 / 4; }
}
@media (max-width: 420px) {
  .pcard { flex: 0 0 142px; }
  .people__arrow { width: 42px; height: 42px; }
}