/* ============================================================
   博客前台移动端响应式样式（断点 ≤768px 启用，PC 端完全不受影响）
   设计规范：
   - 主色 #2B6DE8（延续 PC 端），置顶徽标红 #E34D59
   - 页面边距 12px，卡片圆角 12px，标题 16px / 摘要 13px
   - 顶栏 52px 吸顶（毛玻璃），Hero 压缩到 168px，底部 TabBar
   结构：PC 三栏 → 移动端「抽屉 + 单列流 + TabBar」
   ============================================================ */

:root {
    --m-primary: #2B6DE8;
    --m-primary-weak: rgba(43, 109, 232, 0.08);
    --m-pinned: #E34D59;
    --m-tabbar-h: 56px;
}

/* ---- 移动端专属组件在 PC 端一律不显示 ---- */
.m-topbar, #m-drawer, #m-overlay, .m-tabbar, .m-toolbar,
.article-card .pin-badge, .article-card .card-date { display: none; }

@media (min-width: 769px) {
    .m-topbar, #m-drawer, #m-overlay, .m-tabbar, .m-toolbar,
    .article-card .pin-badge, .article-card .card-date { display: none !important; }
}

/* ============ ≤768px：移动端布局 ============ */
@media (max-width: 768px) {

    /* ---- 布局改造：h-screen 固定三栏 → 单列文档流 + sticky footer ----
       body 作为 flex 列容器（border-box，min-height 含顶部导航与 TabBar 预留）：
       内容少时 #blog-scroll 撑满剩余空间，footer 始终贴底（TabBar 正上方）；
       内容多时 footer 随内容自然滚动，不会遮挡任何内容。 */
    body {
        display: flex; flex-direction: column;
        box-sizing: border-box;
        min-height: 100vh;
        padding-bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom, 0px));
    }
    #blog-layout {
        flex: 1 0 auto;
        display: flex; flex-direction: column;
        height: auto; min-height: 0; overflow: visible;
    }
    #blog-main {
        display: flex; flex-direction: column;
        flex: 1 0 auto; overflow: visible; min-width: 0;
    }
    #blog-scroll { overflow: visible; height: auto; flex: 1 0 auto; }
    .pc-side, .pc-right { display: none !important; }
    body.m-locked { overflow: hidden; }

    /* ---- 顶部 52px 吸顶导航（毛玻璃）---- */
    .m-topbar {
        display: flex; align-items: center; gap: 4px;
        position: sticky; top: 0; z-index: 40;
        height: 52px; padding: 0 8px;
        background: rgba(255, 255, 255, 0.82);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid rgba(17, 24, 39, 0.06);
    }
    .m-icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 10px;
        color: #1f2937; background: transparent; border: none; cursor: pointer;
    }
    .m-icon-btn:active { background: rgba(0, 0, 0, 0.05); }
    .m-brand {
        display: inline-flex; align-items: center; gap: 7px;
        margin: 0 auto; font-size: 16px; font-weight: 700;
        color: #111827; text-decoration: none;
    }
    .m-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-primary); }

    /* ---- 左侧导航抽屉 ---- */
    #m-overlay {
        display: block; position: fixed; inset: 0; z-index: 60;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
    }
    #m-overlay.m-open { opacity: 1; pointer-events: auto; }
    #m-drawer {
        display: flex; flex-direction: column;
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 61;
        width: min(78%, 320px);
        background: #fff; border-radius: 0 16px 16px 0;
        transform: translateX(-105%); transition: transform 0.28s ease;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        overflow-y: auto;
    }
    #m-drawer.m-open { transform: translateX(0); }
    .m-drawer-head { padding: 22px 20px 12px; }
    .m-drawer-title { font-size: 20px; font-weight: 700; color: #111827; }
    .m-drawer-sub {
        margin-top: 6px; font-size: 12px; color: #9ca3af; line-height: 1.6;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .m-drawer-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 12px; }
    /* 分组标题：区分「站内导航」与「友情链接」 */
    .m-nav-group {
        margin: 14px 2px 4px; padding: 0 14px;
        font-size: 11px; font-weight: 600; color: #9ca3af;
        letter-spacing: .08em;
    }
    .m-drawer-item {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px; border-radius: 12px; border: none; background: transparent;
        font-size: 15px; color: #374151; text-decoration: none;
        cursor: pointer; text-align: left; width: 100%;
    }
    .m-drawer-item.active { background: var(--m-primary-weak); color: var(--m-primary); font-weight: 600; }
    .m-drawer-emoji { font-size: 17px; width: 22px; text-align: center; }
    .m-drawer-user {
        margin-top: auto; padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #f3f4f6; font-size: 13px; color: #374151;
        display: flex; align-items: center; justify-content: space-between;
    }
    .m-drawer-user button {
        border: none; background: transparent; color: #9ca3af;
        font-size: 12px; cursor: pointer;
    }

    /* ---- 底部 TabBar（首页 / 分类 / 归档）---- */
    .m-tabbar {
        display: grid; grid-template-columns: repeat(3, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid rgba(17, 24, 39, 0.06);
    }
    .m-tab {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        height: var(--m-tabbar-h); border: none; background: transparent;
        font-size: 11px; color: #6b7280; text-decoration: none; cursor: pointer;
    }
    .m-tab svg { width: 22px; height: 22px; }
    .m-tab.active { color: var(--m-primary); font-weight: 600; }

    /* ---- 搜索框 + 热门标签横滑条 ---- */
    .m-toolbar { display: flex; flex-direction: column; gap: 12px; margin: 12px; }
    .m-search { position: relative; }
    .m-search svg {
        position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
        width: 16px; height: 16px; color: #9ca3af; pointer-events: none;
    }
    .m-search input {
        width: 100%; height: 40px; padding: 0 16px 0 38px;
        border: 1px solid #e5e7eb; border-radius: 999px; background: #fff;
        font-size: 14px; color: #111827; outline: none;
    }
    .m-search input:focus {
        border-color: var(--m-primary);
        box-shadow: 0 0 0 3px rgba(43, 109, 232, 0.12);
    }
    .m-tags {
        display: flex; gap: 8px; overflow-x: auto;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
    }
    .m-tags::-webkit-scrollbar { display: none; }
    .m-tag {
        flex-shrink: 0; padding: 6px 14px; border-radius: 999px;
        background: #fff; border: 1px solid #e5e7eb;
        font-size: 13px; color: #4b5563; text-decoration: none; white-space: nowrap;
    }
    .m-tag.active {
        background: var(--m-primary); border-color: var(--m-primary);
        color: #fff; font-weight: 500;
    }

    /* ---- 页面边距 12px ---- */
    #blog-main .px-6 { padding-left: 12px; padding-right: 12px; }
    #blog-main .px-6.pt-6 { padding-top: 12px; }

    /* ---- Hero 横幅压缩到 168px，文案左下角排布 ---- */
    section.banner-box { height: 168px !important; border-radius: 12px; }
    .banner-center {
        align-items: flex-end !important; justify-content: flex-start !important;
        padding: 0 16px 54px !important;
    }
    .banner-center .max-w-4xl { text-align: left !important; }
    .banner-center p { font-size: 12px !important; }
    .banner-center #banner-cursor { height: 14px !important; }
    #banner-author, #banner-deco { display: none !important; }
    .banner-titlebar { bottom: 14px !important; left: 16px !important; right: 16px !important; }
    .banner-titlebar h1, .banner-titlebar p { font-size: 20px !important; }

    /* ---- 文章卡片：单列流（标题/摘要 2 行截断，阅读按钮固定右侧）---- */
    .article-card { border-radius: 12px !important; padding: 14px !important; }
    .article-card h2 {
        font-size: 16px;
        -webkit-line-clamp: 2 !important;
    }
    .article-card h2 .pin-prefix { display: none; }
    .article-card .pin-star { display: none; }
    .article-card .pin-badge {
        display: inline-flex; align-items: center; flex-shrink: 0;
        margin-top: 2px; padding: 1px 7px; border-radius: 6px;
        background: var(--m-pinned); color: #fff;
        font-size: 11px; font-weight: 600; line-height: 18px;
    }
    .article-card h2.text-red-600 { color: var(--m-pinned) !important; }
    .article-card p.line-clamp-3 {
        font-size: 13px;
        -webkit-line-clamp: 2 !important;
    }
    .article-card .card-date { display: inline-flex; align-items: center; gap: 3px; }
    .article-card a.bg-blue-600 {
        background: var(--m-primary) !important;
        border-radius: 8px; padding: 5px 16px;
    }

    /* ---- 分页：显示 回到首页 + 页码 + 上一页/下一页/末页，仅隐藏统计文案 ---- */
    nav[aria-label="分页导航"] .pager-total { display: none; }
    nav[aria-label="分页导航"] { gap: 8px; flex-wrap: wrap; }
    /* 「首页」按钮文字两字，放宽为胶囊形避免挤在 40px 方块里（禁用态为 span 同样生效） */
    nav[aria-label="分页导航"] > :first-child {
        width: auto; padding: 0 14px; flex-shrink: 0;
    }

    /* ---- 页脚：移动端与 PC 结构完全一致 ----
       relative 既参与文档流（sticky footer 贴底仍有效），又可作为飞鱼容器
       （absolute inset 0）的定位基准；固定 60px = 上 28px 文字 + 下 32px 海水 */
    .blog-footer {
        position: relative !important; width: 100% !important; height: 60px !important;
    }
    .blog-footer .footer-inner { height: 28px !important; padding: 0; }

    /* ---- 返回顶部：避开 TabBar ---- */
    #back-to-top {
        right: 16px !important;
        bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    }

    /* ---- AI 问答浮窗：避开 TabBar ---- */
    #ai-widget-root {
        right: 14px !important;
        bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px) !important;
    }
    #ai-widget-panel {
        right: 14px !important;
        bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom, 0px) + 70px) !important;
        width: calc(100vw - 28px) !important; max-width: 380px;
    }

    /* ---- 文章详情页：返回/面包屑/元信息不折行 ---- */
    #blog-main .flex.items-center.justify-between > a:first-child {
        flex-shrink: 0; white-space: nowrap;
    }
    #blog-main article header > div { flex-wrap: wrap; row-gap: 4px; }
    #blog-main article header span { white-space: nowrap; }

    /* 面包屑里的文章标题窄屏下隐藏（正文正下方即标题），避免占多行 */
    .breadcrumb-sep, .breadcrumb-title { display: none; }
}