/* 文章列表（首页、分类页、标签页共用，主题 index_layout: 1）：封面统一在左，标题始终对齐在同一条竖线上。
   封面占一半宽、2:1，卡片高度和主题原来相近（约 16.8em），站内 2.3～2.5:1 的封面只裁掉两侧一点；
   文字区保持主题原来的样式。
   手机上封面在上、文字在下。 */
#recent-posts .recent-post-item {
  align-items: center;
  gap: 24px;
  height: auto;
  padding: 14px;
  transition: box-shadow .3s, transform .3s;
}

@media (hover: hover) {
  #recent-posts .recent-post-item:hover {
    transform: translateY(-2px);
  }
}

#recent-posts .recent-post-item .post_cover {
  flex: 0 0 50%;
  width: 50%;
  height: auto;
  aspect-ratio: 2 / 1;
  border-radius: 6px;
  /* 让圆角能裁住放大中的封面。 */
  isolation: isolate;
}

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

#recent-posts .recent-post-item .post-bg {
  z-index: 0;
  transition: transform .6s;
}

#recent-posts .recent-post-item:hover .post-bg {
  transform: scale(1.05);
}

/* 文字区沿用主题原样式（标题、发表于、分类、两行摘要），只调整宽度和左右留白。 */
#recent-posts .recent-post-item > .recent-post-info {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 0 26px 0 0;
}

#recent-posts .recent-post-item > .recent-post-info.no-cover {
  padding: 0 26px;
}

@media (prefers-reduced-motion: reduce) {
  #recent-posts .recent-post-item,
  #recent-posts .recent-post-item .post-bg { transition: none; }
  #recent-posts .recent-post-item:hover,
  #recent-posts .recent-post-item:hover .post-bg { transform: none; }
}

@media (max-width: 768px) {
  #recent-posts .recent-post-item {
    gap: 12px;
    padding: 10px;
  }

  #recent-posts .recent-post-item .post_cover {
    flex: none;
    width: 100%;
    aspect-ratio: 2.2 / 1;
  }

  #recent-posts .recent-post-item > .recent-post-info,
  #recent-posts .recent-post-item > .recent-post-info.no-cover {
    padding: 0 10px 16px;
    width: 100%;
  }
}