/* ============================================================================
 * common/widget/07-img-text-b.css — 圖文 B（含 B2 上下顛倒、靜態排列與輪播兩分支）
 * ============================================================================
 *   載入序：07 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L1252~1336 切出；phase 2 已完成本模組整理
 *
 *   [跨模組依賴已解除] 原散落他處的兩組規則已於 phase 2 收攏至本檔：
 *     - .imgTextB-static-*（靜態排列，資料 ≤4 筆時使用）原位於 15-one-image.css 尾段
 *     - .imgTextB-cell（輪播項外殼，#706 取代 .col-12）原位於 19-layout-hooks.css
 *   兩者在 08~18 各檔皆無同選擇器規則，提前載入不改變任何生效值（已實測）。
 *
 *   [容器寬度] 圖文 B 的 blade 外殼為 .container.container-flush，寬度本就跟隨站台
 *   .container 標準階梯（1170／1320），phase 2 無需另行收斂。
 *
 *   [斷點] 靜態排列原用 1000／600 兩個刻度外斷點，已收斂為標準刻度 992／576。
 *
 *   兩個輸出分支（見 widgets.blade.php）：
 *     資料 ≤4 筆 → .imgTextB-static-wrapper 靜態置中排列
 *     資料 >4 筆 → .owl-carousel-imgTextB 輪播，每項外殼為 .imgTextB-cell
 *
 *   [好覆蓋] issue #694：.imgTextB-Box .imgTextB-BoxTitle（0,2,0）降為 .imgTextB-BoxTitle（0,1,0）。
 *   祖先為冗餘範圍限定——實測該 class 的元素 100%% 位於 .imgTextB-Box 內（14/14），
 *   移除祖先不改變匹配集。B2 變體規則 .imgTextB2-Box .imgTextB-BoxTitle（0,2,0）仍在後方，
 *   維持勝出；其子代規則（.triangle-down / .imgTextB-Title）目標為通用 class，保留範圍限定。
 *
 *   [好覆蓋，issue #874] 本模組所有可調值（區塊內距、卡片間距、標題膠囊的底色／內距／
 *   圓角／間距、三角形尺寸與色、標題字體與左右間距、靜態排列每列張數）已改由
 *   .widget-imgTextB（0,1,0）上的自訂屬性承載。
 *   .triangle-down 與 .imgTextB-Title 的規則刻意保留祖先範圍限定（前者是通用形狀 class、
 *   後者的 B2 變體需靠祖先分流），改以變數承載後主題仍可用單一 class 接管。
 *   每列張數的 RWD 差異改為在 @media 內覆寫 --imgTextB-static-col：主題覆寫該變數
 *   即勝出所有寬度（宣告不在 @media 內、同特異性且載入序在後）。
 * ==========================================================================*/

/* 圖+文B通用 */

.widget-imgTextB {
    --imgTextB-pad: 20px 0; /* 區塊上下內距 */
    --imgTextB-gap: 16px; /* 卡片下外距 */
    --imgTextB-title-bg: #ffffff; /* 標題膠囊底色 */
    --imgTextB-title-pad: 10px 20px; /* 標題膠囊內距 */
    --imgTextB-title-radius: 99rem; /* 標題膠囊圓角 */
    --imgTextB-title-gap: 20px; /* 標題膠囊下外距 */
    --imgTextB2-title-gap: 20px; /* B2（上下顛倒）標題膠囊上外距 */
    --imgTextB-triangle-size: 6px; /* 三角形半寬 */
    --imgTextB-triangle-height: 10px; /* 三角形高 */
    --imgTextB-triangle-color: #202020; /* 三角形顏色 */
    --imgTextB-title-family: HGPMinchoE; /* 標題字體 */
    --imgTextB-title-inline-gap: 10px; /* 標題左右間距 */
    --imgTextB-static-col: 20%; /* 靜態排列每張寬度（桌機一列五張） */
    --imgTextB-static-gutter: 5px; /* 靜態排列左右間隙 */
}

.imgTextB-Box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: var(--imgTextB-gap, 16px);
}

.imgTextB-BoxTitle {
    width: -moz-fit-content;
    width: fit-content;
    background: var(--imgTextB-title-bg, #ffffff);
    padding: var(--imgTextB-title-pad, 10px 20px);
    border-radius: var(--imgTextB-title-radius, 99rem);
    margin-bottom: var(--imgTextB-title-gap, 20px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgTextB-Box .imgTextB-BoxTitle .triangle-down {
    width: 0;
    height: 0;
    border-left: var(--imgTextB-triangle-size, 6px) solid transparent;
    border-right: var(--imgTextB-triangle-size, 6px) solid transparent;
    border-top: var(--imgTextB-triangle-height, 10px) solid var(--imgTextB-triangle-color, #202020);
}

/* phase 2 清理：移除註解狀態的廢棄宣告 font-size: 16px / color: #252525
   （字級與顏色實際由 common/base.css 承接，啟用會改變現況視覺） */
/* [好覆蓋 #874] 原 .imgTextB-Box .imgTextB-BoxTitle .imgTextB-Title（0,3,0）降為單一 class：主題寫同名選擇器即可靠載入序接管 */
.imgTextB-Title {
    font-family: var(--imgTextB-title-family, HGPMinchoE);
    font-display: swap;
    margin-bottom: 0px;
    margin-left: var(--imgTextB-title-inline-gap, 10px);
    margin-right: var(--imgTextB-title-inline-gap, 10px);
}

.imgTextB-imgBox {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.imgTextB-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.widget-imgTextB {
    padding: var(--imgTextB-pad, 20px 0);
    position: relative;
}

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

/* 圖+文B2 上下顛倒 */

.imgTextB2-Box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
}

.imgTextB2-Box .imgTextB-BoxTitle {
    margin-top: var(--imgTextB2-title-gap, 20px);
}

.imgTextB2-Box .imgTextB-BoxTitle .triangle-down {
    transform: rotate(180deg);
}


/* ----------------------------------------------------------------------------
 * 靜態排列（資料 ≤4 筆時使用；phase 2 自 15-one-image.css 收攏至此）
 *
 * 每列張數：≥992 五張 → 576~991 三張 → 未達 576 兩張。
 * phase 2 斷點收斂：原為 1000／600 兩個刻度外斷點，改為標準刻度 992／576，
 * 故 576~600 由兩張改為三張、992~1000 由三張改為五張，其餘寬度不變。
 * -------------------------------------------------------------------------- */

.imgTextB-static-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* 抵銷 item 的左右 padding */
    margin: 0 calc(-1 * var(--imgTextB-static-gutter, 5px));
}

.imgTextB-static-item {
    /* 桌機一列五張 */
    width: var(--imgTextB-static-col, 20%);
    /* 模擬 margin 10px（左右各 5） */
    padding: 0 var(--imgTextB-static-gutter, 5px);
    box-sizing: border-box;
}

/* 每列張數改為覆寫 .widget-imgTextB 上的 --imgTextB-static-col（見檔頭 [好覆蓋]） */
@media (max-width: 991.98px) {
    .widget-imgTextB {
        /* 平板一列三張 */
        --imgTextB-static-col: 33.333%;
    }
}

@media (max-width: 575.98px) {
    .widget-imgTextB {
        /* 手機一列兩張 */
        --imgTextB-static-col: 50%;
    }
}


/* ----------------------------------------------------------------------------
 * 輪播項外殼（資料 >4 筆時使用；phase 2 自 19-layout-hooks.css 收攏至此）
 *
 * 骨架語意化（issue #706）：取代 blade 移除的 .col-12。單獨使用的 col-12 僅供寬度，
 * 無 .row 父層即無 gutter padding，故不補 padding。
 * -------------------------------------------------------------------------- */

.imgTextB-cell {
    width: 100%;
}