/* ============================================================================
 * common/widget/03-container.css — Widget 容器寬度與外距
 * ============================================================================
 *   載入序：03 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L464~632 切出；phase 2 已完成結構整理
 *
 *   本檔管兩套容器，**用途不同、寬度也不同，勿混為一談**：
 *
 *   (A) 文字 widget 專用（單獨使用，不併 .container）
 *       resources/views/components/web/widgets.blade.php L136 / L149：
 *         <div class="container-{{ data_get($widgetLang, 'width', '1600') }}">
 *       寬度由**後台每則 widget 自行設定**（預設 1600），class 以字串拼接產生，
 *       故 grep 字面 "container-1600" 找不到——修改本區前務必先讀本段。
 *
 *   (B) 其他 widget 的版面容器（一律與 .container 併用）
 *       banner／imgText／product 等，markup 為 class="container container-1600"，
 *       實際寬度受站台 .container 基準（16-baseline-override.css）節制為 1170／1320。
 *
 *   [順序相依已解除] phase 1 時 (B) 的寬度需靠 16-baseline-override.css 後載入壓制
 *   才會正確，形成「16 MUST 載於 03 之後」的隱性相依。phase 2 改以複合選擇器
 *   .container.container-1600（0,2,0）與 .container-1600:not(.container)（0,2,0）
 *   明確分流兩套容器，兩檔載入順序對調亦不改變任何生效值。
 *
 *   [已收斂，2026-08-06 Olivia 決議] (A) 原用 1300／1440／1530／1620 四個刻度外斷點，
 *   走「1140 → 1200 → 1300 → 1400 → 1460 → 1600」六階漸進放寬；現收斂為標準刻度
 *   992／1200／1400 三階，且直接引用與 (B) 相同的 --cms-container-md／-lg／-xl。
 *   **兩套容器的寬度階梯自此完全一致**，差異只剩內距（(A) 自帶手機與平板內距，
 *   (B) 的手機內距由 16-baseline-override.css 的 .container 承接），故複合選擇器
 *   分流仍需保留。
 *   收斂後文字 widget 在寬螢幕變窄（1600 視口 1460 → 1320），屬預期中的客戶可見變更；
 *   逐段差異見 ChangeLog 2026/08/06。
 *
 *   [好覆蓋，issue #874] 兩套容器的寬度階梯與內距改由 .container-1600／.container-800
 *   （皆 0,1,0）上的自訂屬性承載，預設值即全域 --cms-container-* token。
 *   主題若只想改「widget 容器」而不動全站容器基準，覆寫本層變數即可，
 *   毋須複製 .container-1600:not(.container)（0,2,0）或 .container.container-1600（0,2,0）
 *   這類複合選擇器；要連同全站容器一起改，則照舊覆寫 --cms-container-* 全域 token。
 *   兩層皆保留 fallback，變數未定義時維持原值。
 * ==========================================================================*/


/* ----------------------------------------------------------------------------
 * container-800：窄容器（文字 widget 可於後台選用；亦供長文內容頁併用 .container）
 * -------------------------------------------------------------------------- */

.container-800 {
    --widget-container-narrow: var(--cms-container-narrow); /* 窄容器寬度 */
    --widget-container-narrow-pad-sm: 10px 15px; /* 窄容器手機內距（單獨使用時） */
    max-width: var(--widget-container-narrow, var(--cms-container-narrow));
    width: 100%;
    margin: 0 auto;
    overflow-wrap: anywhere;
}

/* 覆蓋 Bootstrap .container 在大螢幕的 max-width（例如 1320），使窄容器維持 800 */
.container.container-800 {
    max-width: var(--widget-container-narrow, var(--cms-container-narrow));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 手機內距：併用 .container 者由 16-baseline-override 的 .container 規則統一承接，
   本規則僅供單獨使用（文字 widget）的情境，避免兩檔互相覆寫 */
@media (max-width: 767.98px) {
    .container-800:not(.container) {
        padding: var(--widget-container-narrow-pad-sm, 10px 15px);
        overflow-wrap: anywhere;
    }
}

/* 讓圖片「跟著容器撐滿」，而不是只限制上限 */
.container.container-800 img,
.container-800 img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}


/* ----------------------------------------------------------------------------
 * container-1600：共同基礎
 * -------------------------------------------------------------------------- */

.container-1600 {
    --widget-container-max: var(--cms-container-max); /* <992 基礎寬度 */
    --widget-container-md: var(--cms-container-md); /* ≥992 寬度 */
    --widget-container-lg: var(--cms-container-lg); /* ≥1200 寬度 */
    --widget-container-xl: var(--cms-container-xl); /* ≥1400 寬度 */
    --widget-container-pad-sm: 0 20px; /* ≤767.98 內距（僅單獨使用時） */
    --widget-container-pad-md: 20px; /* ≥768 內距 */
    --widget-container-pad-lg: 0; /* ≥1200 內距 */
    max-width: var(--widget-container-max, var(--cms-container-max));
    width: 100%;
    margin: 0 auto;
    overflow-wrap: anywhere;
}

/* 手機全出血變體：取消左右留白。
   （註：本 class 並非後台設定，資料表無對應欄位、app/ 亦無任何引用；由 Blade 硬編輸出於
   imgTextD 全部情況與商品模組 B 的 width=1600 情況。原註解誤記為「後台勾選時輸出」，
   已於 issue #879 前置查證更正。）
   特異性 0,2,0，勝過站台 .container 的手機內距 */
@media (max-width: 575.98px) {
    .container-1600.container-1600-mobilefluid {
        padding: 0;
        overflow-wrap: anywhere;
    }
}

.container-1600 img {
    max-width: var(--widget-container-max, var(--cms-container-max));
}


/* ----------------------------------------------------------------------------
 * (A) 文字 widget 容器：單獨使用 .container-1600（不併 .container）
 *
 * 寬度階梯原為 issue #518 併檔前 widgets.css 的設計（1140→1200→1300→1400→1460→1600，
 * 六階、含四個刻度外斷點）。2026-08-06 收斂為標準刻度三階，並改引用與 (B) 相同的
 * --cms-container-* token；內距維持原本的「手機 0 20px／平板 20px／≥1200 歸零」。
 * -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .container-1600:not(.container) {
        padding: var(--widget-container-pad-sm, 0 20px);
    }
}

@media (min-width: 768px) {
    .container-1600:not(.container) {
        padding: var(--widget-container-pad-md, 20px);
    }
}

@media (min-width: 992px) {
    .container-1600:not(.container) {
        max-width: var(--widget-container-md, var(--cms-container-md));
    }
}

@media (min-width: 1200px) {
    .container-1600:not(.container) {
        max-width: var(--widget-container-lg, var(--cms-container-lg));
        padding: var(--widget-container-pad-lg, 0);
    }
}

@media (min-width: 1400px) {
    .container-1600:not(.container) {
        max-width: var(--widget-container-xl, var(--cms-container-xl));
    }
}


/* ----------------------------------------------------------------------------
 * (B) 版面容器：.container 與 .container-1600 併用（banner／imgText／product 等）
 *
 * 寬度與站台 .container 基準一致（16-baseline-override.css 同源 token），
 * 複合選擇器 0,2,0 確保不受兩檔載入順序影響。斷點全數為標準刻度。
 * 手機內距不在此宣告，交由 16-baseline-override 的 .container 統一承接。
 * -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .container.container-1600 {
        padding: var(--widget-container-pad-md, 20px);
    }
}

@media (min-width: 992px) {
    .container.container-1600 {
        max-width: var(--widget-container-md, var(--cms-container-md));
    }
}

@media (min-width: 1200px) {
    .container.container-1600 {
        max-width: var(--widget-container-lg, var(--cms-container-lg));
        padding: var(--widget-container-pad-lg, 0);
    }
}

@media (min-width: 1400px) {
    .container.container-1600 {
        max-width: var(--widget-container-xl, var(--cms-container-xl));
    }
}


/* ----------------------------------------------------------------------------
 * Margin 工具
 * 註：blade 與 js 皆無引用，但屬 CKEditor 內容可套用的 utility（見
 * docs/front/css-deadcode-cleanup-handoff.md B 類），需正式站內容查證後裁決。
 * -------------------------------------------------------------------------- */

.ml-25vw {
    margin-left: 25vw;
}

.mr-25vw {
    margin-right: 25vw;
}