/* ===== GPU 产品子页 hero ===== */

/* 企业内部代号：右上角「代」+ 下方小字 */
.youchao-hero .hero-title-name-wrap,
.ouye-hero .hero-title-name-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    gap: calc(4 * var(--rpx-50));
    max-width: 100%;
}

.youchao-hero .hero-title,
.ouye-hero .hero-title {
    align-items: flex-start;
}

.youchao-hero .hero-title-name-wrap .hero-title-name,
.ouye-hero .hero-title-name-wrap .hero-title-name {
    position: relative;
}

.youchao-hero .hero-title-dai,
.ouye-hero .hero-title-dai {
    display: inline-block;
    margin-left: 0.12em;
    font-size: 0.38em;
    font-weight: 600;
    line-height: 1;
    vertical-align: super;
}

.youchao-hero .hero-title-note,
.ouye-hero .hero-title-note {
    margin: 0;
    font-size: calc(12 * var(--fpx));
    font-weight: 400;
    line-height: 1.4;
    color: #111;
    opacity: 1;
}

/* 标题/说明：优先在词语边界（空格、标点）换行，避免汉字逐字乱断 */
.youchao-hero .hero-callout-title,
.youchao-hero .hero-callout-desc,
.ouye-hero .hero-callout-title,
.ouye-hero .hero-callout-desc {
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
}

html[lang="en"] .youchao-hero .hero-title-dai,
html[lang="en"] .ouye-hero .hero-title-dai {
    font-size: 0.26em;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

html[lang="en"] .youchao-hero .hero-callout-title,
html[lang="en"] .ouye-hero .hero-callout-title {
    font-size: calc(17 * var(--fpx-50));
    line-height: 1.22;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
}

html[lang="en"] .youchao-hero .hero-callout-desc,
html[lang="en"] .ouye-hero .hero-callout-desc {
    margin-top: calc(4 * var(--rpx-50));
    font-size: calc(13 * var(--fpx));
    line-height: 1.28;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
}

html[lang="en"] .youchao-hero .hero-left-col {
    width: calc(600 * var(--rpx-50));
}

html[lang="en"] .ouye-hero .hero-left-col {
    width: calc(560 * var(--rpx-50));
}

html[lang="en"] .youchao-hero .hero-title,
html[lang="en"] .ouye-hero .hero-title {
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    gap: calc(16 * var(--rpx-50));
}

html[lang="en"] .youchao-hero .hero-title-name-wrap,
html[lang="en"] .ouye-hero .hero-title-name-wrap {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 46%;
}

html[lang="en"] .youchao-hero .hero-title-name,
html[lang="en"] .ouye-hero .hero-title-name {
    flex-shrink: 1;
    font-size: calc(44 * var(--fpx-50));
    line-height: 1.08;
    overflow-wrap: break-word;
    word-break: normal;
}

html[lang="en"] .youchao-hero .hero-title-note,
html[lang="en"] .ouye-hero .hero-title-note {
    font-size: calc(11 * var(--fpx));
    line-height: 1.25;
}

html[lang="en"] .youchao-hero .hero-title-meta,
html[lang="en"] .ouye-hero .hero-title-meta {
    flex: 1 1 0;
    min-width: 0;
    gap: calc(4 * var(--rpx-50));
    padding-top: calc(4 * var(--rpx-50));
}

html[lang="en"] .youchao-hero .hero-title-tag,
html[lang="en"] .ouye-hero .hero-title-tag {
    max-width: 100%;
    font-size: calc(14 * var(--fpx));
    line-height: 1.18;
    white-space: normal;
}

html[lang="en"] .youchao-hero .hero-title-sub,
html[lang="en"] .ouye-hero .hero-title-sub {
    font-size: calc(18 * var(--fpx));
    line-height: 1.18;
}

html[lang="en"] .youchao-hero .hero-desc-title,
html[lang="en"] .ouye-hero .hero-desc-title {
    line-height: 1.2;
}

html[lang="en"] .youchao-hero .hero-card-title,
html[lang="en"] .ouye-hero .hero-card-title {
    line-height: 1.2;
}

html[lang="en"] .youchao-hero .hero-info-card,
html[lang="en"] .ouye-hero .hero-info-card {
    padding:
        calc(18 * var(--rpx-50))
        calc(20 * var(--rpx-50))
        calc(20 * var(--rpx-50))
        calc(20 * var(--rpx-50));
}

html[lang="en"] .youchao-hero .hero-card-row,
html[lang="en"] .ouye-hero .hero-card-row {
    align-items: stretch;
    gap: calc(24 * var(--rpx-50));
    margin-top: calc(16 * var(--rpx-50));
}

html[lang="en"] .youchao-hero .hero-info-card .hero-card-feature img,
html[lang="en"] .ouye-hero .hero-info-card .hero-card-feature img {
    flex-shrink: 0;
    width: calc(36 * var(--rpx-50));
    height: calc(34 * var(--rpx-50));
}

html[lang="en"] .youchao-hero .hero-card-features,
html[lang="en"] .ouye-hero .hero-card-features {
    align-items: stretch;
}

html[lang="en"] .youchao-hero .hero-card-feature,
html[lang="en"] .ouye-hero .hero-card-feature {
    justify-content: flex-start;
}

html[lang="en"] .youchao-hero .hero-card-feature-label,
html[lang="en"] .ouye-hero .hero-card-feature-label {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 2.3em;
    font-size: calc(13 * var(--fpx));
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

html[lang="en"] .youchao-hero .hero-card-sep,
html[lang="en"] .ouye-hero .hero-card-sep {
    align-self: stretch;
    height: auto;
    min-height: calc(16 * var(--rpx-50));
    margin: calc(4 * var(--rpx-50)) calc(8 * var(--rpx-50)) 0;
}

/* ===== 仅手机端覆盖 ===== */

@media (max-width: 828px) {
    .youchao-hero .hero-bg,
    .ouye-hero .hero-bg {
        background: #fff;
    }

    .youchao-hero .hero-bg-gradient,
    .ouye-hero .hero-bg-gradient {
        display: none;
    }

    .youchao-hero .hero-banner,
    .ouye-hero .hero-banner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        z-index: 1;
        order: unset;
        width: 100%;
        height: calc(840 * var(--rpx));
        margin: 0;
        background-size: cover;
        background-position: 61.5% center;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .youchao-hero .hero-banner::after,
    .ouye-hero .hero-banner::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 88%,
            rgba(255, 255, 255, 1) 100%
        );
        pointer-events: none;
    }

    .youchao-hero .hero-shell,
    .ouye-hero .hero-shell {
        position: relative;
        z-index: 2;
        max-width: var(--wrapper-width);
        margin-left: auto;
        margin-right: auto;
        padding-top: calc(780 * var(--rpx));
    }

    .youchao-hero .hero-stage,
    .ouye-hero .hero-stage {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 0;
        padding: calc(24 * var(--rpx)) 0 calc(48 * var(--rpx));
    }

    .youchao-hero .hero-left-col,
    .ouye-hero .hero-left-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-left: 0;
    }

    .youchao-hero .hero-title,
    .ouye-hero .hero-title {
        order: 1;
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
        max-width: none;
        gap: calc(10 * var(--rpx));
        text-align: center;
    }

    .youchao-hero .hero-title-name,
    .ouye-hero .hero-title-name {
        font-size: calc(36 * var(--fpx));
        flex-shrink: 1;
    }

    .youchao-hero .hero-title-name-wrap,
    .ouye-hero .hero-title-name-wrap {
        align-items: center;
        text-align: center;
    }

    .youchao-hero .hero-title-note,
    .ouye-hero .hero-title-note {
        font-size: calc(11 * var(--fpx));
    }

    .youchao-hero .hero-title-meta,
    .ouye-hero .hero-title-meta {
        align-items: center;
    }

    .youchao-hero .hero-title-tag,
    .ouye-hero .hero-title-tag {
        align-self: center;
    }

    .youchao-hero .hero-desc,
    .ouye-hero .hero-desc {
        order: 3;
        align-items: center;
        width: 100%;
        margin-top: calc(32 * var(--rpx));
        margin-bottom: 0;
        gap: calc(28 * var(--rpx));
        padding-top: 0;
    }

    .youchao-hero .hero-desc-group,
    .ouye-hero .hero-desc-group {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .youchao-hero .hero-desc-diagram,
    .ouye-hero .hero-desc-diagram {
        width: 72%;
        max-width: 72%;
        margin-left: 0;
        align-self: center;
    }

    .youchao-hero .hero-desc-diagram--imr,
    .youchao-hero .hero-desc-diagram--simd,
    .youchao-hero .hero-desc-diagram--1,
    .youchao-hero .hero-desc-diagram--2,
    .ouye-hero .hero-desc-diagram--simt,
    .ouye-hero .hero-desc-diagram--transformer,
    .ouye-hero .hero-desc-diagram--1,
    .ouye-hero .hero-desc-diagram--2 {
        width: 72%;
        max-width: 72%;
        margin-left: 0;
    }

    .youchao-hero .hero-info-card,
    .ouye-hero .hero-info-card {
        order: 4;
        width: 100%;
        min-height: 0;
        margin-top: calc(32 * var(--rpx));
    }

    .youchao-hero .hero-card-row,
    .ouye-hero .hero-card-row {
        flex-wrap: wrap;
        gap: calc(16 * var(--rpx));
        justify-content: center;
    }

    .youchao-hero .hero-card-features,
    .ouye-hero .hero-card-features {
        flex-wrap: wrap;
        justify-content: center;
    }

    .youchao-hero .hero-card-feature-label,
    .ouye-hero .hero-card-feature-label {
        white-space: normal;
    }

    .youchao-hero .hero-info-card .hero-card-feature img,
    .ouye-hero .hero-info-card .hero-card-feature img {
        display: block;
        width: calc(64 * var(--rpx));
        height: calc(60 * var(--rpx));
        object-fit: contain;
    }

    html[lang="en"] .youchao-hero .hero-info-card,
    html[lang="en"] .ouye-hero .hero-info-card {
        padding: calc(20 * var(--rpx)) calc(18 * var(--rpx)) calc(22 * var(--rpx));
    }

    html[lang="en"] .youchao-hero .hero-info-card .hero-card-feature img,
    html[lang="en"] .ouye-hero .hero-info-card .hero-card-feature img {
        width: calc(64 * var(--rpx));
        height: calc(60 * var(--rpx));
    }

    .youchao-hero .hero-card-laptop,
    .ouye-hero .hero-card-laptop {
        width: calc(120 * var(--rpx));
        height: calc(68 * var(--rpx));
        object-fit: contain;
    }

    .ouye-hero .hero-card-desktop {
        width: calc(108 * var(--rpx));
        height: calc(88 * var(--rpx));
        object-fit: contain;
    }

    .youchao-hero .hero-guides,
    .ouye-hero .hero-guides {
        display: none;
    }

    .youchao-hero .hero-callouts,
    .ouye-hero .hero-callouts {
        position: static;
        order: 5;
        width: 100%;
        margin-top: calc(24 * var(--rpx));
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: calc(16 * var(--rpx));
    }

    .youchao-hero .hero-callout,
    .ouye-hero .hero-callout {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(16 * var(--rpx));
        box-sizing: border-box;
        padding: calc(20 * var(--rpx)) calc(18 * var(--rpx));
        border: 1px solid rgba(132, 139, 159, 0.14);
        border-radius: calc(8 * var(--rpx));
        background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 253, 0.92) 100%);
        box-shadow: 0 calc(4 * var(--rpx)) calc(14 * var(--rpx)) rgba(0, 12, 36, 0.05);
        text-align: left;
    }

    .youchao-hero .hero-callout-icon,
    .ouye-hero .hero-callout-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(26 * var(--fpx) + 22 * var(--fpx) + 6 * var(--rpx));
        height: calc(26 * var(--fpx) + 22 * var(--fpx) + 6 * var(--rpx));
        border: none;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 12, 36, 0.06);
    }

    .youchao-hero .hero-callout-icon img,
    .ouye-hero .hero-callout-icon img {
        width: calc(38 * var(--rpx));
        height: calc(39 * var(--rpx));
        object-fit: contain;
    }

    .youchao-hero .hero-callout-body,
    .ouye-hero .hero-callout-body {
        padding-top: 0;
        min-width: 0;
    }

    .youchao-hero .hero-callout-title,
    .ouye-hero .hero-callout-title {
        font-size: calc(18 * var(--fpx));
        line-height: calc(26 / 18);
    }

    .youchao-hero .hero-callout-desc,
    .ouye-hero .hero-callout-desc {
        margin-top: calc(6 * var(--rpx));
        font-size: calc(14 * var(--fpx));
        line-height: calc(22 / 14);
    }

    html[lang="en"] .youchao-hero .hero-callout-title,
    html[lang="en"] .ouye-hero .hero-callout-title {
        font-size: calc(15 * var(--fpx));
        line-height: 1.25;
    }

    html[lang="en"] .youchao-hero .hero-callout-desc,
    html[lang="en"] .ouye-hero .hero-callout-desc {
        font-size: calc(12 * var(--fpx));
        line-height: 1.3;
    }

    html[lang="en"] .youchao-hero .hero-left-col,
    html[lang="en"] .ouye-hero .hero-left-col {
        width: 100%;
    }

    html[lang="en"] .youchao-hero .hero-title,
    html[lang="en"] .ouye-hero .hero-title {
        flex-direction: column;
        align-items: center;
        max-width: none;
    }

    html[lang="en"] .youchao-hero .hero-title-name-wrap,
    html[lang="en"] .ouye-hero .hero-title-name-wrap {
        max-width: 100%;
        align-items: center;
    }

    html[lang="en"] .youchao-hero .hero-title-name,
    html[lang="en"] .ouye-hero .hero-title-name {
        font-size: calc(32 * var(--fpx));
        line-height: 1.12;
    }

    html[lang="en"] .youchao-hero .hero-title-meta,
    html[lang="en"] .ouye-hero .hero-title-meta {
        padding-top: 0;
        align-items: center;
    }
}