/* 关于页资质认证视觉规则由主题既有 PSD 样式提供。 */

/*
 * 资质认证整块按 PSD 无外围框线呈现；显式约束舞台及内部承载容器，
 * 防止通用区块样式为它们附加边框、圆角或阴影。
 * 不覆盖可编辑文字、按钮的聚焦提示，也不删除背景图中的证书轮廓。
 */
.zbt-about-page-stage.zbt-about-page-stage--qualification,
.zbt-about-page-stage--qualification > .zbt-about-page-qualification__dynamic,
.zbt-about-page-stage--qualification .zbt-about-page-qualification__layout {
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
}

/*
 * 原背景顶部 3/963 的画布为透明像素，深蓝底色透出后会形成横线。
 * 仅在这段透明带下衬同色亮蓝，其余底色保留深蓝；比例随区块缩放，
 * 不裁剪图片、不改变文字位置，也不改变媒体库和 OSS 的图片地址。
 */
.zbt-about-page-stage.zbt-about-page-stage--qualification,
.zbt-about-page-stage--qualification > .zbt-about-page-qualification__dynamic {
    --zbt-about-qualification-underlay: linear-gradient(
        to bottom, #00b4fa 0% 0.312%, #0032c8 0.312% 100%
    );
    background-image: var(--zbt-about-qualification-underlay);
}

/*
 * 超宽窗口的装饰背景由全宽舞台承载，文字仍保持 1920px 设计画布居中。
 * 固定背景在超宽屏左右露出深蓝底色，形成厚边框；只扩展背景，不拉伸前景。
 * 背景沿用统一媒体来源，保持后台换图和 OSS 映射一致。
 */
@media (min-width: 120.0625rem) {
    .zbt-about-page-stage.zbt-about-page-stage--qualification {
        /* 背景透明后保留独立层叠，防止相邻区块与背景绘制覆盖前景。 */
        isolation: isolate;
        background-image: var(--zbt-about-qualification-background), var(--zbt-about-qualification-underlay);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }
    .zbt-about-page-stage--qualification > .zbt-about-page-qualification__dynamic {
        z-index: 1;
        background: transparent;
    }
    .zbt-about-page-stage--qualification .zbt-about-page-qualification__background {
        visibility: hidden;
    }
}


/*
 * 长资质名称优先完整显示为一至两行；扩大桌面文字空间而非缩小字号，
 * 同时将四列队列在 1220px 内容画布中居中，保持月桂与文字共用中轴。
 */
.zbt-about-page-stage--qualification .zbt-about-page-qualification__items {
    inline-size: 1110px;
    inset-inline-start: 55px;
}
.zbt-about-page-stage--qualification .zbt-about-page-qualification__label {
    text-wrap: balance;
    /* 后台遇到连续英文长词仍允许换行，不截断真实资质名称。 */
    overflow-wrap: anywhere;
}

/* 流式布局继续使用内容容器宽度，不能让桌面的固定宽度挤出窄屏。 */
@media (max-width: 92rem) {
    .zbt-about-page-stage--qualification .zbt-about-page-qualification__items {
        inline-size: auto;
    }
}

/* 小平板三列放不下长名称，改为居中的 2+2+2+1 队列，保留 20px 字号。 */
@media (min-width: 48.0625rem) and (max-width: 63.9375rem) {
    .zbt-about-page-stage--qualification .zbt-about-page-qualification__items li,
    .zbt-about-page-stage--qualification .zbt-about-page-qualification__items li:nth-child(5) {
        grid-column: span 3;
    }
    .zbt-about-page-stage--qualification .zbt-about-page-qualification__items li:nth-child(7) {
        grid-column: 2 / span 3;
    }
}

/* 极窄手机单列换取完整名称的可读性，不把文字强压成三四行或裁掉内容。 */
@media (max-width: 25rem) {
    .zbt-about-page-stage--qualification .zbt-about-page-qualification__items li,
    .zbt-about-page-stage--qualification .zbt-about-page-qualification__items li:nth-child(5),
    .zbt-about-page-stage--qualification .zbt-about-page-qualification__items li:nth-child(7) {
        grid-column: span 4;
    }
}


/*
 * 标签按真实行宽收紧后，月桂跟随整个文字块移动，而不是跟随网格列边缘。
 * 未启用脚本时仍以 CSS 自然宽度显示完整名称，保持可读的渐进增强降级。
 */
.zbt-about-page-stage--qualification .zbt-about-page-qualification__label {
    inline-size: var(--zbt-qualification-label-inline-size, fit-content);
    flex: 0 1 auto;
}