/* ============================================================================
 * 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;
}