/* ==========================================================================
   主视觉与区块「科技感」增强层   theme/qinxue/css/tech.css
   ─────────────────────────────────────────────────────────────────────────
   2026-09-26 新增。PC 与移动端骨架（pc/frame、m/frame）共用同一份。

   做两件事：
     1) 首页 Banner 主视觉 —— 深色遮罩 + 精致排版 + 玻璃态分页/箭头，
        让文字在任意背景图上都清晰，并与内页条幅（page_banner）保持同一套尺度。
     2) 少量「只加不减」的区块细节 —— 只写新属性（box-shadow / border-radius 等），
        不覆盖首页内联样式里已有的 font-size / color 等，避免与既有设计打架。

   注意：主视觉高度由 asset/theme/qinxue-home.css 用 !important 固定为 500px，
        这里不碰高度，只负责遮罩与排版。

   回滚：删掉 pc/frame.blade.php 与 m/frame.blade.php 里对本文件的 <link> 即可。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 主视觉遮罩：只作用于「带文字」的幻灯片（.a），纯图幻灯片不做压暗
   -------------------------------------------------------------------------- */
.ub-banner .swiper-slide.a .cover::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(2, 12, 24, .90) 0%,
            rgba(2, 14, 28, .74) 34%,
            rgba(3, 20, 38, .40) 62%,
            rgba(4, 26, 48, .06) 100%),
        radial-gradient(130% 130% at 14% 52%,
            rgba(0, 98, 192, .34) 0%,
            rgba(0, 98, 192, 0) 64%);
}

.ub-banner .swiper-slide.a .cover > .content {
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   2. 排版：与内页条幅（最大 1550px / 左右 40px）对齐，保证整站尺度一致
   -------------------------------------------------------------------------- */
.ub-banner .swiper-slide.a .cover .content {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    line-height: 1.5;
}

/* 顶部品牌渐变短线 —— 科技感的一个小锚点 */
.ub-banner .swiper-slide.a .cover .content::before {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 22px;
    background: linear-gradient(90deg, #3fbaff, #f7cb33);
    box-shadow: 0 0 18px rgba(63, 186, 255, .65);
}

.ub-banner .swiper-slide.a .cover .content .title {
    color: #fff !important;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
    margin: 0;
    text-shadow: 0 4px 28px rgba(2, 12, 24, .55);
}

.ub-banner .swiper-slide.a .cover .content .slogan {
    margin-top: 16px;
    padding: 0;
}

.ub-banner .swiper-slide.a .cover .content .slogan .line {
    color: rgba(255, 255, 255, .86);
    font-size: 1.0625rem;
    line-height: 1.85;
    letter-spacing: .01em;
    text-shadow: 0 2px 16px rgba(2, 12, 24, .5);
}

/* 空占位不留白（后台未填标题/副标题/按钮文案时不显示多余色块） */
.ub-banner .swiper-slide.a .cover .content .title:empty,
.ub-banner .swiper-slide.a .cover .content .slogan:empty,
.ub-banner .swiper-slide.a .cover .content .link:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   3. 行动按钮
   注意：vendor/Banner/style/banner.css 里有一条 7 个类的规则
        `.ub-banner .swiper-slide.a .cover .content.reverse .link{background:0 0}`，
        会把我 6 个类的 background 覆盖掉变成透明。所以这里把 .reverse 版本也写上，
        用"同等权重 + 文档顺序更靠后"的方式取胜，避免动 !important。
   -------------------------------------------------------------------------- */
.ub-banner .swiper-slide.a .cover .content .link,
.ub-banner .swiper-slide.a .cover .content.reverse .link {
    margin-top: 26px;
    padding: 0 34px;
    height: auto;
    line-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    background: linear-gradient(135deg, #0d8ff0, #0062c0);
    box-shadow: 0 10px 28px rgba(10, 120, 220, .42), inset 0 1px 0 rgba(255, 255, 255, .24);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.ub-banner .swiper-slide.a .cover .content .link:hover,
.ub-banner .swiper-slide.a .cover .content.reverse .link:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    background: linear-gradient(135deg, #0d8ff0, #0062c0);
    box-shadow: 0 16px 38px rgba(10, 120, 220, .58), inset 0 1px 0 rgba(255, 255, 255, .32);
}

/* --------------------------------------------------------------------------
   4. 分页点与左右箭头
   -------------------------------------------------------------------------- */
.ub-banner .swiper-pagination-bullet {
    width: 26px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .42);
    opacity: 1;
    box-shadow: none;
    transition: width .3s ease, background .3s ease, box-shadow .3s ease;
}

.ub-banner .swiper-pagination .swiper-pagination-bullet-active {
    width: 44px;
    background: linear-gradient(90deg, #3fbaff, #0062c0);
    box-shadow: 0 0 14px rgba(63, 186, 255, .75);
}

.ub-banner .swiper-button-white {
    opacity: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(5, 22, 40, .42);
    border: 1px solid rgba(150, 210, 255, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    transition: opacity .3s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.ub-banner:hover .swiper-button-white {
    opacity: 1;
}

.ub-banner .swiper-button-white:hover {
    background: rgba(10, 120, 220, .70);
    border-color: rgba(190, 230, 255, .55);
    transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   5. 移动端：文字居中、遮罩改为纵向，字号收敛
   （与 vendor/Banner/style/banner.css 的 max-width:50rem 断点保持一致）
   -------------------------------------------------------------------------- */
@media (max-width: 50rem) {
    .ub-banner .swiper-slide.a .cover::before {
        background: linear-gradient(180deg,
            rgba(2, 12, 24, .34) 0%,
            rgba(2, 12, 24, .70) 55%,
            rgba(2, 12, 24, .88) 100%);
    }

    .ub-banner .swiper-slide.a .cover .content {
        padding: 0 18px;
        align-items: center;
        text-align: center;
    }

    .ub-banner .swiper-slide.a .cover .content::before {
        width: 40px;
        height: 2px;
        margin-bottom: 12px;
    }

    .ub-banner .swiper-slide.a .cover .content .title {
        font-size: 1.375rem;
    }

    .ub-banner .swiper-slide.a .cover .content .slogan {
        margin-top: 8px;
    }

    .ub-banner .swiper-slide.a .cover .content .slogan .line {
        font-size: .8125rem;
        line-height: 1.6;
    }

    .ub-banner .swiper-slide.a .cover .content .link {
        margin-top: 14px;
        padding: 0 20px;
        line-height: 2rem;
        font-size: 12px;
    }

    .ub-banner .swiper-pagination-bullet {
        width: 16px;
        height: 3px;
    }

    .ub-banner .swiper-pagination .swiper-pagination-bullet-active {
        width: 26px;
    }
}

/* --------------------------------------------------------------------------
   6. 区块细节：只写新属性，不改已有声明，因此不会与首页内联样式冲突
   -------------------------------------------------------------------------- */
/* 章节标题下的蓝色短线 —— 补一层柔光与圆角 */
.s_tt::after {
    border-radius: 3px;
    box-shadow: 0 0 14px rgba(0, 98, 192, .45);
}

/* 统计数字 —— 轻微辉光，突出重点 */
.s-about ul li b {
    text-shadow: 0 6px 22px rgba(0, 98, 192, .22);
}

/* 主视觉上的分页/箭头在触屏设备无 hover，直接常亮 */
@media (hover: none) {
    .ub-banner .swiper-button-white {
        display: none;
    }
}