/*
 * 功能页 Banner 统一收口样式
 *
 * 使用范围：
 * - 由 header.php 按路由白名单自动挂载到无按钮功能页；
 * - 目标是让这些页面的 Banner 文案区与 `/products` 的左下对齐语义一致；
 * - 所有颜色、圆角、阴影和间距优先使用 root.css 中的 V2 token。
 */

.atf-page-heading {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
    padding: 0;
    isolation: isolate;
}

/*
 * 深色遮罩用于统一功能页首屏可读性。
 * 部分页面背景图偏黑，原本黑色标题会直接消失；这里统一使用白字 + 暗色渐变。
 */
.atf-page-heading::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(var(--v2-bg-dark-rgb), 0.22) 0%,
        rgba(var(--v2-bg-dark-rgb), 0.42) 50%,
        rgba(var(--v2-bg-dark-rgb), 0.66) 100%
    );
}

.atf-page-heading > .container {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/*
 * 同时覆盖旧居中页的 `.text-center`。
 * 这些页面不再需要居中 hero 文案，统一回到 `/products` 的左下信息块。
 */
.atf-page-heading .atf-page-heading-in,
.atf-page-heading .atf-page-heading-in.text-center {
    display: flex;
    flex-direction: column;
    gap: var(--v2-spacing-md);
    position: relative;
    inset: auto;
    width: min(100%, 760px);
    max-width: min(760px, 100%);
    margin: 0;
    padding-top: 0 !important;
    padding-bottom: clamp(var(--v2-spacing-lg), 5vw, 56px);
    text-align: left !important;
    align-items: flex-start !important;
}

.atf-page-heading .atf-page-heading-title {
    max-width: min(720px, 100%);
    margin: 0;
    color: var(--v2-text-inverse) !important;
    font-size: clamp(var(--v2-h2-font-size), 4.2vw, var(--v2-h0-font-size));
    line-height: var(--v2-h0-line-height);
    font-weight: 500;
    letter-spacing: 0;
    text-shadow: 0 14px 34px rgba(var(--v2-bg-dark-rgb), 0.38);
}

body.functional-banner-page .atf-page-heading.atf-align-left .atf-page-heading-title {
    font-size: var(--v2-h0-font-size);
    line-height: var(--v2-h0-line-height);
    font-weight: 500;
    letter-spacing: 0;
}

.atf-page-heading .atf-post-label,
.atf-page-heading .atf-page-heading-in .atf-post-label {
    position: static;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0 var(--v2-spacing-sm);
    max-width: 100%;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--v2-radius-pill);
    background: rgba(var(--v2-bg-dark-rgb), 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.atf-page-heading .atf-post-label > span,
.atf-page-heading .atf-post-label > span a,
.atf-page-heading .atf-post-label > a,
.atf-page-heading .atf-post-label > span:last-child,
.atf-page-heading .atf-post-label > span:not(:has(a)),
.atf-page-heading .atf-post-label > span:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.9) !important;
}

.atf-page-heading .atf-post-label > span a:hover,
.atf-page-heading .atf-post-label > a:hover {
    color: var(--v2-text-inverse) !important;
}

.atf-page-heading .atf-post-label > span:not(:last-child)::after {
    content: '/';
    margin-left: var(--v2-spacing-sm);
}

/* 兼容部分功能页 breadcrumb 里直接输出的 `<a>`，避免斜杠缺失或链接脱离行内布局。 */
.atf-page-heading .atf-post-label > a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.atf-page-heading .atf-post-label > a::after {
    content: '/';
    margin-left: var(--v2-spacing-sm);
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 991px) {
    .atf-page-heading .atf-page-heading-in,
    .atf-page-heading .atf-page-heading-in.text-center {
        width: min(100%, 720px);
        padding-bottom: clamp(var(--v2-spacing-md), 6vw, var(--v2-mobile-banner-content-bottom));
    }

    .atf-page-heading .atf-page-heading-title {
        max-width: min(680px, 100%);
        font-size: clamp(var(--v2-h3-font-size), 6vw, var(--v2-h1-font-size));
    }
}

@media (max-width: 767px) {
    .atf-page-heading,
    .atf-page-heading.atf-size-md {
        min-height: var(--v2-mobile-banner-height);
    }

    .atf-page-heading > .container {
        padding-left: var(--v2-mobile-container-padding);
        padding-right: var(--v2-mobile-container-padding);
    }

    .atf-page-heading .atf-page-heading-in,
    .atf-page-heading .atf-page-heading-in.text-center {
        width: 100%;
        gap: var(--v2-mobile-stack-gap);
        padding-bottom: var(--v2-mobile-banner-content-bottom);
    }

    .atf-page-heading .atf-page-heading-title {
        max-width: 100%;
        margin-bottom: 0;
        font-size: var(--v2-mobile-banner-title-font-size);
        line-height: var(--v2-mobile-banner-title-line-height);
    }

    .atf-page-heading .atf-post-label,
    .atf-page-heading .atf-page-heading-in .atf-post-label {
        min-height: var(--v2-mobile-breadcrumb-height);
        padding: 8px var(--v2-mobile-breadcrumb-padding-x);
        gap: 0 var(--v2-mobile-breadcrumb-gap);
    }

.atf-page-heading .atf-post-label > span:not(:last-child)::after,
.atf-page-heading .atf-post-label > a::after {
        margin-left: var(--v2-mobile-breadcrumb-gap);
    }
}

/*
 * 浅色 Banner 文字方案。
 *
 * 使用范围：
 * - header.php 会给已确认浅色背景的功能页挂载 `functional-banner-light`；
 * - 标题和面包屑文字统一使用 root.css 中的深色语义变量；
 * - breadcrumb 继续保留毛玻璃承托，不使用纯白实底，避免与深浅过渡背景割裂。
 */
body.functional-banner-light .atf-page-heading::before {
    content: none;
    background: none;
    opacity: 0;
}

body.functional-banner-light .atf-page-heading .atf-page-heading-title {
    color: var(--v2-text-heading) !important;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.42);
}

body.functional-banner-light .atf-page-heading .atf-post-label,
body.functional-banner-light .atf-page-heading .atf-page-heading-in .atf-post-label {
    border: 1px solid color-mix(in srgb, var(--v2-bg-primary) 58%, transparent);
    background: color-mix(in srgb, var(--v2-bg-primary) 34%, transparent);
    box-shadow: 0 12px 30px rgba(var(--v2-bg-dark-rgb), 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.functional-banner-light .atf-page-heading .atf-post-label > span,
body.functional-banner-light .atf-page-heading .atf-post-label > span:last-child,
body.functional-banner-light .atf-page-heading .atf-post-label > span:not(:has(a)),
body.functional-banner-light .atf-page-heading .atf-post-label > span:not(:last-child)::after,
body.functional-banner-light .atf-page-heading .atf-post-label > a::after {
    color: var(--v2-text-body) !important;
}

body.functional-banner-light .atf-page-heading .atf-post-label > span a,
body.functional-banner-light .atf-page-heading .atf-post-label > a {
    color: var(--v2-text-secondary) !important;
}

body.functional-banner-light .atf-page-heading .atf-post-label > span a:hover,
body.functional-banner-light .atf-page-heading .atf-post-label > a:hover {
    color: var(--v2-primary-600) !important;
}

.atf-page-heading.manuals-page-heading::before,
.atf-page-heading[style*="--manual-ban-bg"]::before,
body.functional-banner-light .atf-page-heading.manuals-page-heading::before,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"]::before {
    content: '';
    opacity: 1;
    background: linear-gradient(
        180deg,
        rgba(var(--v2-bg-dark-rgb), 0.22) 0%,
        rgba(var(--v2-bg-dark-rgb), 0.42) 50%,
        rgba(var(--v2-bg-dark-rgb), 0.66) 100%
    );
}

.atf-page-heading.manuals-page-heading .atf-page-heading-title,
.atf-page-heading[style*="--manual-ban-bg"] .atf-page-heading-title,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-page-heading-title,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-page-heading-title {
    color: var(--v2-text-inverse) !important;
    text-shadow: 0 14px 34px rgba(var(--v2-bg-dark-rgb), 0.38);
}

.atf-page-heading.manuals-page-heading .atf-post-label,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(var(--v2-bg-dark-rgb), 0.18);
    box-shadow: var(--v2-shadow-card);
}

.atf-page-heading.manuals-page-heading .atf-post-label > span,
.atf-page-heading.manuals-page-heading .atf-post-label > span a,
.atf-page-heading.manuals-page-heading .atf-post-label > span:last-child,
.atf-page-heading.manuals-page-heading .atf-post-label > span:not(:has(a)),
.atf-page-heading.manuals-page-heading .atf-post-label > span:not(:last-child)::after,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span a,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:last-child,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:not(:has(a)),
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:not(:last-child)::after,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span a,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span:last-child,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span:not(:has(a)),
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span:not(:last-child)::after,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span a,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:last-child,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:not(:has(a)),
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.9) !important;
}

@media (max-width: 767px) {
    body.functional-banner-light .atf-page-heading::before {
        content: '';
        background: linear-gradient(
            180deg,
            rgba(var(--v2-bg-dark-rgb), 0.22) 0%,
            rgba(var(--v2-bg-dark-rgb), 0.42) 50%,
            rgba(var(--v2-bg-dark-rgb), 0.66) 100%
        );
        opacity: 1;
    }

    body.functional-banner-light .atf-page-heading .atf-page-heading-title {
        color: #FFFFFF !important;
        font-size: 28px;
        line-height: 36px;
        font-weight: 500;
        text-shadow: none;
    }

    body.functional-banner-page .atf-page-heading .atf-page-heading-title {
        font-size: 28px;
        line-height: 36px;
        font-weight: 500;
        text-shadow: none;
    }

    body.functional-banner-page .atf-page-heading:not(.atf-align-left) .atf-page-heading-in,
    body.functional-banner-page .atf-page-heading:not(.atf-align-left) .atf-page-heading-in.text-center {
        padding-bottom: 54px;
    }

    body.functional-banner-light .atf-page-heading .atf-post-label,
    body.functional-banner-light .atf-page-heading .atf-page-heading-in .atf-post-label {
        min-height: 0;
        padding: 0;
        gap: 0 6px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: #FFFFFF;
        font-size: 16px;
        line-height: 24px;
    }

    body.functional-banner-light .atf-page-heading .atf-post-label > span,
    body.functional-banner-light .atf-page-heading .atf-post-label > span a,
    body.functional-banner-light .atf-page-heading .atf-post-label > a {
        color: #FFFFFF !important;
        font-size: 16px;
        line-height: 24px;
        opacity: 1;
    }

    body.functional-banner-light .atf-page-heading .atf-post-label > span:last-child,
    body.functional-banner-light .atf-page-heading .atf-post-label > span:last-child a,
    body.functional-banner-light .atf-page-heading .atf-post-label > span:not(:has(a)) {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    body.functional-banner-light .atf-page-heading .atf-post-label > span:not(:last-child)::after,
    body.functional-banner-light .atf-page-heading .atf-post-label > a::after {
        margin-left: 6px;
        color: #FFFFFF !important;
    }
}

/* Manual banner uses a light image; keep breadcrumb contrast after light-banner overrides. */
.atf-page-heading.manuals-page-heading .atf-post-label,
.atf-page-heading.manuals-page-heading .atf-page-heading-in .atf-post-label,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label,
.atf-page-heading[style*="--manual-ban-bg"] .atf-page-heading-in .atf-post-label,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-page-heading-in .atf-post-label,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-page-heading-in .atf-post-label {
    border-color: rgba(255, 255, 255, 0.22) !important;
    background: rgba(var(--v2-bg-dark-rgb), 0.58) !important;
    box-shadow: 0 16px 36px rgba(var(--v2-bg-dark-rgb), 0.24) !important;
}

.atf-page-heading.manuals-page-heading .atf-post-label > span,
.atf-page-heading.manuals-page-heading .atf-post-label > span a,
.atf-page-heading.manuals-page-heading .atf-post-label > a,
.atf-page-heading.manuals-page-heading .atf-post-label > span:last-child,
.atf-page-heading.manuals-page-heading .atf-post-label > span:not(:has(a)),
.atf-page-heading.manuals-page-heading .atf-post-label > span:not(:last-child)::after,
.atf-page-heading.manuals-page-heading .atf-post-label > a::after,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span a,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > a,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:last-child,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:not(:has(a)),
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:not(:last-child)::after,
.atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > a::after,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span a,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > a,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span:last-child,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span:not(:has(a)),
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span:not(:last-child)::after,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > a::after,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span a,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > a,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:last-child,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:not(:has(a)),
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span:not(:last-child)::after,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > a::after {
    color: rgba(255, 255, 255, 0.94) !important;
}

body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > span a:hover,
body.functional-banner-light .atf-page-heading.manuals-page-heading .atf-post-label > a:hover,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > span a:hover,
body.functional-banner-light .atf-page-heading[style*="--manual-ban-bg"] .atf-post-label > a:hover {
    color: #FFFFFF !important;
}