/* ============================================================
   案例卡片增强 · 全站加载（体积很小）
   用途：视频案例在「子比列表页 / 首页 / 任意位置」的卡片上，
        没有图片封面时用视频随机一帧当封面 + 播放按钮，悬浮无声播放。
   与 assets/js/case-cards.js 配套。
   ============================================================ */

/* ====== 视频禁止下载（配合模板里的 controlsList / oncontextmenu 与 JS） ====== */
.sx-nodl {
  -webkit-touch-callout: none;   /* iOS 长按菜单 */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* Chrome 老版本原生控件里的下载按钮兜底隐藏 */
video.sx-nodl::-internal-media-controls-download-button { display: none; }
video.sx-nodl::-webkit-media-controls-enclosure { overflow: hidden; }

/* ====== 视频当封面 ======
   由 SX_Team_Cases::cover_media() 输出，或由 case-cards.js 注入到子比卡片上。
   不悬浮 = 随机一帧 + 居中播放按钮；悬浮 = 无声自动播放，离开暂停 */
.sx-cover-video {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #1a1612;
}
/* 居中播放按钮 */
.sx-cover-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  z-index: 2;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .8);
  background: rgba(26, 22, 18, .38);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.sx-cover-play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -8px 0 0 -5px;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
}
/* 正在播放：按钮淡出，避免挡画面 */
.sx-cover-box.is-playing .sx-cover-play { opacity: 0; transform: scale(.82); }
/* 播放按钮在小屏收小一圈 */
@media (max-width: 768px) {
  .sx-cover-play { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .sx-cover-play::after { margin: -7px 0 0 -4px; border-width: 7px 0 7px 12px; }
}

/* ====== 注入到主题卡片上的封面（JS 加 .sx-cover-host） ======
   宿主盒子必须能当定位参照；封面层不吃点击，保证「点击进入案例页」照常 */
.sx-cover-host {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}
.sx-cover-host > video.sx-cover-video {
  pointer-events: none;   /* 点击穿透到下面原本的链接 */
  z-index: 1;
}
.sx-cover-host > .sx-cover-play { z-index: 2; }

/* ====== 有图片封面的视频案例（视频元素 data-sx-mode="cover"）======
   平时只显示封面照 + 播放按钮；悬浮时视频淡入盖住封面并无声播放，
   鼠标移开后停止并淡出，回到封面照。 */
.sx-cover-video[data-sx-mode="cover"] {
  z-index: 1;
  opacity: 0;
  transition: opacity .35s ease;
}
.sx-cover-box.is-playing > .sx-cover-video[data-sx-mode="cover"] { opacity: 1; }