/**
 * KBG UI 3.0 —— 响应式（阶段一：Header/Footer/容器，PC/Laptop/Tablet/Mobile
 * 四档各自独立设计，不是等比缩放）。
 *
 * 断点跟 kbg-ui3-tokens.css 文末记录的一致：
 *   PC     >=1600px
 *   Laptop 1200px~1599px
 *   Tablet 768px~1199px（导航折叠临界点992px，父主题原生行为，这里不碰）
 *   Mobile <=767px
 */

/* ---------- PC（>=1600px） ---------- */
@media (min-width: 1600px) {
    body.kbg-ui-preview header.header .navbar {
        min-height: 68px;
    }
    body.kbg-ui-preview header.header .logo a img {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }
    body.kbg-ui-preview header.header .kbg-brand-name {
        font-size: 21px;
    }
}

/* ---------- Laptop（1200px~1599px） ---------- */
@media (min-width: 1200px) and (max-width: 1599px) {
    body.kbg-ui-preview header.header .navbar {
        min-height: 64px;
    }
    body.kbg-ui-preview header.header .logo a img {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    body.kbg-ui-preview header.header .kbg-brand-name {
        font-size: 19px;
    }
}

/* ---------- Tablet（768px~1199px） ----------
 * 导航折叠临界点是父主题原生的992px，这里的768~1199是本项目一直沿用的
 * "布局密度"断点（跟阶段1/2A保持一致的既有约定），两者服务不同的规则，
 * 不冲突。 */
@media (min-width: 768px) and (max-width: 1199px) {
    body.kbg-ui-preview header.header .navbar {
        min-height: 60px;
    }
    body.kbg-ui-preview header.header .logo a img {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    body.kbg-ui-preview header.header .kbg-brand-name {
        font-size: 17px;
    }
    body.kbg-ui-preview .container {
        padding-left: var(--kbg-space-5);
        padding-right: var(--kbg-space-5);
    }
    body.kbg-ui-preview .footer-col-wrap {
        gap: var(--kbg-space-4);
    }
    body.kbg-ui-preview .kbg-footer-identity {
        font-size: 11px;
        gap: var(--kbg-space-3);
    }
}

/* ---------- Mobile（<=767px） ----------
 * 明确不做的事：不碰 .navbar-collapse/.navbar-toggle 原生折叠逻辑、不改
 * --logo-height-mobile（父主题自己的变量）、不强制展开菜单——完全延续
 * 父主题原生手机导航行为，只调视觉。 */
@media (max-width: 767px) {
    /* overflow-x:hidden 横向溢出兜底已经在 mobile.css（阶段1）里定义过，
       这里不重复写——同一条规则不需要在两个文件里各写一遍。 */
    body.kbg-ui-preview header.header .navbar {
        min-height: 56px;
    }
    body.kbg-ui-preview header.header .logo a img {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    body.kbg-ui-preview header.header .kbg-brand-name {
        font-size: 15px;
    }
    body.kbg-ui-preview .container {
        padding-left: var(--kbg-space-4);
        padding-right: var(--kbg-space-4);
    }

    /* Footer：纵向排列 */
    body.kbg-ui-preview .footer-col-wrap {
        flex-direction: column;
        gap: var(--kbg-space-3);
        text-align: center;
    }
    body.kbg-ui-preview .footer-col-logo {
        margin-right: 0;
    }
    body.kbg-ui-preview .kbg-footer-identity {
        flex-direction: column;
        gap: var(--kbg-space-1);
        align-items: center;
        font-size: 11px;
    }
    body.kbg-ui-preview .kbg-footer-identity span[aria-hidden] {
        display: none;
    }
}