/* ========== 编辑器Columns区块前端通用样式 ========== */
/* 基础列容器 - 修复默认间距/布局 */
.wp-block-columns {
    margin: 2em 0 !important; /* 上下外边距，适配大多数主题 */
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* 解决列容器溢出问题 */
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Flex布局核心 - 确保列横向排列且自适应 */
.wp-block-columns.is-layout-flex,
.wp-block-columns-is-layout-flex {
    display: flex !important;
    flex-wrap: wrap !important; /* 小屏幕自动换行，避免挤压 */
    align-items: flex-start !important; /* 列顶部对齐（也可改为stretch让高度一致） */
    justify-content: flex-start !important; /* 左对齐，符合常规排版 */
    gap: 2rem !important; /* 列之间的间距，编辑器里设置的间距可能失效，手动指定更稳定 */
}

/* 动态容器类（覆盖WordPress随机生成的容器样式） */
[class*="wp-container-core-columns-is-layout-"] {
    gap: inherit !important; /* 继承列容器的间距，避免动态样式覆盖 */
    margin: 0 !important;
    padding: 0 !important;
}

/* 列项样式 - 修复宽度/内边距/高度 */
.wp-block-columns .wp-block-column {
    flex: 1 1 0% !important; /* 列宽度自动均分（核心！解决列宽度不一致） */
    min-width: 280px !important; /* 移动端最小宽度，避免列过窄 */
    max-width: calc(100% - 1rem) !important; /* 防止列溢出 */
    box-sizing: border-box !important;
    padding: 0 !important; /* 重置默认内边距，如需内边距在列内加容器 */
    /* 可选：让所有列高度一致（视觉更整齐） */
    display: flex !important;
    flex-direction: column !important;
}

/* 响应式适配 - 移动端单列显示 */
@media (max-width: 768px) {
    .wp-block-columns.is-layout-flex,
    .wp-block-columns-is-layout-flex {
        flex-direction: column !important;
        gap: 1.5rem !important; /* 移动端列间距缩小 */
    }
    .wp-block-columns .wp-block-column {
        min-width: 100% !important; /* 移动端列占满宽度 */
        flex: none !important;
    }
}

/* 修复不同列数的特殊情况 */
/* 2列布局 */
.wp-block-columns.has-2-columns .wp-block-column {
    flex: 1 1 calc(50% - 1rem) !important; /* 精准均分宽度，减去间距 */
}
/* 3列布局 */
.wp-block-columns.has-3-columns .wp-block-column {
    flex: 1 1 calc(33.333% - 1.333rem) !important;
}
/* 4列布局 */
.wp-block-columns.has-4-columns .wp-block-column {
    flex: 1 1 calc(25% - 1.5rem) !important;
}

/* 移动端适配不同列数 */
@media (max-width: 768px) {
    .wp-block-columns.has-2-columns .wp-block-column,
    .wp-block-columns.has-3-columns .wp-block-column,
    .wp-block-columns.has-4-columns .wp-block-column {
        flex: 1 1 100% !important;
    }
}

/* 可选：编辑器内预览样式（保证编辑和前端一致） */
.editor-styles-wrapper .wp-block-columns {
    gap: 1.5rem !important; /* 编辑器内间距略小，适配编辑区域 */
}
.editor-styles-wrapper .wp-block-column {
    min-width: 250px !important;
}