/*
 * CKEditor 內容前台顯示樣式（與後台 CKEditor 4 contents.css 對齊）
 *
 * 用途：
 *   後台使用 CKEditor 4 編輯內容後，前台直出 HTML 時前台 reset CSS 會把 h1~h6、ul/ol、blockquote
 *   等 tag 的樣式蓋掉，導致前後台呈現不一致。本檔案提供 .ckeditor-block-view 作為 wrapper class，
 *   還原 CKEditor 4 contents.css 內的常見 tag 預設樣式，僅在 .ckeditor-block-view 內生效。
 *
 * 字型策略：
 *   不覆寫 font-family，沿用前台 Inter（layout 全域字型）；font-size 使用相對單位 1rem
 *   讓使用者調整裝置字級時跟著縮放。
 *
 * 套用方式：
 *   在 Blade 內所有以 {!! ... !!} 直出 CKEditor 內容的 wrapper 上加 .ckeditor-block-view 即可，
 *   保留原有 class（追加而非取代）。
 */

.ckeditor-block-view {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
}

/* 標題：CKEditor 4 contents.css 的預設 font-weight: normal、line-height: 1.2 */
.ckeditor-block-view h1,
.ckeditor-block-view h2,
.ckeditor-block-view h3,
.ckeditor-block-view h4,
.ckeditor-block-view h5,
.ckeditor-block-view h6 {
    font-weight: normal;
    line-height: 1.2;
    margin: 0 0 0.5em;
    color: inherit;
}

.ckeditor-block-view h1 { font-size: 2em; }
.ckeditor-block-view h2 { font-size: 1.5em; }
.ckeditor-block-view h3 { font-size: 1.17em; }
.ckeditor-block-view h4 { font-size: 1em; }
.ckeditor-block-view h5 { font-size: 0.83em; }
.ckeditor-block-view h6 { font-size: 0.67em; }

/* 段落 */
.ckeditor-block-view p {
    margin: 0 0 1em;
}

/*
 * 只包單一圖片 / 連結包圖片 / figure 的 <p> 不需要 margin-bottom，
 * 避免 CKEditor 4 自動把 inline <img> 包進 <p> 後，預設 margin 把下方區塊推開。
 * :has() 已被 Safari 15.4+ / Chrome 105+ 支援，2026 年目標瀏覽器皆通過。
 */
.ckeditor-block-view p:has(> img:only-child),
.ckeditor-block-view p:has(> a:only-child > img:only-child),
.ckeditor-block-view p:has(> figure:only-child) {
    margin: 0;
}

/* 清單：CKEditor 4 contents.css padding 0 40px */
.ckeditor-block-view ul,
.ckeditor-block-view ol,
.ckeditor-block-view dl {
    padding: 0 40px;
    margin: 0 0 1em;
}

.ckeditor-block-view ul { list-style: disc; }
.ckeditor-block-view ol { list-style: decimal; }
.ckeditor-block-view ul ul { list-style: circle; }
.ckeditor-block-view ul ul ul { list-style: square; }

.ckeditor-block-view li {
    display: list-item;
    margin-bottom: 0.25em;
}

.ckeditor-block-view dt {
    font-weight: bold;
}

.ckeditor-block-view dd {
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}

/* 引用 */
.ckeditor-block-view blockquote {
    font-style: italic;
    font-family: Georgia, Times, "Times New Roman", serif;
    padding: 2px 0 2px 20px;
    margin: 0 0 1em;
    border-left: 5px solid #ccc;
}

/* 連結 */
.ckeditor-block-view a {
    color: #0782C1;
    text-decoration: underline;
}

.ckeditor-block-view a:hover {
    text-decoration: none;
}

/* 水平線 */
.ckeditor-block-view hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
}

/* 行內樣式 */
.ckeditor-block-view strong,
.ckeditor-block-view b {
    font-weight: bold;
}

.ckeditor-block-view em,
.ckeditor-block-view i {
    font-style: italic;
}

.ckeditor-block-view u {
    text-decoration: underline;
}

.ckeditor-block-view s,
.ckeditor-block-view del {
    text-decoration: line-through;
}

.ckeditor-block-view sub {
    vertical-align: sub;
    font-size: smaller;
}

.ckeditor-block-view sup {
    vertical-align: super;
    font-size: smaller;
}

.ckeditor-block-view span[lang] {
    font-style: italic;
}

/* 圖片基礎樣式 */
.ckeditor-block-view img {
    max-width: 100%;
    height: auto;
}

/* CKEditor 4 預設 figure（image caption widget） */
.ckeditor-block-view figure {
    text-align: center;
    margin: 1em 0;
    padding: 0;
    display: block;
}

.ckeditor-block-view figure > figcaption {
    text-align: center;
    display: block;
    font-size: 0.9em;
    color: #666;
    margin-top: 0.5em;
}

/* CKEditor 4 image2 plugin：左右浮動圖片 */
.ckeditor-block-view figure.image {
    display: inline-block;
}

.ckeditor-block-view figure.image-align-left,
.ckeditor-block-view img.left {
    float: left;
    margin: 0 1em 1em 0;
    padding: 5px;
}

.ckeditor-block-view figure.image-align-right,
.ckeditor-block-view img.right {
    float: right;
    margin: 0 0 1em 1em;
    padding: 5px;
}

.ckeditor-block-view figure.image-align-center {
    display: block;
    margin: 1em auto;
    text-align: center;
}

/* CKEditor 連結內圖片 */
.ckeditor-block-view a > img {
    border: none;
}

/* 標記 highlight */
.ckeditor-block-view .marker {
    background-color: Yellow;
}

/* 預先格式化文字 */
.ckeditor-block-view pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #f7f7f9;
    padding: 8px;
    border: 1px solid #e1e1e8;
    border-radius: 3px;
    margin: 0 0 1em;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 0.9em;
    -moz-tab-size: 4;
    tab-size: 4;
}

.ckeditor-block-view code {
    background: #f7f7f9;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 0.9em;
    color: #c7254e;
}

.ckeditor-block-view pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* 表格 */
.ckeditor-block-view table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1em;
    max-width: 100%;
}

.ckeditor-block-view table caption {
    caption-side: top;
    text-align: center;
    padding: 5px;
    font-style: italic;
    color: #666;
}

.ckeditor-block-view table th,
.ckeditor-block-view table td {
    padding: 5px 10px;
    border: 1px solid #bfbfbf;
    vertical-align: top;
    text-align: left;
}

.ckeditor-block-view table th {
    background: #f5f5f5;
    font-weight: bold;
}

/* CKEditor 4 image widget 進階樣式 */
.ckeditor-block-view .image-clean {
    border: 0;
    background: none;
    padding: 0;
}

.ckeditor-block-view .image-clean > figcaption {
    font-size: 0.9em;
    text-align: right;
}

.ckeditor-block-view .image-grayscale {
    background-color: white;
    color: #666;
}

.ckeditor-block-view .image-grayscale img,
.ckeditor-block-view img.image-grayscale {
    filter: grayscale(100%);
}

/* CKEditor 4 媒體嵌入尺寸 */
.ckeditor-block-view .embed-240p { max-width: 426px; max-height: 240px; margin: 0 auto; }
.ckeditor-block-view .embed-360p { max-width: 640px; max-height: 360px; margin: 0 auto; }
.ckeditor-block-view .embed-480p { max-width: 854px; max-height: 480px; margin: 0 auto; }
.ckeditor-block-view .embed-720p { max-width: 1280px; max-height: 720px; margin: 0 auto; }
.ckeditor-block-view .embed-1080p { max-width: 1920px; max-height: 1080px; margin: 0 auto; }

/* clearfix：避免浮動圖片造成父層高度塌陷 */
.ckeditor-block-view::after {
    content: "";
    display: table;
    clear: both;
}

/* 手機版（<= 767px）：取消圖片浮動，避免在窄螢幕擠壓文字 */
@media (max-width: 767px) {
    .ckeditor-block-view figure.image-align-left,
    .ckeditor-block-view figure.image-align-right,
    .ckeditor-block-view img.left,
    .ckeditor-block-view img.right {
        float: none;
        display: block;
        margin: 0 auto 1em;
    }

    .ckeditor-block-view ul,
    .ckeditor-block-view ol,
    .ckeditor-block-view dl {
        padding: 0 20px;
    }

    .ckeditor-block-view table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * 表格屬性 → 手機版排版 → 往下排放（後台 CKEditor 對話框）：
     * 在 <table> 上加 .stack-mobile，tr / td 改為 block，內容垂直堆疊；
     * 同時取消預設的 overflow-x:auto，避免出現多餘的橫向捲軸。
     */
    .ckeditor-block-view table.stack-mobile {
        overflow-x: visible;
    }

    .ckeditor-block-view table.stack-mobile,
    .ckeditor-block-view table.stack-mobile thead,
    .ckeditor-block-view table.stack-mobile tbody,
    .ckeditor-block-view table.stack-mobile tfoot,
    .ckeditor-block-view table.stack-mobile tr,
    .ckeditor-block-view table.stack-mobile th,
    .ckeditor-block-view table.stack-mobile td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/*
 * 自訂 plugin「區塊設定」（customblock）建立的 <div class="custom-block">：
 * 寬度設定走 inline style（width / max-width 由對話框寫入），
 * 這裡只補 box-sizing 與圖片自動縮放，避免使用者放入大圖時超出區塊邊界。
 */
.ckeditor-block-view .custom-block {
    box-sizing: border-box;
}

.ckeditor-block-view .custom-block img {
    max-width: 100%;
    height: auto;
}

/*
 * 自訂 plugin「圖文樣式」（stylelayout1）：
 *   - 樣式 1（左圖右文，預設）：.style-block-1
 *   - 樣式 2（左文右圖）：.style-block-1.style-block-1--reverse
 * 結構：<div class="style-block style-block-1[ style-block-1--reverse]">
 *           <div class="style-block-1-image"><img></div>
 *           <div class="style-block-1-body">
 *               <h3 class="style-block-1-title">大標題</h3>
 *               <div class="style-block-1-text"><p>內文</p>...</div>
 *           </div>
 *       </div>
 * 子元素 DOM 順序維持 image 在前、body 在後；樣式 2 靠 flex-direction:row-reverse 切版。
 * 桌面版兩欄並排（左 45% 右 55%）；≤767px 改為單欄垂直堆疊（圖在上、文在下，樣式 1/2 一致）。
 */
.ckeditor-block-view .style-block-1 {
    display: flex;
    align-items: stretch;
    gap: 32px;
    margin: 32px 0;
    box-sizing: border-box;
}

.ckeditor-block-view .style-block-1.style-block-1--reverse {
    flex-direction: row-reverse;
}

.ckeditor-block-view .style-block-1 .style-block-1-image {
    flex: 0 0 45%;
    max-width: 45%;
}

.ckeditor-block-view .style-block-1 .style-block-1-image img {
    display: block;
    width: 100%;
    height: auto;
}

.ckeditor-block-view .style-block-1 .style-block-1-body {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ckeditor-block-view .style-block-1 .style-block-1-title {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
}

.ckeditor-block-view .style-block-1 .style-block-1-text p {
    margin: 0 0 12px;
    line-height: 1.7;
    font-size: 16px;
}

.ckeditor-block-view .style-block-1 .style-block-1-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .ckeditor-block-view .style-block-1,
    .ckeditor-block-view .style-block-1.style-block-1--reverse {
        flex-direction: column;
        gap: 20px;
        margin: 24px 0;
    }
    .ckeditor-block-view .style-block-1 .style-block-1-image,
    .ckeditor-block-view .style-block-1 .style-block-1-body {
        flex: 1 1 auto;
        max-width: 100%;
    }
    .ckeditor-block-view .style-block-1 .style-block-1-title {
        font-size: 22px;
    }
    .ckeditor-block-view .style-block-1 .style-block-1-text p {
        font-size: 15px;
    }
}

/*
 * 自訂 plugin「雙文案樣式」（stylelayout3）：兩欄並排純文案，無圖片、無中央分隔線。
 * 結構：<div class="style-block style-block-3">
 *           <div class="style-block-3-col">
 *               <h3 class="style-block-3-title">左標題</h3>
 *               <div class="style-block-3-text"><p>左內文</p>...</div>
 *           </div>
 *           <div class="style-block-3-col"> ... 右欄同結構 ... </div>
 *       </div>
 * 桌面版兩欄等寬並排（各 50%）+ gap 32px；≤767px 改為單欄垂直堆疊（左欄在上、右欄在下）。
 */
.ckeditor-block-view .style-block-3 {
    display: flex;
    align-items: stretch;
    gap: 32px;
    margin: 32px 0;
    box-sizing: border-box;
}

.ckeditor-block-view .style-block-3 .style-block-3-col {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.ckeditor-block-view .style-block-3 .style-block-3-title {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
}

.ckeditor-block-view .style-block-3 .style-block-3-text p {
    margin: 0 0 12px;
    line-height: 1.7;
    font-size: 16px;
}

.ckeditor-block-view .style-block-3 .style-block-3-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .ckeditor-block-view .style-block-3 {
        flex-direction: column;
        gap: 24px;
        margin: 24px 0;
    }
    .ckeditor-block-view .style-block-3 .style-block-3-col {
        flex: 1 1 auto;
        max-width: 100%;
    }
    .ckeditor-block-view .style-block-3 .style-block-3-title {
        font-size: 22px;
    }
    .ckeditor-block-view .style-block-3 .style-block-3-text p {
        font-size: 15px;
    }
}

/*
 * 自訂 plugin「雙圖樣式」（stylelayout4）：兩欄並排純圖片，無標題 / 內文 / 外連。
 * 結構：<div class="style-block style-block-4">
 *           <div class="style-block-4-col"><img></div>
 *           <div class="style-block-4-col"><img></div>
 *       </div>
 * 桌面版兩欄等寬並排（各 50%）+ gap 32px；≤767px 改為單欄垂直堆疊（左圖在上、右圖在下）。
 */
.ckeditor-block-view .style-block-4 {
    display: flex;
    align-items: stretch;
    gap: 32px;
    margin: 32px 0;
    box-sizing: border-box;
}

.ckeditor-block-view .style-block-4 .style-block-4-col {
    flex: 1 1 50%;
    min-width: 0;
}

.ckeditor-block-view .style-block-4 .style-block-4-col img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .ckeditor-block-view .style-block-4 {
        flex-direction: column;
        gap: 20px;
        margin: 24px 0;
    }
    .ckeditor-block-view .style-block-4 .style-block-4-col {
        flex: 1 1 auto;
        max-width: 100%;
    }
}