/* ══════════════════════════════════════════════════════════════
   detail-layout.css — 全站详情页公共布局模板
   适用：news-detail / services-*-detail / training-*-detail / qualification-detail
   
   布局结构：
   body(flex column) → header + nav(flex-shrink:0) 
     → main.detail-page(flex:1) → container → breadcrumb(flex-shrink:0)
       → .detail-layout(grid 双栏)
         → .detail-main(flex column) → article → header + content(scroll) + nav
         → aside.detail-sidebar(sticky)
     → footer(flex-shrink:0)
   
   使用方式：每个详情页只需 <link> 此文件，无需内联布局 CSS
   版本：v20260807-template
   ══════════════════════════════════════════════════════════════ */

/* ── 全屏 Flex 列布局（footer 钉底） ── */
html { height: 100%; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.site-header { flex-shrink: 0; }
.main-nav     { flex-shrink: 0; }

/* ── 主内容区：占据 header/footer 之间的全部空间 ── */
.detail-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.detail-page > .container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── 面包屑：固定不滚动 ── */
.detail-breadcrumb { flex-shrink: 0; }

/* ── 双栏 Grid 布局 ── */
.detail-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 36px;
    align-items: start;
}

/* ── 左栏：纵向 flex（header 固定 + 内容滚动 + nav 固定） ── */
.detail-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.detail-article {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* 文章头部：分类/标题/日期 — 固定不滚 */
.detail-article > header {
    flex-shrink: 0;
    padding: 28px 0 20px;
    border-bottom: 1px solid var(--line, #d9e3ec);
    margin-bottom: 24px;
}

/* 正文区：唯一可滚动区域 */
.detail-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--line, #d9e3ec) transparent;
    padding-bottom: 28px;
}
.detail-content::-webkit-scrollbar { width: 5px; }
.detail-content::-webkit-scrollbar-track { background: transparent; }
.detail-content::-webkit-scrollbar-thumb {
    background: var(--line, #d9e3ec);
    border-radius: 3px;
}
.detail-content::-webkit-scrollbar-thumb:hover {
    background: var(--ink-500, #718096);
}

/* 底部导航：固定不滚 */
.detail-pagination { flex-shrink: 0; }

/* ── 右侧栏：sticky 钉住 ── */
.detail-sidebar {
    position: sticky;
    top: 90px;
}

.site-footer { flex-shrink: 0; }

/* ═══ 移动端：全部还原为自然流单栏 ═══ */
@media (max-width: 820px) {
    html, body {
        height: auto;
        min-height: auto;
        display: block;
    }
    .site-header, .main-nav, .site-footer { flex-shrink: initial; }
    .detail-page {
        display: block;
        min-height: auto;
    }
    .detail-page > .container {
        display: block;
    }
    .detail-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .detail-main {
        display: block;
        overflow: visible;
    }
    .detail-article {
        display: block;
        overflow: visible;
    }
    .detail-content {
        overflow: visible;
    }
    .detail-sidebar {
        margin-top: 32px;
    }
    /* 兼容旧类名 */
    .news-detail-page,
    .qualification-detail-page {
        display: block !important;
        min-height: auto !important;
    }
    .news-detail-page > .container,
    .qualification-detail-page > .container {
        display: block !important;
    }
    .news-detail-layout,
    .qual-detail-layout {
        display: block !important;
    }
    .news-detail-main,
    .qual-detail-main,
    .news-detail-article,
    .qual-detail-article {
        display: block !important;
        overflow: visible !important;
    }
    .news-detail-content,
    .qual-detail-content {
        overflow: visible !important;
    }
    .news-detail-sidebar,
    .qual-detail-sidebar {
        position: static !important;
        margin-top: 32px;
    }
}

/* ═══ 兼容别名（旧页面的类名映射到新类名） ═══ */
.news-detail-page,
.qualification-detail-page { /* ← 映射到 .detail-page */ }
.news-detail-layout,
.qual-detail-layout { /* ← 映射到 .detail-layout */ }
.news-detail-main,
.qual-detail-main { /* ← 映射到 .detail-main */ }
.news-detail-article,
.qual-detail-article { /* ← 映射到 .detail-article */ }
.news-detail-content,
.qual-detail-content { /* ← 映射到 .detail-content */ }
.news-detail-pagination,
.qual-detail-pagination { /* ← 映射到 .detail-pagination */ }
.news-detail-sidebar,
.qual-detail-sidebar { /* ← 映射到 .detail-sidebar */ }
.news-detail-breadcrumb,
.qual-breadcrumb { /* ← 映射到 .detail-breadcrumb */ }

/* ═══ 箭头导航（services/training 详情页：← 上一篇 | ↑ 返回列表 | → 下一篇） ═══ */
.detail-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    margin-top: 32px;
    border-top: 1px solid var(--gray-200, #e2e8f0);
}
.detail-nav a {
    font-size: 14px;
    color: var(--primary-600, #0066cc);
    text-decoration: none;
    line-height: 1.5;
}
.detail-nav a:hover {
    color: var(--primary-700, #0052a3);
    text-decoration: underline;
}
.detail-nav-prev {
    flex: 1;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
.detail-nav-next {
    flex: 1;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
.detail-nav-center {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    padding: 9px 22px;
    border: 1px solid var(--blue-200, #b3d8f7);
    border-radius: 999px;
    background: #fff;
    color: var(--blue-700, #0b466e);
    box-shadow: 0 2px 10px rgba(11, 70, 110, 0.05);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.detail-nav-center:hover {
    background: var(--blue-50, #eff8ff);
    border-color: var(--blue-200, #b3d8f7);
    color: var(--blue-700, #0b466e);
    text-decoration: none;
    transform: translateY(-1px);
}
/* 单文章时仅显示"返回列表"，居中 */
.detail-nav-only {
    justify-content: center;
    margin: 0 auto;
}