/* =========================================================
   ПЛЕЕР: модальное окно, панель управления, шкала перемотки
   ========================================================= */

.player-modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  /* Колонка не шире экрана: иначе длинное название ролика растягивало
     окно плеера за край, и при переключении роликов «прыгал» масштаб */
  grid-template-columns: minmax(0, 1fr);
  padding: var(--gutter);
  background: rgba(0, 0, 0, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.player-modal[hidden] { display: none; }
.player-modal.is-open { opacity: 1; }

/* Большое окно: максимум по ширине, но так, чтобы 16:9 влезало по высоте */
.player {
  width: min(1440px, 100%, calc((100vh - 200px) * 16 / 9));
  min-width: 0;
  transform: translateY(24px) scale(.98);
  transition: transform .6s var(--ease);
}
.player-modal.is-open .player { transform: none; }

/* ---------- Шапка окна: номер, название, стрелки, закрыть ---------- */
.player__head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 20px;
}
.player__meta { display: flex; align-items: baseline; gap: 16px; min-width: 0; font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; letter-spacing: -.02em; }
.player__meta b { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.player__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__actions { display: flex; gap: 8px; flex: none; }

.player__btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, .85);
  transition: background .3s, color .3s;
}
.player__btn:hover { background: var(--surface-2); color: var(--fg); }
.player__btn svg { width: 20px; height: 20px; }
.player__head .player__btn { background: var(--surface-2); }
.player__head .player__btn:hover { background: var(--fg); color: var(--bg); }

/* ---------- Видео ---------- */
.player__box { position: relative; background: #000; }
.player__stage { position: relative; }
.player__stage .video-frame { background: #000; }
.player__stage iframe { pointer-events: none; }   /* клики ловит .player__hit */
.player__hit { position: absolute; inset: 0; cursor: pointer; }

.player__bigplay {
  position: absolute; left: 50%; top: 50%;
  width: 88px; height: 88px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fg); color: var(--bg);
  transform: translate(-50%, -50%) scale(.9);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .4s var(--ease);
}
.player__bigplay svg { width: 32px; height: 32px; margin-left: 4px; }
.player.is-ready:not(.is-playing):not(.is-loading) .player__bigplay { opacity: 1; transform: translate(-50%, -50%); }

.player__spinner {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-top-color: var(--fg);
  border-radius: 50%;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
/* Анимация крутится только пока спиннер виден — не тратим ресурсы впустую */
.player.is-loading .player__spinner { opacity: 1; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Панель управления ---------- */
.player__controls {
  display: flex; align-items: center; gap: clamp(4px, 1vw, 12px);
  padding: 14px 0 0;
  background: var(--bg);
}
.player__time { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; padding-inline: 4px; }
.player__time i { font-style: normal; color: var(--dim); padding-inline: 6px; }

/* Иконки меняются по состоянию плеера */
.player .icon-pause, .player .icon-muted { display: none; }
.player.is-playing .icon-play { display: none; }
.player.is-playing .icon-pause { display: block; }
.player.is-muted .icon-sound { display: none; }
.player.is-muted .icon-muted { display: block; }

/* Шкала перемотки: тонкая линия, утолщается при наведении */
.progress {
  --p: 0; --b: 0;     /* --p — просмотрено, --b — загружено (0…1) */
  position: relative;
  flex: 1; min-width: 60px;
  height: 28px;
  cursor: pointer;
  touch-action: none;
}
.progress__rail {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: var(--line);
  overflow: hidden;
  transition: height .2s, margin .2s;
}
.progress__buffer, .progress__fill { position: absolute; inset: 0; transform-origin: left; }
.progress__buffer { background: #3d3d3d; transform: scaleX(var(--b)); }
.progress__fill { background: var(--fg); transform: scaleX(var(--p)); }
.progress__knob {
  position: absolute; top: 50%;
  left: calc(var(--p) * 100%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--fg);
  transform: scale(0);
  transition: transform .2s var(--ease);
}
.progress:hover .progress__rail, .progress.is-dragging .progress__rail { height: 4px; margin-top: -2px; }
.progress:hover .progress__knob, .progress.is-dragging .progress__knob, .progress:focus-visible .progress__knob { transform: scale(1); }

/* Громкость */
.player__volume {
  --v: 1;
  -webkit-appearance: none; appearance: none;
  width: 84px; height: 28px;
  background: transparent;
  cursor: pointer;
}
.player__volume::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--fg) calc(var(--v) * 100%), var(--line) 0); }
.player__volume::-moz-range-track { height: 2px; background: linear-gradient(90deg, var(--fg) calc(var(--v) * 100%), var(--line) 0); }
.player__volume::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; border-radius: 50%; background: var(--fg); border: 0; }
.player__volume::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--fg); border: 0; }

/* Если SDK Vimeo не загрузился — показываем родной плеер Vimeo */
.player.is-native .player__controls,
.player.is-native .player__hit,
.player.is-native .player__bigplay { display: none; }
.player.is-native .player__stage iframe { pointer-events: auto; }

/* ---------- Телефоны: на всю ширину, громкость — кнопками устройства ---------- */
@media (max-width: 680px) {
  .player-modal { padding: 16px; }
  .player { width: 100%; }
  .player__volume { display: none; }
  .player__btn,
  .player__head .player__btn { width: 40px; height: 40px; }
  .player__bigplay { width: 64px; height: 64px; }
  .player__bigplay svg { width: 24px; height: 24px; }
}