/**
 * value-banner.css
 * 「每一个位置都有价值」数据 banner 组件样式（配合 lenet-value-banner.js）
 *
 * 使用：先在页面中引入本文件，再使用 <lenet-value-banner></lenet-value-banner>
 *
 * 移动端样式集中在文件末尾 @media 中
 */

/* ===== 容器（宿主保持块级） ===== */
lenet-value-banner {
    display: block;
    width: 100%;
}

.lvb {
    position: relative;
    margin-top: 64px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px -16px rgba(15, 61, 145, .15);
    max-width: 1400px;
    width: 100%;
    height: 550px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

/* ===== 背景层 ===== */
.lvb__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #DCE9F8;
    z-index: 0;
}

.lvb__overlay {
    position: absolute;
    inset: 0;
    /* 半透明蓝粉，色值与产品卡片 hover 渐变一致：#B0DEFF → #D4E5FF → #F0D4F0 → #FFB6D9 */
    background: linear-gradient(
        135deg,
        rgba(176, 222, 255, .78) 0%,
        rgba(176, 222, 255, .78) 48%,
        rgba(212, 229, 255, .78) 74%,
        rgba(240, 212, 240, .78) 90%,
        rgba(255, 182, 217, .78) 100%
    );
    z-index: 1;
}

/* ===== 内容层 ===== */
.lvb__content {
    position: relative;
    z-index: 2;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 32px 80px;
    text-align: center;
}

.lvb__title {
    font-size: 40px;
    font-weight: 800;
    color: #0B1733;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0 0 48px;
}

.lvb__stats {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.lvb__stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 40px;
}

.lvb__num {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    font-family: 'Manrope', 'Microsoft YaHei', sans-serif;
    display: inline-flex;
    align-items: baseline;
    background: linear-gradient(135deg, #0F3D91 0%, #00C2FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.lvb__num em {
    font-size: 36px;
    font-weight: 700;
    font-style: normal;
    margin-left: 4px;
    letter-spacing: 0;
}

.lvb__label {
    font-size: 16px;
    color: #34466B;
    font-weight: 500;
    letter-spacing: 1px;
}

.lvb__divider {
    width: 1px !important;
    height: 56px;
    background: rgba(15, 61, 145, .15);
    padding: 0 !important;
}

.lvb__lede {
    font-size: 16px;
    color: #34466B;
    line-height: 1.9;
    margin: 0 auto 14px;
    max-width: 980px;
}

.lvb__lede strong {
    color: #0F3D91;
    font-weight: 700;
}

.lvb__lede--sub {
    font-size: 14px;
    color: #5C6E91;
    line-height: 1.9;
    max-width: 1040px;
}

/* =====================================================
   响应式
   ===================================================== */
@media (max-width: 1240px) {
    .lvb {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 1024px) {
    .lvb__stats li { padding: 0 24px; }
    .lvb__num { font-size: 48px; }
}

@media (max-width: 767px) {
    .lvb {
        width: 100%;
        max-width: none;
        height: auto;
        padding-left: 16px;
        padding-right: 16px;
        border-radius: 12px;
        margin-top: 16px;
    }
    .lvb__content { height: auto; padding: 40px 16px 50px; }
    .lvb__title { font-size: 22px; margin-bottom: 32px; }
    .lvb__stats {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 28px;
    }
    .lvb__stats li { padding: 0; }
    .lvb__num { font-size: 40px; }
    .lvb__num em { font-size: 26px; }
    .lvb__divider { width: 80% !important; height: 1px !important; }
    .lvb__lede { font-size: 14px; line-height: 1.8; }
    .lvb__lede--sub { font-size: 13px; }
}