/* ============================================================================
 * common/widget/04-title.css — 標題 widget
 * ============================================================================
 *   載入序：04 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L633~752 切出；phase 2 已完成斷點對齊
 *   字級選擇器已於 issue #757 由 .widget-block-title h1~h4 改為 .widget-title-size1~size4。
 *
 *   [好覆蓋] issue #694：四個字級規則原寫 .widget-block-title .widget-title-sizeN（0,2,0），
 *   已降為單一 class .widget-title-sizeN（0,1,0）。祖先為冗餘範圍限定——
 *   widgets.blade.php 只在 <div class="widget-block-title"> 內輸出
 *   widget-title-{{ format }}，該 class 不可能出現在別處（實測首頁該類元素
 *   closest('.widget-block-title') 命中率 100%）。降權後主題只要寫
 *   .widget-title-sizeN 即可靠載入序接管，不必複製 common 的兩層選擇器。
 *
 *   [好覆蓋，issue #874] 四個字級的可調值（文字色／內距／字級／行高／大小寫轉換）
 *   已改由各 .widget-title-sizeN（0,1,0）上的自訂屬性承載，RWD 差異一律改為在
 *   @media 內覆寫變數。主題覆寫 MUST 寫在 .widget-title-sizeN 本身：
 *   四級共用同一組變數名，宣告在 .widget-block-title（父層）會被子元素自身的
 *   宣告蓋掉而無效。主題宣告不在 @media 內、同特異性且載入序在後，
 *   覆寫後所有寬度都勝出。
 *
 *   [斷點] 原用 992／768 各 4 個整數 max-width，已改為 991.98／767.98。
 *   四級字級各有「桌機／≤992／≤768」三段，值互不相同，無可合併的重複區塊。
 *   size4 兩個區塊內原有的 padding: 10px 為死宣告（同規則兩行後即被 padding 簡寫覆蓋），
 *   已刪除。size1~size3 各 @media 區塊原有的 padding: 10px 與基礎值相同，改為變數承載後
 *   該冗餘宣告已無存在必要，一併刪除（生效值不變）。
 * ==========================================================================*/

/* 標題 widget */

.widget-block-title {
    --widget-title-block-margin: 0px auto; /* 標題區塊外距 */
    margin: var(--widget-title-block-margin, 0px auto);
    position: relative;
}

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

.widget-title-size1 {
    --widget-title-color: #333333; /* 標題文字色 */
    --widget-title-pad: 10px; /* 標題內距 */
    --widget-title-font: 30px; /* 標題字級 */
    --widget-title-lh: 55px; /* 標題行高 */
    --widget-title-transform: uppercase; /* 英文大小寫轉換 */
    color: var(--widget-title-color, #333333);
    margin-bottom: 0;
    padding: var(--widget-title-pad, 10px);
    font-size: var(--widget-title-font, 30px);
    line-height: var(--widget-title-lh, 55px);
    text-transform: var(--widget-title-transform, uppercase);
}

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

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

.widget-title-size2 {
    --widget-title-color: #333333;
    --widget-title-pad: 10px;
    --widget-title-font: 24px;
    --widget-title-lh: 43px;
    --widget-title-transform: uppercase;
    color: var(--widget-title-color, #333333);
    margin-bottom: 0;
    padding: var(--widget-title-pad, 10px);
    font-size: var(--widget-title-font, 24px);
    line-height: var(--widget-title-lh, 43px);
    text-transform: var(--widget-title-transform, uppercase);
}

@media (max-width: 991.98px) {
    .widget-title-size2 {
        --widget-title-font: 20px;
        --widget-title-lh: 32px;
    }
}

@media (max-width: 767.98px) {
    .widget-title-size2 {
        --widget-title-font: 18px;
        --widget-title-lh: 28px;
    }
}

.widget-title-size3 {
    --widget-title-color: #333333;
    --widget-title-pad: 10px;
    --widget-title-font: 20px;
    --widget-title-lh: 36px;
    --widget-title-transform: uppercase;
    color: var(--widget-title-color, #333333);
    margin-bottom: 0;
    padding: var(--widget-title-pad, 10px);
    font-size: var(--widget-title-font, 20px);
    line-height: var(--widget-title-lh, 36px);
    text-transform: var(--widget-title-transform, uppercase);
}

@media (max-width: 991.98px) {
    .widget-title-size3 {
        --widget-title-font: 18px;
        --widget-title-lh: 30px;
    }
}

@media (max-width: 767.98px) {
    .widget-title-size3 {
        --widget-title-font: 16px;
        --widget-title-lh: 27px;
    }
}

.widget-title-size4 {
    --widget-title-color: #333333;
    --widget-title-pad: 10px;
    --widget-title-font: 18px;
    --widget-title-lh: 32px;
    --widget-title-transform: uppercase;
    color: var(--widget-title-color, #333333);
    margin-bottom: 0;
    padding: var(--widget-title-pad, 10px);
    line-height: var(--widget-title-lh, 32px);
    font-size: var(--widget-title-font, 18px);
    text-transform: var(--widget-title-transform, uppercase);
}

@media (max-width: 991.98px) {
    .widget-title-size4 {
        --widget-title-lh: 30px;
        --widget-title-pad: 16px 0 18px;
        --widget-title-font: 15px;
    }
}

@media (max-width: 767.98px) {
    .widget-title-size4 {
        --widget-title-lh: 27px;
        --widget-title-pad: 10px 0 12px;
        --widget-title-font: 14px;
    }
}