/* ============================================================================
 * common/widget/08-img-text-c.css — 圖文 C（1:1 與 16:9 兩種比例）
 * ============================================================================
 *   載入序：08 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L1337~1471 切出；phase 2 已完成本模組整理
 *
 *   [跨模組依賴已解除] 原位於 19-layout-hooks.css 的 imgTextC 兩欄格線與文字盒／按鈕
 *   規則（共 6 條，#706 取代 blade 移除的 .row + col-lg-* + d-flex 系 utility）已併入本檔；
 *   09~18 各檔皆無 imgTextC 選擇器，提前載入不改變生效值（已實測）。
 *
 *   [容器寬度統一] 原本 blade 以 .widget-shell-fluid 讓圖文 C **滿版**，再以
 *   .imgTextC-padding 的 0 100px／1.5rem 兩段內距內縮。phase 2 起改為與其他 widget 相同
 *   的標準容器階梯（--cms-container-*），內距統一為單一數值，避免雙重內縮。
 *
 *   [斷點] 原用 1440／740 兩個刻度外斷點，已收斂為標準刻度 1400／768。
 *
 *   [rem 注意] 專案 root font-size 被 vendor textanimate 設為 62.5%，1rem = 10px。
 *   原 padding: 1.5rem 實際等於 15px；本檔已改寫為 px，避免受 root 字級變動影響。
 *
 *   [好覆蓋] issue #694：.imgTextC-textBox 的三條子代規則降為單一 class——
 *   .imgTextC-Title / .imgTextC-Content / .imgTextC-BtnBox（0,2,0 → 0,1,0）。
 *   三者皆為 imgTextC 專有 class，實測匹配集與帶祖先時相同。
 *   .imgTextC-BtnBox .btnC 維持不動：.btnC 是跨 widget 共用的按鈕 class，需要範圍限定。
 * ==========================================================================*/

/* 圖+文c通用 */

.widget-imgTextC {
    position: relative;
    padding: 20px 0;
}

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

/* 容器寬度統一（issue #694 phase 2）：blade 的 .widget-shell-fluid 本身無寬度上限，
   於圖文 C 情境下改套用標準容器階梯，與其他 widget 對齊左右邊界。
   背景圖（.widget-imgTextC-bgImg）不受限，維持滿版。 */
.widget-imgTextC .widget-shell-fluid {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .widget-imgTextC .widget-shell-fluid {
        max-width: var(--cms-container-md);
    }
}

@media (min-width: 1200px) {
    .widget-imgTextC .widget-shell-fluid {
        max-width: var(--cms-container-lg);
    }
}

@media (min-width: 1400px) {
    .widget-imgTextC .widget-shell-fluid {
        max-width: var(--cms-container-xl);
    }
}

/* 內距：原為「>1440 用 0 100px、741~1440 用 1.5rem、≤740 用 15px 0」三段。
   容器寬度已由上方階梯負責外緣內縮，此處只保留單一內距；手機維持左右不留白。 */
.imgTextC-padding {
    padding: 15px;
}

@media (max-width: 767.98px) {
    .imgTextC-padding {
        padding: 15px 0;
    }
}

/* 圖片盒：原有 width: 650px 與 ≤1440 改 100% 兩段。650px 在任何視口下都大於實際欄寬，
   恆被 flex 收縮至欄寬，與 100% 等價，故統一為 100%（已於 20 個視口實測確認）。 */
.imgTextC-imgBox {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
}

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

/* phase 2 清理：移除註解狀態的廢棄宣告 max-width: 80% / 70% / 85%
   （現行為 max-width: 100%，啟用註解值會改變現況版面） */
.imgTextC-textBox {
    max-width: 100%;
}

@media (max-width: 1399.98px) {
    .imgTextC-textBox {
        padding: 30px 0;
    }
}

@media (max-width: 767.98px) {
    .imgTextC-textBox {
        padding: 30px 15px;
    }
}

/* phase 2 清理：移除註解狀態的廢棄宣告 font-size: 24px（字級由 common/base.css 承接） */
.imgTextC-Title {
    color: #333333;
    padding: 10px;
}

/* phase 2 清理：移除註解狀態的廢棄宣告 font-size: 14px / line-height: 28px */
.imgTextC-Content {
    color: #333333;
    margin-bottom: 30px;
}

.imgTextC-textBox .imgTextC-BtnBox .btnC {
    width: fit-content;
    background-color: #ffffff;
    border: 1px solid #303030;
    color: #5a5a5a;
    padding: 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: 14px;
    margin: 4px auto;
    cursor: pointer;
    height: fit-content;
}

.imgTextC-textBox .imgTextC-BtnBox .btnC:hover {
    background-color: #303030;
    border: 1px solid #303030;
    color: #FFFFFF;
}

/* 圖+文c3、4（16:9 比例）
   註：原有 ≤1440 的重複宣告（width/height/aspect-ratio 與基礎值相同）已移除。 */

.imgTextC3-imgBox,
.imgTextC4-imgBox {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}


/* ----------------------------------------------------------------------------
 * 兩欄格線與文字盒（phase 2 自 19-layout-hooks.css 收攏至此）
 *
 * 骨架語意化（issue #706）：取代 blade 移除的 .row + 動態 col-lg-8/7/5/4 + d-flex 系。
 *   --square（1:1）：文字 8/12、圖片 4/12
 *   --wide（16:9） ：文字 7/12、圖片 5/12
 * -------------------------------------------------------------------------- */

.imgTextC-row {
    /* 鏡射 BS .row 的 gutter 變數機制，讓既有 .container 系 gutter 覆寫（base.css legacy
       30px 規則、主題 container 變數）對本格線持續生效。
       註：受 root 62.5% 影響，1.5rem 實際為 15px */
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    /* 欄寬以自訂屬性承載（issue #874）：手機一律各自滿寬，≥992 依比例修飾類切換。
       主題覆寫這幾個變數（或直接覆寫 .imgTextC-col-text／-img）即可改欄寬配比。 */
    --imgTextC-col-text: 100%;
    --imgTextC-col-img: 100%;
    --imgTextC-col-text-lg: 100%;
    --imgTextC-col-img-lg: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.imgTextC-row--square {
    --imgTextC-col-text-lg: 66.666667%;
    --imgTextC-col-img-lg: 33.333333%;
}

.imgTextC-row--wide {
    --imgTextC-col-text-lg: 58.333333%;
    --imgTextC-col-img-lg: 41.666667%;
}

@media (min-width: 992px) {
    .imgTextC-row {
        --imgTextC-col-text: var(--imgTextC-col-text-lg);
        --imgTextC-col-img: var(--imgTextC-col-img-lg);
    }
}

.imgTextC-col {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
}

/* [好覆蓋，issue #874] 原寫法為 .imgTextC-row--square|--wide > .imgTextC-col-*（0,2,0），
   主題無法以單一 class 覆寫欄寬；改為單一 class ＋ 變數，主題以同名選擇器即可勝出。
   註：原基礎 .imgTextC-col 的 flex-shrink: 0 與 ≥992 的 flex: 0 0 auto 計算結果相同。 */
.imgTextC-col-text {
    width: var(--imgTextC-col-text);
}

.imgTextC-col-img {
    width: var(--imgTextC-col-img);
}

/* 文字盒與按鈕列：取代 blade 移除的 flex-column／d-flex 系 utility */
/* [好覆蓋 #874] 原 .imgTextC-col .imgTextC-textBox（0,2,0）降為單一 class：主題寫同名選擇器即可靠載入序接管 */
.imgTextC-textBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.imgTextC-BtnBox {
    display: flex;
    justify-content: center;
}