/* ============================
   列表与卡片
   ============================ */

.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-16); }
.posts-list { display: flex; flex-direction: column; gap: var(--space-6); }

.post-card { background: var(--card-color); border: 1px solid var(--border-color); border-radius: var(--radius-xl); overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: var(--cursor-pointer); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.04), 0 1px 10px rgba(0, 0, 0, 0.06); position: relative; }
.post-card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08); border-color: var(--primary-400); }

/* 整卡点击交互增强 */
.post-card { cursor: var(--cursor-pointer); }
.post-card:focus-within, .post-card:focus { outline: 2px dotted var(--primary-400); outline-offset: 2px; }

.post-noimage { width: 100%; height: 60px; position:relative;overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

.post-image { width: 100%; height: 200px; background: linear-gradient(45deg, var(--primary-100), var(--primary-200)); position: relative; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.post-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.post-card:hover .post-img { transform: scale(1.03); }

.post-category { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--primary-500); color: white; padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 500; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 2; margin-bottom: var(--space-2); }

.post-homepage { color:var(--text-primary); font-size: var(--font-size-base); font-weight: 500; text-decoration: underline; transition: color 0.3s ease; }
.post-homepage:hover { color: var(--primary-600); text-decoration: underline; }
.post-content {padding: var(--space-2) var(--space-4); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.post-title { font-size: var(--font-size-xl); font-weight: 600; color: var(--text-primary); margin: var(--space-2) 0 var(--space-2) 0 !important; line-height: 1; transition: color 0.3s ease; }
.post-card:hover .post-title { color: var(--primary-600); }
.post-excerpt { color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-1); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; line-clamp: 3; }

.post-meta { margin-top: var(--space-2); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); }
.post-meta .meta-item {
  display: flex;
  align-items: center;
}
.post-author { display: flex; align-items: center; gap: var(--space-2); }
.author-avatar { width: 24px; height: 24px; border-radius: 50%; }

.post-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-1); }
.post-tag { background: var(--primary-50); color: var(--primary-700); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; transition: background-color 0.3s ease; }
.post-card:hover .post-tag { background: var(--primary-100); }
.dark-theme .post-tag { background: rgba(236, 72, 153, 0.2); color: var(--primary-300); }

/* 条件分隔线：仅当存在标签链接时显示 */
.post-card .post-tags { border-top: none; padding-top: 0; margin-top: 0; }
.post-card .post-tags:has(a) { border-top: 1px solid var(--border-color); padding-top: var(--space-1); margin-top: var(--space-3); }

.tags-label { display:flex; align-items: center;}

/* 文章、页面详情通用 */
.post-detail, .page-detail { background: var(--card-color); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-8); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.04), 0 1px 10px rgba(0, 0, 0, 0.06); will-change: box-shadow;}
.post-header, .page-header { margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--border-color); }
.post-detail .post-title, .page-title { font-size: var(--font-size-3xl); font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: var(--space-6); }

.post-detail:hover {
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-400);
}
/* 文章内容元素 */
.post-content, .page-content { line-height: 1.8; color: var(--text-primary); font-size: var(--font-size-base); }
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6,
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 { margin: var(--space-6) 0 var(--space-2) 0; color: var(--text-primary); font-weight: 600; }
.post-content h1, .page-content h1 { font-size: var(--font-size-3xl); }
.post-content h2, .page-content h2 { font-size: var(--font-size-2xl); }
.post-content h3, .page-content h3 { font-size: var(--font-size-xl); }
.post-content p, .page-content p { margin-bottom: var(--space-4); }
.post-content img, .page-content img { max-width: min(100%, 860px); height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: block; margin-left: auto; margin-right: auto; }

/* 图片外层为 figure 的场景 */
.post-content figure, .page-content figure { margin: var(--space-6) auto; text-align: center; max-width: min(100%, 860px); }
.post-content figure img, .page-content figure img { display: inline-block; margin: 0 auto; }

/* 图片被链接包裹时，保证整体也能水平居中（现代浏览器支持 :has） */
.post-content a:has(> img), .page-content a:has(> img) { display: block; width: fit-content; max-width: min(100%, 860px); margin-left: auto; margin-right: auto; }
.post-content blockquote, .page-content blockquote { border-left: 4px solid var(--primary-500); background: var(--surface-color); margin: var(--space-6) 0;padding: var(--space-2) var(--space-4); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; color: var(--text-primary); }
.post-content code, .page-content code { background: var(--surface-color); border-radius: var(--radius-sm); font-family: 'Monaco', 'Consolas', monospace; font-size: 0.9em; color: var(--primary-500); padding: 2px 6px; word-wrap:break-word; }
[data-theme="dark"]
.post-content code, .page-content code {color: var(--primary-300);}
.post-content pre, .page-content pre { background: var(--surface-color); border-radius: var(--radius-lg); overflow-x: auto; margin: var(--space-6) 0; border: 3px dashed var(--border-color); }
.post-content pre code, .page-content pre code { background: none; padding: 0; color: var(--primary-50); }
.post-content ul, .post-content ol, .page-content ul, .page-content ol { margin: var(--space-4) 0; padding-left: var(--space-6); }
.post-content li, .page-content li { margin-bottom: var(--space-2); }

/* ============================
  Markdown 表格
  ============================ */
.post-content .table-scroll-wrap,
.page-content .table-scroll-wrap { position: relative; margin: var(--space-6) 0; }

/* 实际表格滚动容器（隐藏原生顶部滚动条，默认底部会有系统滚动条） */
.post-content .table-scroll,
.page-content .table-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-color); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--card-color); box-shadow: var(--shadow-xs); /* 隐藏顶部滚动条，只保留底部 */ scrollbar-width: none; -ms-overflow-style: none; }

/* 隐藏顶部滚动容器的 WebKit 滚动条 */
.post-content .table-scroll::-webkit-scrollbar,
.page-content .table-scroll::-webkit-scrollbar { display: none; height: 0; }

/* 底部同步滚动条容器 */
.post-content .table-bottom-scroll,
.page-content .table-bottom-scroll { overflow-x: scroll; overflow-y: hidden; border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--card-color); height: 16px; /* 为可点击的滚动条预留高度 */ scrollbar-gutter: stable; }

/* 为底部滚动条制造可滚动宽度的占位元素 */
.post-content .table-bottom-scroll-content,
.page-content .table-bottom-scroll-content { height: 1px; }

/* 表格基础样式 */
.post-content table,
.page-content table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95em; }

/* 在滚动容器中让表格根据内容扩展宽度，从而在窄屏出现横向滚动 */
.post-content .table-scroll table,
.page-content .table-scroll table { width: max-content; min-width: 100%; }

.post-content table thead th,
.page-content table thead th { text-align: left; font-weight: 600; color: var(--text-primary); background: var(--surface-color); }

/* 单元格边框与内边距 */
.post-content table th,
.post-content table td,
.page-content table th,
.page-content table td { padding: 10px 14px; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); vertical-align: middle; }

.post-content table th:last-child,
.post-content table td:last-child,
.page-content table th:last-child,
.page-content table td:last-child { border-right: none; }

/* 圆角：仅在最外层容器时可见 */
.post-content table thead th:first-child,
.page-content table thead th:first-child { border-top-left-radius: var(--radius-lg); }

.post-content table thead th:last-child,
.page-content table thead th:last-child { border-top-right-radius: var(--radius-lg); }

/* 简洁表格：不使用 hover 与斑马纹背景 */

/* 数字列右对齐：支持 Markdown 渲染器生成的 align 属性 */
.post-content table td[align="right"],
.page-content table td[align="right"],
.post-content table th[align="right"],
.page-content table th[align="right"],
.post-content table td.num,
.page-content table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 表格标题 */
.post-content table caption,
.page-content table caption { caption-side: top; text-align: left; padding: var(--space-2) 0; color: var(--text-secondary); font-size: 0.9em; }

/* 暗色模式：与浅色一致的中性表头背景 */
.dark-theme .post-content table thead th,
.dark-theme .page-content table thead th { background: var(--surface-color); }

/* WebKit 底部滚动条的外观更协调 */
.post-content .table-bottom-scroll::-webkit-scrollbar,
.page-content .table-bottom-scroll::-webkit-scrollbar { height: 8px; }

.post-content .table-bottom-scroll::-webkit-scrollbar-thumb,
.page-content .table-bottom-scroll::-webkit-scrollbar-thumb { background: var(--primary-400); border-radius: 4px; }

.post-content .table-bottom-scroll::-webkit-scrollbar-thumb:hover,
.page-content .table-bottom-scroll::-webkit-scrollbar-thumb:hover { background: var(--primary-500); }

/* 文章导航 */
.post-navigation { display: flex; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); padding: var(--space-1) 0; border-top: 1px solid var(--border-color); }
.nav-item { flex: 1; max-width: 48%; }
.nav-link { display: block; color: var(--text-secondary); text-decoration: none; font-weight: 500; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); transition: all var(--transition-fast); }
.nav-link:not(.disabled):hover { color: var(--primary-600); background-color: var(--primary-50); }
.nav-link.disabled { opacity: 0.5; cursor: not-allowed; }
.dark-theme .nav-link:hover, .dark-theme .nav-link.active { background-color: rgba(236, 72, 153, 0.1); }
.nav-direction { display: block; font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-1); }
.nav-title { display: block; color: var(--text-primary); font-weight: 500; line-height: 1.4; }
.nav-title a { color: var(--text-primary); transition: color var(--transition-fast); }
.nav-title a:hover { color: var(--primary-600); }

/* 评论区域 */
.comments-section { background: var(--card-color); border: 1px solid var(--border-color); border-radius: var(--radius-xl);box-shadow: var(--shadow-sm); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.04), 0 1px 10px rgba(0, 0, 0, 0.06); will-change: box-shadow;}
.comments-section:hover {
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-400);
}

/* 单篇文章头图铺满顶部 */
.post-detail.has-hero { padding: 0 0 var(--space-8); }
.post-detail.has-hero .post-hero { width:100%; position:relative; overflow:hidden; border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-bottom: var(--space-4); }
.post-detail.has-hero .post-hero.post-noimage { height:80px; background: linear-gradient(45deg, var(--primary-100), var(--primary-200)); }
.post-detail.has-hero .post-hero .post-img { width:100%; height:100%;object-fit:cover; display:block; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.post-detail.has-hero .post-image { width:100%; height:300px !important;}
.post-detail.has-hero .post-category { top: var(--space-4); left: var(--space-4); }
.post-hero .post-category { top: 0; left: 0; }
/* 重新为正文区块加水平内边距 */
.post-detail.has-hero .post-header,
.post-detail.has-hero .post-content,
.post-detail.has-hero .post-tags,
.post-detail.has-hero .post-navigation,
.post-detail.has-hero .comments-section { padding-left: var(--space-8); padding-right: var(--space-8); }
/* 适配窄屏 */
@media (max-width: 640px){
  .post-detail.has-hero .post-hero { height:200px; }
  .post-detail.has-hero .post-header,
  .post-detail.has-hero .post-content,
  .post-detail.has-hero .post-tags,
  .post-detail.has-hero .post-navigation,
  .post-detail.has-hero .comments-section { padding-left: var(--space-4); padding-right: var(--space-4); }
  .post-detail, .page-detail { padding: var(--space-1); }
}

/* 文章头图上的布局切换按钮（桌面端出现，悬停淡入） */
.post-hero { position: relative; }
.post-hero .layout-toggle { position: absolute; top: var(--space-3); right: var(--space-3); width: 36px; height: 36px; border: none; background: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border-radius: var(--radius-md); cursor: var(--cursor-pointer); opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, background-color var(--transition-fast); z-index: 3; }
.post-hero:hover .layout-toggle { opacity: 1; transform: translateY(0); }
.post-hero .layout-toggle:hover { background: rgba(0,0,0,.08); }
@media (max-width: 768px){ .post-hero .layout-toggle { display:none; } }

/* ============================
   分页导航 (列表页 page-nav)
   ============================ */
.page-nav { margin-top: var(--space-10); display:flex; justify-content:center; }
.page-nav .page-navigator { list-style:none; margin:0; padding:0; display:flex; gap: var(--space-2); flex-wrap:wrap; }
.page-nav .page-navigator li { margin:0; padding:0; }
.page-nav .page-navigator a,
.page-nav .page-navigator span { display:inline-flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding:0 var(--space-3); font-size: var(--font-size-sm); font-weight:500; border:1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--card-color); text-decoration:none; line-height:1; position:relative; overflow:hidden; transition: all 0.25s cubic-bezier(.16,1,.3,1); }
.page-nav .page-navigator a:hover { color: var(--primary-600); border-color: var(--primary-400); box-shadow: 0 2px 6px rgba(0,0,0,0.08); transform: translateY(-2px); }
.page-nav .page-navigator li.current a,
.page-nav .page-navigator li.current span { background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color:#fff; border-color: var(--primary-500); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.page-nav .page-navigator li.current a:hover { transform:none; }
/* 禁用态（如果输出 span） */
.page-nav .page-navigator li span { opacity:.55; cursor:not-allowed; box-shadow:none; }

/* 暗色模式适配 */
.dark-theme .page-nav .page-navigator a,
.dark-theme .page-nav .page-navigator span { background: var(--surface-color); border-color: var(--border-color); color: var(--text-secondary); }
.dark-theme .page-nav .page-navigator a:hover { background: rgba(236,72,153,0.12); color: var(--primary-300); border-color: var(--primary-400); }
.dark-theme .page-nav .page-navigator li.current a,
.dark-theme .page-nav .page-navigator li.current span { background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color:#fff; }