/**
 * @file index_cards.css
 * @description 核心优势推叠卡片样式（PC端横向错峰推叠 / 移动端等底无缝纯净 Sticky）
 */

/* ========================================================
   桌面端样式 (Min-Width: 997px)
======================================================== */
.card_track_container {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 3500px;
}

.card_track_container .card_container {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

.card_track_container .card_container .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 90vh;
    width: 90svh;
    height: 100%;
    box-sizing: border-box;
    will-change: transform;
    box-shadow: -0.8vw 0 3vw rgba(0, 0, 0, 0.22);
    border-radius: 2vh 0 0 2vh;
    border-radius: 2svh 0 0 2svh;
    background-color: #ffffff;
}

.card_track_container .card_container .item:first-of-type {
    box-shadow: none;
}

.card_track_container .card_container .item .item_content {
    position: relative;
    width: 92vh;
    width: 92svh;
    height: 100%;
    box-sizing: border-box;
    font-size: 1.2vw;
    border-radius: 2vh 0 0 2vh;
    border-radius: 2svh 0 0 2svh;
    overflow: hidden;
    background-color: #ffffff;
}

.card_track_container .card_container .item:first-of-type .item_content {
    border-radius: 2vh 0 0 0;
    border-radius: 2svh 0 0 0;
    background-color: #DCDCDC;
}

.card_track_container .card_container .item .item_content .bg_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card_track_container .card_container .item .item_content .text_container {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 8.8vh 27.8vw 0 2.4vw;
    padding: 8.8svh 27.8vw 0 2.4vw;
    box-sizing: border-box;
}

.card_track_container .text_container .title {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 1.25vw;
    color: #262626;
    margin-bottom: 2.3vh;
    margin-bottom: 2.3svh;
}

.card_track_container .text_container .title::before {
    position: absolute;
    content: "";
    width: 0.37vw;
    height: 0.37vw;
    border-radius: 50%;
    background-color: #E8380D;
    left: 0;
    transform: translateX(-1.2vw);
}

.card_track_container .text_container .text {
    font-size: 0.94vw;
    color: #808080;
}

.card_track_container .text_container .header_en {
    font-size: 3.125vw;
    color: #313131;
}

.card_track_container .text_container .header_cn {
    font-weight: bold;
    font-size: 2.5vw;
    color: #1A1A1A;
    margin-top: 2vw;
}

/* ========================================================
   移动端纵向推叠纯净样式 (Max-Width: 996px)
   零留白、无溢出、几何尺寸 100% 依托 JS 等底算法
======================================================== */
@media screen and (max-width: 996px) {
    /* 1. 外层轨道：释放多余高度与 padding，零多余留白 */
    .card_track_container {
        height: auto !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. 粘性宿主：保持 overflow: visible，无缝贴合下一板块 */
    .card_track_container .card_container {
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. 卡片基础粘性特征：由浏览器硬件合成器驱动 */
    .card_track_container .card_container .item {
        position: -webkit-sticky !important;
        position: sticky !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16) !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
        margin-bottom: 0 !important; /* 🌟 强制零边距，间隙由自然文档流承接 */
        will-change: transform;
    }

    .card_track_container .card_container .item:first-of-type {
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* 4. 卡片内容撑满 */
    .card_track_container .card_container .item .item_content {
        width: 100% !important;
        height: 100% !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .card_track_container .card_container .item:first-of-type .item_content {
        border-radius: 0 !important;
    }

    .card_track_container .card_container .item .item_content .text_container {
        padding: 16px 20px 20px 24px !important;
    }

    .card_track_container .card_container .item:first-of-type .item_content .text_container {
        padding: 16vh 24px 0 28px !important;
        padding: 16svh 24px 0 28px !important;
        background: none !important;
    }

    .card_track_container .text_container .header_en {
        font-size: 8.2vw !important;
        line-height: 1.15 !important;
    }

    .card_track_container .text_container .header_cn {
        font-size: 7vw !important;
        margin-top: 10px !important;
    }

    /* 标题保护机制：单行省略截断，保证阶梯露头期绝不折行遮挡 */
    .card_track_container .text_container .title {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 90% !important;
    }

    .card_track_container .text_container .title::before {
        width: 5px !important;
        height: 5px !important;
        transform: translateX(-12px) !important;
    }

    .card_track_container .text_container .text {
        font-size: 13px !important;
        line-height: 1.55 !important;
        color: #444 !important;
        max-width: 96% !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .card_track_container .card_container .item .item_content .bg_img {
        object-position: center bottom !important;
    }
}