/* ============================================================================
 * common/widget/09-img-text-d.css — 圖文 D（含淺色圖片變體、無連結覆蓋版）
 * ============================================================================
 *   載入序：09 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L1472~1817 切出；phase 2 已完成本模組整理
 *
 *   [跨模組依賴已解除] 原位於 19-layout-hooks.css 的 imgTextD 三條規則（#706 取代 blade
 *   移除的 d-flex 系與 text-start／mb-0 utility）已併入本檔：標題列 flex 排列、卡片
 *   標題與內文靠左、內文下外距歸零。10~18 各檔皆無 imgTextD 選擇器（僅 15-one-image.css
 *   有 .bgTransparent .imgTextD-Box 的背景色，屬不同屬性），提前載入不改變生效值。
 *   3ffood 專屬 markup（.imgTextD3ffood-*，blade 於 webCss == 6 時輸出）的同組等價規則
 *   一併移入本檔與共用版並列；其視覺樣式本體仍在 themes/3ffood/widget.css。
 *
 *   [容器寬度] 本模組的版面容器是 blade 的 .container.container-1600，寬度已於 phase 2
 *   第一組統一為 03-container.css 的 --cms-container-* 階梯，本檔不另行限制寬度。
 *
 *   [斷點] 原用 992／768 兩個整數 max-width，已改為 991.98／767.98。整併兩處重複：
 *     - .widget-imgTextD 的 ≤768 內距與 ≤992 同值（16px 0），整段移除
 *     - .imgTextD-TitleBox 的 ≤768 區塊僅 margin-bottom 與 ≤992 不同（30px／24px），
 *       其餘重複宣告刪除，只留差異項
 *
 *   [勿改寫] .imgTextD-TitleBox ::after 是後代選擇器（等同 *::after），實際命中的是
 *   h3.imgTextD-Title 的 ::after，而非標題盒自身。看似筆誤，但三個主題都已相依，**兩種
 *   改寫方向都會造成主題破圖**，經 issue #694 phase 2 評估後確定維持原樣：
 *     - 改為 .imgTextD-TitleBox::after（移到標題盒自身）：themes/3ffood/base.css 的
 *       .widget-imgTextD .imgTextD-TitleBox .imgTextD-Title::after 是為了中和 3ffood 全域
 *       h3::after 的 margin-left 而寫，明確依賴飾線長在 h3 上；dgfactor／kgtwbeef 亦以
 *       .imgTextD-TitleBox ::after 改色，改寫後三者全部失準。
 *     - 改為 .imgTextD-TitleBox .imgTextD-Title::after（同一元素、寫法明確化）：特異性由
 *       (0,1,1) 升為 (0,2,1)，會反過來壓過 dgfactor／kgtwbeef 的 (0,1,1) 改色規則。
 *   issue #874 的「裝旋鈕」只替換宣告值、**不動選擇器與特異性**，故上述限制不受影響：
 *   飾線的長度／粗細／顏色／位置改由變數承載後，三主題現有的覆寫規則勝負關係完全不變。
 *
 *   [已移除] owl 內建分頁點的四條規則（.owl-dots／.owl-dots.disabled／.owl-dot span／
 *   .owl-dot.active span，含 ≤992 的縮小版）為死碼：widget.js 對本輪播設 dots: false，
 *   實站量測 .owl-dot 元素不存在，分頁點一律由 JS 另建的 .imgTextD-custom-dots 承擔。
 *
 *   [好覆蓋，issue #874] 本模組所有可調值改由 .widget-imgTextD（0,1,0）上的自訂屬性承載：
 *   區塊內距／標題盒內距與間距／飾線四項／標題色與間距／卡片底色比例與 hover 放大倍率／
 *   覆蓋文字盒內距背景與文字色（含淺色變體）／左右箭頭尺寸間距／分頁點尺寸配色。
 *   RWD 差異（標題盒與飾線在 ≤991.98／≤767.98 的變化）一律改為在 @media 內覆寫變數；
 *   原 ≤991.98 的 ::after 區塊四個屬性全數變數化後已無存在必要，整段移除（生效值不變）。
 * ==========================================================================*/

/* 圖+文D通用 */

.widget-imgTextD {
    --imgTextD-img-fit: cover; /* 卡片圖片的填滿方式 */
    --imgTextD-img-position: center; /* 卡片圖片的定位點 */
    --imgTextD-pad: 20px 0; /* 區塊上下內距 */
    --imgTextD-titlebox-pad: 12px 0; /* 標題盒內距 */
    --imgTextD-titlebox-gap: 10px; /* 標題盒下外距 */
    --imgTextD-line-top: 50%; /* 飾線垂直位置 */
    --imgTextD-line-right: -300px; /* 飾線水平位置 */
    --imgTextD-line-w: 268px; /* 飾線長度 */
    --imgTextD-line-h: 1.2px; /* 飾線粗細 */
    --imgTextD-line-color: #231815; /* 飾線顏色 */
    --imgTextD-title-color: #595757; /* 標題文字色 */
    --imgTextD-title-gap: 0px; /* 標題下外距 */
    --imgTextD-box-bg: rgb(235, 235, 235); /* 卡片底色 */
    --imgTextD-box-ratio: 458/354; /* 卡片長寬比 */
    --imgTextD-hover-scale: 1.05; /* 滑過時圖片放大倍率 */
    --imgTextD-cover-transition: 0.2s ease-in-out; /* 圖片轉場 */
    --imgTextD-textbox-pad: 20px; /* 覆蓋文字盒內距 */
    --imgTextD-textbox-bg: transparent; /* 覆蓋文字盒背景 */
    --imgTextD-text-color: #ffffff; /* 覆蓋文字色 */
    --imgTextD-text-gap: 4px; /* 覆蓋標題下外距 */
    --imgTextD-light-pad: 20px 20px 10px 20px; /* 淺色版文字盒內距 */
    --imgTextD-light-bg: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* 淺色版漸層 */
    --imgTextD-light-color: #333333; /* 淺色版文字色 */
    --imgTextD-arrow-pad: 1px 6px; /* 左右箭頭內距 */
    --imgTextD-arrow-min-h: 44px; /* 左右箭頭最小高（觸控範圍） */
    --imgTextD-arrow-gap: 10px; /* 左右箭頭間距 */
    --imgTextD-arrow-size: 16px; /* 箭頭圖示尺寸 */
    --imgTextD-dots-gap: 20px; /* 分頁點列上外距 */
    --imgTextD-dot-size: 20px; /* 分頁點尺寸 */
    --imgTextD-dot-radius: 30px; /* 分頁點圓角 */
    --imgTextD-dot-bg: #e0dedc; /* 分頁點顏色 */
    --imgTextD-dot-margin: 5px 7px; /* 分頁點間距 */
    --imgTextD-dot-active-outline: 2px solid #3e3a39; /* 目前頁的外框 */
    padding: var(--imgTextD-pad, 20px 0);
    position: relative;
}

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

/* RWD：改為覆寫上方變數（見檔頭 [好覆蓋]） */
@media (max-width: 991.98px) {

    .widget-imgTextD {
        --imgTextD-pad: 16px 0;
        --imgTextD-titlebox-pad: 10px 0;
        --imgTextD-titlebox-gap: 24px;
        --imgTextD-line-top: 80%;
        --imgTextD-line-right: 50%;
        --imgTextD-line-w: 1.2px;
        --imgTextD-line-h: 24px;
        --imgTextD-title-gap: 4px;
    }
}

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

    .widget-imgTextD {
        --imgTextD-titlebox-gap: 30px;
    }
}


/* ----------------------------------------------------------------------------
 * 標題列（標題盒 ＋ 左右箭頭）
 * -------------------------------------------------------------------------- */

/* 取代 blade 移除的 d-flex.justify-content-between.align-items-center
   （issue #706；phase 2 自 19-layout-hooks.css 收攏） */
.imgTextD-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.imgTextD-TitleBox ::after {
    content: "";
    position: absolute;
    top: var(--imgTextD-line-top, 50%);
    right: var(--imgTextD-line-right, -300px);
    width: var(--imgTextD-line-w, 268px);
    height: var(--imgTextD-line-h, 1.2px);
    background: var(--imgTextD-line-color, #231815);
}


/* [好覆蓋 #874] 原 .imgTextD-TitleBox .imgTextD-Title（0,2,0）降為單一 class：主題寫同名選擇器即可靠載入序接管 */
.imgTextD-Title {
    color: var(--imgTextD-title-color, #595757);
    margin-bottom: var(--imgTextD-title-gap, 0px);
}

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

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


/* ----------------------------------------------------------------------------
 * 卡片（圖片 ＋ 覆蓋文字）
 * -------------------------------------------------------------------------- */

.imgTextD-Box {
    width: 100%;
    background: var(--imgTextD-box-bg, rgb(235, 235, 235));
    aspect-ratio: var(--imgTextD-box-ratio, 458/354);
    position: relative;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

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

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

/* [好覆蓋 #874] 原 .imgTextD-Box .imgTextD-ImgBox .imgTextD-Cover（0,3,0）降為單一 class。
   本條降權會讓 themes/shopLinerp/widget.css 的同名 .imgTextD-Cover（0,1,0，
   transition: transform 0.25s ease）翻轉勝出——該主題規則原本被本條壓住、寫了卻從未生效，
   正是「主題改不動 common」的實例。經產品決策（2026-08-06）確認放行，shopLinerp 的
   imgTextD 圖片 hover 動畫由 all 0.2s ease-in-out 變為 transform 0.25s ease，
   為本次唯一的刻意視覺變更（24 元素 × 3 屬性 = 72 處），其餘五主題零差異。 */
.imgTextD-Cover {
    width: 100%;
    height: 100%;
    -o-object-fit: var(--imgTextD-img-fit, cover);
    object-fit: var(--imgTextD-img-fit, cover);
    object-position: var(--imgTextD-img-position, center);
    transition: var(--imgTextD-cover-transition, 0.2s ease-in-out);
}

/* 深色 .imgTextD-TextBox 變體原僅 Volvo（webCss=4）輸出，該分支已於 issue #962 移除；
   本檔原有的 .imgTextD-TextBox 與其 .title／.text 三條規則因此成為死碼，一併刪除。
   目前 Blade 僅輸出下方的 -Light 變體。 */

/* 淺色圖片專用樣式: 白色漸層背景 + 黑色文字 */
.imgTextD-TextBox-Light {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--imgTextD-light-pad, 20px 20px 10px 20px);
    background: var(--imgTextD-light-bg, linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%));
}

.imgTextD-TextBox-Light .title {
    margin-bottom: var(--imgTextD-text-gap, 4px);
    color: var(--imgTextD-light-color, #333333);
    width: fit-content;
    font-weight: 700;
    text-align: left;
}

.imgTextD-TextBox-Light .text {
    color: var(--imgTextD-light-color, #333333);
    width: fit-content;
    font-weight: 400;
    text-align: left;
    margin-bottom: 0;
}

/* 3ffood 專屬 markup 的同組 utility 等價規則（issue #706；phase 2 自 19 收攏）。
   字級／顏色／間距等視覺樣式在 themes/3ffood/widget.css，載入序在本檔之後。 */
.imgTextD3ffood-TextBox .title,
.imgTextD3ffood-TextBox .text {
    text-align: left;
}

.imgTextD3ffood-TextBox .text {
    margin-bottom: 0;
}


/* ----------------------------------------------------------------------------
 * 輪播（owl-carousel）
 * -------------------------------------------------------------------------- */

.owl-carousel-imgTextD .owl-item {
    height: auto;
}

.owl-carousel-imgTextD .owl-item .item {
    position: relative;
    height: 100%;
}

.owl-carousel-imgTextD .owl-item .imgTextD-Box {
    position: relative;
    height: auto;
}

.owl-carousel-imgTextD .owl-item .imgTextD-ImgBox {
    position: relative;
    height: auto;
    aspect-ratio: var(--imgTextD-box-ratio, 458/354);
    overflow: hidden;
}

.owl-carousel-imgTextD .owl-item .imgTextD-Cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: var(--imgTextD-img-fit, cover);
    object-position: var(--imgTextD-img-position, center);
    display: block;
}

/* 無連結時 ImgBox 與 TextBox 為兄弟節點，TextBox 需相對 .item 定位覆蓋在圖片上
   （原併列的深色 .imgTextD-TextBox 選擇器已隨 issue #962 刪除，見本檔上方說明）*/
.owl-carousel-imgTextD .owl-item .item > .imgTextD-TextBox-Light {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}


/* ----------------------------------------------------------------------------
 * 左右箭頭
 * -------------------------------------------------------------------------- */

/* [好覆蓋 #874] 原 .widget-imgTextD .imgTextD-btn-prev, , .widget-imgTextD .imgTextD-btn-next（0,2,0）降為單一 class：主題寫同名選擇器即可靠載入序接管 */
.imgTextD-btn-prev,
.imgTextD-btn-next {
    position: static;
    margin-top: 0;
    background: none;
    border: none;
    padding: var(--imgTextD-arrow-pad, 1px 6px);
    min-height: var(--imgTextD-arrow-min-h, 44px);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: 0.5s;
}

/* [好覆蓋 #874] 原 .widget-imgTextD .imgTextD-btn-prev（0,2,0）降為單一 class：主題寫同名選擇器即可靠載入序接管 */
.imgTextD-btn-prev {
    margin-right: var(--imgTextD-arrow-gap, 10px);
}

.widget-imgTextD .imgTextD-btn-prev img,
.widget-imgTextD .imgTextD-btn-next img {
    width: var(--imgTextD-arrow-size, 16px);
    height: var(--imgTextD-arrow-size, 16px);
    display: block;
}

.owl-nav-custom {
    display: flex;
}

/* issue #706：blade 移除 d-md-flex/d-none 後，斷點對齊 BS md（原 768px 與 d-md-flex 的
   min-width:768 重疊一像素寬度，在 768 恰好由 utility 的 !important 蓋回顯示）；
   767.98 同時符合專案 RWD 慣例（max-width 用下一階 −0.02px），legacy markup 行為不變 */
@media (max-width: 767.98px) {

    .owl-nav-custom {
        display: none;
    }
}


/* ----------------------------------------------------------------------------
 * 分頁點（widget.js 以 JS 產生 .imgTextD-custom-dots；owl 內建 dots 已停用）
 * -------------------------------------------------------------------------- */

.imgTextD-custom-dots {
    display: flex;
    align-items: center;
    margin-top: var(--imgTextD-dots-gap, 20px);
}

.imgTextD-dot {
    width: var(--imgTextD-dot-size, 20px);
    height: var(--imgTextD-dot-size, 20px);
    border-radius: var(--imgTextD-dot-radius, 30px);
    background: var(--imgTextD-dot-bg, #e0dedc);
    margin: var(--imgTextD-dot-margin, 5px 7px);
    display: block;
    cursor: pointer;
    transition: background 0.2s ease;
}

.imgTextD-dot.active {
    outline: var(--imgTextD-dot-active-outline, 2px solid #3e3a39);
    background: var(--imgTextD-dot-bg, #e0dedc);
}

/* 平板以下：自訂點列置中 */
@media (max-width: 991.98px) {

    .imgTextD-custom-dots {
        justify-content: center;
    }
}