/* ============================================================================
   宇鑫精密 · 栏目页顶部横幅统一层
   themes/yuxin/css/yx-banner.css

   解决的问题
   ---------------------------------------------------------------------------
   六个栏目页（关于我们 / 案例展示 / 联系我们 / 下载中心 / 新闻资讯 / 视频中心）
   的横幅原本由各页面 CSS 自带一层遮罩：
       linear-gradient(135deg, rgba(6,22,52,.85) 0%,
                                rgba(11,60,120,.70) 50%,
                                rgba(6,22,52,.90) 100%)
   0.85 的不透明度会把底图盖掉八成以上，并把整块染成深蓝 —— 所以即使换了
   底图，看上去仍是宇熙那套「深蓝渐变横幅」。本文件用一层同等作用但更轻的
   深墨遮罩替换它，让底图（48px 工程网格 + 青色线稿母题）能透出来。

   覆盖的横幅类（含列表页与详情页两类）：
       .about-banner   about.dwt
       .case-banner    case.dwt / case_detail.dwt
       .contact-banner contact.dwt
       .dl-banner      download.dwt / download_cat.dwt
       .news-banner    news.dwt
       .art-banner     article.dwt
       .vid-banner     video.dwt / video_cat.dwt

   特异性说明
   ---------------------------------------------------------------------------
   原规则形如 .about-banner::before，特异性 (0,1,1)。这里写成
   .about-banner.about-banner::before，重复类名把特异性抬到 (0,2,1)，
   无论本文件与原 CSS 谁先加载都能压过去，不必依赖引入顺序。
   ========================================================================== */

:root {
    --yxb-ink:  #060C17;
    --yxb-cy:   #0891B2;
    --yxb-cy-b: #22D3EE;
    --yxb-line: rgba(148, 163, 184, .16);
}

/* ------------------------------------------- 一、遮罩：深蓝重罩 → 深墨轻罩 */
/* 上下压暗保文字与相邻板块衔接，中段几乎透明，露出底图的网格与线稿母题。 */
.about-banner.about-banner::before,
.case-banner.case-banner::before,
.contact-banner.contact-banner::before,
.dl-banner.dl-banner::before,
.news-banner.news-banner::before,
.vid-banner.vid-banner::before,
.art-banner.art-banner::before {
    background: linear-gradient(180deg,
        rgba(6, 12, 23, .38) 0%,
        rgba(6, 12, 23, .10) 20%,
        rgba(6, 12, 23, .06) 58%,
        rgba(6, 12, 23, .26) 86%,
        rgba(6, 12, 23, .46) 100%);
}

/* --------------------- 二、底边：1px 发丝线 + 左侧 96px 青色标尺段 */
/* 与产品全分类页页眉的标尺段同源，让六个栏目和产品页看起来是同一套图纸。 */
.about-banner.about-banner::after,
.case-banner.case-banner::after,
.contact-banner.contact-banner::after,
.dl-banner.dl-banner::after,
.news-banner.news-banner::after,
.vid-banner.vid-banner::after,
.art-banner.art-banner::after {
    height: 2px;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(90deg,
        var(--yxb-cy) 0px,
        var(--yxb-cy) 96px,
        var(--yxb-line) 96px,
        var(--yxb-line) 100%);
}

/* ------------------------------------------------- 三、标题下的短规尺 */
/* 原为 60x3px 白色圆角条，改为青色方角规尺，与图纸语言统一。 */
.about-banner-inner h1::after {
    width: 44px;
    height: 2px;
    margin: 15px auto 0;
    border-radius: 0;
    background: var(--yxb-cy-b);
    opacity: .8;
}

/* ------------------------------------------- 四、栏目标题图标：白 → 青 */
/* 原为 42px 纯白 .2 透明度，视觉上是一团灰；换成青色细感小一号图标。 */
.case-banner-icon,
.dl-banner-icon,
.vid-banner-icon {
    font-size: 36px;
    color: rgba(34, 211, 238, .42);
    margin-bottom: 14px;
}

/* --------------------------------------- 五、文章详情的分类徽标：去胶囊 */
/* 原为 20px 圆角 + 白 15% 底 + 毛玻璃，是全站唯一残留的大圆角胶囊。 */
.art-banner .art-cat-badge {
    border-radius: 2px;
    padding: 5px 12px;
    color: var(--yxb-cy-b);
    background: rgba(34, 211, 238, .10);
    border: 1px solid rgba(34, 211, 238, .32);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    letter-spacing: .6px;
}

.art-banner .art-cat-badge:hover {
    background: rgba(34, 211, 238, .18);
    color: #fff !important;
    transform: none;
}

/* ================================================================= 六、响应式 */
/* 横幅高度在 130–200px 区间时，1920x400 的底图以 cover 铺满会裁掉左右两侧，
   线稿母题只余中部。此时把母题整体淡出，避免出现「半个图形」的残缺感。 */
@media (max-width: 768px) {
    .about-banner.about-banner,
    .case-banner.case-banner,
    .contact-banner.contact-banner,
    .dl-banner.dl-banner,
    .news-banner.news-banner,
    .vid-banner.vid-banner,
    .art-banner.art-banner {
        background-position: 62% center !important;
    }

    .about-banner.about-banner::before,
    .case-banner.case-banner::before,
    .contact-banner.contact-banner::before,
    .dl-banner.dl-banner::before,
    .news-banner.news-banner::before,
    .vid-banner.vid-banner::before,
    .art-banner.art-banner::before {
        background: linear-gradient(180deg,
            rgba(6, 12, 23, .58) 0%,
            rgba(6, 12, 23, .42) 30%,
            rgba(6, 12, 23, .44) 70%,
            rgba(6, 12, 23, .60) 100%);
    }
}