/**
 * @file product.css
 * @description 哆鑫宝详情页定制样式，包含渐变背景与交错布局
 */

/* 顶部 Banner 背景 */
.product-banner {
    text-align: center;
    color: #fff;
    padding: 60px 5% 0; /* 改为百分比 */
    position: relative;
    background: #EEF5FD;
}

.product-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.top-content {
    position: absolute;
    top: 32%; /* 改为百分比 */
    left: 15%; /* 改为百分比 */
    padding-right: 10%;
}

.banner-content {
    color: #FFFFFF;
    text-align: left;
}

.banner-content h2 {
    font-size: 50px;
    font-weight: bold;
}

.banner-content p {
    font-size: 20px;
    font-weight: 350;
    margin-top: 15px;
}

/* 核心价值卡片 */
.value-cards {
    background: #EEF5FD;
    margin-top: -40px;
    padding: 0 15% 54px; /* 改为百分比 */
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.v-card {
    flex: 1;
    padding: 30px;
    border-radius: 18px;
    background: linear-gradient(0deg, #FFFFFF 79%, rgba(255, 255, 255, 0.8) 99%);
    backdrop-filter: blur(10px);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.sequence {
    font-size: 26px;
    width: 52px;
    height: 52px;
    color: #3B404E;
    background-image: url(../img/value_sequence_bg.png);
    display: flex;
    justify-content: center;
    align-items: center;
}

.v-card-title {
    font-size: 26px;
    font-weight: 500;
    margin-top: 22px;
    margin-bottom: 11px;
}

.v-card-detail {
    font-size: 20px;
    font-weight: 350;
    line-height: 34px;
    color: #404453;
}

/* 智能系列标题 */
.series-title {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 80px;
    padding: 0 15%;
}
.series-title h3 {
    margin-bottom: 25px;
    font-size: 48px;
    font-weight: bold;
}
.series-title p {
    font-size: 22px;
    font-weight: 500;
}

/* 智能系列交错布局 */
.series-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 60px 15%; /* 使用统一边距 */
    gap: 50px;
}

.series-item.reverse {
    flex-direction: row-reverse;
    background: #F1F7FF;
}

.series-text {
    flex: 1;
    max-width: 556px;
}

.series-title-container {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.series-sequence {
    position: relative;
    margin-right: 20px;
}
.series-sequence p {
    position: absolute;
    left: 10px;
    bottom: 12px;
    font-size: 22px;
    color: #FFFFFF;
}
.series-title-container h4 {
    font-size: 24px;
    font-weight: 500;
}

.series-item ul li {
    display: flex;
    align-items: center;
    margin-top: 25px;
}
.series-item ul li img {
    height: 14px;
    width: 18px;
    margin-right: 10px;
}

.series-img {
    flex: 1;
    max-width: 556px;
}
.series-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 响应式适配 */

/* 14寸屏幕适配 (1440px以下) */
@media screen and (max-width: 1440px) {
    .top-content {
        left: 10%;
        top: 28%;
        padding-right: 20%;
    }
    .value-cards, .series-item, .series-title {
        padding-left: 10%;
        padding-right: 10%;
    }
    .banner-content h2 {
        font-size: 38px;
    }
    .banner-content p {
        font-size: 18px;
    }
}

/* 10寸屏幕适配 (1024px以下) */
@media screen and (max-width: 1024px) {
    .top-content {
        left: 10%;
        top: 30%;
        padding-right: 15%;
    }
    .value-cards {
        margin-top: -30px;
    }
    .value-cards, .series-item, .series-title {
        padding-left: 10%;
        padding-right: 10%;
    }
    .banner-content h2 {
        font-size: 28px;
    }
    .banner-content p {
        font-size: 15px;
    }
    .v-card-title {
        font-size: 22px;
    }
    .v-card-detail {
        font-size: 16px;
    }
    .series-title h3 {
        font-size: 36px;
    }
}

/* 手机端适配 (768px以下) */
@media screen and (max-width: 768px) {
    .product-banner {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 15px;
    }
    .top-content {
        top: 26%;
        left: 20px;
        padding-right: 20px;
    }
    .banner-content h2 {
        font-size: 16px;
        line-height: 1.2;
    }
    .banner-content p {
        font-size: 12px;
        margin-top: 8px;
        line-height: 1.2;
    }
    
    .value-cards {
        flex-direction: column;
        padding: 20px;
        margin-top: 0;
    }
    .v-card {
        margin-bottom: 20px;
        padding: 20px;
    }

    .series-title {
        margin-top: 50px;
        margin-bottom: 30px;
        padding: 0 15px;
    }
    .series-title h3 {
        font-size: 28px;
    }

    .series-item, .series-item.reverse {
        flex-direction: column;
        padding: 40px 15px;
        gap: 30px;
    }
    .series-text, .series-img {
        max-width: 100%;
    }
    .series-title-container {
        margin-bottom: 20px;
    }
}