/* 视频图库：只写视频独有的那部分。
 *
 * 网格、卡片外框、工具条、筛选条、弹层布局、详情页排版全部复用 gallery.css
 * —— /videos/ 的两个模板都是 caseStyle: gallery.css + caseStyleExtra: video.css，
 * 两份一起加载。所以这里绝不重复定义 .hope-gallery-* 的任何基础规则，
 * 只加「封面帧上的播放角标 / 时长」「悬停预览」「播放器尺寸钳制」这几件事。
 *
 * 变量沿用模板的设计令牌（--base / --t-bright / --st-medium / --_font-accent 等），
 * 别在这里另起一套颜色。
 */

/* ---------- 卡片：封面帧上的那一层 ---------- */

.hope-video-card__media {
  /* gallery.css 里已经是 position: relative + overflow: hidden，这里只补背景：
     竖片和横片混排时，封面帧的宽高比各不相同，底色统一成深色才不会一格白一格黑。 */
  background: #0b0b0b;
}

/* 悬停预览：盖在封面帧上，播起来才淡入。
   src 是 hope-video.js 在鼠标真的停住 260ms 之后才写的，
   markup 里它是个空 <video> —— 不预加载任何字节。 */
.hope-video-card__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.hope-video-card.is-previewing .hope-video-card__preview {
  opacity: 1;
}

/* 预览起来之后把封面帧那点缩放动效停掉：底下的 <img> 还在 scale(1.04)，
   而预览是 1.0，两层错位会看出一圈鬼影。 */
.hope-video-card.is-previewing .hope-gallery-card__media img {
  transform: none;
}

/* 播放角标。常驻显示、不等 hover —— 移动端没有 hover，
   不常驻就完全看不出这是个视频而不是静图。 */
.hope-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 5.2rem;
  height: 5.2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--base) 78%, transparent);
  backdrop-filter: blur(8px);
  color: var(--t-bright);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--_animbezier), opacity 0.3s ease;
}

/* svg 的三角形视觉重心偏左，往右挪一点才像居中 */
.hope-video-card__play svg {
  margin-left: 0.2rem;
}

.hope-video-card:hover .hope-video-card__play {
  transform: translate(-50%, -50%) scale(1.12);
}

/* 预览已经在播了，再压一个播放键就多余了 */
.hope-video-card.is-previewing .hope-video-card__play {
  opacity: 0;
}

/* 时长和「有声」：放左下角。右下角是 gallery.css 里 __hover 那块的位置，
   视频卡片虽然没用它，但两边共用一份 CSS，位置错开省得以后打架。 */
.hope-video-card__badges {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.hope-video-card__time,
.hope-video-card__audio {
  border-radius: 99rem;
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--base) 82%, transparent);
  backdrop-filter: blur(6px);
  color: var(--t-bright);
  font: 500 1.1rem/1 var(--_font-accent);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.hope-video-card__audio {
  padding: 0.5rem 0.8rem;
}

/* ---------- 播放弹层 ---------- */

/* 播放器的放大上限。
 *
 * --clip-w / --clip-h 由 hope-video.js 按当前这一段的真实像素写进 stage。
 * 现在这批片子是 480×864（那台机器跑不动更高的），铺满一块 27 寸屏就是一片糊，
 * 所以最多放到原始尺寸的 1.5 倍，剩下的地方留黑边 —— 小而清楚比大而糊体面。
 * 以后出到 1080 或 2K，同一条规则自动就把上限抬上去了，不用改代码。
 */
.hope-lightbox--video .hope-lightbox__player {
  display: block;
  width: auto;
  max-width: min(100%, calc(var(--clip-w, 1280px) * 1.5));
  max-height: min(62vh, calc(var(--clip-h, 720px) * 1.5));
  object-fit: contain;
  background: #000;
}

@media only screen and (min-width: 992px) {
  .hope-lightbox--video .hope-lightbox__player {
    max-height: min(100%, calc(var(--clip-h, 720px) * 1.5));
  }
}

/* 弹层里的封面条：图库那边是方形缩略图，视频这边混着竖片横片，
   统一按 16:9 的格子裁，一排看过去才齐。 */
.hope-lightbox--video .hope-lightbox__shot img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- 详情页 ---------- */

.hope-video-detail__media {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.hope-video-detail__clip {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

/* 和弹层同一条规矩：最多放到原始宽度的 1.5 倍。
   这里的 --clip-w 是模板按每一段的真实宽度直接写在 style 上的。 */
.hope-video-detail__clip video {
  display: block;
  width: 100%;
  max-width: min(100%, calc(var(--clip-w, 1280px) * 1.5));
  height: auto;
  border-radius: 1.2rem;
  background: #000;
}

.hope-video-detail__clip figcaption {
  font: 500 1.2rem/1.5 var(--_font-accent);
  letter-spacing: 0.06em;
  color: var(--t-medium);
  font-variant-numeric: tabular-nums;
}

.hope-video-detail__note {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.hope-video-detail__note h2 {
  margin: 0;
  font: 500 1.2rem/1.4 var(--_font-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-medium);
}

.hope-video-detail__note p {
  margin: 0;
}

/* 用户明确要求减少动效时，预览层整个不参与过渡 */
@media (prefers-reduced-motion: reduce) {
  .hope-video-card__preview,
  .hope-video-card__play {
    transition: none;
  }
}