/* ============================================================================
 * common/widget/02-banner.css — 輪播 widget（bannerA~E ＋ 輪播通用 ＋ widget 圖片顯隱／響應式基準）
 * ============================================================================
 *   載入序：02 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L89~463 切出；phase 2 已完成斷點對齊
 *   本檔開頭保留原「區段 1」總說明註解（描述的是整個 widgets.css 來源，非僅本模組）。
 *   .widgetImgDesktop／.widgetImgMobile 顯隱切換與 .widgetImgResponsive（issue #762 共用
 *   響應式圖片元件的流體寬高基準）位於本檔尾端，供 imgTextA~D 與 oneImage 共用。
 *
 *   [斷點] 原用 992（2 處）／768（5 處）整數 max-width，已改為 991.98／767.98。
 *   七個區塊的選擇器互不重疊，無可合併的重複區塊。
 *   其中尾端 .widgetImgDesktop／.widgetImgMobile 的切換點與 resources/views/components/
 *   web/responsive-image.blade.php 的 <source media> 是同一個「桌機／手機圖」概念的兩條
 *   路徑（class 顯隱 vs picture 元素），本次一併對齊為 767.98px。
 *
 *   [好覆蓋，issue #874] bannerA~E 的可調值（比例／高度／導覽鈕尺寸與配色／coverflow
 *   的淡出與模糊）已改由 .widget-bannerX 上的自訂屬性承載，主題覆寫該單一 class（0,1,0）
 *   即可，毋須複製 .widget-bannerX .owl-item（0,2,0）或
 *   .owl-carousel-bannerX .owl-nav button.owl-prev（0,3,1）這類長選擇器。
 *   選擇器本身刻意不降權：.owl-item／.owl-nav／.owl-stage-outer 是 owl 套件的共用 class，
 *   去掉 widget 範圍限定會誤傷 imgTextB／imgTextD 等其他 owl 輪播。
 * ==========================================================================*/

/* ============================================================================
 * 區段 1：widgets.css 全部內容（baseline 跨主題共用 widget 元件）
 *   抽取自 widgets.css line 30~end
 *   首頁 widget 元件：imgTextA~D / bannerA~E / 訂閱表單 / 倒數計時 /
 *   swiper / owl-carousel 整合 / container 變體 等
 * ============================================================================
 */

/* 輪播A~E 共通說明（issue #874「好覆蓋」）
   .owl-item／.owl-nav／.owl-stage-outer 都是 owl 套件的共用 class，選擇器**必須**維持
   widget 範圍限定（否則會誤傷 imgTextB／imgTextD 等其他 owl 輪播），無法單純降特異性。
   因此改以「把可調值搬到 .widget-bannerX 上的自訂屬性」達成降權：
   主題只要覆寫 .widget-bannerX（0,1,0）內的變數，就能改比例／高度／導覽鈕外觀，
   毋須複製 .widget-bannerX .owl-item（0,2,0）或
   .owl-carousel-bannerX .owl-nav button.owl-prev（0,3,1）這類長選擇器。
   各 var() 皆帶 fallback，即使變數未定義也維持原值。 */

/* 輪播A */

.widget-bannerA {
    --bannerA-ratio: 21/9;
    --bannerA-nav-size: 50px;
    --bannerA-nav-radius: 0px;
    --bannerA-nav-bg: #00000061;
    --bannerA-nav-bg-hover: rgba(0, 0, 0, .1);
    --bannerA-nav-color: #ffffff;
    --bannerA-nav-inset: 0px; /* 導覽鈕列（.owl-nav）的內距 */
    --bannerA-img-fit: contain; /* 輪播圖片的填滿方式 */
    --bannerA-img-position: center; /* 輪播圖片的定位點 */
    position: relative;
    width: 100%;
}

/* 手機維持固定橫向比例，避免直向圖片撐高輪播（原 aspect-ratio 被註解掉、
   只剩 height:auto 會隨圖高變動）。主題若要單一比例，覆寫 --bannerA-ratio 即可
   （主題層宣告不在 @media 內、同特異性且載入序在後，所有寬度都勝出）。 */
@media (max-width: 991.98px) {
    .widget-bannerA {
        --bannerA-ratio: 16/9;
    }
}

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

.owl-carousel-bannerA {
    position: relative;
    width: 100%;
}

.widget-bannerA .owl-stage-outer {
    overflow: hidden;
    width: 100%;
}

.widget-bannerA .owl-item {
    width: 100%;
    height: auto;
    aspect-ratio: var(--bannerA-ratio, 21/9);
}

.widget-bannerA .owl-item .item {
    width: 100%;
    height: 100%;
}

.owl-carousel-bannerA .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: var(--bannerA-nav-inset, 0px);
    box-sizing: border-box;
    z-index: 100;
}

.owl-carousel-bannerA .owl-nav button.owl-prev,
.owl-carousel-bannerA .owl-nav button.owl-next {
    background: var(--bannerA-nav-bg, #00000061);
    color: var(--bannerA-nav-color, #ffffff);
    width: var(--bannerA-nav-size, 50px);
    height: var(--bannerA-nav-size, 50px);
    margin: 0;
    border-radius: var(--bannerA-nav-radius, 0px);
    transition: all 0.3s ease;
}

.owl-carousel-bannerA .owl-nav button.owl-next:hover,
.owl-carousel-bannerA .owl-nav button.owl-prev:hover {
    background: var(--bannerA-nav-bg-hover, rgba(0, 0, 0, .1));
    color: var(--bannerA-nav-color, #ffffff);
}

@media (max-width: 767.98px) {
    .owl-carousel-bannerA .owl-nav {
        display: none;
    }
}



/* 輪播B */

.widget-bannerB {
    --bannerB-height: 550px;
    --bannerB-radius: 99rem;
    --bannerB-nav-size: 35px;
    --bannerB-nav-bg: #aeaeae;
    --bannerB-nav-bg-hover: #c9c8c8;
    --bannerB-nav-color: #ffffff;
    --bannerB-nav-bottom: 0; /* 導覽鈕列（.owl-nav）距底部距離 */
    --bannerB-nav-gap: 10px; /* 導覽鈕左右間距 */
    --bannerB-img-fit: cover; /* 輪播圖片的填滿方式 */
    --bannerB-img-position: center; /* 輪播圖片的定位點 */
    position: relative;
    width: 100%;
}

@media (max-width: 991.98px) {
    .widget-bannerB {
        --bannerB-height: auto;
    }
}

.widget-bannerB .owl-stage-outer {
    overflow: hidden;
    width: 100%;
    border-radius: var(--bannerB-radius, 99rem);
}

.owl-carousel-bannerB .owl-item {
    height: var(--bannerB-height, 550px);
}

.owl-carousel-bannerB .owl-item .item,
.owl-carousel-bannerB .owl-item .item > a {
    display: block;
    width: 100%;
    height: 100%;
}

.owl-carousel-bannerB .owl-item .item img {
    width: 100%;
    height: 100%;
    object-fit: var(--bannerB-img-fit, cover);
    object-position: var(--bannerB-img-position, center);
}

.owl-carousel-bannerB .owl-nav {
    position: absolute;
    bottom: var(--bannerB-nav-bottom, 0);
    margin-top: 0;
    display: flex;
    justify-content: start;
}

.owl-carousel-bannerB .owl-nav button.owl-prev,
.owl-carousel-bannerB .owl-nav button.owl-next {
    background: var(--bannerB-nav-bg, #aeaeae);
    color: var(--bannerB-nav-color, #ffffff);
    width: var(--bannerB-nav-size, 35px);
    height: var(--bannerB-nav-size, 35px);
    margin: 0;
    border-radius: 99rem;
    transition: all 0.3s ease;
    margin-right: var(--bannerB-nav-gap, 10px);
}

.owl-carousel-bannerB .owl-nav button.owl-prev:hover,
.owl-carousel-bannerB .owl-nav button.owl-next:hover {
    background: var(--bannerB-nav-bg-hover, #c9c8c8);
    color: var(--bannerB-nav-color, #ffffff);
}


/* 輪播C */

.widget-bannerC {
    --bannerC-ratio: 21/9;
    --bannerC-side-opacity: 0.4;
    --bannerC-side-blur: 3px;
    --bannerC-dots-bottom: 0; /* 分頁點（.owl-dots）距底部距離 */
    position: relative;
    width: 100%;
}

@media (max-width: 767.98px) {
    .widget-bannerC {
        --bannerC-ratio: 1/1;
    }
}

/* coverflow：非中央的項目淡出＋模糊 */
.owl-carousel-bannerC .owl-item {
    opacity: var(--bannerC-side-opacity, 0.4);
    filter: blur(var(--bannerC-side-blur, 3px));
    transition: all 0.3s ease;
}

.widget-bannerC .owl-item {
    width: 100%;
    height: auto;
    aspect-ratio: var(--bannerC-ratio, 21/9);
}

.widget-bannerC .owl-item .item {
    width: 100%;
    height: 100%;
}

.owl-carousel-bannerC .owl-item.center {
    opacity: 1;
    filter: blur(0);
}

.owl-carousel-bannerC .owl-dots {
    position: absolute;
    bottom: var(--bannerC-dots-bottom, 0);
    left: 50%;
    transform: translateX(-50%);
}

/* 輪播D */

.widget-bannerD {
    --bannerD-ratio: 16/9;
    --bannerD-nav-size: 50px;
    --bannerD-nav-bg: #ffffff;
    --bannerD-nav-color: #000000;
    --bannerD-nav-shadow: rgba(149, 157, 165, 0.47) 0px 8px 24px;
    --bannerD-nav-shadow-hover: rgba(41, 41, 41, 0.47) 0px 8px 24px;
    --bannerD-nav-inset: 15px; /* 導覽鈕列（.owl-nav）的內距 */
    --bannerD-img-fit: contain; /* 輪播圖片的填滿方式 */
    --bannerD-img-position: center; /* 輪播圖片的定位點 */
    position: relative;
    width: 100%;
}

.widget-bannerD .owl-stage-outer {
    overflow: hidden;
    width: 100%;
}

.owl-carousel-bannerD {
    position: relative;
    width: 100%;
}

/* bannerD 原未設 owl-item 固定高／比例，直向圖片會撐高輪播（桌機與手機皆然）；補固定橫向比例框 */
.widget-bannerD .owl-item {
    width: 100%;
    aspect-ratio: var(--bannerD-ratio, 16/9);
}

.widget-bannerD .owl-item .item {
    width: 100%;
    height: 100%;
}

.owl-carousel-bannerD .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: var(--bannerD-nav-inset, 15px);
    margin-top: 0px;
    box-sizing: border-box;
    z-index: 100;
}

/* 註：原 prev／next 為兩條逐字相同的規則，已合併 */
.owl-carousel-bannerD .owl-nav button.owl-prev,
.owl-carousel-bannerD .owl-nav button.owl-next {
    background: var(--bannerD-nav-bg, #ffffff);
    box-shadow: var(--bannerD-nav-shadow, rgba(149, 157, 165, 0.47) 0px 8px 24px);
    color: var(--bannerD-nav-color, #000000);
    width: var(--bannerD-nav-size, 50px);
    height: var(--bannerD-nav-size, 50px);
    margin: 0;
    border-radius: 99rem;
    transition: all 0.3s ease;
}

.owl-carousel-bannerD .owl-nav button.owl-prev:hover,
.owl-carousel-bannerD .owl-nav button.owl-next:hover {
    box-shadow: var(--bannerD-nav-shadow-hover, rgba(41, 41, 41, 0.47) 0px 8px 24px);
}

@media (max-width: 767.98px) {
    .owl-carousel-bannerD .owl-nav {
        display: none;
    }
}

/* 輪播E */

.widget-bannerE {
    --bannerE-ratio: 960/403;
    --bannerE-side-opacity: 0.4;
    --bannerE-side-blur: 3px;
    --bannerE-dots-bottom: 0; /* 分頁點（.owl-dots）距底部距離 */
    position: relative;
    width: 100%;
}

.widget-bannerE .owl-item {
    width: 100%;
    height: auto;
    aspect-ratio: var(--bannerE-ratio, 960/403);
}

.widget-bannerE .owl-item .item {
    width: 100%;
    height: 100%;
}

/* coverflow：非中央的項目淡出＋模糊 */
.owl-carousel-bannerE .owl-item {
    opacity: var(--bannerE-side-opacity, 0.4);
    filter: blur(var(--bannerE-side-blur, 3px));
    transition: all 0.3s ease;
}

.owl-carousel-bannerE .owl-item.center {
    opacity: 1;
    filter: blur(0);
}

.owl-carousel-bannerE .owl-dots {
    position: absolute;
    bottom: var(--bannerE-dots-bottom, 0);
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 767.98px) {
    .owl-carousel-bannerE .owl-dots {
        display: none;
    }
}

/* 輪播通用 */


.owl-carousel .owl-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* banner 輪播圖片：等比例縮小到固定高、置中不裁切（直向圖不撐框、不被裁掉，只在固定橫向比例框內留白）。
   覆蓋通用 .owl-item img 的 cover。範圍限本次回報的 bannerA／bannerD（首頁使用者所見）；
   bannerC／E 已有固定比例且屬 coverflow 客製（3ffood 有覆寫）維持 cover、bannerB 圓形設計維持 cover，皆不在此列。 */
.widget-bannerA .owl-item img {
    object-fit: var(--bannerA-img-fit, contain);
    object-position: var(--bannerA-img-position, center);
}

.widget-bannerD .owl-item img {
    object-fit: var(--bannerD-img-fit, contain);
    object-position: var(--bannerD-img-position, center);
}

/* 桌機/手機圖切換：每個 widget 同時輸出 .widgetImgDesktop 與 .widgetImgMobile 兩張圖，
   靠這組規則只顯示其一。

   [issue #694 phase 2：原本的 !important 改以特異性接手]
   基礎規則只有單一 class（0,1,0），會被兩條「輪播容器內的圖」規則壓過，故原先四條宣告
   都加了 !important（等於任何主題想改就也得加 !important，違背本票「好覆蓋」目標）：
     1. owl 套件 vendor：.owl-carousel .owl-item img { display: block }（0,2,1）
        → 影響 imgTextB／imgTextD／banner
     2. 本目錄 16-baseline-override.css：.swiper-slide img { display: block }（0,1,1，
        且載入序在本檔之後）→ 影響 imgTextA／商品 B／圖片 widget
   改為「基礎規則維持 0,1,0 ＋ 兩個容器各自補一條較高特異性的規則」後，勝出關係不變，
   而主題層用同等特異性的選擇器即可覆寫。
   MUST 成組維護：新增／修改任一條時，基礎版與兩個容器版都要同步；日後若再出現
   「某容器 img { display }」的新規則，也要比照補一條，否則該容器內兩張圖會同時顯示。 */
.widgetImgDesktop {
    width: 100%;
    height: auto;
    display: block;
}

.widgetImgMobile {
    width: 100%;
    height: auto;
    display: none;
}

/* 容器內接手（取代原 !important）：勝過 owl vendor 與 16 的 .swiper-slide img */
.owl-carousel .owl-item img.widgetImgDesktop,
.swiper-slide img.widgetImgDesktop {
    display: block;
}

.owl-carousel .owl-item img.widgetImgMobile,
.swiper-slide img.widgetImgMobile {
    display: none;
}

@media (max-width: 767.98px) {
    .widgetImgDesktop {
        display: none;
    }

    .widgetImgMobile {
        display: block;
    }

    .owl-carousel .owl-item img.widgetImgDesktop,
    .swiper-slide img.widgetImgDesktop {
        display: none;
    }

    .owl-carousel .owl-item img.widgetImgMobile,
    .swiper-slide img.widgetImgMobile {
        display: block;
    }
}

/* 單張輸出的 widget 響應式圖（issue #762）：imgTextA～D 與 oneImage 改用共用圖片元件的
   <picture><source media> 後，由瀏覽器依 viewport 只下載其中一張，不再需要上方兩個 class 的
   顯隱切換；但原本同時由那兩個 class 承擔的流體寬高仍必須保留——imgTextB 與 oneImage 的圖片
   沒有任何其他規則提供寬度，只靠 .widgetImgDesktop 的 width:100%。
   刻意不加 !important 也刻意維持單一 class 特異性（0,1,0）：低於各 widget 自身的
   object-fit 規則（如 .imgTextA-Box .imgTextA-ImgBox .imgTextA-Img），讓既有版型維持原樣，
   本規則僅在沒有其他來源時提供寬高基準。 */
/* #1027 補 max-width：width:100% 的 100% 相對於父層,輪播圖的父層是 optional-link 的
   inline <a>,其寬度反過來由圖片內容撐開,形成循環後兩者一起退回原生尺寸(實測 1920px)
   把整頁撐破。max-width:100% 以包含塊為準,才真正封住溢出;僅在圖片超寬時生效,不影響
   既有版型。 */
.widgetImgResponsive {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}