/* =========================================================
   Chaovisual Gallery — 影片（facade）

   顏色一律讀主題的 token，備援值是主題現在的值：這支 CSS 也會在
   後台編輯器裡載入，那裡沒有主題的 :root，沒有備援就會變成透明或黑字黑底。
   ========================================================= */
.cv-video{
  margin:36px 0;
  position:relative;
  /* 明寫 width:100%（1.15.1）。
     這是一個 <figure>，而佈景主題在某些版面上會給 figure 加 width:fit-content。
     裡面的播放器是 <iframe>、寬度用百分比——百分比碰到 fit-content 的父層
     等於沒有依據，iframe 就會退回它的固有尺寸 300×150，
     看起來像「影片點開後只有一小塊」。這一行讓區塊自己保住寬度，
     不必依賴主題那邊記得排除它。 */
  width:100%;
}
.cv-video-btn{
  display:block;position:relative;width:100%;padding:0;
  border:0;background:var(--bg-soft,#141418);
  border-radius:var(--r-img,4px);overflow:hidden;
  cursor:pointer;line-height:0;
  aspect-ratio:16/9;
}
.cv-video.is-vertical .cv-video-btn{aspect-ratio:9/16;max-width:380px;margin-inline:auto}
.cv-video-btn img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .4s}
.cv-video-btn:hover img{transform:scale(1.02)}

/* 沒有封面時的底：一塊深色，不對外連線借圖。 */
.cv-video.is-blank .cv-video-btn{
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.06), transparent 70%),
    var(--bg-soft,#141418);
  border:1px solid var(--line,rgba(255,255,255,.08));
}

/* 封面上壓一層由下往上的暗，讓播放鈕與標題在任何一張照片上都讀得到。
   純粹加深，不改變色相——底下是攝影作品。 */
.cv-video-btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(6,6,10,.55), rgba(6,6,10,.05) 55%, rgba(6,6,10,.18));
  transition:opacity .4s;
}
.cv-video-btn:hover::after{opacity:.82}

.cv-video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:68px;height:48px;pointer-events:none;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.cv-video-btn:hover .cv-video-play{transform:translate(-50%,-50%) scale(1.06)}
.cv-video-play-bg{fill:rgba(6,6,10,.62);transition:fill .3s}
.cv-video-play-tri{fill:#fff}
.cv-video-btn:hover .cv-video-play-bg{fill:var(--accent,#c9a35b)}
.cv-video-btn:hover .cv-video-play-tri{fill:#111}

.cv-video-title{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 20px;text-align:left;pointer-events:none;
  color:#fff;font-size:15px;line-height:1.5;letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.cv-video.is-vertical .cv-video-title{padding:14px 16px;font-size:14px}

.cv-video-btn:focus-visible{outline:2px solid var(--accent,#c9a35b);outline-offset:3px}

/* 真正的播放器。尺寸與封面完全一致，所以換上去時版面不會跳。 */
.cv-video-frame{
  display:block;width:100%;aspect-ratio:16/9;border:0;
  border-radius:var(--r-img,4px);background:#000;
}
.cv-video.is-vertical .cv-video-frame{aspect-ratio:9/16;max-width:380px;margin-inline:auto}

.cv-video figcaption{
  margin-top:12px;color:var(--muted,#8a8a92);font-size:13px;line-height:1.8;
}

/* 網址貼錯時給編輯者看的提示。訪客永遠看不到這一條。 */
.cv-video-warn{
  margin:36px 0;padding:14px 16px;font-size:14px;
  color:var(--muted,#8a8a92);
  border:1px dashed var(--line,rgba(255,255,255,.14));
  border-radius:var(--r-card,6px);
}

@media(prefers-reduced-motion:reduce){
  .cv-video-btn img,.cv-video-play,.cv-video-btn::after{transition:none}
  .cv-video-btn:hover img{transform:none}
  .cv-video-btn:hover .cv-video-play{transform:translate(-50%,-50%)}
}