/* 核心模块：固定90%宽度（PC端），优化移动端边距 */
.advantage-section {
    /* width: 80%; */
    margin: 0 auto;
    position: relative;
    z-index: 1;
    max-width: 1690px;
    padding-bottom: 105px;
    /* padding-left: 115px; */
    
}

/* 标题容器：恢复原有居中样式 */
.advantage-section__title {
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    color: #333;
    line-height: 1.2;
    /* margin-bottom: clamp(1.5rem, 2vw, 2.5rem); */
    padding-top: 55px;
    padding-bottom: 65px;
}

/* 列表容器：优化gap，确保移动端5列不溢出 */
.advantage-section__list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* gap: clamp(0.1rem, 0.3vw, 0.8rem); */

    width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0 0.1rem;
}

/* 新增：卡片外层容器（专门控制圆角，避免缩放时丢失） */
.advantage-card-wrap {
    flex: 0 0 calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5);
    /* min-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5);
    max-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); */
    width: 330px;
    height:470px;
    border-radius: 0.5rem; /* 外层容器承担圆角 */
    overflow: hidden; /* 裁剪内部缩放的卡片 */
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); /* 阴影移到外层，避免缩放时阴影变形 */
    position: relative;
    z-index: 1;
    aspect-ratio: 1 / 1.7;
}

/* 卡片核心：优化宽高比和尺寸计算 */
.advantage-card {
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: #fff;
    position: relative;
    z-index: 1;
    /* 关键修复：添加will-change优化渲染，移除原圆角和阴影（移到外层） */
    will-change: transform; /* 告知浏览器准备变换，避免圆角渲染异常 */
    transition: transform 0.3s ease;
}

.advantage-card__img {
    width: 100%;
    height: 72%;
    /* PC端图片占比提升至72%，文字区域压缩 */
    object-fit: cover;
    background-color: #f9f9f9;
    display: block;
}

/* 文字区域：flex垂直分布，确保标题和描述都垂直居中 */
.advantage-card__content {
    width: 100%;
    height: 28%;
    /* PC端文字区域占比降至28% */
    padding: clamp(0.3rem, 0.4vw, 0.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 整体垂直居中 */
    align-items: center;
    /* 子元素水平居中（关键） */
    /* text-align: center; */
    flex-shrink: 0;
    gap: 4px;
    /* 标题和描述之间的垂直间距，避免贴边 */
}

/* 标题容器：水平居中+内部两端对齐，同时垂直居中 */
.advantage-card__heading-wrap {
    display: flex;
    align-items: center;
    /* 内部标题和箭头垂直对齐 */
    justify-content: space-between;
    /* 文字左、箭头右 */
    gap: 8px;
    width: 80%;
    /* 限制宽度，体现居中效果 */
    /* 移除底部margin，通过父容器gap控制间距 */
}

/* 卡片标题：居左显示 */
.advantage-card__heading {
    font-size: 30px;
    /* 比原尺寸放大，PC端更醒目，移动端自适应 */
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 卡片标题右侧箭头：居右显示 */
.card-arrow {
    color: #409eff;
    font-size: clamp(0.7rem, 1vw, 1rem);
    /* 箭头尺寸跟随标题放大，避免不协调 */
    transition: transform 0.3s ease;
    display: inline-block;
    width: 32px;
    /* 箭头宽度同步增加 */
    text-align: center;
}

/* 卡片hover时箭头动画 */
.advantage-card:hover .card-arrow {
    transform: translateX(3px);
}

/* 描述文字：水平+垂直居中，与标题容器对齐（仅添加最小高度修复对齐问题） */
.advantage-card__description {
    font-size: 22px;
    /* PC端描述文字略放大 */
    color: #666;
    line-height: 1.2;
    /* PC端行高略紧凑 */
    white-space: normal;
    overflow: hidden;
    width: 80%;
    /* 与标题容器宽度一致 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 最多2行，避免高度溢出 */
    -webkit-box-orient: vertical;
    /* 核心修复：固定最小高度=2行文字高度，确保1行时也占满空间 */
    min-height: calc(clamp(0.6rem, 0.9vw, 0.9rem) * 2 * 1.4);
    /* 确保文字垂直居中 */
    display: flex;
    align-items: center;
    justify-content: left;
    margin-top:clamp(9px, 0.5vw, 18px)
}

/* 卡片hover效果（仅保留缩放，阴影移到外层） */
.advantage-card:hover {
    transform: scale(1.03);
    z-index: 10;
}

/* 外层容器hover时增强阴影（更自然的浮起效果） */
.advantage-card-wrap:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

/* 移动端适配 - 核心修改：一行2个，显示2行，隐藏第5个 */
@media (max-width: 767px) {
    .advantage-card:active {
        transform: scale(1.01);
    }

    .advantage-section {
        width: 95%;
        /* 移动端扩大容器宽度 */
    }

    .advantage-section__list {
        gap: 0.5rem; /* 优化间距，更美观 */
        flex-wrap: wrap; /* 允许换行 */
        overflow: visible; /* 取消溢出隐藏，显示多行 */
        justify-content: space-between; /* 两端对齐，确保2个卡片均匀分布 */
    }

    /* 移动端卡片宽度：一行2个 */
    .advantage-card-wrap {
        flex: 0 0 calc(50% - 0.25rem); /* 50%宽度减去一半间距，避免溢出 */
        min-width: calc(50% - 0.25rem);
        max-width: calc(50% - 0.25rem);
        aspect-ratio: 1 / 1.8;
        margin-bottom: 0.5rem; /* 行与行之间的间距 */
    }

    /* 隐藏第5个卡片 */
    .advantage-card-wrap:nth-child(5) {
        display: none;
    }

    .advantage-card__img {
        width: 330px;
        height:330px;
        /* height: 62%; */
        /* 移动端图片占比回到62% */
    }

    .advantage-card__content {
        /* width: 330px;
        height:150px; */
        height: 38%;
        /* 移动端文字区域占比回到38% */
        /* padding: 0.2rem 0.15rem;
        gap: 6px; */
        /* 移动端间距略大，易读性更好 */
    }

    /* 移动端标题容器宽度放宽 */
    .advantage-card__heading-wrap {
        width: 90%;
    }

    .advantage-card__description {
        line-height: 1.2;
        width: 90%;
        -webkit-line-clamp: 2;
        /* 移动端同步添加最小高度 */
        min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5);
    }

    /* 移动端箭头和文字尺寸缩小 */
    .card-arrow {
        font-size: clamp(0.45rem, 0.7vw, 0.8rem);
        width: 10px;
    }

    .advantage-card__heading {
        font-size: clamp(0.6rem, 1vw, 1rem);
    }

    .advantage-card__description {
        font-size: clamp(0.5rem, 0.8vw, 0.8rem);
    }
}

/* 超小屏适配 */
@media (max-width: 374px) {
    .advantage-section {
        width: 98%;
    }

    .advantage-card__heading {
        font-size: clamp(0.55rem, 0.9vw, 0.9rem);
    }

    .advantage-card__heading-wrap {
        width: 95%;
        gap: 5px;
    }

    .advantage-card__description {
        width: 95%;
        /* 超小屏保持最小高度 */
        min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5);
    }
}