/**
 * Responsive Gallery and Sliders
 * بهینه‌سازی gallery و slider navigation
 */

/* ====================================
   Gallery Navigation Buttons
   ==================================== */
.gallery-nav-btn-right {
    right: clamp(20px, 5vw, 160px);
}

.gallery-nav-btn-left {
    left: clamp(20px, 5vw, 160px);
}

/* تبلت */
@media (min-width: 768px) and (max-width: 1279px) {
    .gallery-nav-btn-right {
        right: clamp(10px, 3vw, 40px);
    }
    
    .gallery-nav-btn-left {
        left: clamp(10px, 3vw, 40px);
    }
}

/* Desktop بزرگ */
@media (min-width: 1536px) {
    .gallery-nav-btn-right {
        right: 160px;
    }
    
    .gallery-nav-btn-left {
        left: 160px;
    }
}

/* ====================================
   Gallery Item Images
   ==================================== */
.gallery-item img {
    height: clamp(200px, 30vh, 320px);
}

@media (min-width: 768px) {
    .gallery-item img {
        height: clamp(250px, 35vh, 400px);
    }
}

/* ====================================
   Hero Slider Responsive
   ==================================== */
.hero-slider {
    min-height: clamp(300px, 50vh, 600px);
}

@media (max-width: 767px) {
    .hero-slider {
        min-height: clamp(250px, 40vh, 350px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-slider {
        min-height: clamp(350px, 45vh, 500px);
    }
}

/* ====================================
   Swiper Navigation Buttons
   ==================================== */
.swiper-button-prev,
.swiper-button-next {
    width: clamp(32px, 5vw, 48px) !important;
    height: clamp(32px, 5vw, 48px) !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: clamp(16px, 3vw, 24px) !important;
}

/* ====================================
   Reviews Slider Navigation
   ==================================== */
.review-btn-prev,
.review-btn-next {
    width: clamp(36px, 5vw, 48px);
    height: clamp(36px, 5vw, 48px);
}

/* ====================================
   Landing Page Slider
   ==================================== */
.landing-page-swiper .swiper-slide img {
    height: clamp(148px, 22vh, 200px);
    object-fit: cover;
}

@media (min-width: 640px) {
    .landing-page-swiper .swiper-slide img {
        height: clamp(168px, 24vh, 220px);
    }
}

/* ====================================
   Packages Slider
   ==================================== */
.packages-slider {
    padding: 0 clamp(20px, 5vw, 60px);
}

.packages-slider .swiper-slide {
    min-height: clamp(250px, 35vh, 400px);
}

/* ====================================
   Food Slider
   ==================================== */
.food-slider .swiper-slide img {
    height: clamp(200px, 28vh, 300px);
    object-fit: cover;
}

/* ====================================
   Video Slider
   ==================================== */
.home-video-slider .swiper-slide {
    aspect-ratio: 16 / 9;
}

.home-video-slider video,
.home-video-slider iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ====================================
   Slider Pagination
   ==================================== */
.swiper-pagination {
    bottom: clamp(10px, 2vh, 20px) !important;
}

.swiper-pagination-bullet {
    width: clamp(8px, 1.5vw, 12px) !important;
    height: clamp(8px, 1.5vw, 12px) !important;
}

.swiper-pagination-bullet-active {
    width: clamp(24px, 4vw, 30px) !important;
}

/* ====================================
   Gallery Modal/Lightbox
   ==================================== */
.lightbox-container {
    max-width: 95vw;
    max-height: 90vh;
}

.lightbox-container img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

/* ====================================
   Slider Container Widths
   ==================================== */
.slider-container {
    max-width: clamp(320px, 95vw, 1280px);
    margin: 0 auto;
}

/* ====================================
   Mobile Slider Optimization
   ==================================== */
@media (max-width: 767px) {
    .swiper-slide {
        padding: 0 8px;
    }
    
    .gallery-nav-btn-right,
    .gallery-nav-btn-left {
        display: none !important;
    }
    
    /* نمایش pagination به جای navigation */
    .swiper-pagination {
        display: block !important;
    }
}

/* ====================================
   Tablet Optimizations
   ==================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .packages-slider {
        padding: 0 clamp(30px, 4vw, 50px);
    }
    
    .swiper-button-prev,
    .swiper-button-next {
        opacity: 0.7;
    }
    
    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        opacity: 1;
    }
}

/* ====================================
   Touch Gestures Enhancement
   ==================================== */
.swiper {
    touch-action: pan-y;
}

.swiper-slide {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ====================================
   Smooth Transitions
   ==================================== */
.swiper-slide img {
    transition: transform 0.3s ease;
}

.swiper-slide:hover img {
    transform: scale(1.02);
}

@media (hover: none) {
    .swiper-slide:hover img {
        transform: none;
    }
}

/* ====================================
   Performance Optimization
   ==================================== */
.swiper-slide {
    will-change: transform;
}

.swiper-slide img {
    will-change: auto;
}