/* Swiper 容器样式 */
.swiper-container {
    width: 100%; /* 宽度占父容器 */
    max-width: 100%; /* 最大宽度限制在文章区域 */
    margin: 0 auto; /* 居中对齐 */
    overflow: hidden; /* 防止内容溢出 */
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}

/* Swiper 滑块样式 */
.swiper-wrapper {
    display: flex; /* 确保内容横向排列 */
}

.swiper-slide {
    width: auto; /* 确保每张图片自适应宽度 */
    flex-shrink: 0; /* 不压缩滑块内容 */
    text-align: center; /* 居中对齐图片 */
}

.swiper-slide img {
    width: 100%;       /* 图片宽度为父容器的 100% */
    max-width: 640px; /* 图片最大宽度限制为父容器宽度 */
    height: auto; /* 保持图片宽高比 */
    object-fit: cover; /* 确保图片覆盖区域并保持比例 */
    border-radius: 5px; /* 可选：为图片添加圆角 */
}

/* Swiper 滚动条样式 */
.swiper-scrollbar {
    background: #e0e0e0; /* 滑动条背景颜色 */
    height: 8px; /* 滑动条高度 */
    border-radius: 4px;
    margin-top: 5px; /* 滑动条与图片的间距 */
    overflow: hidden; /* 隐藏可能的溢出 */
    position: relative !important; /* 确保滑块条布局正常 */
}

.swiper-scrollbar-drag {
    background: #0073aa; /* 滑动条拖动块的颜色 */
    border-radius: 4px;
}

/* 如果文章区域有限制宽度（如 800px），确保 Swiper 遵循文章宽度 */
.entry-content .swiper-container {
    max-width: 100%; /* 遵循主题的内容宽度 */
}

/* 手机端适应样式 */
@media (max-width: 768px) {
    .swiper-slide img {
    max-width: 400px; /* 图片最大宽度限制为父容器宽度 */
}