/* Latest News Section */
.latest-news-section {
    display: flex;
    width: 100%;
    max-width: 120rem; /* 1920px */
    min-height: 43.75rem; /* 700px */
    padding-bottom: 3.75rem; /* 60px */
    flex-direction: column;
    align-items: center;
    gap: 1.875rem; /* 30px */
    margin: 0 auto;
    background-color: var(--Black);
}

/* 新聞輪播容器 */
.news-carousel-container {
    position: relative;
    width: 100%;
    height: 37.5rem; /* 600px */
    margin-top: 5rem; /* 為固定 navbar 留出空間，約 80px */
}

.news-article-container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 37.5rem; /* 600px */
    background-color: #11131c; /* 整體深色背景 */
    border-radius: var(--border-radius-3);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
}

/* 當前顯示的新聞項目 */
.news-article-container.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.article-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10rem 5.625rem 12rem 5.625rem;
    flex: 0 0 40%; /* 左邊區塊佔40% */
    gap: clamp(1.5rem, 4vw, 3rem);
    background: linear-gradient(102deg, #0042FF -5.45%, #FFF 200%);
}

.article-headline {
    color: var(--White);
    font-family: "Funnel Display", -apple-system, Roboto, Helvetica, sans-serif;
    font-size: clamp(36px, 2.25rem, 999px); /* 響應式字體 */
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    max-width: 35.8125rem; /* 573px */
}

.read-article-button {
    display: inline-flex;
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    margin-top: 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem; /* 10px */
    border-radius: 0.1875rem; /* 3px */
    cursor: pointer;
    background-color: var(--White);
    color: var(--Primary-Blue);
    border: none;
    transition: all 0.3s ease;
    font-family: "Funnel Sans", -apple-system, Roboto, Helvetica, sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.125rem); /* 響應式字體 */
    font-weight: 400;
    text-transform: capitalize;
    align-self: flex-start;
}

.read-article-button:hover {
    background-color: transparent;
    border: 0.09375rem solid var(--White); /* 1.5px */
    color: var(--White);
    transform: translateY(-0.0625rem); /* -1px */
}

.read-article-button:active {
    transform: translateY(0);
}

.button-text {
    position: relative;
}

.article-image-section {
    background-color: #11131c;
    flex: 0 0 60%; /* 右邊區塊佔60% */
    padding: 0;
    overflow: hidden;
    position: relative; /* 為絕對定位的圖片提供參考點 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-image {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例並填滿容器，自動裁切多餘部分 */
    object-position: center; /* 圖片居中顯示 */
}

.progress-indicator {
    width: 9.375rem; /* 150px */
    height: 0.625rem; /* 10px */
    flex-shrink: 0;
    position: relative;
}

.progress-track {
    width: 9.375rem; /* 150px */
    height: 0.625rem; /* 10px */
    flex-shrink: 0;
    border-radius: 0.0625rem; /* 1px */
    position: relative;
    background-color: var(--White);
}

.progress-fill {
    width: 3.125rem; /* 50px - 三等份的一份 */
    height: 0.625rem; /* 10px */
    flex-shrink: 0;
    border-radius: 0.0625rem; /* 1px */
    position: absolute;
    left: 0; /* 初始位置在左邊 */
    top: 0;
    background-color: var(--Primary-Blue);
    transition: left 0.4s ease;
}

/* News Detail Section */
.news-banner {
    width: 100%;
    background-color: var(--Black);
    padding: 6.25rem 6.25rem 3.75rem; /* 100px 100px 60px */
}

.divider-line {
    width: 100%;
    height: 1.5px;
    background-color: var(--White);
    margin-bottom: 7rem;
}

.divider-line.list-mode {
    margin-bottom: 0rem; /*列表模式時減少間距 */
}

.banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1.875rem; /* 30px */
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.875rem; /* 30px */
}

.page-title {
    color: var(--White);
    font-family: "Funnel Display";
    font-size: clamp(50px, 3.125rem, 999px);
    font-weight: 700;
    margin: 0;
    line-height: normal;
}

.filter-controls {
    display: flex;
    gap: 1.875rem; /* 30px */
    align-items: center;
}

.year-filter,
.category-filter {
    width: 21.875rem; /* 350px */
    height: 3.75rem; /* 60px */
    position: relative;
    cursor: pointer;
}

.news-filter-container {
    position: relative;
}

.news-filter-trigger {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem; /* 左右內距 */
}

.filter-text {
    color: var(--White);
    font-family: "Funnel Sans";
    font-size: clamp(24px, 1.5rem, 999px);
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    flex: 1; /* 佔據剩餘空間 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-border {
    width: 100%;
    height: 100%;
    border-radius: 0.3125rem; /* 5px */
    border: 0.09375rem solid var(--White); /* 1.5px */
    position: absolute;
    left: 0;
    top: 0;
}

.news-filter-icon-container {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 防止圖標被壓縮 */
}

.news-filter-icon {
    width: 1rem;
    height: 0.75rem; 
    display: block;
}

.news-filter-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #232323; /* 深色背景，參考 Product_Info */
    border-radius: 0.3125rem; /* 5px */
    border: 0.09375rem solid var(--White); /* 1.5px */
    z-index: 1000;
    display: none;
}

.news-filter-menu.show {
    display: block;
}

.news-filter-item {
    padding: 0.75rem 1rem; /* 12px 16px */
    color: #ffffff !important; /* 強制白色，使用 !important */
    font-family: "Funnel Sans", -apple-system, Roboto, Helvetica, sans-serif;
    font-size: clamp(24px, 1.25rem, 999px);
    font-weight: 400;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.news-filter-item:hover {
    background-color: #2d2d2d; /* 深色懸停背景 */
    color: #ffffff !important; /* 強制白色 */
}

.news-filter-item.selected,
.news-filter-item.active {
    color: #ffffff !important; /* 強制白色 */
    background-color: transparent;
}

.news-filter-item:first-child {
    border-top-left-radius: 0.3125rem; /* 5px */
    border-top-right-radius: 0.3125rem; /* 5px */
}

.news-filter-item:last-child {
    border-bottom-left-radius: 0.3125rem; /* 5px */
    border-bottom-right-radius: 0.3125rem; /* 5px */
}

.view-all-btn {
    display: flex;
    width: 8.1875rem; /* 131px */
    height: 3.75rem; /* 60px */
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    justify-content: center;
    align-items: center;
    gap: 0.625rem; /* 10px */
    border-radius: 0.1875rem; /* 3px */
    border: 0.09375rem solid var(--White); /* 1.5px */
    background: transparent;
    cursor: pointer;
    color: var(--White);
    font-family: "Funnel Sans", -apple-system, Roboto, Helvetica, sans-serif;
    font-size: clamp(24px, 1.5rem, 999px);
    font-weight: 400;
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    background-color: var(--White);
    color: var(--Black);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1.875rem; /* 30px */
    max-width: 107.5rem; /* 1720px */
    margin: 0 auto;
}

.news-card {
    display: flex;
    flex-direction: column;
    background-color: transparent; /* 移除白色背景 */
    border-radius: 0.3125rem; /* 5px */
    overflow: hidden;
    box-shadow: var(--Box-Shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* .news-card:hover {
    transform: translateY(-0.3125rem);
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.15);
} */ /* 註解掉卡片hover上浮效果 */

.card-image-container {
    width: 100%;
    height: 17.3125rem; /* 277px */
    position: relative;
    overflow: hidden;
    border-radius: 0.3125rem 0.3125rem 0 0; /* 只有上方有圓角 */
    background-color: transparent; /* 確保沒有白色背景 */
    cursor: pointer; /* 添加指針游標 */
    transition: transform 0.3s ease; /* 添加過渡效果 */
}

/* .card-image-container:hover {
    transform: translateY(-0.125rem);
} */ /* 註解掉圖片容器hover上移效果 */

.card-image-container.card-image-dark {
    background-color: var(--Black);
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-image {
    width: calc(100% + 0.125rem); /* 稍微超出容器 */
    height: calc(100% + 0.125rem); /* 稍微超出容器 */
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 0.3125rem 0.3125rem 0 0; /* 與容器相同的上方圓角 */
    display: block; /* 確保是塊級元素 */
    margin: -0.0625rem 0 0 -0.0625rem; /* 負邊距來覆蓋白邊 */
}

/* .news-card:hover .card-image {
    transform: scale(1.05);
} */ /* 註解掉圖片縮放效果 */

.netflix-logo {
    width: 25.875rem; /* 414px */
    height: 7rem; /* 112px */
    object-fit: contain;
    border-radius: 0.3125rem 0.3125rem 0 0; /* 與容器相同的上方圓角 */
    margin: -0.0625rem 0 0 -0.0625rem; /* 負邊距來覆蓋白邊 */
}

.card-content {
    padding: 1.6875rem 2.0625rem; /* 27px 33px */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    min-height: 17.9375rem; /* 287px */
    background-color: var(--White); /* 確保內容區域有白色背景 */
    border-radius: 0 0 0.3125rem 0.3125rem; /* 只有下方有圓角 */
}

.article-category {
    color: var(--Black);
    letter-spacing: 0.03rem; /* 0.48px */
    text-transform: uppercase;
    margin: 0 0 1.25rem 0; /* 0 0 20px 0 */
    font-family: "Funnel Sans", -apple-system, Roboto, Helvetica, sans-serif;
    font-size: clamp(16px, 1rem, 999px);
    font-weight: 400;
    line-height: 1.5;
}

.article-title {
    color: var(--Black);
    margin: 0 0 1.875rem 0; /* 0 0 30px 0 */
    font-family: "Funnel Sans", -apple-system, Roboto, Helvetica, sans-serif;
    font-size: clamp(24px, 1.5rem, 999px);
    font-weight: 400;
    line-height: 1.2;
    flex-grow: 1;
    cursor: pointer; /* 添加指針游標 */
    /* transition: color 0.3s ease; */ /* 移除顏色過渡效果 */
}

/* .article-title:hover {
    color: var(--Primary-Blue);
} */ /* 移除hover變色效果 */

.read-article-btn {
    display: inline-flex;
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    align-items: center;
    gap: 0.625rem; /* 10px */
    border-radius: 0.1875rem; /* 3px */
    border: none;
    background-color: var(--Primary-Blue);
    cursor: pointer;
    color: var(--White);
    text-transform: capitalize;
    font-family: "Funnel Sans", -apple-system, Roboto, Helvetica, sans-serif;
    font-size: clamp(18px, 1.125rem, 999px);
    font-weight: 400;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: auto;
}

.read-article-btn:hover {
    background-color: transparent;
    border: 0.09375rem solid var(--Primary-Blue); /* 1.5px */
    color: var(--Primary-Blue);
    transform: translateY(-0.0625rem); /* -1px */
}

.read-article-btn:active {
    transform: translateY(0);
}

/* 連結樣式 - 移除預設連結樣式 */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-link:hover {
    text-decoration: none;
    color: inherit;
}

.title-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.title-link:hover {
    text-decoration: none;
    color: inherit;
}

/* News List Mode Styles */
.news-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* max-width: 75rem;  */
    margin: 0 auto;
}

.news-list-item {
    padding: 2.9375rem 0; /* 47px */
    position: relative;
}

.news-separator {
    width: 100%;
    height: 1.5px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--White);
}

.news-item-category {
    color: var(--White);
    text-transform: uppercase;
    margin: 0 0 1rem 0; 
    font-family: "Funnel Sans";
    font-size: clamp(24px, 1.5rem, 999px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.03rem; /* 0.48px */
}

.news-item-title {
    color: var(--White);
    margin: 0 0 3rem 0; /* 0 0 44px 0 */
    max-width: 75.25rem; /* 1204px */
    font-family: "Funnel Sans";
    font-size: clamp(32px, 2rem, 999px);
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
}

.news-item-btn {
    display: inline-flex;
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    align-items: center;
    gap: 0.625rem; /* 10px */
    border-radius: 0.1875rem; /* 3px */
    border: none;
    background-color: var(--Primary-Blue);
    cursor: pointer;
    color: var(--White);
    text-transform: capitalize;
    font-family: "Funnel Sans", -apple-system, Roboto, Helvetica, sans-serif;
    font-size: clamp(18px, 1.125rem, 999px);
    font-weight: 400;
    transition: all 0.3s ease;
}

.news-item-btn:hover {
    background-color: transparent;
    border: 0.09375rem solid var(--Primary-Blue); /* 1.5px */
    color: var(--Primary-Blue);
    transform: translateY(-0.0625rem); /* -1px */
}

.news-item-btn:active {
    transform: translateY(0);
}

.news-final-separator {
    width: 100%;
    height: 0.0625rem; /* 1px */
    background-color: var(--White);
}