/*
 * news-slider.css — 主题内嵌幻灯片样式
 * 用于 1号幻灯区块 & 2号幻灯区块（CSS 类前缀 nws-）
 * @package NewsWire_Pro
 */

:root {
    --nws-h: 380px;
    --nws-radius: 10px;
    --nws-bg: var(--newswire-slider-bg-color, #111);
    --nws-fg: var(--newswire-slider-title-color, #fff);
    --nws-title-below-color: var(--newswire-slider-title-below-color, #111);
    --nws-overlay: var(--newswire-slider-overlay, linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .05) 70%));
}

/* 包装层：应用间距管理中的 padding 变量 */
.nws-slider1-wrapper {
    grid-column: 1 / -1;
    padding-top: var(--newswire-slider1-padding-top, 10px);
    padding-bottom: var(--newswire-slider1-padding-bottom, 10px);
}

.nws-slider2-wrapper {
    grid-column: 1 / -1;
    padding-top: var(--newswire-slider2-padding-top, 10px);
    padding-bottom: var(--newswire-slider2-padding-bottom, 10px);
}

/* ── 幻灯片主体 ─────────────────────────────────────────── */

.nws-hero {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
    clear: both;
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
}

.nws-track {
    position: relative;
    overflow: hidden;
    border-radius: var(--nws-radius);
    background: var(--nws-bg-custom, var(--nws-bg));
    min-height: var(--nws-h);
}

.nws-slides {
    display: flex;
    position: relative;
    height: var(--nws-h);
    transition: transform .55s ease;
    will-change: transform;
}

.nws-slide {
    min-width: 100%;
    position: relative;
    contain: content;
}

.nws-slide-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: var(--nws-image-top-gap, 10px);
    position: relative;
    color: inherit;
    text-decoration: none;
    background: var(--nws-bg-custom, var(--nws-bg));
}

.nws-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.nws-img-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18), transparent 48%), linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .18));
}

/* ── 图片填充模式 ─────────────────────────────────────── */

.nws-fit-width .nws-img {
    width: 100%;
    height: auto;
    max-height: none;
}

.nws-fit-height .nws-img {
    height: 100%;
    width: auto;
    max-width: none;
}

.nws-fill .nws-img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: fill;
}

/* ── 标题字幕 ─────────────────────────────────────────── */

.nws-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--nws-title-bottom-gap, 0px);
    padding: 14px 16px;
    color: var(--nws-title-custom, var(--nws-fg));
    background: var(--nws-overlay);
    pointer-events: none;
}

.nws-title {
    margin: 0;
    font-size: var(--nws-title-size, 20px);
    line-height: 1.3;
}

/* 标题在图片下方模式 */
.nws-title-pos-below .nws-slide-link {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
}

.nws-title-pos-below .nws-track,
.nws-title-pos-below .nws-slides {
    min-height: 0;
    height: auto;
}

.nws-title-pos-below .nws-img {
    max-height: var(--nws-h);
    width: auto;
}

.nws-title-pos-below .nws-caption {
    position: static;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    color: var(--nws-title-below-custom, var(--nws-title-below-color));
    pointer-events: auto;
    text-align: center;
}

.nws-title-pos-below .nws-title {
    margin-top: var(--nws-title-gap, 10px);
    margin-left: auto;
    margin-right: auto;
    max-width: 92%;
    text-align: center;
    line-height: 1.35;
    max-height: calc(1.35em * 2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── 导航按钮 ─────────────────────────────────────────── */

.nws-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: saturate(130%) blur(2px);
}

.nws-nav:hover {
    background: rgba(0, 0, 0, .62);
}

.nws-nav span {
    font-size: 28px;
    line-height: 1;
    color: #fff;
    display: inline-block;
    transform: translateY(-1px);
}

.nws-prev {
    left: 10px;
}

.nws-next {
    right: 10px;
}

/* ── 外框样式 frame-1 ~ frame-10 ──────────────────────── */

.nws-frame-1 .nws-track {
    border-radius: 12px;
    border: 1px solid rgba(17, 24, 39, .28);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

.nws-frame-2 .nws-track {
    border-radius: 18px;
    border: 4px solid rgba(31, 41, 55, .42);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55) inset, 0 10px 26px rgba(15, 23, 42, .16);
}

.nws-frame-3 .nws-track {
    border-radius: 10px;
    border: 1px solid rgba(17, 24, 39, .22);
    box-shadow: 0 16px 36px rgba(2, 6, 23, .30);
}

.nws-frame-4 .nws-track {
    border-radius: 20px;
    border: 1px solid rgba(6, 182, 212, .52);
    box-shadow: 0 0 0 2px rgba(15, 23, 42, .30), 0 0 24px rgba(6, 182, 212, .35), 0 12px 24px rgba(15, 23, 42, .16);
}

.nws-frame-5 .nws-track {
    border-radius: 0;
    border-top: 6px solid rgba(17, 24, 39, .42);
    border-bottom: 6px solid rgba(17, 24, 39, .42);
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .26), 0 10px 18px rgba(15, 23, 42, .12);
}

.nws-frame-6 .nws-track {
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .72);
    box-shadow: 0 10px 24px rgba(2, 6, 23, .30);
}

.nws-frame-7 .nws-track {
    border-radius: 18px;
    border: 4px solid rgba(2, 6, 23, .82);
    box-shadow: 0 0 0 2px rgba(71, 85, 105, .34) inset, 0 12px 28px rgba(2, 6, 23, .34);
}

.nws-frame-8 .nws-track {
    border-radius: 10px;
    border: 1px solid rgba(2, 6, 23, .62);
    box-shadow: 0 18px 38px rgba(2, 6, 23, .44);
}

.nws-frame-9 .nws-track {
    border-radius: 20px;
    border: 1px solid rgba(2, 6, 23, .72);
    box-shadow: 0 0 0 2px rgba(2, 6, 23, .48), 0 0 24px rgba(34, 211, 238, .25), 0 14px 24px rgba(2, 6, 23, .32);
}

.nws-frame-10 .nws-track {
    border-radius: 0;
    border-top: 6px solid rgba(2, 6, 23, .85);
    border-bottom: 6px solid rgba(2, 6, 23, .85);
    box-shadow: inset 0 0 0 1px rgba(71, 85, 105, .55), 0 12px 18px rgba(2, 6, 23, .22);
}

/* ── 切换动画 effect-2 ~ effect-10 ───────────────────── */

.nws-slide.nws-enter {
    animation-duration: .62s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

.nws-effect-2 .nws-slide.nws-enter {
    animation-name: nhsFadeIn;
}

.nws-effect-3 .nws-slide.nws-enter {
    animation-name: nhsZoomIn;
}

.nws-effect-4 .nws-slide.nws-enter {
    animation-name: nhsZoomOut;
}

.nws-effect-5 .nws-slide.nws-enter {
    animation-name: nhsSlideUp;
}

.nws-effect-6 .nws-slide.nws-enter {
    animation-name: nhsSlideDown;
}

.nws-effect-7 .nws-slide.nws-enter {
    animation-name: nhsFlipIn;
}

.nws-effect-8 .nws-slide.nws-enter {
    animation-name: nhsRotateSoft;
}

.nws-effect-9 .nws-slide.nws-enter {
    animation-name: nhsBlurReveal;
}

.nws-effect-10 .nws-slide.nws-enter {
    animation-name: nhsSkewSweep;
}

/* ── Keyframe 动画定义 ────────────────────────────────── */

@keyframes nhsFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes nhsZoomIn {
    from {
        opacity: 0;
        transform: scale(1.08);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes nhsZoomOut {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes nhsSlideUp {
    from {
        opacity: 0;
        transform: translateY(36px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nhsSlideDown {
    from {
        opacity: 0;
        transform: translateY(-36px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nhsFlipIn {
    from {
        opacity: 0;
        transform: perspective(900px) rotateY(-22deg);
    }

    to {
        opacity: 1;
        transform: perspective(900px) rotateY(0);
    }
}

@keyframes nhsRotateSoft {
    from {
        opacity: 0;
        transform: rotate(-2deg) scale(1.02);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes nhsBlurReveal {
    from {
        opacity: 0;
        filter: blur(9px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes nhsSkewSweep {
    from {
        opacity: 0;
        transform: translateX(-32px) skewX(-7deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) skewX(0);
    }
}

/* ── 响应式适配 ───────────────────────────────────────── */

@media (max-width: 1024px) {
    :root {
        --nws-h: 320px;
    }
}

@media (max-width: 768px) {
    :root {
        --nws-h: 260px;
    }
}

@media (max-width: 480px) {
    :root {
        --nws-h: 220px;
    }

    .nws-nav {
        width: 36px;
        height: 36px;
    }

    .nws-nav span {
        font-size: 24px;
    }
}