/* ============================================================
   2026/07 video.php 深色科技感改版 + 播放按鈕脈衝動畫、掃描框特效
   ============================================================ */
#videos{background:#1A1D21;font-family:'Noto Sans TC',var(--bs-font-sans-serif);font-size:1.3rem}

/* 麵包屑 */
#videos .breadcrumb-wrapper{background:#1A1D21;border-bottom:1px solid #2B3035}
#videos .breadcrumb-wrapper .breadcrumb .breadcrumb-item a{color:#9AA0A6}
#videos .breadcrumb-wrapper .breadcrumb .breadcrumb-item.active{color:#E8EAEC}
#videos .breadcrumb-wrapper .breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:#5B6670}

/* 橫幅：跟其他頁一致 */
#videos #innerBanner{max-width:1320px;margin:0 auto;padding:1.5rem 12px 0}
#videos #innerBanner .slick-list{border-radius:30px 30px 0 0;overflow:hidden}
#videos #innerBanner,
#videos #innerBanner .slick-list,
#videos #innerBanner .slick-track,
#videos #innerBanner .slick-slide{background:#1A1D21}

#videos h1.page_title{color:#E8EAEC;font-family:'Noto Sans TC',var(--bs-font-sans-serif);font-weight:700;font-size:1.95rem}

/* 卡片：深色底、細邊框 */
#videos .video-list li{padding:0}
#videos .video-list .card{
    display:block;background:#23272B;border:1px solid #2B3035;text-decoration:none;
    transition:border-color .25s ease,transform .25s ease;overflow:hidden;
}
#videos .video-list .card:hover{border-color:#1FA648;transform:translateY(-4px)}
#videos .video-list .p-2{color:#E8EAEC;font-weight:600;padding:.85rem 1rem !important}
#videos .video-list .card:hover .p-2{color:#3ECB6E}

/* 縮圖：微放大 + 掃描框（跟service.php同一套語言） */
#videos .video-list .video-pic{position:relative;overflow:hidden}
#videos .video-list .video-pic img{transition:transform .4s ease}
#videos .video-list .card:hover .video-pic img{transform:scale(1.06)}
#videos .video-list .video-pic > .scan_frame{
    position:absolute;inset:8px;pointer-events:none;z-index:2;
    opacity:0;transition:opacity .3s ease;
    background-image:
        linear-gradient(#3ECB6E,#3ECB6E),linear-gradient(#3ECB6E,#3ECB6E),
        linear-gradient(#3ECB6E,#3ECB6E),linear-gradient(#3ECB6E,#3ECB6E),
        linear-gradient(#3ECB6E,#3ECB6E),linear-gradient(#3ECB6E,#3ECB6E),
        linear-gradient(#3ECB6E,#3ECB6E),linear-gradient(#3ECB6E,#3ECB6E);
    background-repeat:no-repeat;
    background-position:top left,top left,top right,top right,bottom left,bottom left,bottom right,bottom right;
    background-size:2px 20px,20px 2px,2px 20px,20px 2px,2px 20px,20px 2px,2px 20px,20px 2px;
}
#videos .video-list .card:hover .video-pic > .scan_frame{opacity:1}

/* 播放按鈕：雙環脈衝擴散 + 旋轉雷達虛線環，加大範圍更醒目 */
#videos .video-list .video-pic::before{
    content:'';position:absolute;top:50%;left:50%;
    width:56px;height:56px;margin:-28px 0 0 -28px;
    border:2px solid rgba(62,203,110,.85);border-radius:50%;
    z-index:1;pointer-events:none;
    animation:bowman_play_pulse 1.8s ease-out infinite;
    box-shadow:0 0 12px 2px rgba(62,203,110,.5);
}
#videos .video-list .video-pic > .radar_ring{
    position:absolute;top:50%;left:50%;
    width:80px;height:80px;margin:-40px 0 0 -40px;
    border:1px dashed rgba(62,203,110,.55);border-radius:50%;
    z-index:1;pointer-events:none;
    animation:bowman_radar_spin 6s linear infinite;
}
@keyframes bowman_play_pulse{
    0%   { transform:scale(0.6); opacity:1; }
    75%  { transform:scale(1.9); opacity:0; }
    100% { transform:scale(1.9); opacity:0; }
}
@keyframes bowman_radar_spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}
#videos .video-list .card:hover .video-pic::before{animation-duration:.9s}
#videos .video-list .card:hover .video-pic > .radar_ring{animation-duration:2s;border-color:rgba(62,203,110,.9)}
#videos .video-list .video-pic::after{
    color:#fff;background:rgba(15,18,21,.55);
}
#videos .video-list li>a:hover .video-pic::after{background:#1FA648;color:#0F1215}

/* 分頁：這頁只有「查看更多」單一連結（無限捲動載入下一頁），改成明顯的大按鈕，
   讓捲到最下面的人清楚知道還有更多內容，不會誤以為看完了 */
#videos .pagination{text-align:center;margin:2.5rem 0}
#videos .pagination .next,
#videos .pagination .prev{
    display:inline-block;
    font-family:'Rajdhani',var(--bs-font-monospace);font-weight:700;font-size:1.1rem;letter-spacing:.5px;
    padding:.85rem 2.5rem;text-decoration:none;margin:0 .4rem;
    transition:background .25s ease,transform .25s ease,border-color .25s ease;
}
#videos .pagination .next{
    background:#1FA648;color:#0F1215 !important;border:1px solid #1FA648;
}
#videos .pagination .next:hover{background:#3ECB6E;border-color:#3ECB6E;transform:translateY(-2px)}
#videos .pagination .prev{
    background:transparent;color:#9AA0A6 !important;border:1px solid #2B3035;
}
#videos .pagination .prev:hover{border-color:#3ECB6E;color:#E8EAEC !important;transform:translateY(-2px)}

/* ============================================================
   2026/07 CLS修正：影片縮圖用YouTube標準16:9比例預留空間
   ============================================================ */
#videos .video-list .video-pic{aspect-ratio:16/9}
#videos .video-list .video-pic img{width:100%;height:100%;object-fit:cover}