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

.zbt-home-hero {
    position: relative;
    display: block;
    min-block-size: 904px;
    block-size: 904px;
    overflow: hidden;
    background-color: var(--zbt-home-psd-canvas-background);
    background-image: var(--zbt-hero-image);
    /* Reason: 首页背景素材首部含透明像素；统一上移后，Header 下方立即进入有效首屏画面。 */
    --zbt-home-hero-background-offset-block-start: -16px;
    background-position: center var(--zbt-home-hero-background-offset-block-start);
    background-repeat: no-repeat;
    background-size: 1920px 874px;
    color: #fff;
    isolation: isolate;
}

/* 超过 PSD 画布宽度时保持背景原始比例铺满两侧。
 * 透明顶部的偏移随背景等比例放大，文字和按钮的尺寸保持不变。 */
@media (min-width: 120.0625rem) {
.zbt-home-hero {
        background-size: 100% auto;
        --zbt-home-hero-background-offset-block-start: calc(-100cqi * 16 / 1920);
    }
}

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

.zbt-home-hero__content {
    inline-size: 1220px;
    margin: 0 auto;
    padding: 144px 0 0;
}

.zbt-home-hero__title {
    /* Reason: PSD 主标题是 603 × 97px 的矢量智能对象，前台用图片保留字形、间距和边缘抗锯齿。 */
    inline-size: min(603px, 100%);
    max-inline-size: 100%;
    min-block-size: 97px;
    margin: 0;
    color: #fff;
}

.zbt-home-hero__wordmark {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 603 / 97;
    object-fit: contain;
}

.zbt-home-hero__subtitle {
    margin: 44px 0 0;
    color: #fff;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 42px;
}

.zbt-home-hero__accent {
    display: block;
    inline-size: 75px;
    block-size: 8px;
    margin-top: 24px;
    /* PSD“矩形 2”使用蓝—亮青—青绿的水平渐变，缩放 150%。
     * 以下色点采自合成图的有效填充区域，保留 Photoshop 缩放及平滑插值后的实际颜色；
     * 不直接把原始色标铺满横条，否则两端会比设计图更深或更绿。
     * 百分比定位让移动端 56px 横条沿用同一渐变比例。
     */
    background: linear-gradient(90deg,
        #005ddc 0%,
        #007be9 12.3288%,
        #0098f4 24.6575%,
        #00affa 36.9863%,
        #00bef8 50.6849%,
        #00c8f2 63.0137%,
        #00d1ea 75.3425%,
        #00d8e0 87.6712%,
        #00ddd6 100%);
}

.zbt-home-hero__description {
    max-inline-size: 713px;
    margin: 46px 0 0;
    color: #fff;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 42px;
}

.zbt-home-hero__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 34px;
    margin-top: 42px;
}

@media (max-width: 48rem) {
.zbt-home-hero {
        min-block-size: 40rem;
    }
}

@media (max-width: 75rem) {
.zbt-home-hero {
        min-block-size: 760px;
        block-size: 760px;
        background-position: center calc(50% + var(--zbt-home-hero-background-offset-block-start));
        background-size: cover;
    }

.zbt-home-hero__content {
        inline-size: min(100% - 120px, 960px);
        padding-top: 105px;
    }

.zbt-home-hero__title {
        inline-size: min(603px, 100%);
        max-inline-size: 100%;
        block-size: auto;
        min-block-size: 97px;
        aspect-ratio: auto;
    }

.zbt-home-hero__subtitle {
        margin-top: 34px;
        font-size: 28px;
    }

.zbt-home-hero__description {
        max-inline-size: 680px;
    }
}

@media (max-width: 48rem) {
.zbt-home-hero {
        min-block-size: 640px;
        block-size: 640px;
        background-position: 57% calc(50% + var(--zbt-home-hero-background-offset-block-start));
    }

.zbt-home-hero__content {
        inline-size: calc(100% - 48px);
        padding-top: 86px;
    }

.zbt-home-hero__title {
        inline-size: min(603px, 100%);
        min-block-size: 0;
        aspect-ratio: auto;
    }

.zbt-home-hero__wordmark {
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: 603 / 97;
    }

.zbt-home-hero__subtitle {
        margin-top: 26px;
        font-size: 21px;
        line-height: 30px;
    }

.zbt-home-hero__accent {
        inline-size: 56px;
        block-size: 6px;
        margin-top: 18px;
    }

.zbt-home-hero__description {
        max-inline-size: 100%;
        margin-top: 32px;
        font-size: 15px;
        line-height: 28px;
    }

.zbt-home-hero__actions {
        gap: 16px;
        margin-top: 32px;
    }
}

@media (min-width: 34.375rem) and (max-width: 48rem) {
.zbt-home-hero {
        background-position: 34% calc(50% + var(--zbt-home-hero-background-offset-block-start));
    }
}

@media (min-width: 53.1875rem) {
.zbt-home-hero__content {
        inline-size: min(calc(100% - clamp(6rem, 12.5vw, 15rem)), 1220px);
    }
}