/* 新聞與輔導資訊共用樣式 */
/* 外層容器：改為縱向排列 (column) */
/* 外層容器：改為橫向排列 */
.news-section-wrapper {
    display: flex;
    gap: 40px;           /* 左右兩區的間距 */
    align-items: flex-start;
    margin-top: 163px;
    width: 100%;
}

/* 左側標題固定寬度或比例 */
.news-left-side {
    flex: 0 0 250px;     /* 固定寬度 250px，不隨比例伸縮 */
}

/* 右側內容區塊佔滿剩餘空間 */
.news-right-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 標題樣式調整 (確保垂直堆疊) */
.news-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
;
}

.other-header {
    margin-top: 0 !important;
}

.news-header .subtitle-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-header .purple-box {
    width: 16px;
    height: 16px;
    background-color: #8485f6;
    border-radius: 3px;
}

.news-header h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #263238;
    white-space: nowrap; /* 避免標題因為寬度縮小而斷行 */
}

/* RWD：手機版變回上下排列 */
@media (max-width: 991px) {
    .news-section-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .news-left-side, .news-right-side {
        flex: none;
        width: 100%;
    }

    .news-header {
        margin-top: 0;
    }
}


.news-item {
    display: flex;
    align-items: center;
    padding: 24px 20px;
    margin: 0 -20px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}
.news-item:hover {
    background-color: #EEF2F7;
    border-color: #E0E6F1;
    box-shadow: 0 12px 30px rgba(55, 33, 159, 0.1);
    transform: translateY(-4px);
    z-index: 2;
}
.news-item:hover .news-arrow {
    transform: translateX(5px);
    color: #37219F;
}
.news-date {
    width: 120px;
    color: #78909C;
    font-size: 1rem;
}
.news-tag {
    background-color: #F2F5F6CC;
    color: #546E7A;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    margin-right: 20px;
    border: 1px solid #CFD8DC;
    white-space: nowrap;
}
.news-title {
    flex: 1;
    font-size: 1rem;
    color: #263238;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-arrow {
    color: #546E7A;
    margin-left: 20px;
    transition: all 0.3s ease;
}
.view-more-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(180deg, #7087F9 0%, #815CEF 100%);
    color: white !important;
    padding: 12px 32px;
    border-radius: 34px;
    font-size: 1rem;
    text-decoration: none;
    font-weight: bold;
    float: right;
    margin-top: 20px;
}
.view-more-btn:hover {
    background: linear-gradient(180deg, #8C9EFF 0%, #9B7CFA 100%);
}

.l-btn {
    display: inline-flex !important;
}

.md-btn {
    margin-top: 0 !important;
    display: none !important;
}

.sm-btn {
    margin-top: 0 !important;
    display: none !important;
}

/* 標籤篩選樣式 */
.tag-filter-container {
    display: inline-flex;     /* 容器寬度隨內容撐開 */
    align-items: center;      /* 垂直置中 */
    padding: 0;               /* 關鍵：設為 0 以消除邊緣間距 */
    background-color: #FFFFFF;
    border: 1px solid #37219F; /* 深紫色邊框 */
    border-radius: 100px;     /* 極限圓角 */
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    gap: 0;                /* 關鍵 2：控制藥丸之間的縫隙 */
}

/* 內層項目：預設透明，變為藥丸型態 */
.tag-filter-item {
    width: 168px;
    padding: 10px 25px;
    border-radius: 100px;     /* 維持圓角 round */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: transparent;
    color: #37219F;
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* 消除最左與最右的邊距，使其完全貼合外框 */
.tag-filter-item:first-child {
    margin-left: -2px;
}
.tag-filter-item:last-child {
    margin-right: -2px;
}

/* 懸停效果：背景變為紫色 */
.tag-filter-item:hover {
    background-color: #37219F;
    color: #FFFFFF !important;
    text-decoration: none;
}

/* 選中狀態 (Active)：填滿深紫色藥丸 */
.tag-filter-item.active {
    background-color: #37219F; /* 深紫色 */
    color: #FFFFFF !important;   /* 文字變白 */
    border: none;              /* 移除選中時的邊框 */
}

/* 詳情頁樣式 */
.news-detail-header { margin-bottom: 40px; }
.news-detail-meta { display: flex; align-items: center; margin-bottom: 20px; }
.news-detail-title { font-size: 2.25rem; font-weight: bold; color: #263238; margin-bottom: 30px; }
.news-content { line-height: 1.8; color: #455A64; margin-bottom: 40px; }
.attachments-section { background-color: #F2F5F6CC; padding: 20px; border-radius: 8px; margin-bottom: 40px; }
.attachment-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #105998;
    text-decoration: none;
    background-color: #F2F5F6;
    border: 1px solid #e9ecef;
}
.attachment-item i { margin-right: 10px; }

.news-detail-title-color {
    color: #2c3e50;
}

.back-btn-wrapper {
    display: none;
}
.back-btn {
    display: inline-block;
    background: linear-gradient(180deg, #7087F9 0%, #815CEF 100%);
    color: white !important;
    font-size: 1rem;!important;
    padding: 8px 24px;
    border-radius: 32px;
    text-decoration: none;
}
.back-btn:hover{
    background: linear-gradient(180deg, #8C9EFF 0%, #9B7CFA 100%);
}
.pagination-container { margin-top: 40px; display: flex; justify-content: center; }

@media (max-width: 767px) {
    .news-date { width: 100px; font-size: 0.875rem; }
    .news-tag { padding: 2px 10px; font-size: 0.75rem; margin-right: 10px; }
    .news-title { font-size: 1rem; white-space: normal; }
    .tag-filter-item { padding: 6px 16px; font-size: 0.875rem; }
}

/* 輔導申請下載卡片 */
.guidance-apply-card {
    background-color: #eeeeee;
    border-radius: 16px;
    padding: 20px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none !important;
    transition: all 0.2s;
    margin-bottom: 20px;
    min-width: 320px;
}
.guidance-apply-card:hover {
    background-color: #E7ECEE;
    transform: translateY(-2px);
}
.guidance-apply-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #263238;
}
.guidance-apply-btn {
    width: 40px;
    height: 40px;
    background-color: #105998;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

@media (max-width: 991px) {
    .news-header {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .guidance-apply-card {
        width: 100%;
        max-width: none;
        margin-top: 15px;
    }

    .l-btn {
        display: none !important;
    }

    .md-btn {
        display: inline-flex !important;
    }

    .sm-btn {
        display: none !important;
    }

    .news-header h2 {
        display: flex;
        justify-content: space-between; /* 關鍵：文字在左，按鈕在右 */
        align-items: center;           /* 垂直置中 */
        width: 100%;                   /* 確保寬度撐滿左側區塊 */
        margin: 0;
        font-size: 2.5rem;
        font-weight: bold;
        color: #263238;
    }
}

.eng-title {
    font-weight: bold;
}

@media (max-width: 767px) {
    /* 1. 外層容器：負責置中與卡片外框 */
    .tag-filter-container {
        display: flex;
        flex-direction: column;
        width: auto;
        min-width: 200px; /* 設定最小寬度避免字太少時太窄 */
        max-width: 90%;
        margin: 1.5rem auto 2rem;
        background-color: #FFFFFF;
        border: 1px solid #37219F;
        border-radius: 32px;
        overflow: hidden; /* 確保背景色不會溢出圓角 */
        gap: 0;
    }

    .tag-filter-item {
        width: 100%;
        padding: 12px 30px;
        background-color: transparent;
        color: #37219F;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 0;
        border: none;
        margin: 0 !important;
        transition: all 0.2s ease;
        text-decoration: none;
    }

    /* 移除最後一個項目的底線 */
    .tag-filter-item:last-child {
        border-bottom: none;
    }

    /* --- 核心修改：選中狀態 (Active) --- */
    /* 不論哪一個，選中後都是紫底白字 */
    .tag-filter-item.active {
        background-color: #37219F !important;
        color: #FFFFFF !important;
        border-bottom-color: #37219F; /* 隱藏與下方的隔線 */
    }

    /* 處理選中時的圓角細節 (避免直角紫色蓋住外框圓角) */
    .tag-filter-item.active {
        border-radius: 32px;
    }

    /* 懸停效果 (選用，手機版通常較少 hover) */
    .tag-filter-item:hover:not(.active) {
        background-color: #F2F5F6;
    }

    .l-btn {
        display: none !important;
    }

    .md-btn {
        display: none !important;
    }

    .sm-btn {
        display: inline-flex !important;
    }

    .news-item {
        flex-wrap: wrap;        /* 1. 允許換行 */
        align-items: flex-start; /* 改為頂部對齊 */
        padding: 20px 0;         /* 手機版縮減左右內距 */
        margin: 0;
    }

    /* 2. 第一行：日期與標籤並排 */
    .news-date {
        order: 1;
        font-size: 0.9rem;
        margin-right: 15px;
        flex: 0 0 auto;         /* 寬度隨內容 */
    }

    .news-tag {
        order: 2;
        flex: 0 0 auto;
        /* 可以在這裡加上你的藥丸樣式 */
        padding: 2px 12px;
        border-radius: 100px;
        font-size: 0.85rem;
    }

    /* 4. 第二行：標題與箭頭 (在同一行) */
    .news-block {
        order: 3;
        flex: 0 0 auto;
        content: "";
        display: block;
        width: 100vw;           /* 強制佔滿寬度 */
        height: 12px;           /* 控制第一行與第二行的間距 */
    }
    .news-title {
        order: 4;
        flex: 1;                /* 5. 標題佔滿剩餘空間，推擠箭頭到最右邊 */
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 1.5;
        margin-right: 10px;     /* 留一點間距給箭頭 */

        /* 確保標題太長時文字本身會換行 */
        white-space: normal;
        word-break: break-all;
    }

    .news-arrow {
        order: 5;
        flex: 0 0 auto;         /* 箭頭不縮放 */
        align-self: flex-start;  /* 與標題第一行對齊 */
        margin-top: 6px;        /* 微調垂直位置 */
    }
}