/* =========================
   歷屆節目區塊 archives
========================= */
.archives_area {

}


/* =========================
   分類標籤區塊
========================= */
.categorytags_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*gap: clamp(1.25rem, 0.583rem + 1.08vw, 1.875rem);*/ /* 20 30 */
    gap: clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem); /* 10 20 */
    margin-bottom: clamp(1.875rem, 0.542rem + 2.15vw, 3.125rem); /* 30 50 */
}

.categorytags_layout {
    /* width: calc((100% - clamp(1.875rem, 0.542rem + 2.15vw, 3.125rem)*2) / 3); */
    width: calc((100% - clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem)*2) / 3);
    display: flex;
    flex-direction: column;
    gap: .625rem; /* 10 */
}

/* 學年度 */
.categorytags_year {

}

/* 節目類別 */
.categorytags_type {

}

/* 時段 */
.categorytags_time {

}

/* 標籤tit */
.categorytags_tit {
    color: var(--white_color);
    font-size: 1rem; /* 16 */
    font-weight: 600;
    padding-bottom: .625rem; /* 10 */
    border-bottom: 1px solid  var(--white_color);

    display: flex;
    align-items: center;
    justify-content: space-between; /* 讓文字靠左，按鈕靠右 */
    width: 100%;
}

/* 動畫外殼：負責 Grid 的 0fr 到 1fr 絲滑收合 start----------------------- */
.categorytags_wrapper {
    display: grid;
    grid-template-rows: 0fr; /* 預設收合 */
    transition: grid-template-rows 0.35s ease-in-out;
}

/* 當父層被加上 .active 展開時 */
.categorytags_layout.active .categorytags_wrapper {
    grid-template-rows: 1fr; /* 完美自動計算內容高度並展開 */
}

.categorytags_layout.active .categorytags_wrapper > .categorytags {
    visibility: visible;
    opacity: 1;
    padding-top: 12px; /* 展開時，順便推開與標題(學年度)之間的舒適間距 */
}
/* 動畫外殼：負責 Grid 的 0fr 到 1fr 絲滑收合 end----------------------- */

/* 標籤區塊 */
/* .categorytags {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.313rem, -0.021rem + 0.54vw, 0.625rem);
} */
/* 外殼裡面的直接子元素：必須加上 min-height: 0 動畫才會生效 */
.categorytags_wrapper .categorytags {
    min-height: 0;
    visibility: hidden; /* 關閉時隱藏，避免鍵盤焦點或文字殘留 */
    opacity: 0;
    transition: opacity 0.25s ease-in-out, visibility 0.25s;
    
    /* 原本的 Flex 樣式 */
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.313rem, -0.021rem + 0.54vw, 0.625rem); 
    padding-top: 0px; /* 預設上方沒間距 */
    transition: opacity 0.25s ease-in-out, padding-top 0.35s ease-in-out; 
}

/* 標籤 */
.categorytags>button{
    border: none;
    background: none;
    cursor: pointer;
}

.categorytags .tag{
    /* min-width: 3.125rem; */
    min-width: 4.0625rem; /* 65 */
    padding: clamp(0.313rem, -0.021rem + 0.54vw, 0.625rem); /* 5 10 */
    /* border: 1px solid var(--white_color); */
    background-color: #404040;
    border-radius: 1.25rem; /* 20 */
    box-sizing: border-box;
    color: var(--white_color);
    font-size: clamp(0.625rem, 0.492rem + 0.22vw, 0.75rem); /* 10 12 */

    transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease;
}

/* 滑入效果 */
.categorytags .tag:hover{
    /* border: 1px solid var(--primary_color); */
    background-color: var(--primary_color);
    color: var(--black_color);
}

/* 標籤 */
.categorytags_time .tag{
    padding: clamp(0.313rem, -0.021rem + 0.54vw, 0.625rem) clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem); /* 5 10  10 20 */
}

.categorytags .tag_active{
    /* border: 1px solid var(--primary_color); */
    background-color: var(--primary_color);
    color: var(--black_color);
}

/* 展開按鈕基礎設定----------------------------------------------- */
.expand_btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease; /* 讓旋轉時有平滑動畫 */
    outline: none;
}

/* 使用偽元素載入 Bootstrap Icon (\F286 通常是 chevron-down 往下箭頭) */
.expand_btn::before {
    content: "\f286";
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* 你可以自訂 icon 的大小與顏色 */
    font-size: 1.25rem; 
    color: #6c757d; 
}

/* 當點擊展開、按鈕或父層被加上 active 類別時，Icon 旋轉 180 度變成往上 */
.expand_btn.active,
.categorytags_layout.active .expand_btn {
    transform: rotate(180deg);
}

/* =========================
   卡片區塊
========================= */
.archives_card_area {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem); /* 10 20 */
}

.archives_card {
    background-color: var(--primary_color);
    border-radius: 1.25rem; /* 20 */
    width: calc((100% - clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem)*2) / 3);
    overflow: hidden;
}

.archives_card a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}


/* =========================
   卡片圖片
========================= */
.cardimg_area {
    width: 100%;
}

.archives_img {
    display: block;
    position: relative;
    /* padding-top: 50%; */
    aspect-ratio: 16 / 9;
}

.archives_img img {
    width:100%;
    height:auto;
    transition: all 0.3s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    float: none;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: all 0.3s ease-out;
}


/* =========================
   卡片資訊區塊
========================= */
.archives_info {
    padding: clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem); /* 10 20 */
    display: flex;
    flex-direction: column;
    gap: .9375rem; /* 15 */
}

.archives_info_text {
    display: flex;
    flex-direction: column;
    gap: .9375rem; /* 15 */
}

.archives_info_tit {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
    color: var(--black_color);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.archives_info_brief {
    font-size: clamp(0.75rem, 0.617rem + 0.22vw, 0.875rem); /* 12 14 */
    font-weight: 400;
    color: var(--dark_color);
    line-height: 1.8;
    height: calc( clamp(0.75rem, 0.617rem + 0.22vw, 0.875rem) * 1.8 * 2 );

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}


/* 卡片內分類標籤 */
.card_categories {
    padding: clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem);
    padding-top: unset;
    display: flex;
    flex-wrap: wrap;
    gap: .3125rem;
}

.card_categories .tag {
    padding: clamp(0.313rem, -0.021rem + 0.54vw, 0.625rem) clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem); /* 10 20 */
    background-color: unset;
    border: 1px solid var(--black_color);
    border-radius: 1.25rem; /* 20 */
    
    color: var(--black_color);
    cursor: pointer;
    font-size: clamp(0.625rem, 0.492rem + 0.22vw, 0.75rem); /* 10 12 */
    line-height: 1;
    
    
    transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease;
}

/* 滑入效果 */
.card_categories .tag:hover {
    background-color: var(--black_color);
    color: var(--white_color);
}


/* =========================
   RWD
========================= */

/* 平板（≤ 1024px） */
@media (max-width: 1024px) {

    /* 上方標籤區塊 → 滿版 */
    .categorytags_layout {
        width: 100%;
    }

    /* 卡片 → 2 欄 */
    .archives_card {
        width: calc((100% - clamp(0.625rem, -0.042rem + 1.08vw, 1.25rem)) / 2);
    }
}


/* 手機（≤ 640px） */
@media (max-width: 640px) {

    /* 標籤區塊間距可以稍微縮 */
    .categorytags_area {
        gap: 1.25rem;
    }

    /* 卡片 → 1 欄 */
    .archives_card {
        width: 100%;
    }

}