/* Blog Page */
.blog-hero { padding-top: calc(var(--nav-height) + var(--space-12)); padding-bottom: var(--space-8); background: linear-gradient(180deg, var(--color-primary-50) 0%, transparent 100%); }
[data-theme="dark"] .blog-hero { background: linear-gradient(180deg, #252839 0%, transparent 100%); }
.blog-filter { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-6); }
.blog-cats { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.blog-filter .search-box { min-width: 240px; flex: 1; max-width: 320px; }

/* Layout */
.blog-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-8); align-items: start; }
.blog-articles { display: flex; flex-direction: column; gap: var(--space-5); }

/* Article Card */
.blog-article { display: flex; overflow: hidden; }

/* 可点击的分类标签 */
.blog-cat-badge { transition: all var(--dur-fast) var(--ease-out-quart); }
.blog-cat-badge:hover { opacity: 0.8; transform: translateY(-1px); box-shadow: 0 2px 8px oklch(from var(--color-primary) l 80% c 0.12 / 0.3); }
.blog-article__cover { width: 160px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.blog-article__cover--java    { background: linear-gradient(135deg, #fae8e0, #fcf6f4); }
.blog-article__cover--vue     { background: linear-gradient(135deg, #d6f5e8, #f1faf6); }
.blog-article__cover--mp      { background: linear-gradient(135deg, #ddf0f9, #f1f7fc); }
.blog-article__cover--devops  { background: linear-gradient(135deg, #dde6fa, #f1f4fc); }
[data-theme="dark"] .blog-article__cover--java   { background: linear-gradient(135deg, #3b2d28, #2a221c); }
[data-theme="dark"] .blog-article__cover--vue    { background: linear-gradient(135deg, #1a3a2f, #222d28); }
[data-theme="dark"] .blog-article__cover--mp     { background: linear-gradient(135deg, #1a3040, #252a33); }
[data-theme="dark"] .blog-article__cover--devops { background: linear-gradient(135deg, #1a2440, #222428); }
.blog-article__body { flex: 1; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.blog-article__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.blog-article__meta time { font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
.blog-article__tags { display: flex; gap: var(--space-2); }
.blog-article__title { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-snug); }
.blog-article__title a { color: var(--text-primary); transition: color var(--dur-fast) var(--ease-out-quart); }
.blog-article__title a:hover { color: var(--color-primary-500); }
.blog-article__excerpt { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-article__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.blog-article__stats { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--text-tertiary); }
.blog-article__stats span { display: flex; align-items: center; gap: var(--space-1); }

/* Sidebar */
.blog-sidebar { position: sticky; top: calc(var(--nav-height) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-4); }
.sidebar-widget { padding: var(--space-5); }
.sidebar-widget__title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-tertiary); margin-bottom: var(--space-4); }
.sidebar-cat-list { list-style: none; display: flex; flex-direction: column; }
.sidebar-cat-list li { border-bottom: 1px solid var(--border-subtle); }
.sidebar-cat-list li:last-child { border-bottom: none; }
.sidebar-cat-list a { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out-quart); }
.sidebar-cat-list a:hover { color: var(--color-primary-500); }
.sidebar-cat-list .sidebar-cat-count { background: var(--color-neutral-100); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); }
[data-theme="dark"] .sidebar-cat-list .sidebar-cat-count { background: #393e52; }

/* Sidebar 分类可展开样式 */
.sidebar-cat-list .sidebar-cat-item {
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}
.sidebar-cat-list .sidebar-cat-item:last-child { border-bottom: none; }
.sidebar-cat-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 0;
  transition: color var(--dur-fast) var(--ease-out-quart);
  cursor: pointer;
  user-select: none;
}
.sidebar-cat-toggle:hover { color: var(--color-primary-500); }
.sidebar-cat-arrow {
  display: inline-block;
  font-size: 10px;
  width: 14px;
  text-align: center;
  color: var(--text-tertiary);
  transition: transform 200ms var(--ease-out-quart);
  flex-shrink: 0;
  background: none;
  padding: 0;
  border-radius: 0;
}
.sidebar-cat-item.is-expanded > .sidebar-cat-toggle { color: var(--color-primary-500); }
.sidebar-cat-item.is-expanded > .sidebar-cat-toggle .sidebar-cat-arrow { transform: rotate(90deg); }
.sidebar-cat-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  background: none;
  padding: 0;
  border-radius: 0;
}
.sidebar-cat-toggle:hover .sidebar-cat-name { color: var(--color-primary-500); }
.sidebar-cat-count {
  background: var(--color-neutral-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  flex-shrink: 0;
}
[data-theme="dark"] .sidebar-cat-count { background: #393e52; }
.sidebar-cat-tags {
  list-style: none;
  display: none;
  flex-direction: column;
  margin: 0 0 12px 22px;
  padding: 8px 0 4px;
  animation: sidebarExpandIn 220ms var(--ease-out-quart) both;
}
.sidebar-cat-item.is-expanded > .sidebar-cat-tags { display: flex; }
@keyframes sidebarExpandIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.sidebar-cat-tags li { border-bottom: none; }
.sidebar-cat-tags li:last-child { border-bottom: none; }
.sidebar-tag-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-tertiary);
  text-decoration: none;
  border-radius: 0;
  transition: background 150ms, color 150ms;
}
.sidebar-tag-link:hover {
  background: var(--color-neutral-100);
  color: var(--color-primary-500);
}
[data-theme="dark"] .sidebar-tag-link:hover { background: #2a3044; }
.sidebar-tag-link em {
  font-style: normal;
  background: transparent;
  color: var(--text-tertiary);
  padding: 0 0 0 6px;
  font-size: 11px;
}
.sidebar-cat-empty {
  margin: 0 0 12px 22px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

.sidebar-hot-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.sidebar-hot-list li { display: flex; flex-direction: column; gap: 4px; }
.sidebar-hot-list a { font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; line-height: 1.4; transition: color var(--dur-fast); }
.sidebar-hot-list a:hover { color: var(--color-primary-500); }
.sidebar-hot-list span { font-size: var(--text-xs); color: var(--text-tertiary); }
.sidebar-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sidebar-tags a { text-decoration: none; transition: all var(--dur-fast); }
.sidebar-tags a:hover { background: var(--color-primary-100); border-color: var(--color-primary-300); }

/* Responsive */
@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; display: grid; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .blog-article { flex-direction: column; }
  .blog-article__cover { width: 100%; height: 120px; }
  .blog-sidebar { grid-template-columns: 1fr; }
  .blog-filter { flex-direction: column; align-items: stretch; }
  .blog-filter .search-box { max-width: 100%; }
}

/* 文章正文代码块样式（从后台插入的代码块） */
.blog-code-block {
  background: #f0f1f7;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
}
.blog-code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
}
[data-theme="dark"] .blog-code-block {
  background: #2a3044;
  border-color: #3d4560;
}

/* ======== 二级分类样式 ======== */
/* 二级分类标签（文章卡片上） */
.tag--sub {
  background: oklch(from var(--color-primary) l 95% c 0.02);
  color: oklch(from var(--color-primary) l 40% c 0.15);
  border: 1px dashed oklch(from var(--color-primary) l 80% c 0.05);
  transition: all var(--dur-fast) var(--ease-out-quart);
}
.tag--sub:hover {
  opacity: 0.85;
  transform: translateY(-1px);
  border-style: solid;
}
[data-theme="dark"] .tag--sub {
  background: oklch(from var(--color-primary) l 25% c 0.03);
  color: oklch(from var(--color-primary) l 70% c 0.1);
  border-color: oklch(from var(--color-primary) l 40% c 0.05);
}

/* 二级分类筛选按钮行 */
.blog-cats--sub {
  width: 100%;
  padding: 6px 0;
}
.filter-btn--sub {
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 12px;
}