/* ============================================================================
 * common/widget/20-swiper.css — Swiper 套件全域覆寫（跨 widget 共用）
 * ============================================================================
 *   載入序：20 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *
 *   [為什麼是 20 而不是 19] 19 號原為 19-layout-hooks.css，已於 issue #694 phase 2
 *   內容全數回收至各模組本體後移除並歸檔（docs/oldData/public/web/css/common/widget/）。
 *   為免與 git 歷史、既有文件混淆，該編號刻意留空不重複使用。
 *
 *   [本檔的定位] 這裡放的是 **Swiper 套件層級的全域覆寫**，不屬於任何單一 widget：
 *   分頁點（.swiper-pagination*）、導覽鈕（.swiper-nav-custom / .swiper-other-button-*）、
 *   lock 狀態、以及 .swiper-slide / .swiper-wrapper 的版面基準。
 *   前台用到 swiper 的 widget 至少有圖文 A、商品 B、圖片 widget，三者共吃這組樣式。
 *
 *   [來源，issue #694] 原先散落兩處、且都寄居在與自己無關的模組檔內：
 *     - 11-image.css L80~209（該檔檔頭早已標記「宜彙整為獨立 swiper 模組」）
 *     - 16-baseline-override.css 區段 3（.swiper-slide / .swiper-slide img，
 *       抽自凍結的 default.css L6351~6356 + L6762~6775）
 *   本檔依原載入序合併：先 11 的內容，後 16 的內容，cascade 結果不變。
 *
 *   [不收進本檔的] widget 自身對 swiper 的專屬覆寫維持原地：
 *     - 13-product-b.css 的 .productB .swiper-slide／.swiper-pagination-bullet／
 *       .swiper-productB-button-*（皆為該 widget 專有，特異性亦高於本檔）
 *     - 02-banner.css 的 .swiper-slide img.widgetImg*（桌機／手機圖切換，
 *       屬圖片顯隱機制而非 swiper 版面）
 *
 *   [載入序] 本檔規則與 02~18 各檔無同特異性衝突，實測置於最後不改變任何生效值。
 *
 *   [好覆蓋，issue #874] 本檔沒有 widget 外層 class 可掛（Swiper 是跨 widget 的套件層），
 *   故自訂屬性一律**宣告在消費它的選擇器自身**，而非某個祖先——
 *   .swiper-pagination-bullet 自帶 --swiper-bullet-size，主題覆寫同一個 class 即可，
 *   不必先找到某個容器。RWD 差異同樣改為在 @media 內覆寫該選擇器上的變數，
 *   主題宣告不在 @media 內、同特異性且載入序在後，覆寫後所有寬度都勝出。
 *   選擇器本身刻意不降權：.swiper-* 全是套件共用 class，改動範圍限定會誤傷其他輪播。
 * ==========================================================================*/


/* ----------------------------------------------------------------------------
 * 版面基準（slide / wrapper）
 * -------------------------------------------------------------------------- */

/* 註：原 widgets.css 為 .swiper-slide, .swiper-wrapper 聯合 selector，
   拆檔時因 .swiper-slide 與 default 來源重複而分列兩處，本檔重新收在一起。 */
.swiper-wrapper {
    height: fit-content;
}

.swiper-slide {
    --swiper-slide-font: 18px; /* slide 內文字級 */
    --swiper-slide-img-fit: cover; /* slide 圖片填滿方式 */
    text-align: center;
    font-size: var(--swiper-slide-font, 18px);
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--swiper-slide-img-fit, cover);
}


/* ----------------------------------------------------------------------------
 * 導覽鈕
 * -------------------------------------------------------------------------- */

.swiper-nav-custom .swiper-main-button-next,
.swiper-other-button-prev {
    position: static;
    margin-top: 0px;
    transition: 0.5s;
}

.swiper-nav-custom .swiper-main-button-next::after,
.swiper-other-button-prev::after {
    content: "";
    display: none;
}

.swiper-nav-custom .swiper-main-button-prev,
.swiper-other-button-next {
    --swiper-nav-gap: 10px; /* 導覽鈕右側間距 */
    position: static;
    margin-top: 0px;
    margin-right: var(--swiper-nav-gap, 10px);
    transition: 0.5s;
}

.swiper-nav-custom .swiper-main-button-prev::after,
.swiper-other-button-next::after {
    content: "";
    display: none;
}

.swiper-button-lock,
.swiper-pagination-lock,
.swiper-pagination-lock .swiper-pagination-bullet:only-child {
    display: flex;
}


/* ----------------------------------------------------------------------------
 * 分頁點
 * -------------------------------------------------------------------------- */

.swiper-pagination {
    --swiper-pagination-gap: 30px; /* 分頁點列上外距 */
    position: static;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    justify-content: start;
    display: flex;
    margin-top: var(--swiper-pagination-gap, 30px);
}

.swiper-pagination-bullet {
    --swiper-bullet-size: 20px; /* 分頁點尺寸 */
    --swiper-bullet-bg: #e0dedc; /* 分頁點顏色 */
    --swiper-bullet-margin: 5px 7px; /* 分頁點間距 */
    --swiper-bullet-radius: 30px; /* 分頁點圓角 */
    width: var(--swiper-bullet-size, 20px);
    height: var(--swiper-bullet-size, 20px);
    background: var(--swiper-bullet-bg, #e0dedc);
    margin: var(--swiper-bullet-margin, 5px 7px);
    display: block;
    transition: opacity .2s ease;
    border-radius: var(--swiper-bullet-radius, 30px);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    --swiper-bullet-size: 20px;
    --swiper-bullet-bg: #e0dedc;
    --swiper-bullet-margin: 5px 7px;
    --swiper-bullet-radius: 30px;
    --swiper-bullet-active-outline: 2px solid #3e3a39; /* 目前頁的外框 */
    width: var(--swiper-bullet-size, 20px);
    height: var(--swiper-bullet-size, 20px);
    outline: var(--swiper-bullet-active-outline, 2px solid #3e3a39);
    background: var(--swiper-bullet-bg, #e0dedc);
    margin: var(--swiper-bullet-margin, 5px 7px);
    display: block;
    transition: opacity .2s ease;
    border-radius: var(--swiper-bullet-radius, 30px);
}

.swiper-other-pagination .swiper-pagination-bullet {
    --swiper-bullet-size: 20px;
    --swiper-bullet-bg: #898989;
    --swiper-bullet-margin: 5px 7px;
    --swiper-bullet-radius: 30px;
    width: var(--swiper-bullet-size, 20px);
    height: var(--swiper-bullet-size, 20px);
    background: var(--swiper-bullet-bg, #898989);
    margin: var(--swiper-bullet-margin, 5px 7px);
    display: block;
    transition: opacity .2s ease;
    border-radius: var(--swiper-bullet-radius, 30px);
    opacity: 1;
}

.swiper-other-pagination .swiper-pagination-bullet-active {
    --swiper-bullet-size: 20px;
    --swiper-bullet-bg: #898989;
    --swiper-bullet-margin: 5px 7px;
    --swiper-bullet-radius: 30px;
    --swiper-bullet-active-outline: 2px solid #ffffff;
    width: var(--swiper-bullet-size, 20px);
    height: var(--swiper-bullet-size, 20px);
    outline: var(--swiper-bullet-active-outline, 2px solid #ffffff);
    background: var(--swiper-bullet-bg, #898989);
    margin: var(--swiper-bullet-margin, 5px 7px);
    display: block;
    transition: opacity .2s ease;
    border-radius: var(--swiper-bullet-radius, 30px);
}

/* RWD：改為覆寫各選擇器自身的變數（見檔頭 [好覆蓋]）。
   分頁點列的置中屬結構性宣告，維持直接寫在 @media 內。 */
@media (max-width: 991.98px) {

    .swiper-pagination {
        --swiper-pagination-gap: 20px;
        justify-content: center;
        display: flex;
    }

    .swiper-pagination-bullet {
        --swiper-bullet-size: 10px;
    }

    .swiper-pagination-bullet-active {
        --swiper-bullet-size: 10px;
        --swiper-bullet-active-outline: 1.5px solid #3e3a39;
    }

    .swiper-other-pagination .swiper-pagination-bullet {
        --swiper-bullet-size: 10px;
    }

    .swiper-other-pagination .swiper-pagination-bullet-active {
        --swiper-bullet-size: 10px;
        --swiper-bullet-active-outline: 1.5px solid #ffffff;
    }
}