/**
 * 最终版轮播图样式 - ResizeObserver动态方案
 * 功能：通过JS精确监控实现动态高度和无缝布局
 * 创建时间：2025-08-27
 * 版本：5.0
 */

/* ==================== 轮播容器核心样式 ==================== */
.main-banner {
    position: absolute !important;
    /* top 属性由 head.html 中的注入样式控制 */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important; /* 高度由内容决定 */
    overflow: hidden !important;
    z-index: 10 !important;
    background-color: #f0f0f0;
}

/* ==================== 轮播图占位符 ==================== */
.banner-placeholder {
    /* 固定占位高度，减少轮播与下方模块间距 */
    height: 50px !important;
    position: relative;
    z-index: -1;
    transition: height 0.2s ease-out; /* 高度变化时增加平滑过渡 */
}

/* ==================== Swiper内部样式 ==================== */
.main-banner .swiper-wrapper {
    height: auto !important;
}
.main-banner .swiper-slide {
    height: auto !important;
    background-color: #000; /* 黑色背景以适应contain模式 */
}

/* ==================== 图片样式 (完整展示) ==================== */
.main-banner .swiper-slide img {
    display: block !important;
    width: 100% !important;
    height: auto !important; /* 高度自适应 */
    object-fit: contain !important; /* 完整展示图片，不裁剪 */
    object-position: center center !important;
}

/* ==================== 分页器样式 ==================== */
.main-banner .swiper-pagination {
    bottom: 20px !important;
    z-index: 15 !important;
}

.main-banner .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
    margin: 0 6px !important;
}

.main-banner .swiper-pagination-bullet-active {
    background: #fff !important;
    width: 30px !important;
    border-radius: 6px !important;
}

/* ==================== 移除导航按钮 ==================== */
.main-banner .swiper-button-prev,
.main-banner .swiper-button-next {
    display: none !important;
}