/* 香港01 影片報導卡 — 專欄全文頁（2026-09-17）
   為何獨立成檔：/assets/* 是 max-age=31536000, immutable，site.css 無版本查詢，
   直接改 site.css 會令舊訪客一年內取不到新樣式。新網址（本檔）不受影響。
   引用方式：build-pages.js 只在該篇有 video 的專欄頁加 <link>（帶 ?v=）。 */

/* ---------- 香港01 影片報導卡（專欄全文頁，2026-09-17） ---------- */
.hkvid{margin:26px 0 6px;border:1px solid var(--line2);border-radius:var(--radius);
  overflow:hidden;background:var(--panel)}
.hkvidposter{position:relative;display:block;line-height:0;overflow:hidden;background:#000;color:#f2f2f4}
.hkvidposter img{display:block;width:100%;height:auto;transition:transform .34s}
.hkvidposter:hover img{transform:scale(1.02)}
.hkvidplay{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;background:rgba(7,7,10,.62);border:1px solid var(--gold);
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
.hkvidplay::after{content:"";position:absolute;left:26px;top:20px;width:0;height:0;
  border-left:18px solid var(--gold-lt);border-top:11px solid transparent;border-bottom:11px solid transparent}
.hkviddur{position:absolute;right:12px;bottom:12px;padding:3px 9px;border-radius:999px;
  font-size:0.75rem;line-height:1.5;font-weight:600;letter-spacing:.03em;color:#f2f2f4;
  background:rgba(7,7,10,.72);border:1px solid var(--line2)}
.hkvid figcaption{padding:16px 18px 18px;border-top:1px solid var(--line2)}
.hkvidtag{display:inline-block;margin-bottom:9px;padding:3px 10px;border-radius:999px;
  font-size:0.6875rem;letter-spacing:.1em;color:var(--gold-lt);border:1px solid var(--line)}
.hkvidmeta{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;margin:0 0 14px;
  font-size:0.78125rem;color:var(--muted)}
.hkvidmeta span{position:relative}
.hkvidmeta span + span{padding-left:15px}
.hkvidmeta span + span::before{content:"";position:absolute;left:0;top:8px;width:3px;height:3px;
  border-radius:50%;background:var(--line)}
.hkvidcta{margin:0 0 12px}
.hkvidcr{display:block;font-size:0.71875rem;line-height:1.6;color:var(--muted)}
@media (max-width:640px){
  .hkvid figcaption{padding:14px 14px 16px}
  .hkvidplay{width:52px;height:52px;margin:-26px 0 0 -26px}
  .hkvidplay::after{left:21px;top:16px;border-left-width:15px;border-top-width:9px;border-bottom-width:9px}
  .hkvidmeta{gap:10px;font-size:0.75rem}
}

/* ---------- 專欄索引頁：卡片上的「影片」徽章 ---------- */
/* .card 是 flex column，任何直接子元素都會被拉伸 → 必須 align-self:flex-start
   （站內既有 .card .cat 亦用同一手法），否則徽章會變成橫跨整張卡的長條。 */
.vbadge{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:3px 10px;
  border-radius:999px;font-size:0.6875rem;letter-spacing:.04em;color:var(--gold-lt);
  border:1px solid var(--line);background:rgba(217,180,81,.08)}
.vbadge::before{content:"";width:0;height:0;border-left:6px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent}

/* ---------- 首頁第 05 節：香港01 影片報導 ---------- */
.hsvid{margin-top:20px;padding:22px;border:1px solid var(--line2);border-radius:var(--radius);
  background:rgba(255,255,255,.02)}
.hsvid-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 16px;
  font-size:0.78125rem;letter-spacing:.1em;color:var(--gold-lt);text-transform:uppercase}
.hsvid-h em{font-style:normal;font-size:0.75rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.hsvid-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}
.hsvid-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line2);
  border-radius:14px;background:var(--panel);color:inherit;transition:transform .3s,border-color .3s,box-shadow .3s}
.hsvid-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 16px 40px var(--shadow)}
.hsvid-thumb{position:relative;display:block;line-height:0;overflow:hidden;background:#000;color:#f2f2f4}
.hsvid-thumb img{display:block;width:100%;height:auto;transition:transform .34s}
.hsvid-card:hover .hsvid-thumb img{transform:scale(1.03)}
.hsvid-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;background:rgba(7,7,10,.6);border:1px solid #d9b451}
.hsvid-play::after{content:"";position:absolute;left:22px;top:17px;width:0;height:0;
  border-left:15px solid #f0dca4;border-top:9px solid transparent;border-bottom:9px solid transparent}
.hsvid-dur{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:999px;
  font-size:0.75rem;line-height:1.5;font-weight:600;letter-spacing:.03em;color:#f2f2f4;
  background:rgba(7,7,10,.72);border:1px solid rgba(255,255,255,.14)}
.hsvid-txt{display:flex;flex-direction:column;gap:7px;padding:15px 16px 17px}
.hsvid-txt b{font-size:0.90625rem;line-height:1.5;font-weight:600;color:var(--ink)}
.hsvid-txt em{font-style:normal;font-size:0.75rem;color:var(--muted)}
.hsvid-txt .go{margin-top:2px;font-size:0.78125rem;font-weight:600;color:var(--gold-lt)}
.hsvid-txt .go::after{content:" →"}
@media (max-width:640px){
  .hsvid{padding:16px}
  .hsvid-row{gap:12px}
  .hsvid-play{width:46px;height:46px;margin:-23px 0 0 -23px}
  .hsvid-play::after{left:19px;top:14px;border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
  .hsvid-txt{padding:13px 14px 15px}
}