/* ==========================================================================
 * banner2026.css — 首页轮播现代化外观（新增文件，2026-09）
 *
 * 只作用于带 .sk-banner2026 的轮播容器（目前仅 PC 官网首页 #b04）。
 * 不修改 main2.css / responsiveslides.css，不影响其他 300+ 模板页面。
 * 选择器统一以 #b04.sk-banner2026 开头，靠 ID 优先级覆盖旧样式。
 * 图片、文案、链接均来自后台 webgundong 表，本文件不涉及任何内容变更。
 * ========================================================================== */

/* ---- 容器基础：新版轮播的箭头/指示器/叠放层都靠绝对定位，容器必须是定位上下文。
   main2.css 已对 .banner 设置 position:relative，这里兜底少数不引用 main2.css 的页面 ---- */
#b04.sk-banner2026 {
    position: relative;
}

/* ---- 容器：圆角卡片化 + 轻投影（仅首页等带 .sk-banner2026--card 修饰类的页面）----
   全站通栏页面（手机端等）不加此修饰类，宽度/边距/圆角保持原版 100% 通栏不变。 */
#b04.sk-banner2026.sk-banner2026--card {
    width: calc(100% - 32px) !important; /* 覆盖模板内联 width:100% */
    max-width: 1600px;
    margin: 16px auto 8px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 40, 45, .14);
    outline: none;
}
#b04.sk-banner2026.sk-banner2026--card:focus-visible {
    box-shadow: 0 12px 32px rgba(15, 40, 45, .14), 0 0 0 3px rgba(51, 204, 204, .55);
}

/* 通栏页面（无 --card 修饰类）：只保留溢出隐藏与焦点轮廓，宽度边距一律不动 */
#b04.sk-banner2026:not(.sk-banner2026--card) {
    overflow: hidden;
    outline: none;
}
#b04.sk-banner2026:not(.sk-banner2026--card):focus-visible {
    outline: 2px solid rgba(51, 204, 204, .85);
    outline-offset: -2px;
}

/* ---- 幻灯片：绝对定位叠放，淡入淡出 ----
   注意：以下叠放规则统一由 .sk2026-ready 门控——该类只在 banner2026.js
   确认接管成功后才加。若 JS 加载失败或老浏览器主动放弃，ul/li 保持
   原版布局，旧版 Unslider 兜底不受影响。 */
#b04.sk-banner2026 ul {
    position: relative;
    animation: none; /* 关闭 main2.css 的 banner-animation 闪动 */
}
#b04.sk-banner2026.sk2026-ready ul li.slider-item {
    float: none;              /* 覆盖 main2.css 的 float:left */
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity .9s ease;
    pointer-events: none;     /* 隐藏层不拦截点击 */
}
#b04.sk-banner2026.sk2026-ready ul li.slider-item.sk2026-active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}
/* 第一张保持相对定位撑开容器高度：
   轮播图实际尺寸以后台上传为准（当前 1600×600，并非 main2.css 骨架屏假设的 1920×600），
   容器高度随图片自适应，避免裁切图片内容 */
#b04.sk-banner2026.sk2026-ready ul li.slider-item:first-child {
    position: relative;
}

/* ---- 高度统一（.sk2026-fixed，JS 测完全部图片后加上）----
   容器宽高比锁定为"最扁那张图"的比例（等宽下高度最小），
   每张图 cover 居中裁剪填满：切换时轮播高度恒定，无空白、无跳动。
   居中裁剪 = 上下/左右同等裁掉，保留中间核心部分。 */
#b04.sk-banner2026.sk2026-ready.sk2026-fixed ul {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
#b04.sk-banner2026.sk2026-ready.sk2026-fixed ul li.slider-item:first-child {
    position: absolute; /* 不再由首图撑高，容器高度改由 aspect-ratio 决定 */
}
#b04.sk-banner2026.sk2026-ready.sk2026-fixed ul li.slider-item img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ---- 图片：轻微缩放（Ken Burns），切换时缓缓推近 ---- */
#b04.sk-banner2026.sk2026-ready ul li.slider-item img {
    transform: scale(1.045);
    transition: transform 6.5s ease-out;
    will-change: transform;
}
#b04.sk-banner2026.sk2026-ready ul li.slider-item.sk2026-active img {
    transform: scale(1);
}

/* ---- 底部渐变遮罩：让指示器在任何图片上都清晰 ---- */
#b04.sk-banner2026.sk2026-ready::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 72px;
    background: linear-gradient(to top, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));
    z-index: 3;
    pointer-events: none;
}

/* ---- 隐藏旧版控件（PNG 箭头 / 进度条 / unslider 圆点） ----
   同样在 JS 接管后才隐藏，保证旧版兜底时旧控件可用 */
#b04.sk-banner2026.sk2026-ready .unslider-arrow04,
#b04.sk-banner2026.sk2026-ready .progress,
#b04.sk-banner2026.sk2026-ready .dots {
    display: none !important;
}

/* ---- 新版箭头：44px 圆形毛玻璃按钮，悬停轮播区域才淡入 ---- */
#b04.sk-banner2026 .sk2026-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease, background-color .3s ease, transform .2s ease;
}
#b04.sk-banner2026 .sk2026-prev { left: 20px; }
#b04.sk-banner2026 .sk2026-next { right: 20px; }
#b04.sk-banner2026:hover .sk2026-arrow,
#b04.sk-banner2026 .sk2026-arrow:focus-visible {
    opacity: 1;
}
#b04.sk-banner2026 .sk2026-arrow:hover {
    background: rgba(51, 204, 204, .85); /* 品牌青 */
}
#b04.sk-banner2026 .sk2026-arrow:active {
    transform: translateY(-50%) scale(.94);
}
#b04.sk-banner2026 .sk2026-arrow svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* ---- 新版指示器：胶囊形进度条 ---- */
#b04.sk-banner2026 .sk2026-dots {
    position: absolute;
    left: 0; right: 0; bottom: 16px;
    display: flex;
    gap: 8px;
    justify-content: center;
    z-index: 6;
    margin: 0;
    padding: 0;
    list-style: none;
}
#b04.sk-banner2026 .sk2026-dot {
    width: 24px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    text-indent: -999em;
    overflow: hidden;
    transition: width .35s ease, background-color .35s ease;
}
#b04.sk-banner2026 .sk2026-dot:hover {
    background: rgba(255, 255, 255, .75);
}
#b04.sk-banner2026 .sk2026-dot.sk2026-on {
    width: 40px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

/* ---- 窄屏适配（PC 模板，仅防窗口被拉窄时箭头挤压） ---- */
@media (max-width: 768px) {
    #b04.sk-banner2026.sk-banner2026--card {
        width: calc(100% - 16px) !important;
        margin-top: 8px;
        border-radius: 10px;
    }
    #b04.sk-banner2026 .sk2026-arrow {
        width: 36px;
        height: 36px;
        opacity: 1; /* 触屏无悬停，常显 */
        background: rgba(0, 0, 0, .3);
    }
    #b04.sk-banner2026 .sk2026-prev { left: 10px; }
    #b04.sk-banner2026 .sk2026-next { right: 10px; }
}

/* ---- 减少动态偏好：关闭缩放与淡入动画 ---- */
@media (prefers-reduced-motion: reduce) {
    #b04.sk-banner2026.sk2026-ready ul li.slider-item,
    #b04.sk-banner2026.sk2026-ready ul li.slider-item img,
    #b04.sk-banner2026 .sk2026-arrow,
    #b04.sk-banner2026 .sk2026-dot {
        transition: none;
    }
    #b04.sk-banner2026.sk2026-ready ul li.slider-item img {
        transform: none;
    }
}