/*
 * YouTube 16:9 嵌入 — WebView aspect-ratio fallback
 * ---------------------------------------------------------------------------
 * Root Cause:
 *   頁面以 Tailwind 的 `aspect-video`（= aspect-ratio: 16 / 9）或 inline
 *   `style="aspect-ratio: 16/9"` 撐開 16:9 容器。舊版 WKWebView（iOS < 15）與
 *   部分 Android WebView 不支援 CSS `aspect-ratio`，導致「只含絕對定位子元素」
 *   的容器高度塌陷為 0，嵌入的 YouTube 影片被裁切（看起來像被切掉一條）。
 *
 * Fix:
 *   僅在「不支援 aspect-ratio」的環境，改用 padding-bottom 56.25% 內在比例
 *   （intrinsic ratio）技巧撐高，此寫法所有 WebView 皆支援。
 *   `@supports not` 確保現代瀏覽器完全不受影響（無回歸）。
 *
 * 範圍：
 *   - Pattern B：div.aspect-video 作為 16:9 容器、iframe/img 為 position:absolute
 *     （lohas / watch / care / video_player / quiz 影片卡等）
 *   - Pattern A：legacy .youtube1 包裹、iframe 自帶 aspect-ratio
 *     （quiz / insurance / 文章內嵌影片）
 *
 *   注意：刻意排除 <img class="aspect-video">（replaced element 有自然高度、
 *   不會塌陷），避免把 sub-page 縮圖高度壓成 0。故 Pattern B 僅選 div.aspect-video。
 */

@supports not (aspect-ratio: 16 / 9) {
    /* Pattern B：16:9 容器（子元素絕對定位） */
    div.aspect-video {
        position: relative;
        height: 0 !important;
        padding-bottom: 56.25%; /* 9 / 16 */
    }

    /* Pattern A：legacy .youtube1 包裹，iframe 自帶 aspect-ratio */
    .youtube1 {
        position: relative;
        height: 0;
        padding-bottom: 56.25%; /* 9 / 16 */
    }

    .youtube1 > iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
}