/* ===== 公開頁面樣式 — 由美工維護此檔案 ===== */

/* ── General ── */
body {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    color: #333;
}

/* ══════════════════════════════════════════
   Header  (#header)
   ══════════════════════════════════════════ */
#header {
    background: #fff;
    border-bottom: 1px solid #dde3ec;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.header-inner {
    max-width: 1440px; /* 與 .container.page-content 同寬，兩處請一起調 */
    width: 80%; /* 寬螢幕時左右各留 10% 空白 */
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 70px;
}

/* 三欄佈局 */
.header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
    justify-content: flex-end;
}

/* Logo */
.logo {
    flex-shrink: 0;
}

    .logo img {
        height: 44px;
        display: block;
    }

/* Top bar (搜尋 / 聯絡 / 語系) */
.top_info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .82rem;
    height: 100%;
    justify-content: flex-end;
}

    .top_info ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: .6rem;
    }

    .top_info a {
        color: #555;
        text-decoration: none;
    }

        .top_info a:hover {
            color: #1a3c6e;
        }

/* 語言選擇器 */
.language-switcher {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
}

    .language-switcher a {
        color: #555;
        text-decoration: none;
        padding: .2rem .4rem;
        border-radius: 3px;
        transition: color .15s, background .15s;
    }

        .language-switcher a:hover {
            color: #1a3c6e;
            background: #f4f7fb;
        }

        .language-switcher a.active {
            color: #1a3c6e;
            font-weight: 600;
        }

.lang-sep {
    color: #bbb;
    margin: 0 .2rem;
}

.top_search_box .btn {
    background: #1a3c6e;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: .2rem .6rem;
    cursor: pointer;
    font-size: .82rem;
}

/* ── Main Menu ── */
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
    border-top: 1px solid #eee;
}

    .menu > li {
        position: relative;
    }

        .menu > li > a {
            display: block;
            padding: .75rem 1.1rem;
            color: #1a3c6e;
            font-size: .9rem;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            border-bottom: 3px solid transparent;
            transition: color .15s, border-color .15s;
        }

            .menu > li > a:hover,
            .menu > li:hover > a {
                color: #2d6aad;
                border-bottom-color: #2d6aad;
            }

        /* Dropdown (1st level) */
        .menu > li > ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            border: 1px solid #dde3ec;
            border-top: 3px solid #2d6aad;
            min-width: 200px;
            list-style: none;
            margin: 0;
            padding: .4rem 0;
            box-shadow: 0 6px 16px rgba(0,0,0,.12);
            z-index: 2000;
        }

        .menu > li:hover > ul {
            display: block;
        }

        .menu > li > ul > li {
            position: relative;
        }

            .menu > li > ul > li > a {
                display: block;
                padding: .45rem 1.2rem;
                color: #333;
                font-size: .87rem;
                text-decoration: none;
                white-space: nowrap;
            }

                .menu > li > ul > li > a:hover {
                    background: #f4f7fb;
                    color: #1a3c6e;
                }

            /* Dropdown (2nd level) */
            .menu > li > ul > li > ul {
                display: none;
                position: absolute;
                top: 0;
                left: 100%;
                background: #fff;
                border: 1px solid #dde3ec;
                min-width: 190px;
                list-style: none;
                margin: 0;
                padding: .4rem 0;
                box-shadow: 4px 4px 12px rgba(0,0,0,.1);
                z-index: 2001;
            }

            .menu > li > ul > li:hover > ul {
                display: block;
            }

            .menu > li > ul > li > ul > li > a {
                display: block;
                padding: .4rem 1.2rem;
                color: #333;
                font-size: .85rem;
                text-decoration: none;
                white-space: nowrap;
            }

                .menu > li > ul > li > ul > li > a:hover {
                    background: #f4f7fb;
                    color: #1a3c6e;
                }

        /* 手機選單關閉列（由 site.js 注入）：桌機一律隱藏，手機在下方 media 內顯示 */
        .menu > li.menu-close {
            display: none;
        }

/* 漢堡（手機，預設隱藏） */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: .4rem;
}

    .menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: #1a3c6e;
        margin: 5px 0;
        border-radius: 2px;
        transition: .3s;
    }

@media (max-width: 900px) {
    .header-inner,
    .container.page-content {
        width: 100%;
    }

    .header-left,
    .header-center,
    .header-right {
        width: 100%;
        justify-content: center;
    }

    .header-left {
        order: 1;
        justify-content: flex-start;
    }

    .header-right {
        order: 2;
        justify-content: center;
        padding: .5rem 0;
    }

        .header-right .top_info {
            flex-direction: column;
            gap: .5rem;
            height: auto;
        }

    .menu-toggle {
        display: block;
        order: 3;
        margin-left: auto;
    }

    .menu {
        display: none;
        flex-direction: column;
    }

        .menu.open {
            display: flex;
        }

        .menu > li {
            width: 100%;
        }

            .menu > li > a {
                border-bottom: 1px solid #eee;
            }

        /* 所有層級下拉一律改成流式排版（取消 absolute / 陰影 / 邊框 / 最小寬度） */
        .menu ul {
            position: static !important;
            box-shadow: none !important;
            border: none !important;
            min-width: 0 !important;
            padding-left: 1rem;
        }

        /* 預設全部收合；點擊父項加上 .expanded 才展開（由 site.js 控制）
       同時覆蓋桌機的 :hover 展開規則，避免觸控誤觸或跑出畫面 */
        .menu > li > ul,
        .menu > li:hover > ul,
        .menu > li > ul > li > ul,
        .menu > li > ul > li:hover > ul {
            display: none;
        }

            .menu > li.expanded > ul,
            .menu > li > ul > li.expanded > ul {
                display: block;
            }

        /* 有子選單的項目加上 ▸ 指示，展開時轉向 */
        .menu li > a:not(:only-child)::after {
            content: "";
        }

        .menu > li.has-sub > a::after,
        .menu > li > ul > li.has-sub > a::after {
            content: "▸";
            float: right;
            transition: transform .2s;
        }

        .menu > li.has-sub.expanded > a::after,
        .menu > li > ul > li.has-sub.expanded > a::after {
            transform: rotate(90deg);
        }

    .menu-toggle {
        display: block;
    }

        .menu-toggle.is-active span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .menu-toggle.is-active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.is-active span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }
}

/* ══════════════════════════════════════════
   Footer  (#footer)
   ══════════════════════════════════════════ */
#footer {
    background: #1a3c6e;
    color: rgba(255,255,255,.75);
    padding: 3rem 1.5rem 1.5rem;
    font-size: .88rem;
}

ul.footer_menu {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1280px;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer_menu > li {
    flex: 1;
    min-width: 140px;
}

    .footer_menu > li > a {
        display: block;
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        margin-bottom: .6rem;
        font-size: .9rem;
    }

        .footer_menu > li > a:hover {
            color: #a8c4e8;
        }

    .footer_menu > li > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .footer_menu > li > ul > li {
            margin-bottom: .3rem;
        }

            .footer_menu > li > ul > li > a {
                color: rgba(255,255,255,.65);
                text-decoration: none;
                font-size: .83rem;
            }

                .footer_menu > li > ul > li > a:hover {
                    color: #fff;
                }

.footer-bottom {
    max-width: 1280px;
    margin: 2rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.15);
    text-align: center;
    font-size: .8rem;
    color: rgba(255,255,255,.5);
}

@media (max-width: 768px) {
    ul.footer_menu {
        flex-direction: column;
        gap: 1.2rem;
    }
}

/* ── Hero Section ── */
.hero {
    background: linear-gradient(135deg, #1a3c6e 0%, #2d6aad 100%);
    color: #fff;
    padding: 5rem 1.5rem;
    text-align: center;
}

    .hero h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        text-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

    .hero .lead {
        font-size: 1.15rem;
        color: rgba(255,255,255,.85);
        max-width: 600px;
        margin: 0 auto 1.8rem;
    }

    .hero .btn-light {
        font-weight: 600;
        padding: .6rem 2rem;
        border-radius: 2rem;
    }

/* ── Section Titles ── */
.section-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a3c6e;
    padding-bottom: .5rem;
    border-bottom: 3px solid #2d6aad;
    display: inline-block;
    margin-bottom: 1.5rem;
}

/* ── News Cards ── */
.news-card {
    border: none;
    border-radius: .5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: box-shadow .2s, transform .2s;
}

    .news-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,.14);
        transform: translateY(-3px);
    }

    .news-card .card-footer {
        background: transparent;
        border-top: 1px solid #f0f0f0;
        font-size: .8rem;
        color: #888;
    }

    .news-card .badge {
        font-size: .75rem;
        border-radius: .25rem;
    }

.news-card__media {
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: .5rem .5rem 0 0;
    background: #f0f2f5;
}

    .news-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s;
    }

.news-card:hover .news-card__media img {
    transform: scale(1.05);
}

/* 首頁最新消息：列間距（flex row-gap，與 Bootstrap gutter 無關，值可自訂） */
.news-grid {
    row-gap: 4rem;
}

/* ── Footer ── */
.site-footer {
    background-color: #1a3c6e;
    color: rgba(255,255,255,.75);
    padding: 2.5rem 0 1.5rem;
    font-size: .9rem;
}

    .site-footer a {
        color: rgba(255,255,255,.7);
        text-decoration: none;
    }

        .site-footer a:hover {
            color: #fff;
        }

/* ============================================================
   富文字內容基準（CKEditor 輸出；page 與 news 內文共用）
   前台未載入 CKEditor content-styles.css，故凡「靠 content style
   才成立」的輸出（表格框線、字級 class、highlight class、圖片置中…）
   一律在此補齊。編輯端工具列無對齊/表格屬性，無法自設，由此統一決定。
   單一來源：News 與 Page 兩個 View 不再各自定義 <style>。
   ============================================================ */

/* 內文排版基準（display:flow-root 讓區塊自行包住內部浮動圖片，不需額外 clearfix） */
.page-body,
.news-body {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #333;
    display: flow-root;
}

    /* CKEditor 手動裝飾器「顯示為按鈕」輸出的連結樣式 */
    .page-body a.link-cta,
    .news-body a.link-cta {
        display: inline-block;
        padding: .5rem 1.25rem;
        margin: .25rem .25rem .25rem 0;
        background-color: #fdf3c7; /* 依現有頁籤配色微調即可 */
        border: 1px solid #e0c86b;
        border-radius: .25rem;
        color: #5c4a10;
        text-decoration: none;
        font-weight: 500;
    }

        .page-body a.link-cta:hover,
        .news-body a.link-cta:hover {
            background-color: #f7e79a;
            text-decoration: none;
        }

    .page-body p,
    .news-body p {
        margin-bottom: 1.2rem;
    }

    /* 一般圖片（非 figure 包裹者，如貼上的 inline <img>） */
    .page-body img,
    .news-body img {
        max-width: 100%;
        height: auto;
    }

    /* 標題 / 引言 / 清單 */
    .page-body h2, .page-body h3, .page-body h4,
    .news-body h2, .news-body h3, .news-body h4 {
        margin-top: 1.75rem;
        margin-bottom: .75rem;
    }

    .page-body blockquote,
    .news-body blockquote {
        border-left: 3px solid #1a3c6e;
        padding-left: 1rem;
        color: #6c757d;
        margin: 1rem 0;
    }

    .page-body ul, .page-body ol,
    .news-body ul, .news-body ol {
        padding-left: 1.5rem;
    }

    /* 表格：置中 + 框線（CKEditor 新插入的表格無 inline 框線，靠這裡補；
   手動帶 inline style 的表格特異性較高會自動覆蓋，不衝突） */
    .page-body figure.table,
    .news-body figure.table {
        margin: 1rem auto;
        max-width: 100%;
        overflow-x: auto;
    }

        .page-body figure.table table,
        .news-body figure.table table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }

        .page-body figure.table td,
        .page-body figure.table th,
        .news-body figure.table td,
        .news-body figure.table th {
            border: 1px solid #dee2e6;
            padding: .5rem .75rem;
            vertical-align: middle;
        }

        .page-body figure.table th,
        .news-body figure.table th {
            background: #f8f9fa;
            font-weight: 600;
        }

        /* 表格標題（toggleTableCaption 產出的 figure.table > figcaption） */
        .page-body figure.table > figcaption,
        .news-body figure.table > figcaption {
            caption-side: top;
            text-align: center;
            font-weight: 600;
            padding: .4rem 0;
            color: #333;
        }

    /* 圖片 figure：置中、自適寬、caption */
    .page-body figure.image,
    .news-body figure.image {
        display: table;
        margin: 1rem auto;
        max-width: 100%;
    }

        .page-body figure.image img,
        .news-body figure.image img {
            width: 100%;
            height: auto;
        }

        .page-body figure.image > figcaption,
        .news-body figure.image > figcaption {
            display: table-caption;
            caption-side: bottom;
            text-align: center;
            font-size: .85rem;
            color: #6c757d;
            padding-top: .4rem;
        }

    /* resized 圖（figure 帶 inline width） */
    .page-body figure.image_resized img,
    .news-body figure.image_resized img {
        width: 100%;
    }

    /* 圖片對齊 class（工具列雖無按鈕，build 若含 contextual toolbar 也不走樣） */
    .page-body figure.image-style-block-align-center,
    .news-body figure.image-style-block-align-center {
        margin-left: auto;
        margin-right: auto;
    }

    .page-body figure.image-style-block-align-left,
    .news-body figure.image-style-block-align-left {
        margin-right: auto;
        margin-left: 0;
    }

    .page-body figure.image-style-block-align-right,
    .news-body figure.image-style-block-align-right {
        margin-left: auto;
        margin-right: 0;
    }

    /* 圖片靠左/靠右＋文繞圖（inline 版對齊，class 不帶 -block-；
   區別於上面的 block 版——block 版圖片自成一段不會環繞文字，這組才會）。
   工具列目前尚未開放對應按鈕，先備妥樣式；按鈕補上後即可生效。
   選擇器故意不綁 figure，因 CKEditor inline 圖片可能輸出為 <span> 而非 <figure>，
   實際 class 名稱仍須以當時 build 產出的原始碼再核對一次。 */
    .page-body .image-style-align-left,
    .news-body .image-style-align-left {
        float: left;
        margin: .25rem 1.25rem 1rem 0;
    }

    .page-body .image-style-align-right,
    .news-body .image-style-align-right {
        float: right;
        margin: .25rem 0 1rem 1.25rem;
    }

    /* 字級：CKEditor fontSize 預設輸出具名 class，前台需自行定義否則無效 */
    .page-body .text-tiny, .news-body .text-tiny {
        font-size: .7em;
    }

    .page-body .text-small, .news-body .text-small {
        font-size: .85em;
    }

    .page-body .text-big, .news-body .text-big {
        font-size: 1.4em;
    }

    .page-body .text-huge, .news-body .text-huge {
        font-size: 1.8em;
    }

    /* 螢光標記 highlight：marker = 背景、pen = 文字色 */
    .page-body .marker-yellow, .news-body .marker-yellow {
        background-color: #fdfd77;
    }

    .page-body .marker-green, .news-body .marker-green {
        background-color: #62f962;
    }

    .page-body .marker-pink, .news-body .marker-pink {
        background-color: #fc7999;
    }

    .page-body .marker-blue, .news-body .marker-blue {
        background-color: #72ccfd;
    }

    .page-body .pen-red, .news-body .pen-red {
        color: #e71313;
        background: transparent;
    }

    .page-body .pen-green, .news-body .pen-green {
        color: #128a00;
        background: transparent;
    }

    /* 待辦清單（todoList 啟用後的前台樣式） */
    .page-body .todo-list,
    .news-body .todo-list {
        list-style: none;
        padding-left: 1.2rem;
    }

        .page-body .todo-list .todo-list__label,
        .news-body .todo-list .todo-list__label {
            display: inline-flex;
            align-items: baseline;
            gap: .4rem;
        }

    /* ── YouTube 內嵌影片（RawHtml 頁貼入的 iframe）──
   固定 width/height 在窄螢幕會爆版；以 aspect-ratio 維持 16:9 並限制不超出容器。
   附加位置建議：site.css 富文字內容基準（.page-body / .news-body）區段末尾。 */
    .page-body iframe[src*="youtube.com/embed"],
    .page-body iframe[src*="youtube-nocookie.com/embed"],
    .news-body iframe[src*="youtube.com/embed"],
    .news-body iframe[src*="youtube-nocookie.com/embed"] {
        display: block;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        margin: 1rem auto;
        border: 0;
    }

/* ── Utilities ── */
.bg-corporate {
    background-color: #1a3c6e !important;
}

.text-corporate {
    color: #1a3c6e !important;
}

/* ── Responsive spacing for main content ── */
main > .container,
main > section > .container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* 內文頁容器加寬：覆蓋 Bootstrap .container 各斷點的 max-width（1140px 等）。
   寬螢幕時左右各留 10% 空白（width: 80%），最大不超過 1440px。
   雙 class（0,2,0）特異性高於 Bootstrap 的單 class（0,1,0），媒體查詢不影響
   特異性比較，故不需 !important。只影響掛 .page-content 的頁，首頁/清單頁不動。
   注意與上方 .header-inner 的 max-width 同寬，兩處請一起調。 */
.container.page-content {
    width: 80%; /* 寬螢幕時左右各留 10% 空白 */
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Button: primary outline corporate colour ── */
.btn-outline-primary {
    --bs-btn-color: #1a3c6e;
    --bs-btn-border-color: #1a3c6e;
    --bs-btn-hover-bg: #1a3c6e;
    --bs-btn-hover-border-color: #1a3c6e;
    --bs-btn-active-bg: #1a3c6e;
}

.btn-primary {
    --bs-btn-bg: #1a3c6e;
    --bs-btn-border-color: #1a3c6e;
    --bs-btn-hover-bg: #2d6aad;
    --bs-btn-hover-border-color: #2d6aad;
    --bs-btn-active-bg: #2d6aad;
}

/* ── Anchor colour inside cards ── */
.news-card .card-title a:hover {
    color: #2d6aad !important;
}

/* ============================================================
   區段導覽 + mega-menu（.menu--section 才套用；附加於檔尾）
   桌機：群組欄以 hover 展開大面板；手機：見檔尾 900px 手風琴規則
   ============================================================ */
.menu--section .has-mega,
.menu .has-mega {
    position: relative;
}

.menu--section .mega-trigger::after,
.menu .mega-trigger::after {
    content: "▾";
    font-size: .75em;
    margin-left: .35em;
    opacity: .7;
}

.menu--section .mega-panel,
.menu .mega-panel {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 720px;
    max-width: 96vw;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    border-radius: 8px;
    padding: 24px 28px;
    z-index: 1000;
}

.menu--section .has-mega:hover .mega-panel,
.menu .has-mega:hover .mega-panel,
.menu--section .has-mega:focus-within .mega-panel,
.menu .has-mega:focus-within .mega-panel {
    display: block;
}

.menu--section .mega-grid,
.menu .mega-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
}

.menu--section .mega-col,
.menu .mega-col {
    min-width: 150px;
}

.menu--section .mega-col__title,
.menu .mega-col__title {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 2px solid #e3e9f2;
    border-radius: 0;
    text-align: left;
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    color: #1a3c6e;
    margin: 0 0 10px;
    padding: 0 0 6px;
    cursor: default;
    text-decoration: none;
}

.menu--section .mega-col__title--link,
.menu .mega-col__title--link {
    cursor: pointer;
}

    .menu--section .mega-col__title--link:hover,
    .menu .mega-col__title--link:hover {
        color: #2d6aad;
        text-decoration: underline;
    }

.menu--section .mega-col ul,
.menu .mega-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu--section .mega-col li,
.menu .mega-col li {
    margin: 0 0 8px;
}

.menu--section .mega-col a,
.menu .mega-col a {
    color: #555;
    text-decoration: none;
    font-size: .9rem;
    display: inline-block;
}

    .menu--section .mega-col a:hover,
    .menu .mega-col a:hover {
        color: #2d6aad;
        text-decoration: underline;
    }

/* ========== 蜜罐欄位（StakeholderSurvey / Subscription 共用） ==========
   移出可視範圍而非 display:none —— 較聰明的機器人會跳過 display:none 的欄位，
   off-screen 定位對它們而言看起來仍是「正常欄位」，誘餌效果較好。 */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── 投資人專區：檔案清單 ── */
.file-list thead th {
    background-color: #7fa8d9;
    color: #fff;
    text-align: center;
    font-weight: 500;
}

.file-list__link {
    color: #1a3c6e;
    text-decoration: none;
}

    .file-list__link:hover {
        text-decoration: underline;
    }

.file-list__filter label {
    white-space: nowrap;
}

/* ============================================================
   原始 HTML 模式（PageContent EditMode = RawHtml）的內文容器
   刻意「幾乎不設樣式」：版面完全交給後台人員自己寫的 CSS。
   只保留 flow-root（讓區塊自行包住內部浮動元素，避免版面塌陷）。
   若日後發現有人貼超寬表格/圖片撐破版面，再考慮加 overflow 保護，
   但預設不加，以免與使用者自訂樣式打架。
   ============================================================ */
.page-raw {
    display: flow-root;
}

/* ── 麵包屑導覽 ── */
.breadcrumb-bar {
    border-top: 3px solid #2d6aad;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.breadcrumb-trail {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: .6rem 0;
    font-size: .875rem;
}

    .breadcrumb-trail li + li::before {
        content: "＞";
        margin: 0 .5rem;
        color: #adb5bd;
        font-size: .75em;
    }

    .breadcrumb-trail a {
        color: #2d6aad;
        text-decoration: none;
    }

        .breadcrumb-trail a:hover {
            text-decoration: underline;
        }

    .breadcrumb-trail span[aria-current] {
        color: #6c757d;
    }


/* 消息分類篩選列 */
.news-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.news-filter__group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.news-filter__cta {
    margin-left: auto;
}

.news-filter .btn i {
    margin-right: .35rem;
}

/* 無縮圖時的占位（維持 16:9，卡片高度不因有無圖而變） */
.news-card__media.is-empty {
    background: #f0f2f5 url('/images/logo.png') center/80px no-repeat;
    opacity: .35;
}

/* 標題固定 2 行、摘要固定 3 行，超出以 … 截斷 */
.news-card .card-body {
    display: flex;
    flex-direction: column;
}

.news-card .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
    line-height: 1.5;
}

.news-card .card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.5em;
    line-height: 1.5;
    margin-bottom: 0;
}

.news-card .card-footer {
    margin-top: auto;
}

/* ============================================================
   手機（≤900px）：mega-menu 改兩層手風琴、一欄顯示
   第一層：點 .mega-trigger → 展開 .mega-panel
   第二層：點 .mega-col__title → 展開該群組的 ul
   狀態 class .expanded / aria-expanded 由 site.js 控制
   ============================================================ */
@media (max-width: 900px) {

    /* 選單放到 header 最下方（原本 header-center 沒設 order，展開時會跑到 Logo 上面） */
    .header-center {
        order: 4;
    }

    /* 漢堡放大，好點也好認 */
    .menu-toggle {
        padding: .6rem;
    }

        .menu-toggle span {
            width: 28px;
            height: 3px;
            margin: 6px 0;
        }

    /* 選單展開時最上方的關閉列（由 site.js 注入）；桌機由前面的 display:none 隱藏 */
    .menu > li.menu-close {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        border-bottom: 1px solid #eee;
    }

        .menu > li.menu-close button {
            background: none;
            border: 0;
            padding: .75rem 1.1rem;
            font: inherit;
            font-size: .9rem;
            color: #1a3c6e;
            cursor: pointer;
        }

    /* ── 第一層：mega-panel 預設收合，覆蓋桌機的 hover / focus-within ── */
    .menu--section .mega-panel,
    .menu .mega-panel,
    .menu--section .has-mega:hover .mega-panel,
    .menu .has-mega:hover .mega-panel,
    .menu--section .has-mega:focus-within .mega-panel,
    .menu .has-mega:focus-within .mega-panel {
        display: none;
        position: static;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0 0 .5rem 1rem;
    }

    .menu--section .has-mega.expanded > .mega-panel,
    .menu .has-mega.expanded > .mega-panel {
        display: block;
    }

    /* trigger 顯示 ▸，展開時轉 90 度（樣式對齊既有 has-sub 規則） */
    .menu--section .mega-trigger::after,
    .menu .mega-trigger::after {
        content: "▸";
        float: right;
        margin-left: 0;
        opacity: 1;
        font-size: 1em;
        transition: transform .2s;
    }

    .menu--section .has-mega.expanded > .mega-trigger::after,
    .menu .has-mega.expanded > .mega-trigger::after {
        transform: rotate(90deg);
    }

    /* ── 一欄 ── */
    .menu--section .mega-grid,
    .menu .mega-grid {
        flex-direction: column;
        gap: 0;
    }

    .menu--section .mega-col,
    .menu .mega-col {
        min-width: 0;
    }

    /* ── 第二層：群組標題可點，子項預設收合 ── */
    .menu--section .mega-col__title,
    .menu .mega-col__title {
        border-bottom: 1px solid #eee;
        font-size: .9rem;
        margin: 0;
        padding: .6rem 0;
        cursor: pointer;
    }

    .menu--section button.mega-col__title::after,
    .menu button.mega-col__title::after {
        content: "▸";
        float: right;
        transition: transform .2s;
    }

    .menu--section .mega-col.expanded > .mega-col__title::after,
    .menu .mega-col.expanded > .mega-col__title::after {
        transform: rotate(90deg);
    }

    .menu--section .mega-col ul,
    .menu .mega-col ul {
        display: none;
        padding: .25rem 0 .25rem 1rem;
    }

    .menu--section .mega-col.expanded > ul,
    .menu .mega-col.expanded > ul {
        display: block;
    }

    .menu--section .mega-col li,
    .menu .mega-col li {
        margin: 0;
    }

        .menu--section .mega-col li > a,
        .menu .mega-col li > a {
            display: block;
            padding: .5rem 0;
            font-size: .87rem;
        }
}