/*
 * ContentBuilder 內容的版面骨架（editor_content.css 沒有涵蓋的部分）
 *
 * ★ 這是唯一的原始檔：後台的進階排版編輯器與預覽直接用它（內嵌在模組 DLL），
 *   前台 Wecan.Projects.RtiWeb 建置時自動複製到 Static/tw/css/（該專案 csproj 的 CopyEditorContentStyles）。
 *   要改樣式只改這一份；editor_content.min.css 也一樣。
 *
 * 為什麼需要這個檔案：
 *   - 積木庫 content.js 用的是 ContentBuilder 舊版的 .column 系統
 *     （column full / half / third / fourth …），這些 editor_content.css 已經有了。
 *   - 但使用者在編輯器裡「手動新增或調整欄位」時，產生的是 col-md-1 ~ col-md-12
 *     （見 Templates/Editor.html 的 cols 設定），editor_content.css 完全沒有這些。
 *   - 前台沒有載入 Bootstrap，所以 col-md-* 沒有任何寬度規則，版面會散掉。
 *
 * 為什麼不直接在前台載 Bootstrap：
 *   各語系站的 style.css 自己有一套 .row / .col-md-* / .container（RtiWeb 是第 1-44 行，
 *   且只定義了 col-md-2/3/4/12），載入 Bootstrap 會跟它正面衝突，影響到全站既有版面。
 *
 * 作法：
 *   所有規則都限定在 .editor 之下（權重 0,2,0），壓得過各站 style.css 頂層的
 *   .row 與 [class*="col-"]（權重 0,1,0）；而 .editor 之外完全不受影響。
 *   前台只要把新聞內文用 <div class="editor"> 包起來即可。
 *
 * 斷點刻意採用 40rem（640px），與 editor_content.css 的 .column 一致，
 * 讓兩套欄位系統在同一個寬度換行，不會出現一邊已堆疊、另一邊還並排的狀況。
 */

/* 站台的 style.css 可能把 .row 設成 flex 並加上負邊界（RtiWeb 第 3-8 行就是），
   那會讓底下 float 排版的 .column 與 col-md-* 全部失效，這裡先還原成區塊排版。 */
.editor .row {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

/* 欄位是 float，容器要自己收尾。手動新增的列不一定帶 clearfix，所以統一補。 */
.editor .row::after {
    content: "";
    display: table;
    clear: both;
}

@media (min-width: 40rem) {
    .editor .row > [class*="col-md-"] {
        float: left;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    .editor .col-md-1 { width: 8.333333%; }
    .editor .col-md-2 { width: 16.666667%; }
    .editor .col-md-3 { width: 25%; }
    .editor .col-md-4 { width: 33.333333%; }
    .editor .col-md-5 { width: 41.666667%; }
    .editor .col-md-6 { width: 50%; }
    .editor .col-md-7 { width: 58.333333%; }
    .editor .col-md-8 { width: 66.666667%; }
    .editor .col-md-9 { width: 75%; }
    .editor .col-md-10 { width: 83.333333%; }
    .editor .col-md-11 { width: 91.666667%; }
    .editor .col-md-12 { width: 100%; }
}

/* 640px 以下不給任何 float／width，欄位自然變成一欄，
   與 editor_content.css 的 .column 在同一個斷點的行為一致。 */
@media (max-width: 39.99rem) {
    .editor .row > [class*="col-md-"] {
        float: none;
        width: auto;
    }
}

/* 內容區的基本保護：圖片不要撐破容器、長網址不要把欄位擠爆 */
.editor img {
    max-width: 100%;
    height: auto;
}

.editor .row > [class*="col-md-"],
.editor .row > .column {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 內文的清單：各站 style.css 把 ul / ol 的項目符號與縮排全清掉了（給選單用），
   「重點摘要」「延伸閱讀」「事件時間軸」等積木會變成一行行沒有記號的字，這裡還原。 */
.editor .row ul,
.editor .row ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}

.editor .row ul { list-style: disc outside; }
.editor .row ol { list-style: decimal outside; }

.editor .row li {
    display: list-item;
    float: none;
    margin: 0.3em 0;
    list-style: inherit;
}

/* 內文的表格（「資料表格」積木）：站台樣式沒有框線，欄位會黏在一起 */
.editor .row table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 0.5em;
}

.editor .row th,
.editor .row td {
    border: 1px solid #d5d9df;
    padding: 0.5em 0.75em;
    text-align: left;
    vertical-align: top;
}

.editor .row th {
    background-color: #f2f4f6;
    font-weight: bold;
}

/* 社群按鈕（「社群」積木）：ContentBuilder 的 .is-btn 按鈕加上品牌色。
   選擇器多帶一層 .row（權重 0,4,1）：站台樣式有替內文連結上色的規則（權重 0,3,1），
   編輯器裡它被包進 @scope，同權重時 @scope 的規則會贏（scope proximity），要比它高一級才蓋得過。
   editor_content.css 的 .is-btn:hover 也會把字色設回 initial（黑色），所以各狀態一起寫 */
.editor .row a.is-btn.fm-social,
.editor .row a.is-btn.fm-social:hover,
.editor .row a.is-btn.fm-social:visited,
.editor .row a.is-btn.fm-social:focus {
    color: #fff;
    border-color: transparent;
    border-radius: 4px;
    letter-spacing: 1px;
    margin: 3px 6px 3px 0;
}

.editor .row a.is-btn.fm-social:hover { opacity: 0.85; }
.editor .row a.fm-social-facebook { background-color: #1877f2; }
.editor .row a.fm-social-instagram { background-color: #d62976; }
.editor .row a.fm-social-youtube { background-color: #e62117; }
.editor .row a.fm-social-line { background-color: #06c755; }
.editor .row a.fm-social-x { background-color: #111; }