/**
 * 卡尼奶主题 · 幻灯片(新) 样式
 *
 * 「幻灯片(新)」小工具的全部样式：容器高度、图层动效、分页器、缩略图等。
 * 通用工具类（.absolute/.fit-cover/.radius8 等）已限定在 .zib-slider / .new-swiper
 * 作用域内，避免污染全局；CSS 变量均带回退值，独立可用。
 */

/* ==================== 容器与高度 ==================== */
.zib-slider {
    position: relative;
}

.new-swiper {
    overflow: hidden;
    position: relative;
    --pc-height: auto;
    --m-height: auto;
    --max-height: auto;
    --min-height: auto;
}

.new-swiper .swiper-wrapper {
    height: var(--pc-height);
    display: flex;
}

.new-swiper .swiper-slide img:not(.img-icon):not(.avatar) {
    max-height: var(--max-height);
    min-height: var(--min-height);
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* 按比例高度 */
.new-swiper.scale-height {
    --scale-height: 40%;
    --pc-height: 100%;
    --m-height: 100%;
    padding-bottom: var(--scale-height);
    width: 100%;
    height: 0;
}

.new-swiper.scale-height .swiper-wrapper,
.new-swiper.scale-height .swiper-slide img {
    position: absolute;
}

/* ==================== 3D 切换效果：完全对齐主题内置幻灯片的做法 ==================== */
/* 内置 cube 干净的原因：每张幻灯片（立方体各面）是“不透明底色 + flex 居中
   + 图片 object-fit:cover 铺满”的完整矩形。新幻灯片默认的 scale-height 会把
   .swiper-wrapper / img 改为 position:absolute、面本身又无底色，导致旋转时面透明露白。
   这里针对 3D 效果把面恢复为与内置一致的不透明实面。 */
.new-swiper.swiper-cube .swiper-slide,
.new-swiper.swiper-coverflow .swiper-slide,
.new-swiper.swiper-flip .swiper-slide {
    background: var(--knn-bg-color, #f3f3f3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.new-swiper.swiper-cube .swiper-slide img,
.new-swiper.swiper-coverflow .swiper-slide img,
.new-swiper.swiper-flip .swiper-slide img {
    position: static;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* ==================== 作用域工具类 ==================== */
.zib-slider .absolute {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.zib-slider .fit-cover {
    width: 100%;
    height: 100%;
    transition: all 0.2s;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
}

.zib-slider .radius8,
.new-swiper .swiper-slide img.radius8 {
    border-radius: var(--main-radius, 8px);
}

/* ==================== 叠加图层 ==================== */
.new-swiper .swiper-slide .slide-layer img {
    -o-object-fit: contain !important;
    object-fit: contain !important;
    width: auto !important;
    position: unset !important;
}

/* ==================== 模糊背景 / 渐变背景 ==================== */
.blur-background .slide-blur-bg + * > img,
.swiper-slide.gradient-bg > * > img {
    object-fit: contain !important;
    border-radius: 0 !important;
}

.blur-background .slide-blur-bg img {
    top: 0;
    left: 0;
    opacity: 0.5;
    transform: scale(1.5);
    --lazy-animation: none;
}

/* ==================== 叠加文案 ==================== */
.new-swiper .abs-center {
    position: absolute;
    top: 50%;
    right: 0.7em;
    transform: translateY(-50%);
    z-index: 1;
    left: 0;
    width: 100%;
}

.new-swiper .abs-center.left-top,
.new-swiper .abs-center.right-top {
    transform: unset;
    top: 0;
}

.new-swiper .abs-center.right-top {
    left: auto;
    width: auto;
}

.new-swiper .abs-center.left-top {
    text-align: left;
}

.new-swiper .abs-center.conter-bottom,
.new-swiper .abs-center.conter-conter {
    text-align: center;
}

.new-swiper .abs-center.right-top,
.new-swiper .abs-center.right-bottom,
.new-swiper .abs-center.right-conter {
    text-align: right;
}

.new-swiper .abs-center.conter-bottom,
.new-swiper .abs-center.right-bottom,
.new-swiper .abs-center.left-bottom {
    top: auto;
    transform: unset;
    bottom: 0;
}

.new-swiper .slide-text {
    position: absolute;
    color: #fff;
    width: 100%;
    padding: 1.8em 2.5em;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    z-index: 1;
    background: unset;
    transition: opacity 1s;
    opacity: 1;
    --text-size-pc: 20px;
    font-size: var(--text-size-pc);
}

.new-swiper .slide-text .slide-desc {
    margin-top: 0.6em;
    font-size: 60%;
}

.new-swiper .slide-text.conter-bottom,
.new-swiper .slide-text.conter-conter {
    padding-left: 1em;
    padding-right: 1em;
}

/* ==================== 分页器 / 按钮 ==================== */
.new-swiper .swiper-pagination.kaoyou {
    text-align: right;
    padding-right: 10px;
    left: auto;
    width: auto;
    right: 0;
}

.new-swiper .swiper-pagination-bullets > .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
    background: #fff;
    opacity: 0.7;
    border: none;
}

.new-swiper .swiper-pagination-bullets > .swiper-pagination-bullet-active {
    width: 8px;
    opacity: 1;
}

/* 缩略图分页 */
.new-swiper .swiper-pagination.pagination-type-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    --pagination-size: 50px;
    padding: 5px 10px;
    width: 100%;
    background: var(--header-bg, rgba(0, 0, 0, 0.35));
    bottom: 0;
}

.new-swiper .pagination-thumbnail-item {
    width: var(--pagination-size);
    height: var(--pagination-size);
    flex-shrink: 0;
    margin: 2px;
}

.new-swiper .pagination-thumbnail-item img {
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: 0.4s;
    cursor: pointer;
}

.new-swiper .pagination-thumbnail-item-active img {
    border-color: var(--focus-color, #ff2d54);
}

/* ==================== 显示规则（PC/移动端） ==================== */
.visible-xs-block {
    display: none !important;
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 767px) {
    .new-swiper .swiper-wrapper {
        height: var(--m-height);
    }

    .new-swiper .slide-text {
        --text-size-m: 13px;
        font-size: var(--text-size-m);
    }

    .new-swiper .swiper-pagination-bullet {
        width: 4px;
        height: 4px;
        background: #fff;
        opacity: 0.7;
        border: none;
    }

    .new-swiper .swiper-pagination-bullet-active {
        width: 12px;
        opacity: 1;
    }

    .hidden-xs {
        display: none !important;
    }

    .visible-xs-block {
        display: block !important;
    }
}

@media (max-width: 640px) {
    .new-swiper .swiper-button-next,
    .new-swiper .swiper-button-prev {
        display: none;
    }
}