/**
 * KBG UI 3.0 —— Layout Framework（Stage 2）
 *
 * 只负责跟具体页面内容无关的通用容器/栅格/断点基础设施，供首页/分类页/
 * 文章页/搜索页等所有后续页面复用。
 *
 * 明确不放在这个文件里的东西：Header/Footer样式、Button/Tag/Badge/Card
 * 这类组件样式、News Card等业务卡片样式、Homepage具体模块样式、品牌Logo
 * 样式——那些各自在 kbg-ui3-layout.css / kbg-ui3-components.css / 未来的
 * 业务专属CSS文件里。
 *
 * 类名统一用 .kbg- 前缀（跟 kbg-ui3-components.css 里 .kbg-btn/.kbg-card
 * 等既有约定一致），不使用 .kbg-ui3-/.kbg3-/.ui3- 这几种其它前缀——文件名
 * 带 kbg-ui3- 只是为了区分"这是UI3.0阶段新写的文件"，跟CSS类名本身的命名
 * 空间是两回事，类名统一只用一个 .kbg- 前缀。
 *
 * 断点统一沿用已冻结体系：1800/1600/1400/1200/1199/991/767，不新增无理由
 * 断点。
 */

/* ---------- 容器 ---------- */
body.kbg-ui-preview .kbg-container {
    max-width: var(--kbg-container-max);
    margin: 0 auto;
    padding: 0 var(--kbg-space-6);
}
body.kbg-ui-preview .kbg-container-wide {
    max-width: var(--kbg-container-wide);
    margin: 0 auto;
    padding: 0 var(--kbg-space-6);
}
body.kbg-ui-preview .kbg-container-narrow {
    max-width: var(--kbg-container-narrow);
    margin: 0 auto;
    padding: 0 var(--kbg-space-6);
}

/* ---------- 主栏 + 侧栏布局 ---------- */
body.kbg-ui-preview .kbg-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--kbg-sidebar-width);
    gap: var(--kbg-space-6);
    align-items: start;
}
body.kbg-ui-preview .kbg-main-column {
    min-width: 0; /* 防止内部长内容把grid列撑宽 */
}
body.kbg-ui-preview .kbg-sidebar-column {
    min-width: 0;
}

/* ---------- 通用Grid（列数工具类） ---------- */
body.kbg-ui-preview .kbg-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kbg-space-6);
}
body.kbg-ui-preview .kbg-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kbg-space-6);
}
body.kbg-ui-preview .kbg-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--kbg-space-6);
}

/* ---------- 通用Flex工具 ---------- */
body.kbg-ui-preview .kbg-flex {
    display: flex;
}
body.kbg-ui-preview .kbg-flex-wrap {
    flex-wrap: wrap;
}
body.kbg-ui-preview .kbg-flex-center {
    align-items: center;
}

/* ---------- Gap工具（直接映射间距Token，不重新发明数字） ---------- */
body.kbg-ui-preview .kbg-gap-sm { gap: var(--kbg-space-3); }
body.kbg-ui-preview .kbg-gap-md { gap: var(--kbg-space-5); }
body.kbg-ui-preview .kbg-gap-lg { gap: var(--kbg-space-6); }

/* ---------- 响应式显示/隐藏工具 ---------- */
body.kbg-ui-preview .kbg-hide-mobile {
    display: none;
}
@media (min-width: 768px) {
    body.kbg-ui-preview .kbg-hide-mobile {
        display: revert;
    }
    body.kbg-ui-preview .kbg-hide-desktop {
        display: none;
    }
}

/* ============================================================
 * 响应式：主栏+侧栏布局
 * ============================================================ */
@media (max-width: 1199px) {
    /* 侧栏下移到主内容之后，改单列——跟阶段①-⑤已经验证过的门户骨架
       断点习惯一致 */
    body.kbg-ui-preview .kbg-content-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * 响应式：Grid列数阶梯递减（4→2→1，不是等比缩放）
 * ============================================================ */
@media (max-width: 991px) {
    body.kbg-ui-preview .kbg-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    body.kbg-ui-preview .kbg-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    body.kbg-ui-preview .kbg-grid-2,
    body.kbg-ui-preview .kbg-grid-3,
    body.kbg-ui-preview .kbg-grid-4 {
        grid-template-columns: 1fr;
    }
    body.kbg-ui-preview .kbg-container,
    body.kbg-ui-preview .kbg-container-wide,
    body.kbg-ui-preview .kbg-container-narrow {
        padding: 0 var(--kbg-space-4);
    }
}