/* ============================================================
   eco-max-cl.css — КЛИПЫ финал (агент CL, финальный свип 08.09)
   Зона: только этот файл + /js/eco-max-cl.js. Свои правки —
   поверх VD/LN, соседние слои (va–vj, pa/pb, ln, ls, dc) не тронуты.
   Канон клипов (тёмная база, без исключений): #0b1220 / #111c2e /
   #edf3ff / акцент #6b96ff · радиусы 20/16/12 · Onest.
   Подключение: messenger.html, ?v=20260908-m3.

   Что чинит (найдено свежим взглядом на AFTER-волнах VD+VI+LN):
   1) Плеер: вотермарк, зашитый в QA-видео («Клип N · VD QA»),
      пробивает нижний шейд и сталкивается с подписью автора
      (LN усиливал только сеточные карточки .vd-clip-card__*,
      нативный плеер .clip-slide__* оставался без плашки) →
      усиленный градиент + blur-плашка под .clip-slide__meta.
   2) Мобайл ≤640: подпись/рейл плеера уходили под translucent
      bottomnav — поднимаем низ шейда над навбаром (safe-area).
   3) Хинт жестов плеера (.vd-player-hint) по центру низа наезжал
      на подпись активного клипа (1440×900) → перенос на свободный
      правый нижний угол, на узких/низких окнах скрывается.
   ============================================================ */

/* ---------- 1. Плеер: читаемая подпись поверх вотермарка видео ---------- */

#view-clips .clip-slide__shade-bottom {
  padding: 120px 12px 16px 16px;
  background: linear-gradient(
    to top,
    rgba(4, 9, 20, 0.95) 0%,
    rgba(4, 9, 20, 0.78) 22%,
    rgba(4, 9, 20, 0.42) 46%,
    rgba(4, 9, 20, 0.12) 68%,
    rgba(4, 9, 20, 0) 88%
  );
}

/* Blur-плашка под метой автора (аналог LN-фикса сетки, но для плеера) */
#view-clips .clip-slide__meta {
  padding: 10px 14px 12px;
  border-radius: var(--vd-r-md, 14px) var(--vd-r-md, 14px) var(--vd-r-sm, 12px) var(--vd-r-sm, 12px);
  background: linear-gradient(to top, rgba(4, 9, 20, 0.6) 0%, rgba(4, 9, 20, 0.32) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  backdrop-filter: blur(8px) saturate(1.05);
}

#view-clips .clip-slide__meta strong {
  text-shadow: 0 1px 6px rgba(2, 6, 16, 0.9), 0 0 2px rgba(2, 6, 16, 0.6);
}

#view-clips .clip-slide__text p {
  text-shadow: 0 1px 5px rgba(2, 6, 16, 0.9), 0 0 2px rgba(2, 6, 16, 0.55);
}

#view-clips .clip-slide__views {
  text-shadow: 0 1px 5px rgba(2, 6, 16, 0.9);
}

/* ---------- 2. Мобайл ≤640: подпись и рейл — над translucent bottomnav ---------- */

@media (max-width: 640px) {
  /* нижний отступ отдаём самой плашке: она дотягивается до навбара и
     накрывает зону вотермарка видео (blur + тёмный фон, как на десктопе) */
  #view-clips .clip-slide__shade-bottom {
    padding: 150px 10px 0 12px;
  }
  #view-clips .clip-slide__meta {
    padding: 8px 12px calc(64px + env(safe-area-inset-bottom, 0px)) 12px;
    border-radius: var(--vd-r-sm, 12px) var(--vd-r-sm, 12px) 0 0;
    background: linear-gradient(to top, rgba(4, 9, 20, 0.94) 0%, rgba(4, 9, 20, 0.9) 45%, rgba(4, 9, 20, 0.5) 100%);
  }
}

/* ---------- 3. Хинт жестов: правый нижний угол, вне сцены 9:16 ---------- */

#view-clips.vd-player-mode .vd-player-hint {
  left: auto;
  right: 18px;
  bottom: 18px;
  transform: none;
}

/* Узкие или низкие окна: хинт скрыт (перестаёт помещаться рядом со сценой;
   ≤640 его прячет слой VD с !important — не конфликтует) */
@media (max-width: 1180px), (max-height: 760px) {
  #view-clips.vd-player-mode .vd-player-hint {
    display: none;
  }
}

/* ---------- 4. Reduced motion: без переходов на наших элементах ---------- */

@media (prefers-reduced-motion: reduce) {
  #view-clips .clip-slide__meta,
  #view-clips .clip-slide__shade-bottom {
    transition: none;
  }
}