/* ============================================================================
 * common/widget/13-product-b.css — 商品 widget B
 * ============================================================================
 *   載入序：13 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L2183~2403 切出；phase 2 已完成本模組整理
 *
 *   [跨模組依賴已解除] 原位於 19-layout-hooks.css 的 productB 卡片文字規則（#706 取代
 *   blade 移除的 text-start／mb-0 utility）已併入本檔 .text／.price 的規則本體；
 *   14~18 各檔皆無 productB 選擇器，提前載入不改變生效值（已實測）。
 *
 *   [容器寬度] 版面容器為 blade 的 .container.container-{1600|800}，寬度已於 phase 2
 *   第一組統一為 03-container.css 的 --cms-container-* 階梯，本檔不另行限制寬度。
 *
 *   [斷點] 原用 992／768 三個整數 max-width，已改為 991.98／767.98。整併兩處重複：
 *     - .productB 的 ≤768 內距與 ≤992 同值（16px 0），整段移除
 *     - .productB-TitleBox 的 ≤768 區塊僅 margin-bottom 與 ≤992 不同（30px／24px），
 *       其餘重複宣告刪除，只留差異項
 *
 *   [保留裁決，issue #862] .productB-TitleBox／.productB-Title 沒有 Blade／JS 輸出，正式站
 *   後台可見內容亦為 0 命中；但它們與 blockTitle*／timeline* 同屬 CKEditor legacy 內容版型
 *   詞彙，依 B 類最終裁決保留為可復用相容樣式庫，不再列為待驗死碼。themes/kgtwbeef 的
 *   對應品牌覆寫亦須一併保留，避免歷史或重新貼入的編輯器內容失去樣式。
 *
 *   [勿改寫] .productB-TitleBox ::after 與圖文 D 同屬 legacy 後代選擇器（等同 *::after），
 *   命中的是 h3.productB-Title 的 ::after。本檔未給它 position，且桌機無基礎規則，
 *   ::after 維持 display: inline 使寬高不生效——實際不算繪任何東西；
 *   themes/kgtwbeef/widget.css 仍以同選擇器改色。移除或改寫都會動到主題相依，暫不動。
 *   issue #874 只把宣告值換成變數、不動選擇器與特異性，主題相依不受影響。
 *
 *   [好覆蓋] issue #694：兩組降為單一 class——.productB-TitleBox .productB-Title → .productB-Title
 *   （含 ≤991.98 區塊共 2 條）、.productB-Box .productB-ImgBox → .productB-ImgBox。
 *   兩者皆為 productB 專有 class；.productB-Cover 的 hover/子代規則（0,3,0 / 0,4,0）
 *   維持原樣，它們要靠祖先表達「卡片 hover 時」的狀態語意。
 *
 *   [好覆蓋，issue #874] 本模組所有可調值改由 .productB（0,1,0）上的自訂屬性承載：
 *   區塊內距／標題盒內距間距與飾線／標題字級與配色／卡片比例與 hover 放大倍率／
 *   覆蓋文字盒內距漸層與文字色／窄容器（container-800）下的字級／價格字級與外距／
 *   分頁點尺寸。RWD 差異一律改為在 @media 內覆寫變數。
 * ==========================================================================*/

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


.productB {
    --productB-nav-offset: -48%; /* 左右導覽鈕（swiper button）的垂直位移 */
    --productB-img-fit: contain; /* 卡片圖片的填滿方式 */
    --productB-img-position: center; /* 卡片圖片的定位點 */
    --productB-pad: 40px 0 20px; /* 區塊內距 */
    --productB-titlebox-pad: 12px 0; /* 標題盒內距 */
    --productB-titlebox-gap: 10px; /* 標題盒下外距 */
    --productB-title-font: 28px; /* 標題字級 */
    --productB-title-color: #595757; /* 標題文字色 */
    --productB-title-gap: 0px; /* 標題下外距 */
    --productB-line-top: 80%; /* 飾線垂直位置（平板以下才有規則） */
    --productB-line-right: 50%; /* 飾線水平位置 */
    --productB-line-w: 1.2px; /* 飾線寬 */
    --productB-line-h: 24px; /* 飾線高 */
    --productB-line-color: #231815; /* 飾線顏色 */
    --productB-box-ratio: 1/1; /* 卡片長寬比 */
    --productB-hover-scale: 1.05; /* 滑過時圖片放大倍率 */
    --productB-cover-transition: 0.2s ease-in-out; /* 圖片轉場 */
    --productB-textbox-pad: 20px; /* 覆蓋文字盒內距 */
    --productB-textbox-bg: linear-gradient(0deg, rgb(0 0 0 / 70%) 9%, rgba(255, 255, 255, 0) 100%); /* 覆蓋文字盒漸層 */
    --productB-text-color: #ffffff; /* 卡片文字色 */
    --productB-card-title-gap: 4px; /* 卡片標題下外距 */
    --productB-text-font: 16px; /* 卡片副標字級 */
    --productB-text-lh: 28px; /* 卡片副標行高 */
    --productB-narrow-title-font: 16px; /* 窄容器標題字級 */
    --productB-narrow-title-lh: 28px; /* 窄容器標題行高 */
    --productB-narrow-text-font: 14px; /* 窄容器副標字級 */
    --productB-price-font: 18px; /* 價格字級 */
    --productB-price-lh: 28px; /* 價格行高 */
    --productB-price-margin: 8px 0 0 0; /* 價格外距 */
    --productB-bullet-size: 16px; /* 分頁點尺寸 */
    padding: var(--productB-pad, 40px 0 20px);
    position: relative;
}

/* RWD：改為覆寫上方變數（見檔頭 [好覆蓋]）。
   原有 ≤992 與 ≤768 兩段內距值相同（16px 0），合併為單一斷點 */
@media (max-width: 991.98px) {

    .productB {
        --productB-pad: 16px 0;
        --productB-titlebox-pad: 10px 0;
        --productB-titlebox-gap: 24px;
        --productB-title-font: 16px;
        --productB-title-gap: 4px;
    }
}

/* 手機：原為 ≤992 區塊的整段複製，僅標題盒下外距不同，故只保留差異項 */
@media (max-width: 767.98px) {

    .productB {
        --productB-titlebox-gap: 30px;
        --productB-price-font: 13px;
    }
}

.productB-Bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    object-fit: cover;
}

.productB-TitleBox {
    width: fit-content;
    padding: var(--productB-titlebox-pad, 12px 0);
    margin-bottom: var(--productB-titlebox-gap, 10px);
    position: relative;
}



.productB-Title {
    font-size: var(--productB-title-font, 28px);
    color: var(--productB-title-color, #595757);
    margin-bottom: var(--productB-title-gap, 0px);
}

/* 平板以下：標題盒改為滿寬置中（內距／下外距／字級已由變數承接，此處只留結構性宣告與飾線） */
@media (max-width: 991.98px) {

    .productB-TitleBox {
        width: 100%;
        text-align: center;
        position: relative;
    }

    .productB-TitleBox ::after {
        content: "";
        top: var(--productB-line-top, 80%);
        right: var(--productB-line-right, 50%);
        width: var(--productB-line-w, 1.2px);
        height: var(--productB-line-h, 24px);
        background: var(--productB-line-color, #231815);
    }
}

.productB-Box {
    width: 100%;
    aspect-ratio: var(--productB-box-ratio, 1/1);
    position: relative;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.productB-Box:hover .productB-ImgBox .productB-Cover {
    transform: scale(var(--productB-hover-scale, 1.05));
}

.productB-ImgBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* [不可降權 #874] 本條維持 (0,3,0)。20-swiper.css 的 .swiper-slide img（0,1,1）同樣設 object-fit
   且載入序在後，一旦降為單一 class，productB 圖片的 contain 會被 swiper 的 cover 蓋掉（實測 56 處差異）。
   主題若要調整 productB 圖片填滿方式，改由自訂屬性承載（見 #874 第二批）。 */
.productB-Box .productB-ImgBox .productB-Cover {
    width: 100%;
    height: 100%;
    -o-object-fit: var(--productB-img-fit, contain);
    object-fit: var(--productB-img-fit, contain);
    object-position: var(--productB-img-position, center);
    transition: var(--productB-cover-transition, 0.2s ease-in-out);
}

.productB-TextBox {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--productB-textbox-pad, 20px);
    background: var(--productB-textbox-bg, linear-gradient(0deg, rgb(0 0 0 / 70%) 9%, rgba(255, 255, 255, 0) 100%));
}

/* 註：以下四條原本都同時宣告 width: fit-content 與 width: 100%，後者恆勝出，
   已刪除前者。.text／.price 的 text-align 與 margin-bottom 則是取代 blade 移除的
   text-start／mb-0 utility（issue #706），phase 2 自 19-layout-hooks.css 收攏至規則本體。 */
.productB-TextBox .title {
    margin-bottom: var(--productB-card-title-gap, 4px);
    color: var(--productB-text-color, #ffffff);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: left;
}

.container-800 .productB-TextBox .title {
    font-size: var(--productB-narrow-title-font, 16px);
    line-height: var(--productB-narrow-title-lh, 28px);
    margin-bottom: var(--productB-card-title-gap, 4px);
    color: var(--productB-text-color, #ffffff);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: left;
}

.productB-TextBox .text {
    font-size: var(--productB-text-font, 16px);
    line-height: var(--productB-text-lh, 28px);
    color: var(--productB-text-color, #ffffff);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: left;
    margin-bottom: 0;
}


.container-800 .productB-TextBox .text {
    font-size: var(--productB-narrow-text-font, 14px);
    line-height: var(--productB-text-lh, 28px);
    color: var(--productB-text-color, #ffffff);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

/* margin 簡寫已含 margin-bottom: 0，即 #706 的 mb-0 等價值 */
.productB-TextBox .price {
    font-size: var(--productB-price-font, 18px);
    line-height: var(--productB-price-lh, 28px);
    color: var(--productB-text-color, #ffffff);
    width: fit-content;
    font-weight: 800;
    margin: var(--productB-price-margin, 8px 0 0 0);
    text-align: left;
}

.swiper-productB-button-prev::after,
.swiper-productB-button-next::after {
    display: none;
}

.swiper-productB-button-prev,
.swiper-productB-button-next {
    transform: translateY(var(--productB-nav-offset, -48%));
}

.productB .swiper-slide {
    width: fit-content;
}


.productB .swiper-pagination-bullet {
    width: var(--productB-bullet-size, 16px);
    height: var(--productB-bullet-size, 16px);
}