/* 六个官网内页共用的沉浸式首屏。页面专属 CSS 之后、site-header.css 之后加载。 */
body.site-page.immersive-page {
    padding-top: 0;
}

body.site-page.immersive-page .site-header:not(.scrolled) {
    background: rgba(238, 245, 243, .36) !important;
    border-bottom-color: rgba(255, 255, 255, .32) !important;
    box-shadow: none !important;
    backdrop-filter: blur(13px) saturate(112%) !important;
}

body.site-page.immersive-page .site-header.scrolled {
    background: rgba(250, 247, 240, .99) !important;
    border-bottom-color: var(--line) !important;
    box-shadow: 0 10px 35px rgba(55, 55, 45, .05) !important;
}

.site-immersive-hero {
    --hero-position: center;
    position: relative;
    min-height: max(700px, 100svh);
    background-color: #eef3ef;
    background-image: var(--hero-image);
    background-position: var(--hero-position);
    background-size: cover;
    isolation: isolate;
    overflow: hidden;
}

.products-page .site-immersive-hero { --hero-image: none; }
.factory-page .site-immersive-hero { --hero-image: url('../images/immersive/factory-hero.webp'); }
.solutions-page .site-immersive-hero { --hero-image: url('../images/immersive/solutions-hero.webp'); }
.about-page .site-immersive-hero { --hero-image: url('../images/immersive/about-hero.webp'); }
.news-page .site-immersive-hero { --hero-image: url('../images/immersive/news-hero.webp'); }
.contact-page .site-immersive-hero { --hero-image: url('../images/immersive/contact-hero.webp'); }

.site-immersive-hero::before,
.site-immersive-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.site-immersive-hero::before {
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(248, 249, 246, .96) 0%,
        rgba(248, 249, 246, .83) 23%,
        rgba(248, 249, 246, .54) 39%,
        rgba(248, 249, 246, .12) 58%,
        rgba(248, 249, 246, 0) 76%);
}

.site-immersive-hero::after {
    z-index: 1;
    background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 58%, rgba(34,43,37,.06));
}

.site-immersive-hero > img,
.site-immersive-hero > .site-immersive-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.site-immersive-hero > .site-immersive-visual picture {
    display: block;
    width: 100%;
    height: 100%;
}

.site-immersive-hero > img,
.site-immersive-hero > .site-immersive-visual img,
.site-immersive-hero > .site-immersive-visual picture img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--hero-position);
}

.site-immersive-hero > .container,
.site-immersive-hero > .site-shell,
.site-immersive-hero > .hero-inner,
.site-immersive-hero > .site-immersive-inner,
.site-immersive-hero > .site-immersive-hero-inner,
.site-immersive-hero > [class$="-hero-inner"] {
    position: relative;
    z-index: 2;
    min-height: max(700px, 100svh);
    padding-top: calc(var(--header-h) + 58px);
    padding-bottom: 64px;
    display: flex;
    align-items: center;
}

.site-immersive-hero :is(
    .products-hero-copy,
    .factory-hero-copy,
    .solutions-hero-copy,
    .about-hero-copy,
    .news-hero-copy,
    .contact-hero-copy,
    .hero-copy,
    .site-immersive-copy
) {
    width: min(690px, 49vw);
    max-width: 690px;
}

.site-immersive-hero :is(.eyebrow, .site-kicker) {
    margin-bottom: 24px;
    color: var(--brass);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
    line-height: 1.5;
}

.site-immersive-hero h1 {
    max-width: 760px;
    margin: 0 0 26px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(52px, 5vw, 78px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.055em;
}

.site-immersive-hero h1 span {
    color: inherit;
}

.site-immersive-hero :is(.hero-lede, .site-immersive-lede, .products-hero-lede, .factory-hero-lede, .solutions-lede, .about-hero-lede, .news-hero-lede, .news-immersive-lede, .contact-hero-lede, .contact-immersive-lede),
.site-immersive-hero :is(.products-hero-copy, .factory-hero-copy, .solutions-hero-copy, .about-hero-copy, .news-hero-copy, .contact-hero-copy, .hero-copy, .site-immersive-copy) > p:not(.eyebrow):not(.site-kicker) {
    max-width: 560px;
    margin: 0 0 32px;
    color: #535d56;
    font-size: 16px;
    line-height: 2;
}

.site-immersive-hero :is(.hero-actions, .site-actions, .site-immersive-actions, .immersive-actions, [class$="-hero-actions"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.site-immersive-hero :is(.hero-proof, .hero-tags, .site-immersive-tags, .immersive-tags, .product-categories, [class$="-hero-proof"], [class$="-hero-tags"]) {
    margin-top: 48px;
    padding-top: 18px;
    border-top: 1px solid rgba(70, 78, 72, .28);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 30px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 15px;
}

/* 压平各旧页面遗留的首屏高度和负边距，确保首屏边界在所有页面一致。 */
body.site-page.immersive-page .site-immersive-hero {
    min-height: max(700px, 100svh) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.site-page.immersive-page .site-immersive-hero > :is(
    .container,
    .site-shell,
    .hero-inner,
    .site-immersive-inner,
    .site-immersive-hero-inner,
    [class$="-hero-inner"]
) {
    z-index: 2;
    min-height: max(700px, 100svh) !important;
    padding-top: calc(var(--header-h) + 58px) !important;
    padding-bottom: 64px !important;
    align-items: center !important;
}

@media (max-width: 1080px) {
    .site-immersive-hero,
    .site-immersive-hero > .container,
    .site-immersive-hero > .site-shell,
    .site-immersive-hero > .hero-inner,
    .site-immersive-hero > .site-immersive-inner,
    .site-immersive-hero > .site-immersive-hero-inner,
    .site-immersive-hero > [class$="-hero-inner"] {
        min-height: max(650px, 100svh);
    }

    .site-immersive-hero h1 { font-size: clamp(48px, 5.8vw, 68px); }
}

@media (max-width: 820px) {
    .site-immersive-hero {
        --hero-position: 64% center;
        min-height: max(760px, 100svh);
    }

    .factory-page .site-immersive-hero { --hero-position: 60% center; }
    .about-page .site-immersive-hero { --hero-position: 68% center; }

    .site-immersive-hero::before {
        background: linear-gradient(90deg,
            rgba(248,249,246,.94) 0%,
            rgba(248,249,246,.84) 36%,
            rgba(248,249,246,.52) 66%,
            rgba(248,249,246,.24) 100%);
    }

    .site-immersive-hero > .container,
    .site-immersive-hero > .site-shell,
    .site-immersive-hero > .hero-inner,
    .site-immersive-hero > .site-immersive-inner,
    .site-immersive-hero > .site-immersive-hero-inner,
    .site-immersive-hero > [class$="-hero-inner"] {
        min-height: max(760px, 100svh);
        padding-top: calc(var(--header-h) + 46px);
        padding-bottom: 46px;
        align-items: flex-start;
    }

    .site-immersive-hero :is(
        .products-hero-copy,
        .factory-hero-copy,
        .solutions-hero-copy,
        .about-hero-copy,
        .news-hero-copy,
        .contact-hero-copy,
        .hero-copy,
        .site-immersive-copy
    ) {
        width: min(560px, 86%);
        margin-top: 6vh;
    }

    .site-immersive-hero h1 { font-size: clamp(46px, 9vw, 64px); }

    body.site-page.immersive-page .site-immersive-hero {
        min-height: max(760px, 100svh) !important;
    }

    body.site-page.immersive-page .site-immersive-hero > :is(
        .container,
        .site-shell,
        .hero-inner,
        .site-immersive-inner,
        .site-immersive-hero-inner,
        [class$="-hero-inner"]
    ) {
        min-height: max(760px, 100svh) !important;
        padding-top: calc(var(--header-h) + 46px) !important;
        padding-bottom: 46px !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 540px) {
    .site-immersive-hero {
        --hero-position: 67% center;
        min-height: max(720px, 100svh);
    }

    .factory-page .site-immersive-hero { --hero-position: 63% center; }
    .about-page .site-immersive-hero { --hero-position: 72% center; }

    .site-immersive-hero::before {
        background: linear-gradient(180deg,
            rgba(248,249,246,.93) 0%,
            rgba(248,249,246,.83) 42%,
            rgba(248,249,246,.52) 70%,
            rgba(248,249,246,.18) 100%);
    }

    .site-immersive-hero > .container,
    .site-immersive-hero > .site-shell,
    .site-immersive-hero > .hero-inner,
    .site-immersive-hero > .site-immersive-inner,
    .site-immersive-hero > .site-immersive-hero-inner,
    .site-immersive-hero > [class$="-hero-inner"] {
        min-height: max(720px, 100svh);
        padding-top: calc(var(--header-h) + 34px);
        padding-bottom: 34px;
    }

    .site-immersive-hero :is(
        .products-hero-copy,
        .factory-hero-copy,
        .solutions-hero-copy,
        .about-hero-copy,
        .news-hero-copy,
        .contact-hero-copy,
        .hero-copy,
        .site-immersive-copy
    ) {
        width: 100%;
        margin-top: 3vh;
    }

    body.site-page.immersive-page .site-immersive-hero > img,
    body.site-page.immersive-page .site-immersive-hero > .site-immersive-visual {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
    }

    body.site-page.immersive-page .site-immersive-hero > img,
    body.site-page.immersive-page .site-immersive-hero > .site-immersive-visual img {
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
        object-position: var(--hero-position) !important;
    }

    body.site-page.immersive-page .site-immersive-hero :is(
        .site-immersive-copy,
        .site-immersive-hero-copy,
        .products-hero-copy,
        .factory-hero-copy,
        .solutions-hero-copy,
        .about-hero-copy,
        .news-hero-copy,
        .contact-hero-copy,
        .hero-copy
    ) {
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }

    .site-immersive-hero :is(.eyebrow, .site-kicker) { margin-bottom: 17px; font-size: 10px; }
    .site-immersive-hero h1 { margin-bottom: 20px; font-size: clamp(40px, 12vw, 52px); }
    .site-immersive-hero :is(.hero-lede, .site-immersive-lede, .products-hero-lede, .factory-hero-lede, .solutions-lede, .about-hero-lede, .news-hero-lede, .news-immersive-lede, .contact-hero-lede, .contact-immersive-lede),
    .site-immersive-hero :is(.products-hero-copy, .factory-hero-copy, .solutions-hero-copy, .about-hero-copy, .news-hero-copy, .contact-hero-copy, .hero-copy, .site-immersive-copy) > p:not(.eyebrow):not(.site-kicker) {
        margin-bottom: 26px;
        font-size: 14px;
        line-height: 1.85;
    }
    .site-immersive-hero :is(.hero-actions, .site-actions, .site-immersive-actions, .immersive-actions, [class$="-hero-actions"]) {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    body.site-page.immersive-page .site-immersive-hero {
        min-height: max(720px, 100svh) !important;
    }

    body.site-page.immersive-page .site-immersive-hero > :is(
        .container,
        .site-shell,
        .hero-inner,
        .site-immersive-inner,
        .site-immersive-hero-inner,
        [class$="-hero-inner"]
    ) {
        min-height: max(720px, 100svh) !important;
        padding-top: calc(var(--header-h) + 34px) !important;
        padding-bottom: 34px !important;
    }
}

/* 桌面端严格一屏；放在全部旧断点之后，统一覆盖遗留的 700px 最小高度。 */
@media (min-width: 821px) {
    body.site-page.immersive-page .site-immersive-hero {
        height: 100svh !important;
        min-height: 0 !important;
    }

    body.site-page.immersive-page .site-immersive-hero > :is(
        .container,
        .site-shell,
        .hero-inner,
        .site-immersive-inner,
        .site-immersive-hero-inner,
        [class$="-hero-inner"]
    ) {
        height: 100% !important;
        min-height: 0 !important;
        padding-top: clamp(94px, 15svh, calc(var(--header-h) + 58px)) !important;
        padding-bottom: clamp(24px, 6svh, 64px) !important;
    }

    .site-immersive-hero h1 {
        margin-bottom: clamp(16px, 2.6svh, 26px);
        font-size: clamp(42px, min(5vw, 8svh), 78px);
    }

    .site-immersive-hero :is(.hero-lede, .site-immersive-lede, .products-hero-lede, .factory-hero-lede, .solutions-lede, .about-hero-lede, .news-hero-lede, .news-immersive-lede, .contact-hero-lede, .contact-immersive-lede),
    .site-immersive-hero :is(.products-hero-copy, .factory-hero-copy, .solutions-hero-copy, .about-hero-copy, .news-hero-copy, .contact-hero-copy, .hero-copy, .site-immersive-copy) > p:not(.eyebrow):not(.site-kicker) {
        margin-bottom: clamp(20px, 3.4svh, 32px);
    }

    .site-immersive-hero :is(.hero-proof, .hero-tags, .site-immersive-tags, .immersive-tags, .product-categories, [class$="-hero-proof"], [class$="-hero-tags"]) {
        margin-top: clamp(24px, 4.8svh, 48px);
    }
}