/* my-slider.css (v3.0 - Swiper 終極版) */

/* 1. 外層容器 (100% 螢幕寬) */
.css_swiper_container {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    overflow: hidden;
}

/* 2. Swiper 主體 (我們自訂的外層) */
.css_swiper {
    padding-top: 20px;
    padding-bottom: 50px; 
}

/* 3. 「非置中」海報 (使用 Swiper 預設 .swiper-slide) */
.css_swiper .swiper-slide {
    opacity: 0.4; 
    transform: scale(0.95);
    transition: transform 0.4s ease, opacity 0.4s ease; /* 正常動畫 */
}

/* 4. 「置中」海報 (Swiper 預設 .swiper-slide-active) */
/* 5. 【關鍵】 同時設定「無限循環」產生的「複製版置中海報」 */
.css_swiper .swiper-slide-active,
.css_swiper .swiper-slide-duplicate-active {
    opacity: 1;
    transform: scale(1);
}

/* 6. 圖片樣式 */
.css_swiper .swiper-slide picture,
.css_swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px; 
}

/* 7. 【關鍵】 連結點擊修正 */
.css_swiper .swiper-slide a {
    cursor: pointer; /* 強制顯示點擊手勢 */
    display: block; 
}

/* 8. 導航容器 (保持自訂) */
.css_nav_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 10;
}

/* 9. 導航箭頭 (美化版 - 圓底) */
.css_button_prev,
.css_button_next {
    position: static; 
    margin: 0 10px; 
    width: 36px;  /* 圓形背景寬 */
    height: 36px; /* 圓形背景高 */
    margin-top: 0;
    cursor: pointer; 
    transition: background-color 0.2s ease;
    
    /* 讓 ::after 垂直/水平置中 */
    display: flex; 
    align-items: center;
    justify-content: center;
}
.css_button_prev:hover,
.css_button_next:hover {
    background-color: rgba(255, 255, 255, 1); /* 點擊時變全白 */
}

.css_button_prev::after,
.css_button_next::after {
    font-size: 20px; /* 加大箭頭 */
    font-weight: bold;
    color: #333; 
    line-height: 1; /* 確保垂直置中 */
}
/* 使用更美觀的箭頭符號 */
.css_button_prev::after { content: '❮'; } 
.css_button_next::after { content: '❯'; }

/* 10. 導航分頁點 (Swiper 預設 class) */
.css_pagination {
    position: static; 
    width: auto; 
    bottom: auto;
    display: block;
}
.css_pagination .swiper-pagination-bullet {
    background: #aaa;
    opacity: 1; /* 覆蓋 Swiper 預設 */
}
/* 11. 啟用中的分頁點 (Swiper 預設 class) */
.css_pagination .swiper-pagination-bullet-active {
    background: #333;
}