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

.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 solid 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) var(--space-4) 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-1); }
.post-content img, .page-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.post-content blockquote, .page-content blockquote { border-left: 4px solid var(--primary-500); background: var(--surface-color); margin: var(--space-6) 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-style: italic; color: var(--text-secondary); }
.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-700); }
.post-content pre, .page-content pre { background: var(--surface-color); border-radius: var(--radius-lg); overflow-x: auto; margin: var(--space-6) 0; border: 1px solid var(--border-color); }
.post-content pre code, .page-content pre code { background: none; padding: 0; color: var(--primary-500); }
.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); }

/* 文章导航 */
.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); padding: var(--space-8); 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); }
}

/* ============================
   分页导航 (列表页 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; }