/* =====================================================================
 *  影片列表頁專用樣式 video.css（陽明山水金棕色系）
 *  對應 view：application/views/website/video_list.html
 *  沿用 main.css 既有樣式（about_banner / main / container /
 *  news_lf・news_rt / page …），這裡只放影片卡片、分類下拉選單等頁面專用規則。
 *  注意：此檔在 view 內於 header 之前以 <link> 引入，載入順序在全站 CSS 之前，
 *  同特異度的規則會被 init.css / main.css / q930.css 蓋掉，必要時請提高特異度。
 * ===================================================================== */

/* Banner 背景圖由 video_list.html 依裝置動態輸出（與溫泉講座頁相同），此處不另設 */
/* 區塊標題：熱門影片 / 所有影片 */
.video-sec-tl{position:relative;border-bottom:1px solid #e0e0e0;margin:0 0 8px;}
.video-sec-tl h2{
    display:inline-block;position:relative;bottom:-1px;margin:0;
    font-size:24px;font-weight:bold;color:#b59c80;line-height:40px;
    border-bottom:2px solid #b59c80;padding:0 4px 6px;
}
.video-sec-desc{color:#999;font-size:14px;margin:14px 0 24px;}
.video-sec-desc .ahover{color:#b59c80;font-weight:bold;}

/* 影片卡片（flex 等高：內容短也不會留白，標籤列固定在底部） */
/* 注意：ul 不可再加 .clearfix，init.css／q930.css 的 .clearfix{display:block} 會蓋掉 flex，造成一排只剩一張 */
.video-ul{display:flex;flex-wrap:wrap;margin:0 -10px;list-style:none;padding:0;}
.video-ul>li{width:100%;padding:0 10px;margin-bottom:35px;float:none;display:flex;box-sizing:border-box;}
@media(min-width:768px){.video-ul>li{width:50%;}}  /* 平板以上一列兩張（電腦版 2 個一排） */
.video-card{
    display:flex;flex-direction:column;width:100%;
    background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;
    transition:all .3s ease;
}
.video-card:hover{box-shadow:0 10px 24px rgba(181,156,128,.22);transform:translateY(-4px);border-color:#e8dccb;}

/* 縮圖（16:9 響應式）＋ 播放鍵 */
.video-thumb{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background:#111;cursor:pointer;}
.video-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:all .3s;}
.video-thumb:hover img{opacity:.72;}
.video-thumb iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.video-play{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
    width:62px;height:62px;border-radius:50%;background:rgba(181,156,128,.9);
    display:flex;align-items:center;justify-content:center;transition:all .3s;
}
.video-thumb:hover .video-play{background:#b59c80;transform:translate(-50%,-50%) scale(1.08);}
.video-play:after{
    content:"";display:block;margin-left:4px;
    border-style:solid;border-width:11px 0 11px 19px;
    border-color:transparent transparent transparent #fff;
}

/* 卡片文字（用行數裁切取代固定高度，避免短內容留白） */
.video-info{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 18px 18px;}
.video-info-tl{font-size:17px;font-weight:bold;line-height:26px;margin:0 0 10px;color:#444;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
@media(min-width:768px){.video-info-tl{min-height:52px;}}  /* 平板以上固定保留兩行高度（2 × 26px），同列卡片說明文字起點對齊 */
.video-info-text{font-size:14px;color:#888;line-height:22px;margin-bottom:14px;}  /* 說明文字完整顯示，不裁行 */
.video-meta{margin-top:auto;border-top:1px solid #f1f1f1;padding-top:12px;overflow:hidden;}
.video-meta .v-tag{
    display:inline-block;background:#b59c80;color:#fff!important;border-radius:4px;
    padding:3px 12px;font-size:12px;line-height:20px;float:left;
}
.video-meta .v-tag:hover{background:#c4a172;}
.video-meta .v-tag i{margin-right:5px;}
.video-meta .v-see{float:right;color:#999;font-size:12px;line-height:26px;}
.video-meta .v-see i{margin-right:4px;color:#c4a172;}

/* 右側欄分類「目前所在」狀態 */
.news_rt_wz_ul .article-cate a.active p{color:#b59c80;}

/* 空狀態 */
.video-empty{text-align:center;color:#999;font-size:16px;padding:60px 0;}

/* 左欄底部間距：分頁／最後一列卡片不要貼到 footer（電腦版左欄比側欄高、手機版側欄隱藏，都需要） */
.news_lf.video-main{padding-bottom:45px;}

/* 手機版分類下拉選單（只在手機顯示，放在影片列表最上方） */
.video-cate-select{display:none;position:relative;margin:20px 0 0;}
.video-cate-select select{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    width:100%;height:44px;padding:0 40px 0 14px;box-sizing:border-box;
    font-size:15px;color:#444;background:#fff;border:1px solid #b59c80;border-radius:6px;
    cursor:pointer;outline:none;
}
.video-cate-select:after{
    content:"";position:absolute;right:16px;top:50%;margin-top:-4px;pointer-events:none;
    border-style:solid;border-width:7px 6px 0 6px;border-color:#b59c80 transparent transparent transparent;
}
.video-cate-select select:focus{border-color:#c4a172;box-shadow:0 0 0 2px rgba(181,156,128,.2);}

@media (max-width:767px){
    .video-cate-select{display:block;}
    .video-cate-side{display:none;}   /* 手機版隱藏下方的分類側欄，改用上方下拉選單 */
    .video-sec-tl h2{font-size:20px;}
    .video-info-tl{font-size:16px;height:auto;}
}