/* ============================================================================
 * common/widget/05-text.css — 內文 widget
 * ============================================================================
 *   載入序：05 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L753~874 切出；phase 2 已完成斷點對齊
 *
 *   [斷點] 原用 992／768 各一個整數 max-width，已改為 991.98／767.98。
 *   ≤768 原為 ≤992 的整段複製，只有段落下外距（14px／12px）與圖片外距（10px／5px）
 *   不同，其餘重複宣告已刪除；.widget-text 的 margin 兩段皆與基礎值相同，一併刪除，
 *   圖片的 width／max-width／height 亦與基礎規則同值同 !important，僅留 margin 差異。
 *
 *   [好覆蓋，issue #874] 內文 widget 的可調值（區塊內距與文字色、段落下外距、
 *   內文圖片外距）已改由 .widget-text（0,1,0）上的自訂屬性承載。
 *   .widget-text p（0,1,1）與 .widget-text p img（0,1,2）這類含元素選擇器的規則
 *   刻意不降權——p／img 是通用元素，去掉 .widget-text 範圍限定會波及全站段落與圖片；
 *   改以變數承載後，主題寫 .widget-text { --widget-text-p-gap: 20px } 即可接管。
 *   RWD 差異一律改為在 @media 內覆寫變數：主題宣告不在 @media 內、同特異性且載入序
 *   在後，覆寫後所有寬度都勝出。
 * ==========================================================================*/

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

/* 內文通用 */

.widget-text {
    --widget-text-pad: 30px 0; /* 內文區塊上下內距 */
    --widget-text-color: #000000; /* 區塊文字色 */
    --widget-text-p-color: #333333; /* 段落文字色 */
    --widget-text-p-gap: 16px; /* 段落下外距 */
    --widget-text-img-gap: 16px auto; /* 內文圖片外距 */
    margin: 0px auto;
    padding: var(--widget-text-pad, 30px 0);
    position: relative;
    color: var(--widget-text-color, #000000);
}

.text-break {
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.max35words {
    max-inline-size: 70ch;
}

.max40words {
    max-inline-size: 80ch;
}

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

.widget-text-bg {
    width: 100%;
    height: 100%;
    z-index: 2;
}

.widget-text p {
    margin-bottom: var(--widget-text-p-gap, 16px);
    color: var(--widget-text-p-color, #333333);
}

.widget-text p:last-child {
    margin-bottom: 0px;
}

/* [issue #694 phase 2：!important 經評估後保留]
   本規則的對象是 CKEditor 內文中的圖片，其寬高多半帶 inline style（編輯器縮放會寫
   style="width:XXXpx"）。inline 樣式的優先序高於任何選擇器，**唯有 !important 蓋得掉**，
   拉高特異性無效。此處的設計意圖是「內文圖一律撐滿容器寬、高度自動」，移除 !important
   會讓後台已編好的內容改用編輯器當時的像素寬，屬客戶可見的內容變更，故保留。 */
.widget-text p img {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    margin: var(--widget-text-img-gap, 16px auto);
}

/* RWD 差異改為覆寫 .widget-text 上的變數（見檔頭 [好覆蓋]）：
   主題若要單一間距，覆寫變數即可勝出所有寬度 */
@media (max-width: 991.98px) {

    .widget-text {
        --widget-text-p-gap: 14px;
        --widget-text-img-gap: 10px auto;
    }

    .widget-text-bg {
        padding: 0;
    }
}

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

    .widget-text {
        --widget-text-p-gap: 12px;
        --widget-text-img-gap: 5px auto;
    }
}

.widget-text .img-box {
    width: 100%;
    height: auto;
    margin: 0px auto;
}

.widget-text .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* 文字段落的「文字大小」（issue #879）
 *
 * MUST 同時指定段落本身：.widget-text p 有自己的字級（實測 16px），
 * 只設在外層容器會被它蓋掉——使用者選了字級，畫面上只有內距變、字沒變（2026-08-19 回報）。
 *
 * 刻意不沿用 .widget-title-sizeN：那組是標題用的，除了字級還帶 padding: 10px、
 * text-transform: uppercase 與標題色，套在內文上會多出一圈內距、英文全轉大寫。
 * 級距沿用標題的四階（30／24／20／18）與同一組斷點，數字上與標題一致，
 * 但只動字級與行高，其餘一律交給 .widget-text 既有的規則。
 *
 * 沒有這組 class 時（format 為空）＝沿用佈景主題的內文字級，輸出與改版前逐字相同。
 */
.widget-text-size1,
.widget-text-size1 p {
    font-size: var(--widget-text-font, 30px);
    line-height: var(--widget-text-lh, 1.6);
}

.widget-text-size1 {
    --widget-text-font: 30px;
}

.widget-text-size2,
.widget-text-size2 p {
    font-size: var(--widget-text-font, 24px);
    line-height: var(--widget-text-lh, 1.6);
}

.widget-text-size2 {
    --widget-text-font: 24px;
}

.widget-text-size3,
.widget-text-size3 p {
    font-size: var(--widget-text-font, 20px);
    line-height: var(--widget-text-lh, 1.7);
}

.widget-text-size3 {
    --widget-text-font: 20px;
}

.widget-text-size4,
.widget-text-size4 p {
    font-size: var(--widget-text-font, 18px);
    line-height: var(--widget-text-lh, 1.7);
}

.widget-text-size4 {
    --widget-text-font: 18px;
}

@media (max-width: 991.98px) {
    .widget-text-size1 {
        --widget-text-font: 24px;
    }

    .widget-text-size2 {
        --widget-text-font: 20px;
    }

    .widget-text-size3 {
        --widget-text-font: 18px;
    }

    .widget-text-size4 {
        --widget-text-font: 16px;
    }
}

@media (max-width: 767.98px) {
    .widget-text-size1 {
        --widget-text-font: 20px;
    }

    .widget-text-size2 {
        --widget-text-font: 18px;
    }

    .widget-text-size3 {
        --widget-text-font: 16px;
    }

    .widget-text-size4 {
        --widget-text-font: 15px;
    }
}