/* ============================================================================
 * common/widget/22-style-params.css — Widget 受控樣式參數（issue #879）
 * 載入序 22（widget 模組目錄最後一支）
 * ============================================================================
 *
 * 用途：
 *   承接後台「區塊設定」的兩個受控樣式參數，讓客戶不需再去 /cssSettings 手寫 CSS：
 *     data-pad="none|sm|md|lg"   上下留白（widget_langs.padding）
 *     data-bg="light|dark|brand" 區塊背景色（widgets.bg_color）
 *   兩者皆由 resources/views/components/web/widgets.blade.php 輸出在各 widget 的
 *   **最外層容器**上（.widget-imgTextB／.productA／.oneImage…）。
 *
 * 設計決策見 openspec/changes/issue879-widget-preview-first-editor/design.md：
 *   D2 以資料屬性選擇器承接（同一維度的值天然互斥，不需擔心多個 class 並存）
 *   D8 留白四級的值取自既有 --cms-space-* 刻度，並隨斷點縮放
 *   D9 背景取自橋接 token --cms-widget-bg-*，前景 MUST 成對切換
 *
 * 【null 不輸出屬性，這是 legacy 相容的關鍵】
 *   padding 為 null（欄位新增前的所有既有資料）時 blade **不輸出 data-pad**，
 *   本檔任何規則都不匹配，各模組自身的 padding（07 與 08 為 20px 0、10 為 30px 0、
 *   12 為 30px/18px…）完全不被覆寫，既有站台升級後間距不變。
 *   使用者明選的「無」是另一個值（none），輸出 data-pad="none" 才真的歸零。
 *   兩者若混同，所有既有站台的區塊間距會在上線當下一起縮掉。
 *
 * 【為什麼選擇器要重複寫兩次屬性】
 *   [data-pad="lg"][data-pad] 的特異性是 (0,2,0)，比單寫一次的 (0,1,0) 高一階。
 *   這是刻意的：主題層（themes/{theme}/widget.css）載入序在本檔**之後**，且實測
 *   3ffood 與 shopLinerp 都以 (0,1,0) 的裸容器選擇器設定 widget 外層的 padding
 *   與 background（如 3ffood 的 .widget-imgTextC { padding: 120px 0 }、shopLinerp 的
 *   .widget-bannerA { padding-top: 32px }）。若本檔也只寫 (0,1,0)，同分時後載入者勝，
 *   客戶在這兩個主題上調留白與背景會完全沒有反應。
 *   刻意不用 !important：主題若確有理由要壓過使用者的選擇，仍可用 (0,3,0) 以上的
 *   選擇器接管；!important 會把這條路一併封死。
 *
 * 相依：common/tokens.css（--cms-space-* 間距刻度、--cms-widget-bg-*／-fg-* 橋接 token）
 * 斷點：480 / 576 / 768 / 992 / 1200 / 1400（docs/front/css-development-guideline.md §4.6）
 * ============================================================================ */

/* ============================================================================
 * 1. 上下留白
 *   桌機 20 / 40 / 80，手機收斂為 15 / 25 / 40——80px 上下留白在 375px 裝置會吃掉
 *   整個首屏。左右內距不在本參數範圍，仍由 container 負責（區段層級留白的既有分工）。
 * ==========================================================================*/

[data-pad="none"][data-pad] {
    padding-top: var(--cms-space-0);
    padding-bottom: var(--cms-space-0);
}

[data-pad="sm"][data-pad] {
    padding-top: var(--cms-space-20);
    padding-bottom: var(--cms-space-20);
}

[data-pad="md"][data-pad] {
    padding-top: var(--cms-space-40);
    padding-bottom: var(--cms-space-40);
}

[data-pad="lg"][data-pad] {
    padding-top: var(--cms-space-80);
    padding-bottom: var(--cms-space-80);
}

@media (max-width: 767.98px) {
    /* none 不需要行動版分支：0 在任何斷點都是 0 */
    [data-pad="sm"][data-pad] {
        padding-top: var(--cms-space-15);
        padding-bottom: var(--cms-space-15);
    }

    [data-pad="md"][data-pad] {
        padding-top: var(--cms-space-25);
        padding-bottom: var(--cms-space-25);
    }

    [data-pad="lg"][data-pad] {
        padding-top: var(--cms-space-40);
        padding-bottom: var(--cms-space-40);
    }
}

/* ============================================================================
 * 2. 區塊背景色
 *   背景與前景成對切換：預設內文 #333333 在 #131313 底上不可讀，缺此配套會使
 *   「深色」選項實際不可用。實際色值由各主題於 base.css 覆寫橋接 token 決定。
 *
 *   背景色與背景圖為二擇一（服務層強制，見 WidgetService::applyBackgroundExclusivity），
 *   故本檔不需處理兩者並存時的優先序。
 * ==========================================================================*/

[data-bg="light"][data-bg] {
    background-color: var(--cms-widget-bg-light);
    color: var(--cms-widget-fg-on-light);
}

[data-bg="dark"][data-bg] {
    background-color: var(--cms-widget-bg-dark);
    color: var(--cms-widget-fg-on-dark);
}

[data-bg="brand"][data-bg] {
    background-color: var(--cms-widget-bg-brand);
    color: var(--cms-widget-fg-on-brand);
}

/* 各模組的文字顏色改跟隨區塊前景色。
   這裡改寫的是模組自己的「好覆蓋」自訂屬性（issue #874 的既有機制），不是 color 宣告——
   自訂屬性會沿 DOM 繼承並在**使用端**求值，因此完全不需要跟模組規則比特異性，
   也不受主題層載入序影響。currentColor 在使用端即等於該元素繼承到的區塊前景色。
   只改寫預設值為深色文字的變數；預設為 #ffffff 者（如 --productB-text-color）不動，
   那些是給本來就有深色底的卡片用的，改了反而會在淺色底上變成白字。 */
[data-bg="light"][data-bg],
[data-bg="dark"][data-bg],
[data-bg="brand"][data-bg] {
    --widget-title-color: currentColor;
    --widget-text-color: currentColor;
    --widget-text-p-color: currentColor;
    --imgTextD-light-color: currentColor;
    --productC-text-color: currentColor;
}

/* 「自訂屬性宣告在文字元素自己身上」或「硬編色」的既有文字，一律以 :where() 列舉承接：
   - [class*="widget-title-size"]：04-title.css 把 --widget-title-color:#333 宣告在標題元素
     本身，元素自身的宣告永遠壓過容器繼承（實測深色底出現深灰標題），MUST 在此直接改 color
   - .imgTextC-Title／.imgTextC-Content／.productA-title：08／12 的硬編 #333
   :where() 特異性為 0，整條選擇器維持 (0,2,0)，勝過模組的 (0,1,0)～同分規則（本檔載入序最後）。
   按鈕（.btnC）與規格標籤（.size-item）刻意不納入：兩者有自己的底色與框線，
   跟著區塊前景色翻白會在自己的白底上消失。 */
[data-bg="light"][data-bg] :where(h1, h2, h3, h4, h5, h6, p, li, .title, .text, [class*="widget-title-size"], .imgTextC-Title, .imgTextC-Content, .productA-title),
[data-bg="dark"][data-bg] :where(h1, h2, h3, h4, h5, h6, p, li, .title, .text, [class*="widget-title-size"], .imgTextC-Title, .imgTextC-Content, .productA-title),
[data-bg="brand"][data-bg] :where(h1, h2, h3, h4, h5, h6, p, li, .title, .text, [class*="widget-title-size"], .imgTextC-Title, .imgTextC-Content, .productA-title) {
    color: inherit;
}