/* =========================================================
   zb-show-02 1920宽三图输送轮播 V1.1

   原HTML不用修改：
   .zb-show-02-container > .zb-show-02-item > img

   中间为1300×700清晰主图；左右为上一张/下一张模糊大图的露出区域；
   总宽最大1920px，左右清晰缩略图可点击切换。
   ========================================================= */

.zb-show-02-container {
    --zb-stage-width: 1920px;
    --zb-main-width: 1300px;
    --zb-stage-height: 700px;
    --zb-side-width: 310px;
    --zb-left-x: -990px;
    --zb-center-x: 310px;
    --zb-right-x: 1610px;
    width: min(var(--zb-stage-width), 100vw);
    height: var(--zb-stage-height);
    max-width: 1920px;
    position: relative;
    left: 0;
    /* JS根据浏览器可视区域实测纠偏，不受外层1300px表格位置影响 */
    transform: translateX(var(--zb-page-shift, 0px));
    margin: 0;
    display: block;
    overflow: hidden;
    isolation: isolate;
    background: #11151b;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    /* FIX：键盘焦点 outline 由 focus-visible 控制 */
    outline: none;
}

.zb-show-02-container *,
.zb-show-02-container *::before,
.zb-show-02-container *::after {
    box-sizing: border-box;
}

/* 键盘焦点可见指示（鼠标点击不触发） */
.zb-show-02-container:focus-visible {
    outline: 2px solid rgba(238, 126, 17, 0.7);
    outline-offset: 3px;
}

/* JS载入前只显示第一张，避免原图片纵向排开 */
.zb-show-02-container:not([data-zb-triple-ready="1"]) > .zb-show-02-item {
    width: min(1300px, 67.708vw);
    aspect-ratio: 13 / 7;
    margin: 0 auto;
    display: none;
}

.zb-show-02-container:not([data-zb-triple-ready="1"]) > .zb-show-02-item:first-child {
    display: block;
}

.zb-show-02-container:not([data-zb-triple-ready="1"]) > .zb-show-02-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.zb-show-02-triple-sources {
    display: none !important;
}

.zb-show-02-triple-stage {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #11151b;
}

.zb-show-02-triple-layer {
    width: var(--zb-main-width);
    height: var(--zb-stage-height);
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #080b10;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, filter;
}

.zb-show-02-triple-layer > img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: block;
    object-fit: cover;
    border: 0;
    transform: scale(1.012);
    -webkit-user-drag: none;
    user-select: none;
}

/* 左右完整大图只露出靠近主图的部分，并做灰色模糊处理 */
.zb-show-02-triple-layer.is-zb-left {
    z-index: 2;
    transform: translate3d(var(--zb-left-x), 0, 0);
    filter: blur(9px) grayscale(.72) brightness(.55) saturate(.55);
}

.zb-show-02-triple-layer.is-zb-center {
    z-index: 6;
    transform: translate3d(var(--zb-center-x), 0, 0);
    filter: blur(0) grayscale(0) brightness(1) saturate(1);
    box-shadow: 0 0 42px rgba(0, 0, 0, .42);
}

.zb-show-02-triple-layer.is-zb-right {
    z-index: 2;
    transform: translate3d(var(--zb-right-x), 0, 0);
    filter: blur(9px) grayscale(.72) brightness(.55) saturate(.55);
}

/* 让左右灰图更稳，不与主图抢视觉 */
.zb-show-02-triple-side-shade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: var(--zb-side-width);
    pointer-events: none;
}

.zb-show-02-triple-side-shade.is-left {
    left: 0;
    background: linear-gradient(90deg, rgba(8, 10, 14, .48), rgba(8, 10, 14, .12));
}

.zb-show-02-triple-side-shade.is-right {
    right: 0;
    background: linear-gradient(270deg, rgba(8, 10, 14, .48), rgba(8, 10, 14, .12));
}

/* ------------------------- 清晰缩略图按钮 ------------------------- */
.zb-show-02-triple-thumb {
    width: min(184px, calc(var(--zb-side-width) - 52px));
    aspect-ratio: 13 / 7;
    position: absolute;
    top: 50%;
    z-index: 20;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .94);
    border-radius: 2px;
    outline: 0;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .46);
    cursor: pointer;
    transform: translate(-50%, -50%);
    /* FIX-3：opacity 加入 transition，切换动画期间淡出更平滑 */
    transition: border-color .24s ease, box-shadow .24s ease, margin-top .24s ease, opacity .24s ease;
}

.zb-show-02-triple-thumb-prev {
    left: calc(var(--zb-side-width) / 2);
}

.zb-show-02-triple-thumb-next {
    left: calc(100% - var(--zb-side-width) / 2);
}

.zb-show-02-triple-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: none !important;
    transform: scale(1.01);
    transition: transform .30s ease, opacity .22s ease;
    -webkit-user-drag: none;
    user-select: none;
}

.zb-show-02-triple-thumb::after {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    margin-top: -17px;
    border-radius: 50%;
    color: #fff;
    background: rgba(238, 126, 17, .92);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .32);
    font: bold 24px/1 Arial, sans-serif;
}

.zb-show-02-triple-thumb-prev::after {
    content: "‹";
    left: 10px;
}

.zb-show-02-triple-thumb-next::after {
    content: "›";
    right: 10px;
}

.zb-show-02-triple-thumb:hover {
    margin-top: -4px;
    border-color: #ff9b27;
    box-shadow: 0 17px 38px rgba(0, 0, 0, .52), 0 0 0 2px rgba(255, 147, 31, .18);
}

.zb-show-02-triple-thumb:hover img {
    transform: scale(1.07);
}

.zb-show-02-triple-thumb:active {
    margin-top: 0;
}

.zb-show-02-triple-thumb:disabled {
    display: none;
}

/* FIX-3：切换动画期间缩略图半透明，提供明确的"锁定中"视觉反馈 */
.zb-show-02-container.is-zb-triple-switching .zb-show-02-triple-thumb {
    pointer-events: none;
    opacity: 0.5;
}

.zb-show-02-container.is-zb-thumb-refresh .zb-show-02-triple-thumb img {
    animation: zb-show-02-thumb-refresh .30s ease both;
}

@keyframes zb-show-02-thumb-refresh {
    0%   { opacity: .22; transform: scale(1.06); }
    100% { opacity: 1;   transform: scale(1.01); }
}

.zb-show-02-container[data-zb-count="1"] .zb-show-02-triple-layer.is-zb-left,
.zb-show-02-container[data-zb-count="1"] .zb-show-02-triple-layer.is-zb-right,
.zb-show-02-container[data-zb-count="1"] .zb-show-02-triple-side-shade,
.zb-show-02-container[data-zb-count="1"] .zb-show-02-triple-thumb {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .zb-show-02-triple-layer,
    .zb-show-02-triple-thumb,
    .zb-show-02-triple-thumb img {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}