/*
 * 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%;
    padding: 30px;
}

.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;
    padding: 30px;
}

.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%;
    }
}

/*
 * 自訂 plugin「新增卡片樣式」（cardstyle）：<ul class="functionality"> 多卡片版型。
 * 規格與 public/template/html/assets/type.scss 內 `.functionality` 區段一致。
 * 結構：<ul class="functionality mb-5">
 *           <li><img><h4>標題</h4><p>內文</p></li> ...
 *       </ul>
 * 桌面版三欄並排（每欄 33.33% - 20px，column-gap 30px），≤578px 改為單欄堆疊。
 * 前台已載 Bootstrap，`.mb-5` 由 Bootstrap 提供，這裡不再定義。
 */
.ckeditor-block-view .functionality {
    padding: 0;
    list-style: none;
    margin: 0 auto 20px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    max-width: 1200px;
    box-sizing: border-box;
}

.ckeditor-block-view .functionality>li {
    flex: 0 0 calc(33.33% - 20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 30px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.ckeditor-block-view .functionality>li img {
    display: block;
    margin: 30px auto;
    max-width: 100%;
    height: auto;
}

.ckeditor-block-view .functionality>li h4 {
    margin: 15px 0;
    font-size: 24px;
}

.ckeditor-block-view .functionality>li p {
    text-align: justify;
    color: #555;
    margin: 0;
}

@media (max-width: 578px) {
    .ckeditor-block-view .functionality {
        column-gap: 0;
    }

    .ckeditor-block-view .functionality>li {
        flex: 0 0 100%;
        margin-bottom: 30px;
    }
}