/* ============================================================
 * v2.13 移动端 WPBakery 单列堆叠修复
 * ------------------------------------------------------------
 * 根因：主题在手机端只定义了 vc_col-sm-* 固定百分比宽度，
 * 没有补 WPBakery 的 vc_col-xs-*（移动端基础宽度）规则，
 * 且 js_composer.min.css 在主题 CSS 之后加载，导致手机上
 * 页面/文章/产品的多列依然按 sm-* 百分比并排（两列/三列）。
 *
 * 修复：<768px 强制所有 vc 列 100% 宽，上下堆叠；
 * 同时补上 vc_col-xs-12 让 WPBakery 官方规则也走单列。
 * 用 !important 确保压过 js_composer.min.css 后加载的同名规则。
 * ============================================================ */
@media (max-width: 767px) {

    /* 1. 所有 WPBakery 列：移动端一律 100% 宽、上下堆叠 */
    .vc_row > .vc_column_container,
    .vc_row.vc_row-fluid > .vc_column_container,
    .vc_row_inner > .vc_column_container,
    .vc_column_container,
    .vc_col-sm-1, .vc_col-sm-2, .vc_col-sm-3,
    .vc_col-sm-4, .vc_col-sm-5, .vc_col-sm-6,
    .vc_col-sm-7, .vc_col-sm-8, .vc_col-sm-9,
    .vc_col-sm-10, .vc_col-sm-11, .vc_col-sm-12,
    .vc_col-xs-1, .vc_col-xs-2, .vc_col-xs-3,
    .vc_col-xs-4, .vc_col-xs-5, .vc_col-xs-6,
    .vc_col-xs-7, .vc_col-xs-8, .vc_col-xs-9,
    .vc_col-xs-10, .vc_col-xs-11, .vc_col-xs-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. 行容器保持纵向流式，避免 flex 把列强制并排 */
    .vc_row,
    .vc_row-fluid,
    .vc_row.vc_row-fluid,
    .vc_row_inner {
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. 每列留出垂直间距，堆叠后不挤在一起 */
    .vc_column_container {
        margin-bottom: 24px !important;
    }
    .vc_row > .vc_column_container:last-child,
    .vc_row_inner > .vc_column_container:last-child {
        margin-bottom: 0 !important;
    }

    /* 4. 内嵌行（vc_row_inner）里的列也一样堆叠 */
    .vc_row .vc_row,
    .vc_row_inner {
        width: 100% !important;
    }
}