/* ============================================================================
 * common/widget/14-product-c.css — 商品 widget C
 * ============================================================================
 *   載入序：14 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L2404~2534 切出；phase 2 已完成本模組整理
 *
 *   [跨模組依賴已解除] 原位於 19-layout-hooks.css 的 productC 圖文列規則（#706 取代 blade
 *   移除的 .row + col-lg-5／col-lg-7 + col-12 + mb-3 + flex-row-reverse，共 5 條）已併入
 *   本檔；15~18 各檔皆無 productC 選擇器，提前載入不改變生效值（已實測）。
 *
 *   [容器寬度] 版面容器為 blade 的 .container.container-800，寬度已於 phase 2 第一組
 *   統一為 03-container.css 的 --cms-container-narrow，本檔不另行限制寬度。
 *
 *   [斷點] 原用 992／768 兩個整數 max-width，內距值完全相同（16px 0），
 *   ≤768 整段移除、≤992 改為 991.98。
 *
 *   [已知冗餘，未動] .productC-ImgBox 同時給 height: 300px 與 aspect-ratio: 1/1，
 *   兩軸都已確定時 aspect-ratio 不生效；但主題（dgfactor／shopLinerp）可能改寫 height
 *   讓比例接手，故保留。issue #874 起兩者皆為變數，主題把 --productC-img-h 設為 auto
 *   即可讓 --productC-img-ratio 接手，不必再覆寫整條規則。
 *
 *   [好覆蓋] issue #694：.productC-ImgBox .productC-Cover → .productC-Cover、
 *   .productC-TextBox .productC-desc → .productC-desc（皆 0,2,0 → 0,1,0）。
 *   .productC-Row 系列（.productC-Row--reverse 變體）維持原樣：祖先承載「反轉欄序」
 *   的變體語意，移除會讓正向與反向共用同一組值。
 *   （原併列的 .flex-row-reverse 變體專供 Volvo legacy markup，已隨 issue #962 全數刪除）
 *
 *   [好覆蓋，issue #874] 本模組所有可調值改由 .productC（0,1,0）上的自訂屬性承載：
 *   區塊內距／≥992 圖文兩欄的欄寬／欄下外距／圖框高度比例底色／圖片填滿方式與轉場／
 *   文字盒內距底色／標題與內文的配色字級行高與裁切行數／價格字級與外距。
 *   欄間距沿用 Bootstrap 的 --bs-gutter-x（本就是自訂屬性），維持與 legacy markup 等價。
 * ==========================================================================*/

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

.productC {
    --productC-pad: 30px 0; /* 區塊上下內距 */
    --productC-col-img: 41.666667%; /* ≥992 圖片欄寬 */
    --productC-col-text: 58.333333%; /* ≥992 文字欄寬 */
    --productC-cell-gap: 1rem; /* 欄下外距（取代 mb-3） */
    --productC-img-h: 300px; /* 圖框高度 */
    --productC-img-ratio: 1/1; /* 圖框長寬比（高度設 auto 時才接手） */
    --productC-img-bg: #ebebeb; /* 圖框底色 */
    --productC-cover-fit: contain; /* 圖片填滿方式 */
    --productC-cover-transition: 0.2s ease-in-out; /* 圖片轉場 */
    --productC-textbox-pad: 25px 22px; /* 文字盒內距 */
    --productC-textbox-bg: #ebebeb; /* 文字盒底色 */
    --productC-text-color: #333333; /* 文字色 */
    --productC-title-gap: 4px; /* 標題下外距 */
    --productC-title-clamp: 2; /* 標題最多顯示行數 */
    --productC-text-font: 16px; /* 內文字級 */
    --productC-text-lh: 28px; /* 內文行高 */
    --productC-text-clamp: 5; /* 內文最多顯示行數 */
    --productC-price-font: 18px; /* 價格字級 */
    --productC-price-lh: 28px; /* 價格行高 */
    --productC-price-margin: 8px 0; /* 價格外距 */
    padding: var(--productC-pad, 30px 0);
    position: relative;
}

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

    .productC {
        --productC-pad: 16px 0;
    }
}

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

/* 圖文列格線：取代 blade 移除的 .row + col-lg-5／col-lg-7 + col-12 + mb-3 + flex-row-reverse
   （issue #706；phase 2 自 19-layout-hooks.css 收攏，原本的 position/z-index 亦併入本規則）
   --bs-gutter-x 與 .productC-cell 的 margin-bottom 沿用 BS 的 rem 寫法。原因是當時需與
   Volvo legacy markup 的 .row／col-*／mb-3 utility 同值才等價，該分支已於 issue #962 移除，
   此處僅保留現值不動（改寫為 px 屬獨立的數值調整，需另行驗證各主題）。
   專案 root 為 62.5%（1rem = 10px），故實際為 gutter 15px、下外距 10px；≥992 另由
   common/base.css 的 .container .productC-Row 將 gutter 覆寫為 30px。 */
.productC-Row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    position: relative;
    z-index: 1;
}

.productC-Row--reverse {
    flex-direction: row-reverse;
}

.productC-cell {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    /* 取代 mb-3 utility */
    margin-bottom: var(--productC-cell-gap, 1rem);
}

@media (min-width: 992px) {
    .productC-cell--img {
        flex: 0 0 auto;
        width: var(--productC-col-img, 41.666667%);
    }

    .productC-cell--text {
        flex: 0 0 auto;
        width: var(--productC-col-text, 58.333333%);
    }
}


.productC-ImgBox {
    width: 100%;
    height: var(--productC-img-h, 300px);
    aspect-ratio: var(--productC-img-ratio, 1/1);
    overflow: hidden;
    background: var(--productC-img-bg, #ebebeb);
}

.productC-Cover {
    width: 100%;
    height: 100%;
    -o-object-fit: var(--productC-cover-fit, contain);
    object-fit: var(--productC-cover-fit, contain);
    transition: var(--productC-cover-transition, 0.2s ease-in-out);
}

.productC-TextBox {
    width: 100%;
    height: 100%;
    padding: var(--productC-textbox-pad, 25px 22px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    background: var(--productC-textbox-bg, #ebebeb);
}


/* [好覆蓋 #874] 原 .productC-Row .productC-TextBox（0,2,0）降為單一 class：主題寫同名選擇器即可靠載入序接管 */
.productC-TextBox {
    align-self: start;
}

/* issue #706：選擇器同步——blade 反轉列已改 .productC-Row--reverse。原併列的
   .flex-row-reverse hook 專供 Volvo legacy markup，已隨 issue #962 移除該分支一併刪除。
   移除時一併遷移 resources/views/web/develop/widget.blade.php（APP_ENV=local 的 /widget
   預覽頁）的反轉範例——該頁未隨 #706 遷移、仍輸出舊 class，是 grep 全 views 才發現的
   唯一殘留輸出點；複合寫法維持原特異性 */
.productC-Row.productC-Row--reverse .productC-TextBox {
    align-items: end;
}



/* 註：.title 與 .text 原本都同時宣告 width: fit-content 與 width: 100%，
   後者恆勝出，已刪除前者 */
.productC-TextBox .title {
    margin-bottom: var(--productC-title-gap, 4px);
    color: var(--productC-text-color, #333333);
    font-weight: 700;
    width: 100%;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--productC-title-clamp, 2);
    overflow: hidden;
}

.productC-Row .productC-TextBox .title {
    text-align: left;
}

.productC-Row.productC-Row--reverse .title {
    text-align: right;
}

.productC-Row.productC-Row--reverse .text {
    text-align: right;
}

.productC-TextBox .text {
    font-size: var(--productC-text-font, 16px);
    line-height: var(--productC-text-lh, 28px);
    color: var(--productC-text-color, #333333);
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--productC-text-clamp, 5);
    overflow: hidden;
    width: 100%;
}

.productC-TextBox .price {
    font-size: var(--productC-price-font, 18px);
    line-height: var(--productC-price-lh, 28px);
    color: var(--productC-text-color, #333333);
    width: fit-content;
    font-weight: 800;
    margin: var(--productC-price-margin, 8px 0);
}

/* 取代 blade 移除的 mb-0 utility（issue #706；phase 2 自 19-layout-hooks.css 收攏） */
.productC-desc {
    margin-bottom: 0;
}