/*
 * 首页advantages区块前台样式
 * Reason: 规则从原有主题样式按选择器归属拆分；不修改尺寸、颜色、断点和资源语义。
 */

.zbt-home-advantages {
    position: relative;
    block-size: 1003px;
    overflow: clip;
    background: var(--zbt-home-psd-canvas-background);
    color: var(--aura-spec-color-text-neutral-diffuse);
}

.zbt-home-advantages__default {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: var(--zbt-home-psd-canvas-inline-size);
    block-size: 1003px;
    overflow: clip;
}

.zbt-home-advantages__default > img {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: var(--zbt-home-psd-canvas-inline-size);
    max-inline-size: none;
    block-size: 1003px;
    pointer-events: none;
    user-select: none;
}

@media (min-width: 92.0625rem) and (max-width: 119.9375rem) {
.zbt-home-advantages.has-psd-default {
        block-size: calc(100vw * 1003 / 1920);
        aspect-ratio: auto;
    }

.zbt-home-advantages.has-psd-default .zbt-home-advantages__default > img {
        inline-size: var(--zbt-home-psd-canvas-inline-size);
    }
}

.zbt-home-advantages__dynamic {
    position: relative;
    inline-size: var(--zbt-home-psd-canvas-inline-size);
    block-size: 1003px;
    background: var(--zbt-home-psd-canvas-background);
}

.has-psd-default .zbt-home-advantages__dynamic {
    display: none;
}

.zbt-home-advantages__dynamic::before {
    position: absolute;
    inset-block-start: 156px;
    inset-inline-start: var(--zbt-home-psd-stage-inline-start);
    inline-size: var(--zbt-home-psd-stage-inline-size);
    block-size: 745px;
    /* Reason: PSD 只在展示台上部压暗背景以承载白色文案；渐变必须在中下部完全退场，保留厂区原图亮度。 */
    background-image: linear-gradient(
        180deg,
        rgb(3 3 3 / 0.92) 0%,
        rgb(3 3 3 / 0.84) 19%,
        rgb(3 3 3 / 0.56) 37%,
        rgb(3 3 3 / 0.17) 53%,
        rgb(3 3 3 / 0) 66%
    ), var(--zbt-advantages-image);
    background-position: center;
    background-size: cover;
    content: "";
}

.zbt-home-advantages__canvas {
    position: relative;
    block-size: 100%;
    inline-size: var(--zbt-home-psd-canvas-inline-size);
    margin: 0;
}

.zbt-home-advantages__section-title {
    position: absolute;
    inset-block-start: 49px;
    inset-inline-start: var(--zbt-home-psd-title-inline-start);
    margin: 0;
    color: var(--aura-spec-color-text-neutral-diffuse);
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
}

.zbt-home-advantages__grid {
    position: absolute;
    inset-block-start: 176px;
    inset-inline-start: var(--zbt-home-psd-content-inline-start);
    display: grid;
    grid-template-columns: repeat(5, 261px);
}

.zbt-home-advantage {
    position: relative;
    align-self: start;
    min-inline-size: 0;
    padding: 18px 0 0;
}

.zbt-home-advantage:not(:last-child)::after {
    position: absolute;
    inset-block-start: 110px;
    inset-block-end: 0;
    inset-inline-start: 221px;
    block-size: auto;
    inline-size: var(--aura-morph-surface-stroke-thin);
    /* Reason: PSD 的“组 22”对四条白色分隔线施加了共同的纵向用户蒙版；中心接近全亮，两端连续淡出。 */
    background: var(--aura-spec-color-text-neutral-diffuse);
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.02) 0%,
        rgb(0 0 0 / 0.09) 4.4%,
        rgb(0 0 0 / 0.24) 11.7%,
        rgb(0 0 0 / 0.55) 23.4%,
        rgb(0 0 0 / 0.84) 35.2%,
        rgb(0 0 0 / 0.95) 46.9%,
        rgb(0 0 0 / 0.88) 52.7%,
        rgb(0 0 0 / 0.66) 64.5%,
        rgb(0 0 0 / 0.43) 76.2%,
        rgb(0 0 0 / 0.20) 87.9%,
        rgb(0 0 0 / 0.08) 95.6%,
        rgb(0 0 0 / 0.03) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.02) 0%,
        rgb(0 0 0 / 0.09) 4.4%,
        rgb(0 0 0 / 0.24) 11.7%,
        rgb(0 0 0 / 0.55) 23.4%,
        rgb(0 0 0 / 0.84) 35.2%,
        rgb(0 0 0 / 0.95) 46.9%,
        rgb(0 0 0 / 0.88) 52.7%,
        rgb(0 0 0 / 0.66) 64.5%,
        rgb(0 0 0 / 0.43) 76.2%,
        rgb(0 0 0 / 0.20) 87.9%,
        rgb(0 0 0 / 0.08) 95.6%,
        rgb(0 0 0 / 0.03) 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    content: "";
}

.zbt-home-advantage__icon {
    display: grid;
    block-size: 67px;
    place-items: center start;
}

.zbt-home-advantage__icon img {
    display: block;
    inline-size: 67px;
    block-size: 67px;
    object-fit: contain;
    object-position: left center;
}

.zbt-home-advantage h2 {
    margin: 32px 0 0;
    color: var(--aura-spec-color-text-neutral-diffuse);
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;
}

.zbt-home-advantage p {
    inline-size: 176px;
    margin: 24px 0 0;
    color: var(--aura-spec-color-text-neutral-diffuse);
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 42px;
}

@media (max-width: 62rem) {
.zbt-home-advantages__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

.zbt-home-advantage:nth-child(3) {
        border-right: 0;
    }
}

@media (max-width: 48rem) {
.zbt-home-advantages__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.zbt-home-advantage:nth-child(3) {
        border-right: var(--aura-morph-surface-stroke-thin) solid color-mix(in oklch, var(--aura-spec-color-text-neutral-diffuse) 28%, transparent);
    }

.zbt-home-advantage:nth-child(even) {
        border-right: 0;
    }
}

@media (max-width: 35rem) {
.zbt-home-advantages__grid {
        grid-template-columns: 1fr;
    }

.zbt-home-advantage,
.zbt-home-advantage:nth-child(3) {
        border-right: 0;
        border-bottom: var(--aura-morph-surface-stroke-thin) solid color-mix(in oklch, var(--aura-spec-color-text-neutral-diffuse) 28%, transparent);
    }

.zbt-home-advantage:last-child {
        border-bottom: 0;
    }
}

@media (min-width: 92.0625rem) and (max-width: 119.9375rem) {
.zbt-home-advantages {
        block-size: calc(100vw * 1003 / 1920);
    }

.zbt-home-advantages__default,
.zbt-home-advantages__dynamic {
        inline-size: var(--zbt-home-psd-canvas-inline-size);
        block-size: 1003px;
        transform: scale(calc(100vw / 1920px));
        transform-origin: top left;
    }
}

@media not all and (min-width: 92.0625rem) {
.zbt-home-advantages {
        block-size: auto;
        min-block-size: 0;
        padding-block: 72px;
    }

.zbt-home-advantages.has-psd-default {
        aspect-ratio: auto;
    }

.has-psd-default .zbt-home-advantages__default {
        display: none;
    }

.has-psd-default .zbt-home-advantages__dynamic {
        display: block;
    }

.zbt-home-advantages__dynamic {
        inline-size: auto;
        block-size: auto;
        background-image: none;
    }

    .zbt-home-advantages__canvas::before {
        position: absolute;
        inset-block-start: var(--zbt-home-advantage-stage-top, 106px);
        inset-block-end: 0;
        inset-inline: 0;
        /* 背景只覆盖与新闻区同宽的展示台，标题留在黑色画布上。 */
        background-image: linear-gradient(
            180deg,
            rgb(3 3 3 / 0.92) 0%,
            rgb(3 3 3 / 0.84) 19%,
            rgb(3 3 3 / 0.56) 37%,
            rgb(3 3 3 / 0.17) 53%,
            rgb(3 3 3 / 0) 66%
        ), var(--zbt-advantages-image);
        background-position: center;
        background-size: cover;
        content: "";
        pointer-events: none;
    }

.zbt-home-advantages__dynamic::before {
        content: none;
    }

.zbt-home-advantages__canvas {
        block-size: auto;
        inline-size: var(--zbt-home-responsive-stage-width);
        margin-inline: auto;
    }

.zbt-home-advantages__section-title {
        position: relative;
        z-index: 1;
        inset-block-start: 0;
        inset-inline-start: 0;
        margin: 0 0 48px;
        font-size: 48px;
        line-height: 58px;
    }

.zbt-home-advantages__grid {
        position: relative;
        z-index: 1;
        inset-block-start: 0;
        inset-inline-start: 0;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

.zbt-home-advantage {
        min-block-size: 0;
        padding: 0 24px 40px;
        /* Reason: 响应式布局也必须复用 PSD 的渐隐分割线，不能退化为整段实线。 */
        border-inline-end: 0;
    }

.zbt-home-advantage:first-child {
        padding-inline-start: 0;
    }

.zbt-home-advantage:last-child {
        border-inline-end: 0;
    }

.zbt-home-advantage:not(:last-child)::after {
        inset-block-start: 110px;
        inset-block-end: 40px;
        inset-inline-start: auto;
        inset-inline-end: 0;
        block-size: auto;
        inline-size: var(--aura-morph-surface-stroke-thin);
        content: "";
    }

.zbt-home-advantage__icon,
.zbt-home-advantage__icon img {
        block-size: 54px;
        inline-size: 54px;
    }

.zbt-home-advantage h2 {
        margin-top: 28px;
        font-size: 28px;
        line-height: 36px;
    }

.zbt-home-advantage p {
        inline-size: auto;
        margin-top: 20px;
        font-size: 18px;
        line-height: 32px;
    }
}

@media (max-width: 70rem) {
.zbt-home-advantages {
        padding-block: 56px;
    }

.zbt-home-advantages__canvas {
        --zbt-home-advantage-stage-top: 88px;
    }

.zbt-home-advantages__section-title {
        margin-bottom: 40px;
        font-size: 40px;
        line-height: 48px;
    }

.zbt-home-advantages__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 36px;
    }

.zbt-home-advantage {
        min-block-size: 0;
        /* Reason: 三列重排中，分割线位于相邻卡片留白之间，文字与图标不能贴在线上。 */
        padding-inline: 32px;
    }

.zbt-home-advantage:nth-child(3n),
.zbt-home-advantage:last-child {
        border-inline-end: 0;
    }

.zbt-home-advantage:nth-child(3n)::after {
        content: none;
    }

.zbt-home-advantage:nth-child(3n + 1) {
        padding-inline-start: 0;
    }

.zbt-home-advantage:nth-child(3n) {
        padding-inline-end: 0;
    }

.zbt-home-advantage:nth-last-child(1):nth-child(3n + 2) {
        padding-inline-end: 0;
    }
}

@media (max-width: 48rem) {
.zbt-home-advantages {
        padding-block: 48px;
    }

.zbt-home-advantages__canvas {
        --zbt-home-advantage-stage-top: 80px;
    }

.zbt-home-advantages__section-title {
        margin-bottom: 36px;
        font-size: 36px;
        line-height: 44px;
    }

.zbt-home-advantages__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px;
    }

.zbt-home-advantage,
.zbt-home-advantage:nth-child(4) {
        padding-inline: 0 24px;
        border-inline-end: 0;
    }

.zbt-home-advantage:nth-child(even),
.zbt-home-advantage:last-child {
        /* Reason: 两列重排时，右列内容也必须与分割线保持固定留白。 */
        padding-inline-start: 24px;
        padding-inline-end: 0;
        border-inline-end: 0;
    }

.zbt-home-advantage:nth-child(even)::after {
        content: none;
    }

.zbt-home-advantage:nth-child(3)::after {
        content: "";
    }

.zbt-home-advantage:nth-child(odd) {
        padding-inline-start: 0;
    }
}

@media (max-width: 35rem) {
.zbt-home-advantages {
        padding-block: 44px;
    }

    .zbt-home-advantages__canvas {
        --zbt-home-advantage-stage-top: 70px;
    }

.zbt-home-advantages__section-title {
        margin-bottom: 30px;
        font-size: 32px;
        line-height: 40px;
    }

.zbt-home-advantages__grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

.zbt-home-advantage,
.zbt-home-advantage:nth-child(n) {
        min-block-size: 0;
        padding: 0 0 28px;
        border-right: 0;
        border-bottom: 0;
    }

.zbt-home-advantage + .zbt-home-advantage {
        padding-top: 28px;
    }

.zbt-home-advantage:last-child {
        border-bottom: 0;
    }

.zbt-home-advantage:not(:last-child)::after {
        inset-block-start: auto;
        inset-inline: 0;
        inset-block-end: 0;
        inline-size: 100%;
        block-size: var(--aura-morph-surface-stroke-thin);
        content: "";
        -webkit-mask-image: linear-gradient(
            to right,
            rgb(0 0 0 / 0.03) 0%,
            rgb(0 0 0 / 0.95) 50%,
            rgb(0 0 0 / 0.03) 100%
        );
        mask-image: linear-gradient(
            to right,
            rgb(0 0 0 / 0.03) 0%,
            rgb(0 0 0 / 0.95) 50%,
            rgb(0 0 0 / 0.03) 100%
        );
    }
}

@media (min-width: 48.0625rem) and (width < 92.0625rem) {
    .zbt-home-advantages__grid {
        /* 五项优势从展示台的内侧基线开始，背景外框仍与新闻区齐平。 */
        margin-inline-start: var(--zbt-home-responsive-inner-inset);
    }
}

@media not all and (min-width: 92.0625rem) {
.zbt-home-advantages__section-title {
        font-size: clamp(32px, 2.8vw, 42px);
        line-height: 1.18;
    }

.zbt-home-advantage h2 {
        font-size: clamp(22px, 1.667vw, 32px);
        line-height: 1.2;
    }

.zbt-home-advantage p {
        font-size: clamp(16px, 1.146vw, 22px);
        line-height: 1.9091;
    }
}

@media (min-width: 92.0625rem) {
body.home .zbt-home-advantages,
body.home .zbt-home-advantages__dynamic {
        background-color: transparent;
    }
}