/* ==========================================================================
   新派网络 · 页头表层（法务页 / 分类页 / 详情页共用）
   范式：纸白底 + 品牌蓝微光 + 26px 点阵网格，与首页 hero 同一刻度
   纯 CSS 生成，中心向边缘渐隐，无图片请求
   依赖：tokens.css
   用法：<section class="page-header-surface"> 且直接子元素为 .container
   ========================================================================== */

.page-header-surface {
    position: relative;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-default);
    overflow: hidden;
}

/* 顶部品牌蓝微光：两团柔光错开，避免居中的呆板感 */
.page-header-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 62% 100% at 50% 0%,
            rgba(0, 82, 255, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 42% 70% at 16% 6%,
            rgba(0, 122, 255, 0.05) 0%, transparent 72%);
}

/* 点阵 + 细网格：与首页 .hero-dots 同刻度，仅在页头上半部可见 */
.page-header-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(24, 24, 27, 0.055) 1px, transparent 1.5px),
        linear-gradient(rgba(24, 24, 27, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 24, 27, 0.022) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px, 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 130% at 50% 0%,
        rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 58%, transparent 84%);
    mask-image: radial-gradient(ellipse 80% 130% at 50% 0%,
        rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 58%, transparent 84%);
}

/* 内容压在纹理之上 */
.page-header-surface > .container {
    position: relative;
    z-index: 1;
}