/* ============================================================================
 * common/widget/10-video.css — 影片 widget（HTML 內嵌 / YouTube）
 *                              ＋ 圖片／影片共用格線
 * ============================================================================
 *   載入序：10 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L1818~1878 切出；phase 2 已完成本模組整理
 *
 *   [跨模組依賴已解除] .widget-media-grid 系列（#706 取代 blade 移除的 .row + 動態
 *   col-md-6／col-md-4／col-12）原位於 19-layout-hooks.css，phase 2 收攏至本檔尾段。
 *   該格線由**影片與圖片兩個 widget 共用**（widgets.blade.php L55／L84），置於兩者
 *   之中較早載入的本檔；11-image.css 檔頭亦有交叉註記。
 *   09~18 各檔皆無同選擇器規則，提前載入不改變生效值（已實測）。
 *
 *   [容器寬度] 影片 widget 的 blade 外殼為 .container.container-{width}，寬度本就
 *   跟隨站台標準階梯（1170／1320），phase 2 無需另行收斂。
 *
 *   [清理] 原有一個只含註解掉規則的空 @media (max-width: 768px) 區塊已移除。
 * ==========================================================================*/

/* ------------------------------------------------------------------------------------------------ */

/* 影片 */

.widget-video {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    padding: 30px 0;
    position: relative;
}


.widget-video-bgImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.widget-video-bg {
    width: 100%;
    height: 100%;
}

.video-Box {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    margin-bottom: 24px;
}


/* 影片html */

/* [好覆蓋 #874] 原 .video-Box .video-Video（0,2,0）降為單一 class：主題寫同名選擇器即可靠載入序接管 */
.video-Video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* 影片YT */

.video-Box iframe {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}


/* ----------------------------------------------------------------------------
 * 圖片／影片 widget 共用格線（phase 2 自 19-layout-hooks.css 收攏至此）
 *
 * 骨架語意化（issue #706）：取代 blade 移除的 .row + 動態 col-md-6／col-md-4／col-12。
 *   --1 單欄、--2 兩欄、--3 三欄；欄寬與 gutter 與 Bootstrap 等價。
 * 使用者：.widget-video 與 .widget-image（widgets.blade.php L55／L84）。
 * -------------------------------------------------------------------------- */

.widget-media-grid {
    /* 鏡射 BS .row 的 gutter 變數機制，讓既有 .container 系 gutter 覆寫（base.css legacy
       30px 規則、主題 container 變數）對本格線持續生效。
       註：專案 root font-size 為 62.5%（vendor textanimate），1.5rem 實際為 15px */
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    /* 欄寬以自訂屬性承載（issue #874）：手機一律單欄，≥768 依修飾類切換。
       主題覆寫這兩個變數（或直接覆寫 .widget-media-grid__item）即可改欄數。 */
    --media-grid-col: 100%;
    --media-grid-col-md: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.widget-media-grid--2 {
    --media-grid-col-md: 50%;
}

.widget-media-grid--3 {
    --media-grid-col-md: 33.333333%;
}

@media (min-width: 768px) {
    .widget-media-grid {
        --media-grid-col: var(--media-grid-col-md);
    }
}

/* [好覆蓋，issue #874] 原寫法為 .widget-media-grid > *（0,1,0 但帶子代組合器）＋
   .widget-media-grid--2|--3 > *（0,2,0），主題無法以單一 class 覆寫欄寬。
   改為直接命中 blade 輸出的 .widget-media-grid__item（0,1,0）。
   註：原基礎規則的 flex-shrink: 0 與 ≥768 的 flex: 0 0 auto 計算結果相同，統一寫簡寫。 */
.widget-media-grid__item {
    flex: 0 0 auto;
    width: var(--media-grid-col);
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
}