/* ========== 首页文章卡片（竖版网格，Fomalhaut multicard 风格） ========== */

/* 网格容器（卡片外层还有一层 .recent-post-items，flex 要加在它上面） */
#recent-posts.recent-posts {
  padding: 0 5px;
}

#recent-posts .recent-post-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
}

/* 卡片（一行两个） */
#recent-posts .recent-post-item {
  width: calc(50% - 8px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(43, 90, 143, 0.08);
  box-shadow: 0 4px 16px rgba(30, 58, 95, 0.06);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#recent-posts .recent-post-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(30, 58, 95, 0.14);
}

/* 封面：比例跟随图片（3:2 横图），高度自适应，不裁切 */
#recent-posts .recent-post-item .recent-post-cover {
  width: 100%;
  aspect-ratio: 3 / 2;
}

#recent-posts .recent-post-item.no-cover .recent-post-info {
  padding-top: 20px;
}

#recent-posts .recent-post-item .recent-post-cover a {
  display: block;
  height: 100%;
}

#recent-posts .recent-post-item .recent-post-cover img,
#recent-posts .recent-post-item .recent-post-cover .article-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

#recent-posts .recent-post-item:hover .recent-post-cover img {
  transform: scale(1.08);
}

/* 信息区：标题 + 元信息 */
#recent-posts .recent-post-item .recent-post-info {
  padding: 15px 20px 20px;
  text-align: center;
}

#recent-posts .recent-post-item .article-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #2d3748;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.3s;
}

#recent-posts .recent-post-item:hover .article-title {
  color: var(--navy-mid);
}

/* 元信息（置顶 / 创建 / 更新 / 分类） */
#recent-posts .recent-post-item .recent-post-meta {
  margin-top: 20px;
  font-size: 13px;
  color: #666666;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 0;
}

#recent-posts .recent-post-item .recent-post-meta .article-meta {
  white-space: nowrap;
}

#recent-posts .recent-post-item .recent-post-meta a {
  color: #666666;
  transition: color 0.2s;
}

#recent-posts .recent-post-item .recent-post-meta a:hover {
  color: var(--navy-mid);
}

#recent-posts .recent-post-item .recent-post-meta .article-meta-separator {
  margin: 0 5px;
  opacity: 0.6;
}

#recent-posts .recent-post-item .recent-post-meta i {
  margin-right: 3px;
}

/* 置顶标记 */
#recent-posts .recent-post-item .article-title .sticky {
  margin-right: 5px;
}

/* 暗色模式 */
[data-theme="dark"] #recent-posts .recent-post-item {
  background: rgba(40, 40, 45, 0.7);
  border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] #recent-posts .recent-post-item .article-title {
  color: #e2e8f0;
}

[data-theme="dark"] #recent-posts .recent-post-item:hover .article-title {
  color: var(--blue-light);
}

[data-theme="dark"] #recent-posts .recent-post-item .recent-post-meta,
[data-theme="dark"] #recent-posts .recent-post-item .recent-post-meta a {
  color: #a0aec0;
}

/* 响应式：两列 / 单列 */
@media (max-width: 768px) {
  #recent-posts .recent-post-item {
    width: calc(50% - 8px);
  }
}

@media (max-width: 480px) {
  #recent-posts .recent-post-item {
    width: 100%;
  }
  /* 手机端封面保持 3:2，无需固定高度 */
}

/* ===== 修复卡片封面上下出现空白条 ===== */
#recent-posts .recent-post-item .recent-post-cover {
    overflow: hidden;   /* 防止内部元素溢出产生的边角缝隙 */
}

#recent-posts .recent-post-item .recent-post-cover a {
    display: flex;      /* 改用 Flex 布局，保证子元素 100% 撑满父容器高度 */
    height: 100%;
}

#recent-posts .recent-post-item .recent-post-cover img,
#recent-posts .recent-post-item .recent-post-cover .article-cover {
    display: block;        /* ★ 核心修复：移除行内元素底部空白 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom; /* 双重保险：对齐底部 */
    margin: 0;              /* 清除可能的外边距干扰 */
}