/* ============================================================================
 * common/widget/06-img-text-a.css — 圖文 A（含 A1~A4 變體與手機統一修正）
 * ============================================================================
 *   載入序：06 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L875~1251 切出；phase 2 已完成本模組整理
 *
 *   [跨模組依賴已解除] 原有三條 imgTextA 規則（按鈕列置中、按鈕內部 flex、內文下外距）
 *   位於 19-layout-hooks.css，靠「載入序在後」才能勝過本檔的等價宣告。phase 2 已將三者
 *   直接併入本檔對應規則（以下皆標註「#706 併入」），19-layout-hooks.css 不再含 imgTextA
 *   規則，本模組與 19 之間無順序相依。
 *
 *   [容器寬度] blade 以 .widget-shell-flush 讓圖文 A **滿版**（無寬度上限），此為預設與既有
 *   資料的行為。phase 2 曾把標準容器階梯（--cms-container-* token）無條件套上，導致既有站台
 *   由滿版變成置中窄框；現改為後台每則 widget 自選（widgets.width_mode），僅「寬版」
 *   （.widget-imgTextA--wide）才套階梯。未達 992 兩種模式皆滿版（輪播在窄螢幕滿版較合理）。
 *
 *   [斷點] 四處 max-width: 768px 已改為 767.98px，消除與 min-width: 768 的 1px 重疊。
 *
 *   [好覆蓋] issue #694：三條基底規則的祖先 .imgTextA-Box 移除，降為單一 class——
 *   .imgTextA-ImgBox / .imgTextA-TextBox / .imgTextA-BtnBox（0,2,0 → 0,1,0，含 ≤767.98
 *   的 TextBox／BtnBox 共 5 條）。實測三者的元素 100% 位於 .imgTextA-Box 內（6/6、8/8、4/4），
 *   移除祖先不改變匹配集。
 *   A1~A4 變體規則（.imgTextAN-Box .imgTextA-*，0,2,0，共 25 條）**刻意維持原樣**：
 *   變體元素同時帶 .imgTextA-Box 與 .imgTextAN-Box（實測 class 為「imgTextA-Box imgTextA1-Box」），
 *   基底降權後變體仍以較高特異性勝出，「基底低、變體高」正是期望的層級結構。
 *
 *   [好覆蓋，issue #874] 本模組所有可調值改由 .widget-imgTextA（0,1,0）上的自訂屬性承載：
 *   區塊內距／容器寬度階梯／卡片底色與比例／文字盒與按鈕列內距／標題與內文的字級行高
 *   顏色間距／按鈕配色內距字級（含 hover）／A1~A4 的圓角與 clip-path／變體上下留白。
 *   祖先範圍限定刻意保留：.title／.text／.btnA 都是通用 class（.item 內與其他 widget 共用），
 *   去掉 .imgTextA-Box 會誤傷；改以變數承載後，主題寫
 *   .widget-imgTextA { --imgTextA-title-font: 30px } 即可接管，毋須複製 0,3,0 長選擇器。
 *
 *   RWD 差異一律改為在 @media 內覆寫 .widget-imgTextA 上的變數，主題宣告不在 @media 內、
 *   同特異性且載入序在後，覆寫後所有寬度都勝出。變體的手機留白（原 A1~A4 四條
 *   padding-top: 25px 與四條 padding-bottom: 25px、四條 is-no-btn padding-bottom: 25px）
 *   改由 --imgTextA-variant-pad-top／-bottom 承接後已無存在必要，一併移除（生效值不變）；
 *   手機強制按鈕 fit-content 那組屬結構性重置（A2／A3 桌機為 width: 100%），維持原樣。
 * ==========================================================================*/

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

/* 圖文widget */

.widget-imgTextA {
    --imgTextA-pad: 20px 0; /* 區塊上下內距 */
    --imgTextA-container-md: var(--cms-container-md); /* ≥992 容器寬 */
    --imgTextA-container-lg: var(--cms-container-lg); /* ≥1200 容器寬 */
    --imgTextA-container-xl: var(--cms-container-xl); /* ≥1400 容器寬 */
    --imgTextA-box-bg: rgb(235, 235, 235); /* 卡片底色 */
    --imgTextA-box-ratio: 1/1; /* 卡片長寬比 */
    --imgTextA-text-pad: 80px 50px 10px 50px; /* 文字盒內距 */
    --imgTextA-btn-pad: 10px 50px 50px 50px; /* 按鈕列內距 */
    --imgTextA-title-font: 24px; /* 標題字級 */
    --imgTextA-title-color: #000000; /* 標題文字色 */
    --imgTextA-title-pad: 8px 20px; /* 標題內距 */
    --imgTextA-title-radius: 99rem; /* 標題圓角 */
    --imgTextA-title-family: HGPMinchoE; /* 標題字體 */
    --imgTextA-title-gap: 20px; /* 標題下外距 */
    --imgTextA-text-font: 16px; /* 內文字級 */
    --imgTextA-text-lh: 32px; /* 內文行高 */
    --imgTextA-text-color: #333333; /* 內文顏色 */
    --imgTextA-text-gap: 1.5rem; /* 內文下外距 */
    --imgTextA-text-max: 14em; /* 變體內文最大行寬 */
    --imgTextA-text-clamp: 4; /* 內文最多顯示行數 */
    --imgTextA-variant-text-lh: 1.5; /* 變體內文行高 */
    --imgTextA-variant-pad-top: 65px; /* 變體文字盒上留白 */
    --imgTextA-variant-pad-bottom: 65px; /* 變體按鈕列下留白 */
    --imgTextA-btn-bg: #ffffff; /* 按鈕底色 */
    --imgTextA-btn-border: 1px solid #303030; /* 按鈕外框 */
    --imgTextA-btn-color: #5a5a5a; /* 按鈕文字色 */
    --imgTextA-btn-inner-pad: 10px 20px; /* 按鈕內距 */
    --imgTextA-btn-font: 14px; /* 按鈕字級 */
    --imgTextA-btn-bg-hover: #303030; /* 按鈕 hover 底色 */
    --imgTextA-btn-border-hover: 1px solid #ffffff; /* 按鈕 hover 外框 */
    --imgTextA-btn-color-hover: #fefefe; /* 按鈕 hover 文字色 */
    --imgTextA-btn2-color: #5a5a5a; /* 次要按鈕文字色 */
    --imgTextA-btn2-pad: 10px 20px; /* 次要按鈕內距 */
    --imgTextA-btn2-font: 16px; /* 次要按鈕字級 */
    --imgTextA-btn2-bg-hover: #303030; /* 次要按鈕 hover 底色 */
    --imgTextA-btn2-color-hover: #fefefe; /* 次要按鈕 hover 文字色 */
    --imgTextA1-radius: 99rem; /* A1 卡片圓角 */
    --imgTextA1-btn-radius: 99rem; /* A1 按鈕圓角 */
    --imgTextA2-radius: 20px; /* A2 卡片圓角 */
    --imgTextA2-btn-radius: 0rem; /* A2 按鈕圓角 */
    --imgTextA3-clip: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%); /* A3 切角外形 */
    --imgTextA3-btn-radius: 0rem; /* A3 按鈕圓角 */
    --imgTextA4-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* A4 六角外形 */
    --imgTextA4-btn-radius: 99rem; /* A4 按鈕圓角 */
    --imgTextA4-title-gap: 5px; /* A4 標題下外距 */
    padding: var(--imgTextA-pad, 20px 0);
    position: relative;
}

/* RWD：改為覆寫上方變數（見檔頭 [好覆蓋]） */
@media (max-width: 767.98px) {
    .widget-imgTextA {
        --imgTextA-text-pad: 30px 20px 20px;
        --imgTextA-btn-pad: 5px 20px 10px;
        --imgTextA-title-font: 16px;
        --imgTextA-title-gap: 2px;
        --imgTextA-text-font: 12px;
        --imgTextA-text-lh: 1.4;
        --imgTextA-btn-font: 12px;
        --imgTextA-btn-inner-pad: 5px 15px;
        --imgTextA-variant-pad-top: 25px;
        --imgTextA-variant-pad-bottom: 25px;
    }
}

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

/* 容器寬度（issue #694）：blade 的 .widget-shell-flush 本身無寬度上限＝滿版，為預設與既有資料
   （widgets.width_mode 為 null）的行為，即 phase 2 之前的原始樣式。
   phase 2 曾將容器階梯無條件套用於所有圖文 A，使既有站台由滿版變為置中窄框；現改為後台每則
   widget 自選，僅在選了「寬版」（blade 輸出 .widget-imgTextA--wide）時才套用階梯，與 banner／
   product 等其他 widget 對齊左右邊界。背景圖（.widget-imgTextA-bgImg）不受限，兩種模式皆滿版。
   註：原有一組 Volvo（webCss=4）例外——該版型輸出 .container-fluid.p-0 而非 .widget-shell-flush，
   本組規則對其不匹配。該分支已於 issue #962 移除，現全部主題一致走本組規則。 */
.widget-imgTextA--wide .widget-shell-flush {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .widget-imgTextA--wide .widget-shell-flush {
        max-width: var(--imgTextA-container-md, var(--cms-container-md));
    }
}

@media (min-width: 1200px) {
    .widget-imgTextA--wide .widget-shell-flush {
        max-width: var(--imgTextA-container-lg, var(--cms-container-lg));
    }
}

@media (min-width: 1400px) {
    .widget-imgTextA--wide .widget-shell-flush {
        max-width: var(--imgTextA-container-xl, var(--cms-container-xl));
    }
}



/* 圖+文A通用 */

.imgTextA-Box {
    width: 100%;
    height: 100%;
    background: var(--imgTextA-box-bg, rgb(235, 235, 235));
    aspect-ratio: var(--imgTextA-box-ratio, 1/1);
}

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

.imgTextA-Box .imgTextA-ImgBox .imgTextA-Img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imgTextA-TextBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: var(--imgTextA-text-pad, 80px 50px 10px 50px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.imgTextA-BtnBox {
    width: 100%;
    height: fit-content;
    overflow: hidden;
    padding: var(--imgTextA-btn-pad, 10px 50px 50px 50px);
    position: relative;
    display: flex;
    flex-direction: column;
    /* #706 併入：原為 start，由 19-layout-hooks.css 後載入覆寫為 center
       （取代 blade 移除的 d-flex justify-content-center utility），此處直接採最終值 */
    justify-content: center;
    align-items: center;
}

.imgTextA-Box .imgTextA-BtnBox .btnA {
    width: fit-content;
    background-color: var(--imgTextA-btn-bg, #ffffff);
    border: var(--imgTextA-btn-border, 1px solid #303030);
    color: var(--imgTextA-btn-color, #5a5a5a);
    padding: var(--imgTextA-btn-inner-pad, 10px 20px);
    text-align: center;
    text-decoration: none;
    /* #706 併入：原為 inline-block，由 19-layout-hooks.css 後載入覆寫為 flex 並補
       justify-content／align-items（取代 blade 移除的 d-flex 系 utility），此處直接採最終值 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--imgTextA-btn-font, 14px);
    margin: 4px auto;
    cursor: pointer;
    height: fit-content;
}

.imgTextA-Box .imgTextA-BtnBox .btnA:hover {
    background-color: var(--imgTextA-btn-bg-hover, #303030);
    border: var(--imgTextA-btn-border-hover, 1px solid #ffffff);
    color: var(--imgTextA-btn-color-hover, #fefefe);
}

.btnA2 {
    width: fit-content;
    color: var(--imgTextA-btn2-color, #5a5a5a);
    padding: var(--imgTextA-btn2-pad, 10px 20px);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--imgTextA-btn2-font, 16px);
    margin: 4px auto;
    cursor: pointer;
    height: fit-content;
}

.btnA2:hover {
    background-color: var(--imgTextA-btn2-bg-hover, #303030);
    color: var(--imgTextA-btn2-color-hover, #fefefe);
}



.imgTextA-Box .imgTextA-TextBox .title {
    font-size: var(--imgTextA-title-font, 24px);
    color: var(--imgTextA-title-color, #000000);
    width: fit-content;
    padding: var(--imgTextA-title-pad, 8px 20px);
    border-radius: var(--imgTextA-title-radius, 99rem);
    font-family: var(--imgTextA-title-family, HGPMinchoE);
    font-display: swap;
    margin-bottom: var(--imgTextA-title-gap, 20px);
    font-weight: 700;
}

.imgTextA-Box .imgTextA-TextBox .text {
    font-size: var(--imgTextA-text-font, 16px);
    line-height: var(--imgTextA-text-lh, 32px);
    color: var(--imgTextA-text-color, #333333);
    /* #706 併入：原位於 19-layout-hooks.css，取代 blade 移除的 mb-4 utility
       （Bootstrap 值 1.5rem 生效，非專案 .mb-4 的 4px）。各變體規則未覆寫本屬性 */
    margin-bottom: var(--imgTextA-text-gap, 1.5rem);
}

/* 手機：字級與行高已改由變數承接，本區塊只留桌機沒有的行數裁切宣告 */
@media (max-width: 767.98px) {
    .imgTextA-Box .imgTextA-TextBox .text {
        display: -webkit-box;
        -webkit-line-clamp: var(--imgTextA-text-clamp, 4);
        line-clamp: var(--imgTextA-text-clamp, 4);
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* 圖+文A-1 */

.imgTextA1-Box {
    border-radius: var(--imgTextA1-radius, 99rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imgTextA1-Box .imgTextA-ImgBox {
    border-radius: var(--imgTextA1-radius, 99rem);
}

.imgTextA1-Box .imgTextA-TextBox {
    height: fit-content;
    padding-top: var(--imgTextA-variant-pad-top, 65px);
    padding-bottom: 0px;
}

.imgTextA1-Box .imgTextA-BtnBox {
    height: fit-content;
    padding-bottom: var(--imgTextA-variant-pad-bottom, 65px);
    padding-top: 0px;
}

.imgTextA1-Box .imgTextA-BtnBox .btnA {
    border-radius: var(--imgTextA1-btn-radius, 99rem);
}

.imgTextA1-Box .imgTextA-TextBox .text {
    max-inline-size: var(--imgTextA-text-max, 14em);
    display: -webkit-box;
    -webkit-line-clamp: var(--imgTextA-text-clamp, 4);
    line-clamp: var(--imgTextA-text-clamp, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--imgTextA-variant-text-lh, 1.5);
}

/* 圖+文A-2 */


.imgTextA2-Box {
    border-radius: var(--imgTextA2-radius, 20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imgTextA2-Box .imgTextA-ImgBox {
    border-radius: var(--imgTextA2-radius, 20px);
}

.imgTextA2-Box .imgTextA-TextBox {
    height: fit-content;
    padding-top: var(--imgTextA-variant-pad-top, 65px);
    padding-bottom: 0px;
}

.imgTextA2-Box .imgTextA-BtnBox {
    height: fit-content;
    padding-bottom: var(--imgTextA-variant-pad-bottom, 65px);
    padding-top: 0px;
}

.imgTextA2-Box .imgTextA-BtnBox .btnA {
    border-radius: var(--imgTextA2-btn-radius, 0rem);
    width: 100%;
}

.imgTextA2-Box .imgTextA-TextBox .text {
    max-inline-size: var(--imgTextA-text-max, 14em);
    display: -webkit-box;
    -webkit-line-clamp: var(--imgTextA-text-clamp, 4);
    line-clamp: var(--imgTextA-text-clamp, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--imgTextA-variant-text-lh, 1.5);
}

/* 圖+文A-3 */


.imgTextA3-Box {
    clip-path: var(--imgTextA3-clip, polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imgTextA3-Box .imgTextA-ImgBox {
    clip-path: var(--imgTextA3-clip, polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%));
}

.imgTextA3-Box .imgTextA-TextBox {
    height: fit-content;
    padding-top: var(--imgTextA-variant-pad-top, 65px);
    padding-bottom: 0px;
}

.imgTextA3-Box .imgTextA-BtnBox {
    height: fit-content;
    padding-bottom: var(--imgTextA-variant-pad-bottom, 65px);
    padding-top: 0px;
}

.imgTextA3-Box .imgTextA-BtnBox .btnA {
    border-radius: var(--imgTextA3-btn-radius, 0rem);
    width: 100%;
}

.imgTextA3-Box .imgTextA-TextBox .text {
    max-inline-size: var(--imgTextA-text-max, 14em);
    display: -webkit-box;
    -webkit-line-clamp: var(--imgTextA-text-clamp, 4);
    line-clamp: var(--imgTextA-text-clamp, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--imgTextA-variant-text-lh, 1.5);
}

/* 圖+文A-4 */


.imgTextA4-Box {
    clip-path: var(--imgTextA4-clip, polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imgTextA4-Box .imgTextA-ImgBox {
    clip-path: var(--imgTextA4-clip, polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%));
}

.imgTextA4-Box .imgTextA-TextBox {
    height: fit-content;
    padding-top: var(--imgTextA-variant-pad-top, 65px);
    padding-bottom: 0px;
}

.imgTextA4-Box .imgTextA-TextBox .title {
    margin-bottom: var(--imgTextA4-title-gap, 5px);
}

.imgTextA4-Box .imgTextA-TextBox .text {
    max-inline-size: var(--imgTextA-text-max, 14em);
    display: -webkit-box;
    -webkit-line-clamp: var(--imgTextA-text-clamp, 4);
    line-clamp: var(--imgTextA-text-clamp, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--imgTextA-variant-text-lh, 1.5);
}

.imgTextA4-Box .imgTextA-BtnBox {
    height: fit-content;
    padding-bottom: var(--imgTextA-variant-pad-bottom, 65px);
    padding-top: 0px;
}

.imgTextA4-Box .imgTextA-BtnBox .btnA {
    border-radius: var(--imgTextA4-btn-radius, 99rem);
}

/* 圖文A 無按鈕時補齊底部留白，避免文字區塊下沉 */
.imgTextA1-Box .imgTextA-TextBox.is-no-btn,
.imgTextA2-Box .imgTextA-TextBox.is-no-btn,
.imgTextA3-Box .imgTextA-TextBox.is-no-btn,
.imgTextA4-Box .imgTextA-TextBox.is-no-btn {
    padding-bottom: var(--imgTextA-variant-pad-bottom, 65px);
}

/* 圖文A 手機版統一樣式修正 - 確保所有變體 A1-A4 在手機上都能顯示四行且不跑版
   上下留白已改由 --imgTextA-variant-pad-top／-bottom 承接，本區塊只留結構性重置：
   A2／A3 桌機把按鈕拉成 width: 100%，手機需強制回 fit-content */
@media (max-width: 767.98px) {

    .imgTextA1-Box .imgTextA-BtnBox .btnA,
    .imgTextA2-Box .imgTextA-BtnBox .btnA,
    .imgTextA3-Box .imgTextA-BtnBox .btnA,
    .imgTextA4-Box .imgTextA-BtnBox .btnA {
        width: fit-content;
    }
}