/* 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;
}

/* 內容區域 */
.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);
}

.psd-type-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

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

.psd-type-tab img {
    width: min(8.906vw, 171px);
    height: min(2.76vw, 53px);
}

.psd-type-tab:nth-child(2) img,
.psd-type-tab:nth-child(3) img {
    width: min(8.958vw, 172px);
}

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

/* 篩選列 - 下拉按鈕 */
.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: 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;
}

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