@charset "utf-8";
/* ==========================================================================
   创业宝盒 · 手机端自适应层（< 768px）
   --------------------------------------------------------------------------
   解决小屏上的四类问题：
     1. 当前位置（面包屑）与标题不在同一基线、贴屏幕边、字色过淡；
     2. 容器左右留白被清零，白色卡片贴边、右侧 15px 被 overflow 裁掉；
     3. 字号层级混乱（详情标题 19/22/25px 三种、辅助文字 2.8:1 对比度）；
     4. 按钮尺寸与对齐不统一（12.5~16px 字号、30~44px 高度、文字不居中），
        分页在窄屏上换行后没有明确居中。
   作用域严格限制在 max-width 断点内，桌面端（>= 992px）与平板（768–991px）
   的既有表现不受影响；沿用 cyb-theme.css 的设计令牌，不引入新配色。
   加载顺序：pc-home.css 之后，作为前台样式表的最后一块。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 栅格留白
   common.css 在 <=768px 把 .main-content > .container 的左右内边距清零，
   但栅格 .row 仍是 -15px 负边距：整行落到 -15..390（375 视口），
   白色卡片于是贴住屏幕两侧，右侧多出的 15px 被 overflow-x:hidden 悄悄裁掉。
   把容器边距还回来，栅格负边距正好抵消，得到与桌面一致的 15px 留白。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body.cyb-ui .main-content > .container,
    body.cyb-ui #content-container {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* 容器已经给了 15px，栏目标题内再叠 15px 会变成双重缩进，收敛回桌面那一档 */
    body.cyb-ui .main-content > .container > .category-title,
    body.cyb-ui #content-container > .category-title {
        padding-left: 14px;
        padding-right: 0;
    }
}

@media (max-width: 767px) {

    /* ======================================================================
       1. 字号层级
       详情标题 21 / 栏目页头 20 / 正文 15.5 / 正文小标题 18·16.5 / 辅助 12.5
       ====================================================================== */

    /* 三种详情模板此前分别落在 19 / 22 / 25px，统一到一个值 */
    body.cyb-ui .article-content h1,
    body.cyb-ui .article-metas .metas-title,
    body.cyb-ui .article-content .media-heading,
    body.cyb-ui .metas-title {
        font-size: 21px;
        line-height: 1.42;
    }

    body.cyb-ui .page-hero-title {
        font-size: 20px;
    }

    body.cyb-ui .page-hero-desc {
        font-size: 13px;
        line-height: 1.7;
    }

    body.cyb-ui .page-hero-stat b {
        font-size: 18px;
    }

    body.cyb-ui .page-hero-stat span {
        font-size: 12px;
    }

    /* 正文：行距略放宽，长文在手机上更好读 */
    body.cyb-ui .article-text,
    body.cyb-ui .article-text p,
    body.cyb-ui .article-content > .panel-body > p {
        font-size: 15.5px;
        line-height: 1.85;
    }

    body.cyb-ui .article-text h2 {
        font-size: 18px;
    }

    body.cyb-ui .article-text h3 {
        font-size: 16.5px;
    }

    body.cyb-ui .article-text h4 {
        font-size: 15.5px;
    }

    /* 辅助文字加深一档：--cyb-muted-2(#a5948b) 在暖白底上只有约 2.8:1，
       手机上看着发虚；换成 --cyb-muted(#7c6b62) 后约 4.9:1，达到 AA。 */
    body.cyb-ui .breadcrumb,
    body.cyb-ui .breadcrumb > li,
    body.cyb-ui .breadcrumb > li + li::before,
    body.cyb-ui .article-metas .metas-body,
    body.cyb-ui .channel-list .row ul.inner-list li span {
        color: var(--cyb-muted);
    }

    /* ======================================================================
       2. 当前位置（面包屑）
       ====================================================================== */

    /* 与页头标题同一左基线、同一呼吸感 */
    body.cyb-ui .page-hero-crumb,
    body.cyb-ui .product-crumb {
        margin-bottom: 8px;
        font-size: 12.5px;
        line-height: 1.9;
    }

    body.cyb-ui .page-hero {
        margin-bottom: 16px;
    }

    body.cyb-ui .page-hero-row {
        gap: 10px;
    }

    /* 详情页卡片：面板头的左右内边距此前靠 -15px 负边距抵消容器内边距，
       容器留白恢复后改为与 .panel-body 同宽（16px），
       面包屑才能和下方正文、标题落在同一条左基线上 */
    body.cyb-ui .article-content > .panel-heading {
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    body.cyb-ui .article-content > .panel-heading > .breadcrumb {
        padding: 0;
        font-size: 12.5px;
        line-height: 1.9;
    }

    /* ======================================================================
       3. 按钮：文字上下居中 + 控件左右居中，点按区不小于 40px
       ====================================================================== */

    body.cyb-ui .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 14px;
        line-height: 1.3;
        text-align: center;
    }

    /* 「更多 / 加载更多」类：居中且好点 */
    body.cyb-ui .btn-loadmore {
        width: 100%;
        max-width: 320px;
        min-height: 42px;
    }

    /* 商品卡里的「立即购买」要与价格同行，只能小步放大；
       列表页的同一颗按钮此前是 12.5px，与首页的 13px 不一致，这里拉齐 */
    body.cyb-ui .shop-btn,
    body.cyb-ui .product-list .shop-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        min-height: 36px;
        padding: 0 13px;
        font-size: 13px;
        line-height: 1;
    }

    /* 表单里的主按钮：占满一行，拇指够得到 */
    body.cyb-ui form .btn-block-mobile,
    body.cyb-ui .login-form .btn,
    body.cyb-ui .user-form .btn {
        width: 100%;
    }

    /* ======================================================================
       4. 分页：整体居中，窄屏自动换行，点按区 >= 38px
       ====================================================================== */

    body.cyb-ui .pager {
        margin: 16px 0 4px;
    }

    body.cyb-ui .pager .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin: 0;
    }

    body.cyb-ui .pagination > li {
        margin: 0;
    }

    body.cyb-ui .pagination > li > a,
    body.cyb-ui .pagination > li > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 38px;
        padding: 0 10px;
        margin: 0;
        font-size: 14px;
        line-height: 1;
    }

    /* ======================================================================
       4.5 焦点图：按图片比例自适应
       ----------------------------------------------------------------------
       焦点图是 background-image，PC 上给 320px 固定高 + cover 铺满，
       横幅原图 1000×467（2.14:1），而手机主栏只有 380px 宽 → 容器比例 1.81，
       cover 只能按高度缩放，左右各裁掉约 35px（合计 16%），
       图上的文字/按钮贴边时会被切掉。
       改用百分比 padding 撑高度（1000:467），容器比例与图片一致、宽度跟随屏幕，
       整张图完整显示；含比例不匹配的图也只是留白，不会裁切。
       ====================================================================== */
    body.cyb-ui .carousel-focus .item .carousel-img,
    body.cyb-ui #index-focus .item .carousel-img,
    body.cyb-ui #channel-focus .item .carousel-img {
        height: 0;
        padding-bottom: 46.7%;
        background-size: contain;
    }

    /* ======================================================================
       5. 间距与收尾
       ====================================================================== */

    /* 卡片之间的垂直间隔统一，避免有的 20px、有的 14px */
    body.cyb-ui .main-content .panel {
        margin-bottom: 14px;
    }

    body.cyb-ui aside > .panel:last-child {
        margin-bottom: 0;
    }

    /* 页脚：容器已有 15px 边距，这里只收敛纵向留白与列表缩进 */
    body.cyb-ui .footer-inner {
        padding: 26px 0 22px;
    }

    body.cyb-ui .footer-inner .list-inline {
        margin-left: 0;
    }

    /* ======================================================================
       6. 商品卡：让「价格 + 立即购买」稳定落在同一行
       ----------------------------------------------------------------------
       双列时每张卡只有 155~157px，卡片内可用宽度约 129px，而
       「￥199.00」+「立即购买」在 15/13px 下需要 134px —— 差几个像素就会折行，
       于是价格和按钮被拆成上下两行。这里从三处各挤出一点宽度：
         · 网格间距 16 → 12（每张卡多 2px）
         · 卡内左右内边距 12 → 10（多 4px）
         · 按钮左右内边距 13 → 9、字号 13 → 12.5（少 8px 需求）
       并把 .shop-foot 设为 nowrap：宽度够时一定同行，也避免 space-between
       在换行后把按钮甩到最右侧。列表页最高价为「￥199.00」（各商品最低规格价），
       按此预算实测留有富余；更长的价格由 .shop-price 的 overflow 兜底裁切，
       不会撑破卡片。
       ====================================================================== */
    body.cyb-ui .product-list {
        gap: 12px;
    }

    body.cyb-ui .shop-body {
        padding: 10px 10px 12px;
    }

    body.cyb-ui .shop-foot {
        flex-wrap: nowrap;
        gap: 6px;
    }

    body.cyb-ui .shop-price {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    body.cyb-ui .product-list .shop-price .price-now,
    body.cyb-ui .shop-price .price-now {
        font-size: 15px;
        white-space: nowrap;
    }

    body.cyb-ui .product-list .shop-price .price-from {
        font-size: 12px;
    }

    body.cyb-ui .product-list .shop-btn,
    body.cyb-ui .shop-card .shop-btn {
        flex: 0 0 auto;
        height: 32px;
        min-height: 32px;
        padding: 0 9px;
        font-size: 12.5px;
        white-space: nowrap;
    }

    /* ======================================================================
       7. 内容页：卡片与正文的内边距收敛
       ----------------------------------------------------------------------
       主体内容的留白此前偏厚：面板内左右各 16px，加上容器 15px，
       正文离屏幕边缘还有 31px，卡内可用宽度被吃掉一成。
       这里把面板头与面板体的内边距统一收到 12px 14px。
       ====================================================================== */
    body.cyb-ui .panel-default > .panel-heading {
        padding: 13px 14px;
    }

    body.cyb-ui .panel-default > .panel-body {
        padding: 12px 14px;
    }

    body.cyb-ui .panel-default > .panel-body.p-0 .article-item {
        padding-left: 14px;
        padding-right: 14px;
    }

    body.cyb-ui .panel-filter > .panel-body {
        padding: 12px 14px 6px;
    }

    body.cyb-ui .panel-result > .panel-body {
        padding: 12px 14px;
    }
}

/* ==========================================================================
   8. 手机端底部导航（tabbar）
   --------------------------------------------------------------------------
   5 项：首页 / 源码 / 服务 / 联系 / 我的。
   仅 <=768px 显示（PC 与平板保持原样）；固定贴底并用 env(safe-area-inset-bottom)
   让 iPhone 的小黑条区域不压住图标。
   占用约 56px 高度，所以给 body 补上等高 padding-bottom，正文与页脚不会被遮挡；
   同时把右下角的浮动按钮（返回顶部 / 分享 / 投稿）整体抬高到导航之上，两者不重叠。
   ========================================================================== */

/* 默认（>=769px）不渲染，桌面端零影响 */
.cyb-tabbar,
.cyb-tabbar-spacer {
    display: none;
}

@media (max-width: 768px) {

    /* 底部让位：本项目 body 是 height:100% + border-box，给它加 padding-bottom
       不会撑高文档（实测 docHeight 不变），页脚最后 56px 仍会被导航盖住。
       改成在页脚之后放一个等高占位块，让文档真长高一截。 */
    body.cyb-ui .cyb-tabbar-spacer {
        display: block;
        /* body 是 flex column + 固定高度，作为 flex 子项必须禁止收缩，
           否则空 div 会被压成 0 高、占位失效 */
        flex: 0 0 auto;
        width: 100%;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    body.cyb-ui .cyb-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-top: 1px solid var(--cyb-line);
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 -2px 14px rgba(74, 38, 20, .07);
    }

    body.cyb-ui .cyb-tabbar-item {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 56px;
        color: var(--cyb-muted);
        font-size: 11px;
        line-height: 1;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .18s var(--cyb-ease);
    }

    body.cyb-ui .cyb-tabbar-item i {
        font-size: 19px;
        line-height: 1;
        transition: transform .18s var(--cyb-ease);
    }

    body.cyb-ui .cyb-tabbar-item span {
        font-size: 11px;
        letter-spacing: .2px;
    }

    body.cyb-ui .cyb-tabbar-item.active {
        color: var(--cyb-brand);
    }

    body.cyb-ui .cyb-tabbar-item.active i {
        transform: translateY(-1px);
    }

    /* 浮动按钮整体抬高一个导航高度，保持右下角不打架 */
    body.cyb-ui #floatbtn {
        bottom: calc(18px + 56px + env(safe-area-inset-bottom, 0px));
    }
}