/* =====================================================
   移动端Banner优化
   Mobile Banner Optimization
   ===================================================== */

/* =====================================================
   1. 轮播容器优化
   Swiper Container Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 隐藏桌面端Banner */
    .banner-container {
        display: none !important;
    }
    
    /* 显示移动端Banner */
    .mobile-container {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
    }
    
    .mobile-container .swiper-wrapper {
        width: 100% !important;
        height: auto !important;
    }
    
    .mobile-container .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Banner图片 */
    .mobile-container .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
        min-height: 200px !important;
    }
    
    /* Banner标题 */
    .mobile-container .swiper-slide .span1 {
        position: absolute !important;
        top: 20% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 24px !important;
        font-weight: bold !important;
        color: #fff !important;
        text-align: center !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
        padding: 0 20px !important;
        width: 90% !important;
    }
    
    /* Banner描述 */
    .mobile-container .swiper-slide .span2 {
        position: absolute !important;
        top: 30% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 14px !important;
        color: #fff !important;
        text-align: center !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
        padding: 0 20px !important;
        width: 90% !important;
        line-height: 1.5 !important;
        margin-top: 10px !important;
    }
    
    /* 导航按钮（箭头） */
    .mobile-container .swiper-button-prev,
    .mobile-container .swiper-button-next {
        width: 36px !important;
        height: 36px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        font-size: 16px !important;
        top: 50% !important;
        margin-top: -18px !important;
    }
    
    .mobile-container .swiper-button-prev {
        left: 10px !important;
    }
    
    .mobile-container .swiper-button-next {
        right: 10px !important;
    }
    
    /* 分页圆点 */
    .mobile-container .banner-pagination {
        position: absolute !important;
        bottom: 15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
    }
    
    .mobile-container .banner-pagination .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        background: rgba(255, 255, 255, 0.5) !important;
        opacity: 1 !important;
        margin: 0 4px !important;
    }
    
    .mobile-container .banner-pagination .swiper-pagination-bullet-active {
        background: #fff !important;
        width: 20px !important;
        border-radius: 4px !important;
    }
}

@media (max-width: 480px) {
    .mobile-container .swiper-slide img {
        min-height: 180px !important;
    }
    
    .mobile-container .swiper-slide .span1 {
        font-size: 20px !important;
        top: 15% !important;
    }
    
    .mobile-container .swiper-slide .span2 {
        font-size: 12px !important;
        top: 25% !important;
    }
    
    .mobile-container .swiper-button-prev,
    .mobile-container .swiper-button-next {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        margin-top: -16px !important;
    }
    
    .mobile-container .swiper-button-prev {
        left: 5px !important;
    }
    
    .mobile-container .swiper-button-next {
        right: 5px !important;
    }
}

@media (min-width: 769px) {
    /* 隐藏移动端Banner */
    .mobile-container {
        display: none !important;
    }
    
    /* 显示桌面端Banner */
    .banner-container {
        display: block !important;
    }
}

/* =====================================================
   2. Banner动画优化
   Banner Animation Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 简化动画效果以提升性能 */
    .mobile-container .swiper-slide .ani {
        animation-duration: 0.5s !important;
        animation-fill-mode: both !important;
    }
    
    .mobile-container .swiper-slide .span1 {
        animation-delay: 0.2s !important;
    }
    
    .mobile-container .swiper-slide .span2 {
        animation-delay: 0.4s !important;
    }
    
    /* 淡入动画 */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(-50%, 20px, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(-50%, 0, 0);
        }
    }
}

/* =====================================================
   3. Banner触摸优化
   Banner Touch Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 优化触摸滑动 */
    .mobile-container {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 防止误触 */
    .mobile-container .swiper-slide a {
        min-height: 44px !important;
        display: block !important;
    }
    
    /* 禁用点击高亮 */
    .mobile-container a,
    .mobile-container .swiper-button-prev,
    .mobile-container .swiper-button-next {
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* =====================================================
   4. Banner响应式高度
   Banner Responsive Height
   ===================================================== */

@media (max-width: 768px) {
    /* 自动高度 */
    .mobile-container {
        height: auto !important;
        min-height: 200px !important;
    }
    
    .mobile-container .swiper-slide {
        min-height: 200px !important;
    }
}

@media (max-width: 480px) {
    .mobile-container {
        min-height: 180px !important;
    }
    
    .mobile-container .swiper-slide {
        min-height: 180px !important;
    }
}

@media (min-width: 601px) and (max-width: 768px) {
    .mobile-container {
        min-height: 250px !important;
    }
    
    .mobile-container .swiper-slide {
        min-height: 250px !important;
    }
    
    .mobile-container .swiper-slide img {
        min-height: 250px !important;
    }
    
    .mobile-container .swiper-slide .span1 {
        font-size: 28px !important;
    }
    
    .mobile-container .swiper-slide .span2 {
        font-size: 16px !important;
    }
}

/* =====================================================
   5. Banner图片加载优化
   Banner Image Loading Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 图片懒加载占位 */
    .mobile-container .swiper-slide img[loading="lazy"] {
        background-color: #f5f5f5 !important;
    }
    
    /* 图片加载动画 */
    .mobile-container .swiper-slide img {
        transition: opacity 0.3s ease !important;
    }
    
    .mobile-container .swiper-slide img.loading {
        opacity: 0.5 !important;
    }
    
    .mobile-container .swiper-slide img.loaded {
        opacity: 1 !important;
    }
}

/* =====================================================
   6. 横屏优化
   Landscape Orientation Optimization
   ===================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .mobile-container {
        min-height: 150px !important;
    }
    
    .mobile-container .swiper-slide img {
        min-height: 150px !important;
    }
    
    .mobile-container .swiper-slide .span1 {
        font-size: 18px !important;
        top: 10% !important;
    }
    
    .mobile-container .swiper-slide .span2 {
        font-size: 12px !important;
        top: 20% !important;
    }
}

/* =====================================================
   7. 安全区域适配（刘海屏）
   Safe Area Support
   ===================================================== */

@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        /* 顶部Banner适配刘海屏 */
        .mobile-container {
            padding-top: env(safe-area-inset-top) !important;
        }
    }
}

/* =====================================================
   8. 辅助类
   Helper Classes
   ===================================================== */

/* 禁用Banner自动播放 */
.mobile-container.no-autoplay {
    autoplay: false !important;
}

/* Banner全屏模式 */
.mobile-container.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
}

/* Banner渐变遮罩 */
.mobile-container::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50% !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* =====================================================
   9. 兼容性优化
   Compatibility Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 老版本浏览器兼容 */
    .mobile-container .swiper-slide img {
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
    
    /* 硬件加速 */
    .mobile-container {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-perspective: 1000 !important;
        perspective: 1000 !important;
    }
}

/* =====================================================
   10. Banner内容容器优化
   Banner Content Container Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* Banner内容包装器 */
    .mobile-container .swiper-slide {
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* 链接元素 */
    .mobile-container .swiper-slide a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        text-decoration: none !important;
    }
    
    /* 图片容器 */
    .mobile-container .swiper-slide a img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
}