/* ==== S2 栅格系统 ==== */

/* 基础变量定义 */
#S2-Wrapper {
    --col-count: 1;
    --col-gap: 12px;
    /* 可选：最小宽度 */
    /* --col-min-width: 200px; */
}

/* 栅格容器 */
.row.row-col-width-controlled-by-grandparent {
    display: flex;
    flex-wrap: wrap;
    gap: var(--col-gap);
}

/* 栅格子项 */
.row.row-col-width-controlled-by-grandparent .col {
    flex: 1 0 calc((100% - (var(--col-gap) * (var(--col-count) - 1))) / var(--col-count));
    min-width: var(--col-min-width, 0);
    box-sizing: border-box;
}

/* === XS（默认，无媒体查询）=== */
#S2-Wrapper .grandparent-col-xs-1 {
    --col-count: 1;
}

#S2-Wrapper .grandparent-col-xs-2 {
    --col-count: 2;
}

#S2-Wrapper .grandparent-col-xs-3 {
    --col-count: 3;
}

#S2-Wrapper .grandparent-col-xs-4 {
    --col-count: 4;
}

#S2-Wrapper .grandparent-col-xs-6 {
    --col-count: 6;
}

#S2-Wrapper .grandparent-col-xs-8 {
    --col-count: 8;
}

/* === SM（≥576px）=== */
@media (min-width: 576px) {
    #S2-Wrapper.s2-full-width .grandparent-col-sm-1 {
        --col-count: 1;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-sm-2 {
        --col-count: 2;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-sm-3 {
        --col-count: 3;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-sm-4 {
        --col-count: 4;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-sm-6 {
        --col-count: 6;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-sm-8 {
        --col-count: 8;
    }
}

/* === MD（≥768px）=== */
@media (min-width: 768px) {
    #S2-Wrapper.s2-full-width .grandparent-col-md-1 {
        --col-count: 1;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-md-2 {
        --col-count: 2;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-md-3 {
        --col-count: 3;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-md-4 {
        --col-count: 4;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-md-6 {
        --col-count: 6;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-md-8 {
        --col-count: 8;
    }

    /* 自定义比例：4-8 */
    #S2-Wrapper.s2-full-width .grandparent-col-md-4-8 .row.row-col-width-controlled-by-grandparent .col:nth-child(1) {
        flex: 1 0 32%;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-md-4-8 .row.row-col-width-controlled-by-grandparent .col:nth-child(2) {
        flex: 1 0 66%;
    }
}

/* === LG（≥992px）=== */
@media (min-width: 992px) {
    #S2-Wrapper.s2-full-width .grandparent-col-lg-1 {
        --col-count: 1;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-lg-2 {
        --col-count: 2;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-lg-3 {
        --col-count: 3;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-lg-4 {
        --col-count: 4;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-lg-6 {
        --col-count: 6;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-lg-8 {
        --col-count: 8;
    }


}

/* === XL（≥1200px）=== */
@media (min-width: 1200px) {
    #S2-Wrapper.s2-full-width .grandparent-col-xl-1 {
        --col-count: 1;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-xl-2 {
        --col-count: 2;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-xl-3 {
        --col-count: 3;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-xl-4 {
        --col-count: 4;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-xl-6 {
        --col-count: 6;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-xl-8 {
        --col-count: 8;
    }

    /* 自定义比例：3-6-3 */
    #S2-Wrapper.s2-full-width .grandparent-col-xl-3-6-3 .row.row-col-width-controlled-by-grandparent .col:nth-child(1),
    #S2-Wrapper.s2-full-width .grandparent-col-xl-3-6-3 .row.row-col-width-controlled-by-grandparent .col:nth-child(3) {
        flex: 1 0 24%;
    }

    #S2-Wrapper.s2-full-width .grandparent-col-xl-3-6-3 .row.row-col-width-controlled-by-grandparent .col:nth-child(2) {
        flex: 1 0 50%;
    }
}

/* 可选：间隙变体 */
#S2-Wrapper.gap-2 {
    --col-gap: 8px;
}

#S2-Wrapper.gap-3 {
    --col-gap: 12px;
}

#S2-Wrapper.gap-4 {
    --col-gap: 16px;
}

/* 添加过渡动画 NOT NOW */
.row.row-col-width-controlled-by-grandparent .col {
    /* transition: all 0.3s ease; */
}

/* ============================================
   S2 状态定义
   窄状态（满足任一条件）：
   1. 屏幕宽度 ≤ 992px（移动端/平板）
   2. 屏幕宽度 > 992px 且 S2-Wrapper:not(.s2-full-width)（PC端S3显示）
   
   宽状态：
   屏幕宽度 > 992px 且 S2-Wrapper.s2-full-width（PC端S3隐藏）
   ============================================ */

/* 移动端/平板：总是窄状态 */
@media (max-width: 992px) {

    #S2-Wrapper,
    #S2-Wrapper.s2-full-width,
    #S2-Wrapper:not(.s2-full-width) {
        /* 窄状态标识 */
    }
}

/* PC端：根据 s2-full-width 判断状态 */
@media (min-width: 993px) {
    #S2-Wrapper.s2-full-width {
        /* 宽状态 */
    }

    #S2-Wrapper:not(.s2-full-width) {
        /* 窄状态 */
    }
}

/* ============================================
   S2 内容显示控制类
   ============================================ */

/* 窄状态隐藏 */
.s2-hide-when-narrow {
    display: none !important;
}

/* 宽状态隐藏 */
.s2-hide-when-wide {
    display: none !important;
}

/* 窄状态显示 */
.s2-show-when-narrow {
    display: block !important;
}

/* 宽状态显示 */
.s2-show-when-wide {
    display: block !important;
}

/* 应用状态 */
/* 移动端/平板：窄状态 */
@media (max-width: 992px) {
    .s2-hide-when-narrow {
        display: none !important;
    }

    .s2-show-when-narrow {
        display: block !important;
    }

    .s2-hide-when-wide {
        display: block !important;
    }

    .s2-show-when-wide {
        display: none !important;
    }
}

/* PC端 */
@media (min-width: 993px) {

    /* PC端宽状态：S3隐藏 */
    #S2-Wrapper.s2-full-width .s2-hide-when-wide {
        display: none ;
    }

    #S2-Wrapper.s2-full-width .s2-show-when-wide {
        display: block ;
    }

    #S2-Wrapper.s2-full-width .s2-hide-when-narrow {
        display: block ;
    }

    #S2-Wrapper.s2-full-width .s2-show-when-narrow {
        display: none ;
    }

    /* PC端窄状态：S3显示 */
    #S2-Wrapper:not(.s2-full-width) .s2-hide-when-narrow {
        display: none ;
    }

    #S2-Wrapper:not(.s2-full-width) .s2-show-when-narrow {
        display: block ;
    }

    #S2-Wrapper:not(.s2-full-width) .s2-hide-when-wide {
        display: block ;
    }

    #S2-Wrapper:not(.s2-full-width) .s2-show-when-wide {
        display: none ;
    }
}

/* ============================================
   S2 内容宽度控制类
   ============================================ */

/* 窄状态宽度 */
.s2-width-when-narrow-0 {
    width: 0% !important;
}

.s2-width-when-narrow-25 {
    width: 25% !important;
}

.s2-width-when-narrow-33 {
    width: 33.333% !important;
}

.s2-width-when-narrow-50 {
    width: 50% !important;
}

.s2-width-when-narrow-66 {
    width: 66.666% !important;
}

.s2-width-when-narrow-75 {
    width: 75% !important;
}

.s2-width-when-narrow-100 {
    width: 100% !important;
}

/* 宽状态宽度 */
.s2-width-when-wide-0 {
    width: 0% !important;
}

.s2-width-when-wide-25 {
    width: 25% !important;
}

.s2-width-when-wide-33 {
    width: 33.333% !important;
}

.s2-width-when-wide-50 {
    width: 50% !important;
}

.s2-width-when-wide-66 {
    width: 66.666% !important;
}

.s2-width-when-wide-75 {
    width: 75% !important;
}

.s2-width-when-wide-100 {
    width: 100% !important;
}

/* 应用宽度控制 */
/* 移动端/平板：窄状态 */
@media (max-width: 992px) {
    .s2-width-when-narrow-25 {
        width: 25% !important;
    }

    .s2-width-when-narrow-50 {
        width: 50% !important;
    }

    .s2-width-when-narrow-75 {
        width: 75% !important;
    }

    .s2-width-when-narrow-100 {
        width: 100% !important;
    }

    /* 宽状态类在移动端不生效 */
    .s2-width-when-wide-25,
    .s2-width-when-wide-50,
    .s2-width-when-wide-75,
    .s2-width-when-wide-100 {
        width: 100% !important;
        /* 或 auto，根据需要 */
    }
}

/* PC端 */
@media (min-width: 993px) {

    /* PC端宽状态：S3隐藏 */
    #S2-Wrapper.s2-full-width .s2-width-when-wide-25 {
        width: 25% !important;
    }

    #S2-Wrapper.s2-full-width .s2-width-when-wide-50 {
        width: 50% !important;
    }

    #S2-Wrapper.s2-full-width .s2-width-when-wide-75 {
        width: 75% !important;
    }

    #S2-Wrapper.s2-full-width .s2-width-when-wide-100 {
        width: 100% !important;
    }

    /* 窄状态类在宽状态时不生效 */
    #S2-Wrapper.s2-full-width .s2-width-when-narrow-25,
    #S2-Wrapper.s2-full-width .s2-width-when-narrow-50,
    #S2-Wrapper.s2-full-width .s2-width-when-narrow-75,
    #S2-Wrapper.s2-full-width .s2-width-when-narrow-100 {
        width: 100% !important;
        /* 回退到默认 */
    }

    /* PC端窄状态：S3显示 */
    #S2-Wrapper:not(.s2-full-width) .s2-width-when-narrow-25 {
        width: 25% !important;
    }

    #S2-Wrapper:not(.s2-full-width) .s2-width-when-narrow-50 {
        width: 50% !important;
    }

    #S2-Wrapper:not(.s2-full-width) .s2-width-when-narrow-75 {
        width: 75% !important;
    }

    #S2-Wrapper:not(.s2-full-width) .s2-width-when-narrow-100 {
        width: 100% !important;
    }

    /* 宽状态类在窄状态时不生效 */
    #S2-Wrapper:not(.s2-full-width) .s2-width-when-wide-25,
    #S2-Wrapper:not(.s2-full-width) .s2-width-when-wide-50,
    #S2-Wrapper:not(.s2-full-width) .s2-width-when-wide-75,
    #S2-Wrapper:not(.s2-full-width) .s2-width-when-wide-100 {
        width: 100% !important;
        /* 回退到默认 */
    }
}

/* ============================================
   简化版：更实用的类
   ============================================ */

/* 总是窄状态时100%，宽状态时50% */
.s2-state-responsive-50 {
    /* 移动端/平板：窄状态，总是100% */
    width: 100% !important;
}

/* PC端宽状态：S3隐藏，50% */
@media (min-width: 993px) {
    #S2-Wrapper.s2-full-width .s2-state-responsive-50 {
        width: 50% !important;
    }
}

/* 总是窄状态时50%，宽状态时100% */
.s2-state-responsive-reverse-50 {
    /* 移动端/平板：窄状态，50% */
    width: 50% !important;
}

/* PC端宽状态：S3隐藏，100% */
@media (min-width: 993px) {
    #S2-Wrapper.s2-full-width .s2-state-responsive-reverse-50 {
        width: 100% !important;
    }
}

/* PC端窄状态：S3显示，50% */
@media (min-width: 993px) {
    #S2-Wrapper:not(.s2-full-width) .s2-state-responsive-reverse-50 {
        width: 50% !important;
    }
}

/* 最常用的：窄状态隐藏 */
.s2-hidden-in-narrow-state {
    /* 移动端/平板：窄状态隐藏 */
    display: none !important;
}

/* PC端宽状态：S3隐藏时显示 */
@media (min-width: 993px) {
    #S2-Wrapper.s2-full-width .s2-hidden-in-narrow-state {
        display: block !important;
    }
}

/* 窄状态显示，宽状态隐藏 */
.s2-hidden-in-wide-state {
    /* 移动端/平板：窄状态显示 */
    display: block !important;
}

/* PC端宽状态：S3隐藏时隐藏 */
@media (min-width: 993px) {
    #S2-Wrapper.s2-full-width .s2-hidden-in-wide-state {
        display: none !important;
    }
}

.w-fit {
    width: fit-content !important;
}

@media (min-width: 768px) {
    #S2-Wrapper.s2-full-width .sticky-in-wide-state-top {
        position: sticky;
        top: 0;
        z-index: 1020
    }
}