/* News Page Styles */
/* 專用於 news.html 頁面 */

/* Container */
.psd-container {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
}

/* 背景圖層 */
.psd-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Banner */
.psd-banner {
    position: relative;
    width: 100%;
    height: min(16.979vw, 326px);
    object-fit: cover;
    z-index: 1;
    margin-top: 7vw;
}

/* Banner wrap + 壓字（字級比照 /history hero-banner-title）*/
.psd-banner-wrap {
    position: relative;
    z-index: 1;
    margin-top: 7vw;
}
.psd-banner-wrap .psd-banner {
    margin-top: 0;
    display: block;
}
.psd-banner-title {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0 8%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: clamp(32px, 3vw, 56px);
    font-weight: 700;
    color: #fff;
    letter-spacing: 6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    z-index: 2;
}

/* 內容區域 */
.psd-content {
    position: relative;
    z-index: 2;
    padding-top: min(3vw, 60px);
    padding-left: min(13.125vw, 252px);
    padding-right: 13.125vw;
    padding-bottom: 20px;
}

/* 頂部資訊列 - 麵包屑和分享 */
.psd-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: min(3.125vw, 60px);
}

/* 副標題/麵包屑 */
.psd-breadcrumb {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 100;
    font-size: min(1.25vw, 24px);
    color: #000000;
    white-space: nowrap;
}

/* 分享區塊 */
.psd-share {
    display: flex;
    align-items: center;
    gap: min(0.833vw, 16px);
}

.psd-share-text {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    font-size: min(1.25vw, 24px);
    color: #000000;
}

.psd-share-icons {
    width: min(7.656vw, 147px);
    height: min(1.823vw, 35px);
}

/* 分類標籤 */
.psd-type-tabs {
    display: flex;
    justify-content: center;
    gap: min(2.604vw, 50px);
    margin-bottom: min(3.125vw, 60px);
    flex-wrap: wrap;
}

.psd-type-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(8.906vw, 171px);
    height: min(2.76vw, 53px);
    border-radius: 0.4vw;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.psd-type-tab:hover { opacity: 0.85; }

.psd-type-tab.is-active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.psd-type-tab img {
    display: none;
}

.psd-type-tab span {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 600;
    font-size: min(1.25vw, 24px);
    color: #ffffff;
    white-space: nowrap;
}

/* 4 種分類同色系：tab 實心白字 / news-tag 實心白字 / divider 實心 */
.psd-type-tab--industry,
.psd-news-tag--industry { background-color: #004a89; }
.psd-news-divider--industry { background-color: #004a89; }

.psd-type-tab--gov,
.psd-news-tag--gov { background-color: #4f87b2; }
.psd-news-divider--gov { background-color: #4f87b2; }

.psd-type-tab--media,
.psd-news-tag--media { background-color: #f5a623; }
.psd-news-divider--media { background-color: #f5a623; }

.psd-type-tab--course,
.psd-news-tag--course { background-color: #3a9b54; }
.psd-news-divider--course { background-color: #3a9b54; }

.psd-type-tab--wine,
.psd-news-tag--wine { background-color: #8b2c3b; }
.psd-news-divider--wine { background-color: #8b2c3b; }

/* 篩選列 - 下拉按鈕 */
.psd-filter-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: min(2.604vw, 50px);
}

/* 最新消息下拉按鈕 */
.psd-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

.psd-dropdown:hover {
    opacity: 0.85;
}

.psd-dropdown-bg {
    width: min(11.458vw, 220px);
    height: min(2.656vw, 51px);
}

.psd-dropdown-text {
    position: absolute;
    left: min(1.354vw, 26px);
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    font-size: min(1.25vw, 24px);
    color: #ffffff;
    white-space: nowrap;
}

.psd-dropdown-arrow {
    position: absolute;
    right: min(0.938vw, 18px);
    font-size: min(0.833vw, 16px);
    color: #ffffff;
}

/* 新聞列表 - 使用正常文檔流 */
.psd-news-list {
    width: 100%;
    margin-bottom: min(2.604vw, 50px);
}

/* 新聞列 */
.psd-news-row {
    width: 100%;
}

/* 新聞項目 */
.psd-news-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: min(4.063vw, 78px);
    cursor: pointer;
    transition: opacity 0.2s;
}

.psd-news-item:hover {
    opacity: 0.8;
}

/* 日期 */
.psd-news-date {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 300;
    font-size: min(1.25vw, 24px);
    color: #000000;
    width: min(7.917vw, 152px);
    flex-shrink: 0;
}

/* 標籤 */
.psd-news-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(6.979vw, 134px);
    height: min(2.5vw, 48px);
    border-radius: 0.4vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    font-size: min(1.25vw, 24px);
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

a.psd-news-tag:hover { opacity: 0.85; color: #ffffff; text-decoration: none; }

.psd-news-tag--primary {
    background-color: #004a89;
}

.psd-news-tag--secondary {
    background-color: #4f87b2;
}

/* 新聞標題 */
.psd-news-title {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    font-size: min(1.25vw, 24px);
    color: #000000;
    margin-left: min(1.042vw, 20px);
    white-space: nowrap;
}

/* 分隔線 */
.psd-news-divider {
    width: 100%;
    height: 0;
    border: none;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    margin: 0;
}

.psd-news-divider--primary {
    border-bottom-color: #909090;
}

.psd-news-divider--secondary {
    border-bottom-color: #909090;
}

/* 分頁 - 使用正常文檔流，置中 */
.psd-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(2.292vw, 44px);
}

.psd-pagination-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

.psd-pagination-arrow:hover {
    opacity: 0.7;
}

.psd-pagination-arrow img {
    width: min(0.625vw, 12px);
    height: min(0.573vw, 11px);
}

.psd-pagination-num {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    font-size: min(1.25vw, 24px);
    color: #000000;
    cursor: pointer;
    transition: opacity 0.2s;
}

.psd-pagination-num:hover {
    opacity: 0.7;
}

.psd-pagination-num--active {
    font-weight: 500;
    position: relative;
}

.psd-pagination-num--active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    width: min(1.615vw, 31px);
    height: min(0.116vw, 2px);
    background-color: #333;
}

/* ========================================
   新聞內容頁樣式 (news_content.html)
   ======================================== */

/* 文章主要區塊 */
.article-main {
    margin-bottom: min(4vw, 80px);
}

/* 文章標題與下拉按鈕區 */
.article-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: min(1.5vw, 30px);
}

/* 文章主標題 */
.article-title {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 700;
    font-size: min(2.5vw, 48px);
    line-height: 1.3;
    color: #000000;
    margin: 0;
}

/* 文章日期 */
.article-date {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 300;
    font-size: min(1.25vw, 24px);
    color: #000000;
    margin-bottom: min(3vw, 60px);
}

/* 文章內文 */
.article-body {
    margin-bottom: min(3vw, 60px);
}

.article-body p {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    font-size: min(1.25vw, 24px);
    line-height: 1.9;
    color: #000000;
    margin: 0 0 min(1vw, 20px) 0;
}

.article-body p:last-child {
    margin-bottom: 0;
}

/* 文章圖片區 */
.article-images {
    margin-bottom: min(3vw, 60px);
}

.article-images-row {
    display: flex;
    justify-content: center;
    gap: 1.7vw;
    margin-bottom: min(1vw, 20px);
}

.article-images-row:last-child {
    margin-bottom: 0;
}

.article-image-item {
    margin: 0;
    max-width: min(20.2vw, 390px);
}

/* 當一行只有 1-2 張圖片時，使用 45% 寬度 */
.article-images-row--few {
    gap: 3vw;
}

.article-images-row--few .article-image-item {
    width: 47%;
    max-width: none;
}

.article-images-row--few .article-image-item img {
    height: auto;
    aspect-ratio: 390 / 258;
}

.article-image-item img {
    width: 100%;
    height: min(13.4vw, 258px);
    object-fit: cover;
    display: block;
}

.article-image-item figcaption {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    font-size: min(0.6vw, 9px);
    color: #004a89;
    margin-top: min(0.26vw, 5px);
    text-align: center;
}

/* 相關文章列表 */
.related-articles {
    margin-bottom: min(4vw, 80px);
}

.related-articles-label {
    display: inline-block;
    background-color: #004a89;
    color: #ffffff;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    font-size: 1.1vw;
    padding: 0.3vw 3vw;
    margin-bottom: min(1.3vw, 25px);
    border-radius: min(0.5vw, 10px);
}

.related-articles-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-articles-list li {
    margin-bottom: 5px;
    height: 1.7vw;
}

.related-articles-list li:last-child {
    margin-bottom: 0;
}

.related-articles-list a {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    font-size: min(1.25vw, 24px);
    line-height: 1.5;
    color: #000000;
    text-decoration: none;
    transition: color 0.2s;
}

.related-articles-list a:hover {
    color: #004a89;
}

/* 控制項（上一則/返回列表/下一則） */
.article-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(5vw, 100px);
    margin-bottom: min(2vw, 40px);
}

.article-control-btn {
    display: flex;
    align-items: center;
    gap: min(0.3vw, 6px);
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    font-size: min(1.1vw, 21px);
    color: #004a89;
    text-decoration: none;
    transition: opacity 0.2s;
}

.article-control-btn:hover {
    opacity: 0.7;
}

.article-control-btn .arrow {
    font-size: min(0.7vw, 14px);
}

/* 麵包屑連結 */
.psd-breadcrumb a {
    color: #004a89;
    text-decoration: none;
}
.psd-breadcrumb a:hover {
    text-decoration: underline;
}

/* 分享按鈕區塊（FB / LINE / 複製連結） */
.psd-share-buttons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.psd-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e5e5;
    text-decoration: none;
    transition: all 0.18s;
    cursor: pointer;
}
.psd-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    background: #f7faff;
}
.psd-share-btn svg { display: block; }
.psd-share-btn-fb:hover { border-color: #1877f2; background: #f0f6fe; }
.psd-share-btn-line:hover { border-color: #06c755; background: #f0fbf3; }
.psd-share-btn-link:hover { border-color: #888; }
.psd-share-btn.copied { background: #e6f9ec; border-color: #06c755; }

/* 分類 tag 旁 article 標題 */
.article-cate-badge {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 16px;
    border-radius: 999px;
    background: #004a89;
    color: #fff;
    font-size: clamp(13px, 1vw, 16px);
}

/* 分頁 - CI3 pagination 預設用 <a><b> 等不規則標記，給定範圍樣式 */
.psd-pagination a,
.psd-pagination b,
.psd-pagination strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    margin: 0 3px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #004a89;
    font-weight: 500;
    transition: all 0.2s;
}
.psd-pagination a:hover {
    background: #e8f0f8;
    border-color: #004a89;
}
.psd-pagination strong,
.psd-pagination b {
    background: #004a89;
    color: #fff;
    border-color: #004a89;
}
/* CI3 產生的箭頭連結無 class，SVG 原始尺寸 850x992，需限制大小 */
.psd-pagination a img {
    width: 12px;
    height: 11px;
}

/* ============================================================
   Tablet (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .psd-banner {
        margin-top: 80px;
        height: 28vw;
    }
    .psd-banner-wrap {
        margin-top: 80px;
    }
    .psd-content {
        padding-top: 32px;
        padding-left: 6%;
        padding-right: 6%;
    }
    .psd-top-bar {
        margin-bottom: 28px;
    }
    .psd-breadcrumb,
    .psd-share-text {
        font-size: 16px;
    }
    .psd-type-tabs {
        gap: 12px;
        margin-bottom: 32px;
        flex-wrap: wrap;
    }
    .psd-type-tab {
        width: auto;
        height: auto;
        padding: 8px 16px;
    }
    .psd-type-tab span {
        font-size: 15px;
    }
    .psd-news-list {
        font-size: 15px;
    }
    /* article */
    .article-title {
        font-size: 24px !important;
        line-height: 1.4;
    }
    .article-date {
        font-size: 14px;
    }
    .article-body {
        font-size: 15px;
        line-height: 1.85;
    }
    .article-body p {
        margin-bottom: 14px;
    }
    .article-images-row {
        gap: 12px;
    }
    .article-image-item img {
        height: auto;
    }
    .article-control-btn {
        font-size: 15px;
    }
}

/* ============================================================
   Mobile (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
    .psd-banner {
        margin-top: 64px;
        height: 38vw;
    }
    .psd-banner-wrap {
        margin-top: 64px;
    }
    .psd-banner-title {
        font-size: clamp(22px, 5vw, 32px);
        letter-spacing: 3px;
        padding: 0 6%;
        justify-content: center;
    }
    .psd-content {
        padding-top: 24px;
        padding-left: 5%;
        padding-right: 5%;
    }
    .psd-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }
    .psd-breadcrumb,
    .psd-share-text {
        font-size: 14px;
    }
    .psd-share {
        gap: 10px;
    }
    /* 4 tabs 改成 2x2 grid */
    .psd-type-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .psd-type-tab {
        width: auto;
        height: auto;
        padding: 10px 8px;
        justify-content: center;
    }
    .psd-type-tab span {
        font-size: 14px;
    }
    .psd-filter-bar {
        margin-bottom: 16px;
    }
    /* 新聞列表 - 改為垂直排版（日期+標籤一行、標題另一行） */
    .psd-news-list {
        width: 100%;
        margin-bottom: 16px;
    }
    .psd-news-row {
        margin-bottom: 4px;
    }
    .psd-news-item {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 12px 0 !important;
        gap: 8px;
    }
    .psd-news-date {
        width: auto !important;
        font-size: 13px !important;
        color: #666;
    }
    .psd-news-tag {
        width: auto !important;
        height: auto !important;
        min-width: 64px;
        font-size: 12px !important;
        padding: 3px 12px !important;
        border-radius: 4px !important;
    }
    .psd-news-title {
        white-space: normal !important;
        font-size: 14px !important;
        margin-left: 0 !important;
        line-height: 1.5;
        flex-basis: 100%;
    }
    /* ====== 詳細頁 (news_content) 手機版 ====== */
    /* 分享圖示放大可見 */
    .psd-share-icons {
        width: 110px !important;
        height: 26px !important;
    }
    /* article header */
    .article-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 14px;
        margin-bottom: 16px !important;
    }
    .article-title {
        font-size: 20px !important;
        line-height: 1.4;
    }
    /* 分類下拉（沿用 design 樣式但放大） */
    .psd-dropdown-bg {
        width: 160px !important;
        height: 38px !important;
    }
    .psd-dropdown-text {
        left: 18px !important;
        font-size: 14px !important;
    }
    .psd-dropdown-arrow {
        right: 14px !important;
        font-size: 12px !important;
    }
    .article-date {
        font-size: 13px !important;
        margin-bottom: 18px !important;
    }
    /* article 內文 */
    .article-body {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 24px !important;
    }
    .article-body p {
        font-size: 14px !important;
        line-height: 1.85 !important;
        margin-bottom: 12px !important;
    }
    /* article images - 手機改為 1 欄 */
    .article-images {
        margin-bottom: 24px !important;
    }
    .article-images-row,
    .article-images-row--few {
        display: flex !important;
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .article-image-item {
        width: 100% !important;
    }
    .article-image-item img {
        width: 100% !important;
        height: auto !important;
    }
    .article-image-item figcaption {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-top: 6px !important;
    }
    /* 熱門文章區塊 */
    .related-articles {
        margin-bottom: 24px !important;
    }
    .related-articles-label {
        font-size: 14px !important;
        padding: 6px 18px !important;
        border-radius: 6px !important;
        margin-bottom: 12px !important;
    }
    .related-articles-list li {
        height: auto !important;
        margin-bottom: 8px !important;
        line-height: 1.6;
    }
    .related-articles-list a {
        font-size: 13px !important;
        line-height: 1.5;
    }
    /* 控制項（上一則 / 返回列表 / 下一則） */
    .article-controls {
        flex-direction: row !important;
        gap: 8px !important;
        flex-wrap: wrap;
    }
    .article-control-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        font-size: 13px !important;
        padding: 10px 6px !important;
        background: #f5f8fc;
        border-radius: 6px;
        gap: 4px !important;
    }
    .article-control-btn .arrow {
        font-size: 11px !important;
    }
    /* pagination smaller */
    .psd-pagination a,
    .psd-pagination b,
    .psd-pagination strong {
        min-width: 30px;
        height: 30px;
        font-size: 13px;
        padding: 0 6px;
        margin: 0 2px;
    }
}

/* ============================================================
   Small Mobile (max-width: 400px)
   ============================================================ */
@media (max-width: 400px) {
    .psd-content {
        padding-left: 4%;
        padding-right: 4%;
    }
    .psd-news-title {
        font-size: 13px !important;
    }
    .psd-news-tag {
        font-size: 11px !important;
        padding: 2px 8px !important;
    }
    .article-title {
        font-size: 18px !important;
    }
    .article-body {
        font-size: 13px;
    }
}