/* 大筆電 */
@media (max-width: 1600px) {
    .news-banner {
        padding: 5rem 5rem 3rem; /* 80px 80px 48px */
    }
}

/* 筆電 */
@media (max-width: 1440px) and (min-width: 991px) {
    .news-banner {
        padding: 4rem 4rem 2.5rem; /* 64px 64px 40px */
    }
    
    .year-filter,
    .category-filter {
        width: 18rem; /* 288px */
    }
    
    .filter-text {
        font-size: clamp(20px, 1.25rem, 999px);
    }

    .news-filter-item {
        font-size: clamp(20px, 1.25rem, 999px);
    }
    
    .page-title {
        font-size: clamp(42px, 2.625rem, 999px);
    }
    
    .view-all-btn {
        font-size: clamp(20px, 1.25rem, 999px);
    }
}

/* 大橫式平板(例: iPad Pro/Air) - 保持桌面版橫向佈局 */
@media (max-width: 1200px) and (min-width: 992px) {
    .news-carousel-container {
        margin-top: 4.5rem; /* 調整 navbar 間距 */
    }

    .news-article-container {
        /* 移除 flex-direction: column，保持桌面版橫向佈局 */
        min-height: 31.25rem; /* 500px */
    }

    .article-content {
        /* 移除 order: 1，保持左側位置 */
        padding: clamp(2rem, 4vw, 3rem);
        text-align: center; /* 確保文字置中 */
        justify-content: center; /* 垂直置中 */
    }

    .read-article-button {
        align-self: center; /* 覆蓋桌面版的 flex-start，讓按鈕置中 */
    }

    .article-image-section {
        /* 移除 order: 2，保持右側位置 */
        min-height: 15rem;
    }

    .news-image {
        max-width: none; /* 移除寬度限制，讓圖片填滿 */
    }

    .article-headline {
        font-size: clamp(1.5rem, 3vw, 2rem); /* 調整字體大小 */
    }

    .news-banner {
        padding: 3.5rem 3rem 2rem; /* 56px 48px 32px */
    }
    
    .banner-header {
        flex-direction: row; /* 保持橫向佈局 */
        align-items: center; /* 垂直置中 */
        justify-content: space-between; /* 左右分佈 */
        gap: 1.5rem; /* 24px */
    }
    
    .header-right {
        width: auto; /* 改為自動寬度 */
        justify-content: flex-end;
        flex-shrink: 0; /* 防止收縮 */
    }
    
    .filter-controls {
        width: auto;
        justify-content: space-between;
        gap: 1rem; /* 增加間距 */
    }
    
    .year-filter,
    .category-filter {
        width: 12rem; /* 調整為更小的寬度 192px */
    }
    
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card-image-container {
        height: 15rem; /* 240px */
    }
    
    .netflix-logo {
        width: 20rem; /* 320px */
        height: 5.5rem; /* 88px */
    }
}

/* 平板（<=992px） - 保持桌面版橫向佈局 */
@media (max-width: 992px) and (min-width: 769px) {
    .latest-news-section {
        min-height: 31.25rem; /* 500px */
        /* padding: 1.25rem; */
    }

    .news-carousel-container {
        margin-top: 4rem; /* 調整 navbar 間距 */
    }

    .article-content {
        padding: clamp(1.5rem, 3vw, 2.5rem);
        text-align: center; /* 確保文字置中 */
        justify-content: center; /* 垂直置中 */
    }

    .read-article-button {
        align-self: center; /* 覆蓋桌面版的 flex-start，讓按鈕置中 */
    }

    .article-headline {
        font-size: clamp(1.5rem, 4vw, 1.875rem); /* 調整字體大小 */
    }

    .news-image {
        max-width: none; /* 移除寬度限制，讓圖片填滿 */
    }

    .news-banner {
        padding: 3rem 2rem 1.5rem; /* 48px 32px 24px */
    }
    
    .banner-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem; /* 20px */
        margin-bottom: 2.5rem; /* 40px */
    }
    
    .header-right {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-title {
        font-size: clamp(36px, 2.25rem, 999px);
        margin-bottom: 1rem; /* 16px */
    }
    
    .filter-controls {
        width: 100%;
        flex-direction: row;
        gap: 1rem; /* 16px */
    }
    
    .filter-text {
        font-size: clamp(18px, 1.125rem, 999px);
    }
    
    .view-all-btn {
        width: 97%;
        height: 3rem; /* 48px */
        font-size: clamp(18px, 1.125rem, 999px);
        margin-top: 0.5rem; /* 8px */
    }
    
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card-image-container {
        height: 12.5rem; /* 200px */
    }
    
    .card-content {
        padding: 1.25rem 1.5rem; /* 20px 24px */
        min-height: 15rem; /* 240px */
    }
    
    .article-category {
        font-size: clamp(14px, 0.875rem, 999px);
        margin-bottom: 0.9375rem; /* 15px */
    }
    
    .article-title {
        font-size: clamp(20px, 1.25rem, 999px);
        margin-bottom: 1.25rem; /* 20px */
    }
    
    .read-article-btn {
        font-size: clamp(16px, 1rem, 999px);
    }
    
    .netflix-logo {
        width: 18.75rem; /* 300px */
        height: auto;
    }
}

/* 小平板或大手機（<=768px） */
@media only screen and (max-width: 768px) {
    .latest-news-section {
        min-height: 46.875rem; /* 750px - 符合設計稿高度 */
        padding: 0;
    }

    .news-carousel-container {
        margin-top: 3.5rem; /* 調整手機版 navbar 間距 */
        height: 46.875rem; /* 750px */
        position: relative;
    }

    .news-article-container {
        flex-direction: column;
        height: 46.875rem; /* 750px */
        background: none;
    }

    /* 圖片區塊 - 上半部，深色背景 */
    .article-image-section {
        order: 1;
        height: 28.125rem; /* 450px */
        background-color: #111219; /* 深色背景，符合設計稿 */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        width: 100%;
        position: relative;
        overflow: hidden;
        /* 手機版使用背景圖片填滿整個區域 */
        /* background-image: url('/images/newsRoom/newsRelease/banner_news_1_mobile.jpg'); */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* 隱藏原本的 img 標籤，在手機版使用背景圖片 */
    .news-image {
        /* display: none; */
    }

    /* 內容區塊 - 下半部，藍色漸層背景 */
    .article-content {
        order: 2;
        min-height: 20rem; /* 改為最小高度，允許內容撐開 */
        height: auto; /* 允許高度自動調整 */
        background: linear-gradient(145deg, #0042FF 11.13%, #FFF 109.08%);
        padding: 3.125rem 1.5rem 3rem; /* 增加底部padding為進度條預留更多空間 */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        position: relative;
    }

    .article-headline {
        font-size: clamp(21px, 1.3125rem, 999px) !important;
        line-height: 1.3 !important;
        color: var(--White) !important;
        margin-bottom: 0.5rem !important; 
        max-width: 90% !important;
        /* 強制覆蓋JavaScript的transform動畫 */
        transform: none !important;
        opacity: 1 !important;
    }

    .read-article-button {
        font-family: "Funnel Sans";
        background: var(--White);
        color: var(--Primary-Blue);
        border: none;
        border-radius: 0.1875rem; /* 3px */
        padding: 0.625rem 1.375rem; /* 10px 22px */
        font-size: 1.125rem;
        width: 9rem; /* 144px - 符合設計稿寬度 */
        height: 2.6875rem; /* 43px - 符合設計稿高度 */
        margin: 0 auto auto auto; /* 上邊距自動推到下方，與進度條保持固定間距 */
        display: block;
    }

    /* 使用 Flexbox + Order 重排列進度條 */
    .latest-news-section {
        display: flex;
        flex-direction: column;
    }
    
    .news-carousel-container {
        order: 1;
        display: flex;
        flex-direction: column;
    }
    
    .news-article-container {
        display: flex;
        flex-direction: column;
    }
    
    .article-content {
        order: 2; /* 藍色區塊在下方 */
        /* 在內容區塊內自然放置進度條 */
    }
    
    .article-image-section {
        order: 1; /* 圖片在上方 */
    }
    
    /* 桌面版進度條移動到內容區塊內 */
    .progress-indicator {
        order: 2; /* 進度條在輪播容器後面 */
        margin-top: -4rem; /* 調整負邊距，與按鈕保持合理距離 */
        margin-bottom: 2rem; /* 底部邊距 */
        align-self: center; /* 水平置中 */
        z-index: 5; /* 確保在上層 */
    }

    .news-banner {
        padding: 2rem 1.5rem 1rem; /* 32px 24px 16px */
    }
    
    .banner-header {
        flex-direction: column;
        align-items: center;
        gap: 1rem; /* 16px */
        margin-bottom: 2rem; /* 32px */
    }
    
    .header-right {
        width: 100%;
        flex-direction: column;
        align-items: center; /* 改為置中對齊 */
    }
    
    .page-title {
        font-size: clamp(28px, 1.75rem, 999px);
        margin-bottom: 0.75rem; /* 12px */
    }
    
    .filter-controls {
        width: 100%;
        flex-direction: column;
        gap: 0.75rem; /* 12px */
    }
    
    .year-filter,
    .category-filter {
        width: 100%;
        height: 3.75rem;
    }
    
    .filter-text {
        font-size: clamp(21px, 1.3125rem, 999px);
        left: 0.75rem; /* 12px */
    }
    
    .filter-border {
        border-radius: 0.25rem; /* 4px */
    }

    .news-filter-item{
        font-size: clamp(21px, 1.3125rem, 999px);
    }
    
    .view-all-btn {
        width: 100%;
        height: 2.75rem; /* 44px */
        font-size: clamp(21px, 1.3125rem, 999px);
        margin-top: 0.5rem; /* 8px */
    }
    
    .divider-line {
        margin-bottom: 2rem; /* 32px */
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .card-image-container {
        height: 15rem;
    }

    .card-image{
        object-fit: fill;
    }
    
    .card-content {
        padding: 1rem 1.25rem; /* 16px 20px */
        min-height: 18rem; 
        display: flex;
        flex-direction: column;
    }
    
    .article-category {
        font-size: clamp(16px, 1rem, 999px);
        margin-bottom: 0.75rem; /* 12px */
    }
    
    .article-title {
        margin-bottom: 0 !important; /* 移除底部邊距 */
        flex-grow: 1 !important; /* 強制讓標題佔據剩餘空間 */
        font-size: clamp(21px, 1.3rem, 999px);
    }
    
    .read-article-btn {
        width: auto !important; /* 改為自動寬度 */
        align-self: flex-start !important; /* 靠左對齊 */
        font-size: clamp(18px, 1.125rem, 999px);
        margin-top: auto !important; /* 強制推到底部 */
    }
    
    .netflix-logo {
        width: 15.625rem; /* 250px */
        height: auto;
    }

    /* News List Mode Styles */
    .news-list-item {
        padding: 2rem 1rem 2rem 1rem;
    }
    
    .news-item-category {
        margin: 0 0 1.5rem 0; /* 0 0 24px 0 */
        font-size: clamp(16px, 1rem, 20px);
    }
    
    .news-item-title {
        margin: 0 0 3.25rem 0; /* 0 0 32px 0 */
        font-size: clamp(20px, 1.25rem, 28px);
    }
    
    .news-item-btn {
        padding: 0.5rem 0.75rem; /* 8px 12px */
    }
}

/* 小型手機（<=576px） */
@media (max-width: 576px) {
    .news-carousel-container {
        margin-top: 3rem; /* 更小的手機版 navbar 間距 */
        height: 47rem; /* 稍微調整小手機高度 */
    }

    .news-article-container {
        height: 47rem;
    }

    /* 圖片區塊調整 */
    .article-image-section {
        /* 小手機也使用背景圖片 */
        /* background-image: url('/images/newsRoom/newsRelease/banner_news_1_mobile.jpg'); */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .news-image {
        /* display: none; */
    }

    /* 內容區塊調整 */
    .article-content {
        min-height: 20rem; /* 改為最小高度 */
        height: auto; /* 允許高度自動調整 */
        padding: 2.5rem 1.25rem 2.5rem 1.25rem; /* 增加底部padding */
    }

    /* 強制覆蓋JavaScript動畫，防止標題位置偏移 */
    .article-headline {
        transform: none !important;
        opacity: 1 !important;
    }

    .news-image {
        transform: none !important;
        opacity: 1 !important;
    }
    
    .banner-header {
        gap: 0.75rem; /* 12px */
        margin-bottom: 1.5rem; /* 24px */
    }
    
    .header-right {
        width: 100%;
        flex-direction: column;
        align-items: center; /* 改為置中對齊 */
        gap: 1.875rem;
    }

    .filter-controls {
        gap: 1.875rem;
    }
    
    .view-all-btn {
        width: 8rem;
    }
    
    .divider-line {
        display: none;
    }
    
    .article-title {
        margin-bottom: 0.75rem; /* 12px */
    }
    
    .read-article-btn {
        padding: 0.625rem 1rem; 
        margin-top: 0.5rem; /* 8px */
    }
    
    .netflix-logo {
        width: 12.5rem; /* 200px */
        height: auto;
    }
    
    .news-item-category {
        margin: 0 0 1rem 0; /* 0 0 16px 0 */
    }
    
    .news-item-btn {
        padding: 0.5rem 0.75rem; /* 8px 12px */
    }
}