/**
 * 輪播前台樣式
 *
 * @package RS_Slide02_Carousel
 * @since 1.0.0
 *
 * 佈局技術: Flexbox（符合 Figma 設計，CLAUDE.md 領域 13）
 * RWD 斷點: 1080px
 */

/* ===================================
   桌機版（≥1080px）
   =================================== */

.rs-slide02-carousel-wrap {
    display: inline-flex;
    gap: 15px;
    align-items: flex-start;
    max-width: 100%;
}

/* 主輪播區（大圖） */
.rs-slide02-main-area {
    position: relative;
    width: 824px;
    max-width: 100%;
}

.rs-slide02-swiper-main {
    width: 100%;
    aspect-ratio: 824 / 493;
    border-radius: 40px;
    overflow: hidden;
}

.rs-slide02-swiper-main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 40px; /* 強制大圖圓角 */
    overflow: hidden;
}

.rs-slide02-swiper-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px !important; /* 強制大圖圓角，所有狀態 */
}

/* 縮圖區（小圖） */
.rs-slide02-thumbs-area {
    width: 258px;
    height: 493px; /* 155px × 3 + 14px × 2 = 493px（Swiper 垂直模式需要固定高度） */
    flex-shrink: 0;
}

.rs-slide02-swiper-thumbs {
    width: 100%;
    height: 100%;
}

/* Swiper 會自動處理 wrapper 的佈局，移除手動 flex 設定 */

.rs-slide02-swiper-thumbs .swiper-slide {
    width: 258px;
    height: 155px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0.6;
}

.rs-slide02-swiper-thumbs .swiper-slide:hover {
    opacity: 0.8;
}

.rs-slide02-swiper-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    /* 移除 transform: scale(1.05) 以避免圓角變形 */
}

.rs-slide02-swiper-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px !important; /* 強制小圖圓角，所有狀態 */
}

/* 左右箭頭 */
.rs-slide02-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 29px;
    height: 53px;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s;
    opacity: 0.6;
}

.rs-slide02-nav:hover {
    opacity: 1;
}

.rs-slide02-nav-prev {
    left: 20px;
}

.rs-slide02-nav-next {
    right: 20px;
}

.rs-slide02-nav img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ===================================
   手機版（≤1079px）
   =================================== */

@media (max-width: 1079px) {
    .rs-slide02-carousel-wrap {
        display: flex;
        flex-direction: column;
        gap: 0; /* 移除間距，因為不顯示小圖 */
        width: 100%;
    }

    .rs-slide02-main-area {
        width: 100%;
    }

    .rs-slide02-swiper-main {
        border-radius: 40px; /* 手機版大圖也使用 40px 圓角 */
    }

    /* 手機版隱藏小圖區域 */
    .rs-slide02-thumbs-area {
        display: none !important; /* 完全隱藏小圖區域 */
    }

    /* 箭頭縮小 */
    .rs-slide02-nav {
        width: 20px;
        height: 37px;
    }

    .rs-slide02-nav-prev {
        left: 10px;
    }

    .rs-slide02-nav-next {
        right: 10px;
    }
}

/* ===================================
   Swiper 過渡效果
   =================================== */

.rs-slide02-swiper-main .swiper-slide {
    transition: opacity 0.8s ease-in-out;
}

.rs-slide02-swiper-main .swiper-slide-active {
    opacity: 1;
}

.rs-slide02-swiper-main .swiper-slide:not(.swiper-slide-active) {
    opacity: 0;
}