/**
 * KBG UI 2.0 —— 首页专属样式（重写版，阶段①：静态Banner + 最新快讯）
 *
 * 跟 desktop.css/tablet.css/mobile.css 里的"全站基础视觉"（导航/Footer/
 * 容器宽度）分开管理——这个文件只负责首页独立模板
 * （template-parts/homepage-template.php）输出的门户结构，PC/Laptop/iPad/
 * 手机四个断点各自独立成段，不是简单缩放关系。
 *
 * 全部选择器以 body.kbg-ui-preview.home 开头：.home 这个body class真实curl
 * 核对过只出现在首页（分类页是"archive category..."，文章页是
 * "wp-singular single..."），独立首页模板本身也只在首页生效，双重限定。
 *
 * 宽度参数沿用上一轮已经验证过、算式对得上的数字（page-shell 1800 /
 * portal-center 1320 / 广告rail 140），不重新发明新数字。
 */

/* ============================================================
 * 通用（不分断点）：页面背景 + 门户骨架基础结构
 * ============================================================ */
body.kbg-ui-preview.home {
    background-color: #f3f6fb;
}

body.kbg-ui-preview.home .kbg-page-shell {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 1800px;
    margin: 20px auto;
    padding: 0 24px;
}

/* 广告rail：只有 kbg_ui2_ad_rail_left/right 这两个filter真的返回内容时，
   PHP才会输出这个div——当前两个filter都返回空字符串，所以这个选择器现在
   完全没有对应DOM，这里的CSS是给"以后接入真实广告"预留的展示规则，不是
   给一个空占位框做样式。 */
body.kbg-ui-preview.home .kbg-ad-rail {
    display: none;
    flex: 0 0 140px;
    width: 140px;
    align-self: stretch;
    position: sticky;
    top: 90px;
}
@media (min-width: 1800px) {
    body.kbg-ui-preview.home .kbg-ad-rail {
        display: block;
    }
}

body.kbg-ui-preview.home .kbg-portal-center {
    flex: 0 1 1320px;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    min-width: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
    /* 这个宽度区间广告rail本来就不显示（上面规则要求>=1800才显示），
       门户中心区不用再锁1320px上限，占满可用宽度即可 */
    body.kbg-ui-preview.home .kbg-portal-center {
        flex: 1 1 auto;
        max-width: none;
        margin: 0;
    }
}

/* ---- Banner：单张静态图，不轮播，不裁切，不写死高度 ---- */
body.kbg-ui-preview.home .kbg-banner {
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
}
body.kbg-ui-preview.home .kbg-banner img {
    display: block;
    width: 100%;
    height: auto; /* 高度完全由图片真实比例决定，不设aspect-ratio，不用object-fit */
}

/* ---- 最新快讯条 ---- */
body.kbg-ui-preview.home .kbg-ticker {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 46px;
    background: #ffffff;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    padding: 10px 18px;
    margin: 18px 0;
    box-shadow: 0 2px 12px rgba(18, 58, 112, .08);
}
body.kbg-ui-preview.home .kbg-ticker-label {
    flex-shrink: 0;
    background: #123a70;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
}
body.kbg-ui-preview.home .kbg-ticker-track {
    display: flex;
    gap: 28px;
    overflow: hidden;
    white-space: nowrap;
}
body.kbg-ui-preview.home .kbg-ticker-item {
    color: #1a2333;
    font-size: 14px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .25s ease;
}
body.kbg-ui-preview.home .kbg-ticker-item:hover {
    color: #2f7dff;
}

/* ============================================================
 * PC（>=1600px）
 * ============================================================ */
@media (min-width: 1600px) {
    body.kbg-ui-preview.home .kbg-page-shell {
        margin: 20px auto;
    }
}

/* ============================================================
 * Laptop（1200px~1599px）
 * ============================================================ */
@media (min-width: 1200px) and (max-width: 1599px) {
    body.kbg-ui-preview.home .kbg-page-shell {
        margin: 20px auto;
    }
}

/* ============================================================
 * iPad（768px~1199px）
 * ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
    body.kbg-ui-preview.home .kbg-page-shell {
        padding: 0 20px;
        margin: 18px auto;
    }
    body.kbg-ui-preview.home .kbg-ticker-track {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
 * 手机（<=767px）
 * ============================================================ */
@media (max-width: 767px) {
    body.kbg-ui-preview.home .kbg-page-shell {
        padding: 0 16px;
        margin: 14px auto;
        gap: 16px;
    }
    body.kbg-ui-preview.home .kbg-banner {
        border-radius: 10px;
    }
    body.kbg-ui-preview.home .kbg-ticker {
        padding: 8px 12px;
        gap: 10px;
        margin: 14px 0;
    }
    body.kbg-ui-preview.home .kbg-ticker-track {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
    }
    body.kbg-ui-preview.home .kbg-ticker-item {
        flex-shrink: 0;
        max-width: 70vw;
    }
}