/* ================================================================
   /video/ 影片說明頁專用樣式（2026-08-17）

   ⚠️ 為什麼不寫進 /guide/guide.css：那份是住宿攻略六篇共用的，
      影片頁只多用到「responsive 影片框」這一件事，塞進去會讓
      攻略頁每一次載入都多背一段用不到的規則。兩邊都 link 即可。

   ⚠️ 本檔只服務 /video/ 路徑，不要合併目錄：站上另有一個
      名稱相似但不同的目錄，把 HTML 頁面放進同一個目錄，
      日後的資產排除設定會連帶把這些頁面一起殺掉，
      而且是靜默發生。不要為了名字好聽把它們合併。
   ================================================================ */

/* Shorts 是直式的（9:16）。用 aspect-ratio 佔位，載入前就把版位撐好，
   避免影片框載入時把下面的文字往下推（CLS）。 */
.ytwrap {
  width: 100%;
  max-width: 340px;
  margin: 0 auto 10px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border-color, #2a2a2a);
}

.ytwrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* aspect-ratio 不支援時（舊瀏覽器）退回固定高度，不要塌成 0 高。 */
@supports not (aspect-ratio: 9 / 16) {
  .ytwrap { height: 600px; }
}

@media (min-width: 768px) {
  .ytwrap { max-width: 380px; }
}