/* 全域基本優化 */
html {
    scroll-behavior: smooth;
}

/* 隱藏預設捲軸 (如需要極簡風) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* 覆寫 Swiper 預設樣式以符合品牌風格 */
:root {
    --swiper-theme-color: #2774C8; /* Tailwind Primary */
}

/* Hero Banner 的 Pagination 位置與樣式調整 */
.heroSwiper .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}
.heroSwiper .swiper-pagination-bullet-active {
    background-color: #fff;
    width: 24px;
    border-radius: 8px;
    transition: width 0.3s ease;
}

/* 課程卡片的 Pagination 樣式 */
.courseSwiper .swiper-pagination-bullet {
    background-color: #d1d5db;
    opacity: 1;
}
.courseSwiper .swiper-pagination-bullet-active {
    background-color: var(--swiper-theme-color);
}

/* ==========================================
   Hero Banner 卡片視覺狀態
========================================== */
.swiper-slide.hero-slide {
    aspect-ratio: 550 / 320;
    transition: all 0.5s ease;
    filter: opacity(0.5);
    
    /* 💡 核心修正：防止 Swiper 初始化前圖片暴走爆開 */
    flex-shrink: 0;
    width: 83.33%; /* 行動端預設：對應 slidesPerView: 1.2 (100% / 1.2) */
}

/* 搭配 Tailwind 斷點，讓 CSS 佈局與 JS 初始化後的參數完美契合 */
@media (min-width: 768px) {
    .swiper-slide.hero-slide {
        width: 55.55%; /* 平板端預設：對應 slidesPerView: 1.8 (100% / 1.8) */
    }
}

@media (min-width: 992px) {
    .swiper-slide.hero-slide {
        width: 31.25%; /* 桌面端預設：對應 slidesPerView: 3.2 (100% / 3.2) */
    }
}

/* 焦點圖 (正中央) */
.heroSwiper .swiper-slide-active {
    filter: opacity(1);
    z-index: 10;
}

.classSwiper .swiper-slide {
    flex-shrink: 0;
    width: 87%;
}

@media (min-width: 576px) {
    .classSwiper .swiper-slide {
        width: 50%;
    }
}

@media (min-width: 768px) {
    .classSwiper .swiper-slide {
        width: 33.3333%;
    }
}

@media (min-width: 992px) {
    .classSwiper .swiper-slide {
        width: 25%;
    }
}

/* ==========================================
   分頁點 (Pagination) 樣式覆寫
========================================== */
.hero-pagination {
    position: static !important; 
    width: auto !important;
}

.hero-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background-color: #E5E5E5 !important; 
    opacity: 1 !important;
    margin: 0 !important;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.hero-pagination .swiper-pagination-bullet-active {
    background-color: #E6AB16 !important; 
    width: 24px !important;
}

/* ==========================================
   底部 Banner 分頁點 (Pagination) 樣式
========================================== */
.banner-pagination {
    position: static !important;
    width: auto !important;
}

.banner-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background-color: #E5E5E5 !important; /* 第一張圖的淺灰色預設點 */
    opacity: 1 !important;
    margin: 0 5px !important; /* 點與點之間的微小間距 */
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.banner-pagination .swiper-pagination-bullet-active {
    background-color: #E6AB16 !important; /* 第一張圖的橘色啟用點 */
}

/* ==========================================
   Swiper 導覽按鈕無效狀態 (Disabled State) 修正
========================================== */
.swiper-button-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none; /* 防止點擊事件觸發 */
    border-color: var(--swiper-theme-color) !important;
    color: var(--swiper-theme-color) !important;
    /* 取消 Hover 的樣式干擾 */
    background-color: #fff !important; 
}

/* ==========================================
   Swiper 導覽按鈕手機板隱藏
========================================== */
@media (max-width: 767px) {
    .nextLearning-pagination,
    .course-pagination,
    .course-pagination-2,
    .live-course-pagination,
    .ranking-pagination,
    .newest-pagination {
        display: none !important;
    }
}


/* ==========================================
   課程頁動畫
========================================== */

.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }