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

.zbt-home-section--products .zbt-product-card {
    min-inline-size: 0;
    min-block-size: calc((33rem - var(--aura-tectonic-gap-all-lg)) / 2);
    overflow: hidden;
    background: var(--aura-spec-color-surface-neutral);
    border: var(--aura-morph-surface-stroke-thin) solid var(--aura-spec-color-surface-neutral);
    border-radius: var(--aura-morph-control-radius-squircle);
    box-shadow: var(--aura-spec-shadow-surface-sharp);
}

.zbt-home-section--products .zbt-product-card > a {
    display: grid;
    block-size: 100%;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: var(--aura-tectonic-inset-all-lg);
}

.zbt-home-section--products .zbt-product-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--aura-morph-surface-ratio-video);
    background: var(--aura-spec-color-surface-neutral-subtle);
}

.zbt-home-section--products .zbt-product-card__media::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.zbt-home-section--products .zbt-product-card img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.zbt-home-section--products .zbt-product-card img {
    object-fit: contain;
    mix-blend-mode: multiply;
}

.zbt-home-section--products .zbt-product-card__content {
    display: block;
    padding-top: var(--aura-tectonic-gap-all-md);
}

.zbt-home-section--products .zbt-product-card__title {
    color: var(--aura-spec-color-text-neutral-deep);
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 42px;
}

.zbt-home-section--products .zbt-product-card.is-emphasized,
.zbt-home-section--products .zbt-product-card:hover,
.zbt-home-section--products .zbt-product-card:focus-within {
    background: var(--aura-spec-color-surface-primary);
    border-color: var(--aura-spec-color-surface-primary);
    box-shadow: 0 0 var(--aura-spec-glow-compact-radius-radiant) var(--aura-spec-glow-compact-spread-radiant) oklch(from var(--aura-spec-color-surface-primary-radiant) l c h / var(--aura-spec-glow-compact-opacity-radiant));
}

.zbt-home-section--products .zbt-product-card.is-emphasized .zbt-product-card__title,
.zbt-home-section--products .zbt-product-card:hover .zbt-product-card__title,
.zbt-home-section--products .zbt-product-card:focus-within .zbt-product-card__title {
    color: var(--aura-spec-color-text-neutral-diffuse);
}

.zbt-home-section--products .zbt-product-card.is-emphasized img,
.zbt-home-section--products .zbt-product-card:hover img,
.zbt-home-section--products .zbt-product-card:focus-within img {
    filter: brightness(0) invert(1);
    mix-blend-mode: screen;
    opacity: 0.78;
}

@supports (corner-shape: superellipse(1.5)) {
.zbt-home-section--products .zbt-product-card {
        corner-shape: superellipse(1.5);
    }
}

.zbt-home-section--products .zbt-product-card {
    position: absolute;
    min-inline-size: 0;
    min-block-size: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.zbt-home-section--products .zbt-product-card:nth-child(1) {
    top: 144px;
    left: 0;
    inline-size: 425px;
    block-size: 362px;
}

.zbt-home-section--products .zbt-product-card:nth-child(2) {
    top: 144px;
    left: 456px;
    inline-size: 425px;
    block-size: 362px;
}

.zbt-home-section--products .zbt-product-card:nth-child(3) {
    top: 540px;
    left: 0;
    inline-size: 425px;
    block-size: 362px;
}

.zbt-home-section--products .zbt-product-card:nth-child(4) {
    top: 540px;
    left: 456px;
    inline-size: 425px;
    block-size: 362px;
}

.zbt-home-section--products .zbt-product-card > a {
    position: relative;
    display: block;
    block-size: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #f3f3f3;
    box-shadow: 4px 4px 5px rgb(26 26 26 / 19%);
    transition: background-color 180ms ease-out, box-shadow 180ms ease-out;
}

.zbt-home-section--products .zbt-product-card__media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    aspect-ratio: auto;
    background: transparent;
}

.zbt-home-section--products .zbt-product-card__media::after {
    content: none;
}

.zbt-home-section--products .zbt-product-card img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    /* Reason: 产品线稿与卡面共用 425:362 原始比例，禁止在响应式卡片中按宽高强行拉伸。 */
    object-fit: contain;
    mix-blend-mode: normal;
    transition: filter 180ms ease-out;
}

.zbt-home-section--products .zbt-product-card__image--normal {
    transition: opacity 180ms ease-out, filter 180ms ease-out;
}

.zbt-home-section--products .zbt-product-card__content {
    position: absolute;
    z-index: 1;
    bottom: 34px;
    left: 36px;
    display: block;
    padding: 0;
}

.zbt-home-section--products .zbt-product-card__title {
    color: #525252;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 42px;
    transition: color 180ms ease-out;
}

.zbt-home-section--products .zbt-product-card:hover > a,
.zbt-home-section--products .zbt-product-card:focus-within > a {
    background: var(--aura-spec-color-surface-primary);
    /* Reason: 内描边不参与盒模型，悬浮前后线稿、标题与圆角不会出现 1px 位移。 */
    box-shadow: inset 0 0 0 1px var(--aura-spec-color-surface-primary-radiant);
}

.zbt-home-section--products .zbt-product-card:hover,
.zbt-home-section--products .zbt-product-card:focus-within {
    /* Reason: 旧通用卡片规则会给 article 增加辉光；真实视觉状态只允许由链接内卡面承担，不得改变四卡外部几何。 */
    border: 0;
    background: transparent;
    box-shadow: none;
}

.zbt-home-section--products .zbt-product-card:hover .zbt-product-card__title,
.zbt-home-section--products .zbt-product-card:focus-within .zbt-product-card__title {
    color: #fff;
}

.zbt-home-section--products .zbt-product-card:hover img,
.zbt-home-section--products .zbt-product-card:focus-within img {
    /* Reason: 新线稿已去除 PSD 中不透明的浅底；沿用原有悬浮滤镜，仅给可见线条着青色。 */
    filter: brightness(0) saturate(100%) invert(87%) sepia(77%) saturate(1057%) hue-rotate(131deg) brightness(106%) contrast(103%);
}

.zbt-home-section--products .zbt-product-card > a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -5px;
}

@media (prefers-reduced-motion: reduce) {
.zbt-home-section--products .zbt-product-card > a,
.zbt-home-section--products .zbt-product-card__title,
.zbt-home-section--products .zbt-product-card img {
        transition: none;
    }
}

@media not all and (min-width: 92.0625rem) {
.zbt-home-section--products .zbt-product-card,
.zbt-home-section--products .zbt-product-card:nth-child(n) {
        position: relative;
        top: auto;
        left: auto;
        inline-size: auto;
        block-size: auto;
        min-block-size: 0;
        /* Reason: 中小屏网格轨道可能远大于 PSD 卡面比例；限制卡面上限并居中，避免 1024px 等宽度下被轨道无意义放大。 */
        inline-size: min(100%, 326px);
        max-inline-size: 326px;
        justify-self: center;
        aspect-ratio: 425 / 362;
    }

.zbt-home-section--products .zbt-product-card > a {
        min-block-size: 0;
        aspect-ratio: inherit;
    }

.zbt-home-section--products .zbt-product-card.is-psd-default,
.zbt-home-section--products .zbt-product-card.is-psd-default > a {
        aspect-ratio: 434 / 371;
        min-block-size: 0;
    }

.zbt-home-section--products .zbt-product-card.is-psd-default:nth-child(1),
.zbt-home-section--products .zbt-product-card.is-psd-default:nth-child(1) > a {
        aspect-ratio: 425 / 362;
    }

.zbt-home-section--products .zbt-product-card.is-psd-default .zbt-product-card__default-visual {
        display: block;
    }

.zbt-home-section--products .zbt-product-card.is-psd-default:hover .zbt-product-card__default-visual,
.zbt-home-section--products .zbt-product-card.is-psd-default:focus-within .zbt-product-card__default-visual {
        filter: none;
        mix-blend-mode: normal;
        opacity: 1;
    }
}

@media (max-width: 35rem) {
.zbt-home-section--products .zbt-product-card,
.zbt-home-section--products .zbt-product-card:nth-child(n),
.zbt-home-section--products .zbt-product-card > a {
        min-block-size: 0;
    }

.zbt-home-section--products .zbt-product-card.is-psd-default,
.zbt-home-section--products .zbt-product-card.is-psd-default > a {
        min-block-size: 0;
    }

.zbt-home-section--products .zbt-product-card__content {
        bottom: 26px;
        left: 26px;
    }

.zbt-home-section--products .zbt-product-card__title {
        font-size: 18px;
        line-height: 26px;
    }
}