/*
 * 工厂实拍接在四张数据卡后，保持设计稿 1920px 画布内的 1220px 内容宽度。
 * 主题既有企业简介规则仍负责文字、视频和数据卡；此处只扩展阶段高度及新画廊。
 */
.zbt-about-page-stage--company,
.zbt-about-page-company__dynamic {
    block-size: 1890px;
}

.zbt-about-page-company__factory {
    position: absolute;
    inset-block-start: 1268px;
    inset-inline-start: 2px;
    box-sizing: border-box;
    inline-size: 1217px;
    block-size: 473px;
    padding: 28px 28px 58px;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(90deg, #0032c8 0%, #00cce1 100%);
}

.zbt-about-page-company__factory-viewport {
    display: grid;
    grid-auto-columns: calc((100% - 28px) / 3);
    grid-auto-flow: column;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    cursor: grab;
}

.zbt-about-page-company__factory-viewport::-webkit-scrollbar {
    display: none;
}

.zbt-about-page-company__factory-viewport.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
}

/* 滑块拖动期间禁用照片吸附，保证指针位置与画廊连续对应。 */
.zbt-about-page-company__factory-viewport.is-scrollbar-dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.zbt-about-page-company__factory-viewport:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.zbt-about-page-company__factory-viewport img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 1.29;
    block-size: auto;
    border-radius: 8px;
    background: #fff;
    object-fit: cover;
    scroll-snap-align: start;
    user-select: none;
    -webkit-user-drag: none;
}

/* 白色短标随原生 scrollLeft 移动；滑轨本身仍可由触屏与触摸板直接滚动。 */
.zbt-about-page-company__factory-progress {
    position: relative;
    block-size: 2px;
    margin-block-start: 56px;
    background: rgb(255 255 255 / 90%);
    cursor: pointer;
    touch-action: none;
}

/* 透明命中区扩大到 28px，不改变细线位置或占用额外布局高度。 */
.zbt-about-page-company__factory-progress::before {
    content: '';
    position: absolute;
    inset: -13px 0;
}

.zbt-about-page-company__factory-progress.is-dragging,
.zbt-about-page-company__factory-progress.is-dragging span { cursor: grabbing; }

.zbt-about-page-company__factory-progress span {
    position: absolute;
    inset-block-start: -3px;
    inset-inline-start: var(--zbt-factory-progress, 0%);
    inline-size: 11%;
    block-size: 8px;
    border-radius: 1px;
    background: #fff;
    cursor: grab;
    touch-action: none;
}

.zbt-about-page-company__factory-progress span:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* 中等桌面使用既有 1920px 画布缩放；阶段高度必须与内部新增内容同步。 */
@media (min-width: 92.0625rem) and (max-width: 120rem) {
    .zbt-about-page-stage--company {
        block-size: calc(100cqi * 1890 / 1920);
    }
}

@media (max-width: 92rem) {
    .zbt-about-page-stage--company,
    .zbt-about-page-company__dynamic {
        block-size: auto;
    }

    .zbt-about-page-company__factory {
        position: relative;
        inset: auto;
        grid-column: 1 / -1;
        inline-size: 100%;
        block-size: auto;
        margin-block-start: 32px;
    }
}

@media (max-width: 68rem) {
    .zbt-about-page-company__factory-viewport {
        grid-auto-columns: calc((100% - 14px) / 2);
    }
}

@media (max-width: 48rem) {
    .zbt-about-page-company__factory {
        margin-block-start: 0;
        padding: 16px 16px 28px;
    }

    .zbt-about-page-company__factory-viewport {
        grid-auto-columns: 82%;
        gap: 12px;
    }

    .zbt-about-page-company__factory-progress {
        margin-block-start: 28px;
    }
}