/* ===== 大气版全站覆写 v2（hero 在 index-img.html 里，这里管卡片/侧栏/页脚/稳定性） ===== */

/* ========== 稳定性：外部资源失败兜底 ========== */

/* 文章缩略图（来自 pic.re 等外域）加载失败时，回退到本地 logo，避免裂图 */
img[data-load-status] {
  background-color: var(--heo-card-bg, #fff);
}
.recent-post-item .post_cover,
.post_cover {
  background: linear-gradient(135deg, #1b1e27 0%, #2a3040 60%, #3a4358 100%);
}
.recent-post-item .post_cover img[data-lazy-src] {
  object-fit: cover;
}

/* ========== 文章卡片（主内容区） ========== */

/* 卡片间距拉开，呼吸感 */
#recent-posts .recent-post-item {
  margin-bottom: 1.4rem;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
}
#recent-posts .recent-post-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.4);
}

/* 标题字号与行距 */
.article-title {
  font-size: 1.18rem;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.article-title:hover {
  opacity: 0.85;
}

/* 摘要段落不再挤 */
.recent-post-info .content {
  font-size: 0.95rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* meta 行 */
.recent-post-info-bottom {
  font-size: 0.82rem;
  opacity: 0.75;
}

/* ========== 顶部固定导航 ========== */

/* 滚动后导航毛玻璃更通透 */
.nav-fixed #nav {
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  background: color-mix(in srgb, var(--heo-card-bg, rgba(20, 22, 30, 0.7)) 78%, transparent);
  border-bottom: 1px solid var(--heo-card-border, rgba(255, 255, 255, 0.08));
}
.nav-fixed #nav #site-name span {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}
#nav .site-page {
  font-size: 0.98rem;
  letter-spacing: 0.05em;
}

/* ========== 侧栏 ========== */

/* 卡片统一圆角与留白 */
#aside-content .card {
  border-radius: 12px;
  padding: 16px 18px;
}

/* ========== 页脚：保持主题默认，不覆盖 ========== */

/* ========== 暗色模式细节 ========== */

html.dark .recent-post-item:hover {
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
}

/* ========== 性能 ========== */

/* 图片统一 lazy，浏览器不会一起拉起 4 张大图 */
.lazyload-plugin img:not([src]),
img[data-loaded="false"] {
  opacity: 0;
  transition: opacity 0.5s;
}
img[data-loaded="true"] {
  opacity: 1;
}

/* ========== 移动端 ========== */

@media (max-width: 768px) {
  #recent-posts .recent-post-item {
    margin-bottom: 1rem;
  }
  .article-title {
    font-size: 1.02rem;
  }
}