/* 美化相关推荐样式 */
/* 父级容器：控制整体列表间距 */
.xun-widget-related-posts {
  padding: 10px;
}

/* 文章列表容器：取消默认列表样式 */
.xun-related-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 单个文章项：卡片样式、间距，关键设置relative和z-index基础值 */
.xun-related-post-item {
  position: relative; /* 为TOP标签绝对定位做基准 */
  z-index: 1; /* 基础层级 */
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 文章链接：块级显示、高度自适应，设置z-index低于TOP标签 */
.xun-related-post-item a.has-thumb {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #333;
  position: relative;
  z-index: 2; /* 低于TOP标签的3 */
  transition: background-color 0.2s; /* hover过渡效果 */
}

/* 链接hover效果：背景变色，不影响TOP标签 */
.xun-related-post-item a.has-thumb:hover {
  background-color: #f8f8f8;
}

/* TOP标签：显示数字+最高层级，确保不被遮挡 */
.xun-related-post-item:nth-child(1)::before {
  content: "TOP 1"; /* 显示具体数字 */
  position: absolute;
  top: 0;
  left: 0;
  background: #ff4444; /* TOP1红色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3; /* 最高层级，确保hover时也不被遮挡 */
  pointer-events: none; /* 防止标签拦截鼠标事件 */
}

.xun-related-post-item:nth-child(2)::before {
  content: "TOP 2";
  position: absolute;
  top: 0;
  left: 0;
  background: #ffaa44; /* TOP2橙色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none;
}

.xun-related-post-item:nth-child(3)::before {
  content: "TOP 3";
  position: absolute;
  top: 0;
  left: 0;
  background: #4488ff; /* TOP3蓝色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none;
}

.xun-related-post-item:nth-child(4)::before {
  content: "TOP 4";
  position: absolute;
  top: 0;
  left: 0;
  background: #888888; /* TOP4灰色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none;
}

.xun-related-post-item:nth-child(5)::before {
  content: "TOP 5";
  position: absolute;
  top: 0;
  left: 0;
  background: #ff5555; /* TOP5红色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none;
}

.xun-related-post-item:nth-child(6)::before {
  content: "TOP 6";
  position: absolute;
  top: 0;
  left: 0;
  background: #44aaff; /* TOP6浅蓝色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none;
}

/* 文章缩略图样式（如果有） */
.xun-related-post-item .post-thumb {
  float: left;
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 12px;
  border-radius: 4px;
}

/* 文章内容区域：清除浮动 */
.xun-related-post-item .post-content {
  overflow: hidden;
}

/* 文章标题：字体加粗+溢出省略 */
.xun-related-post-item .post-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 文章 meta 信息：字体缩小+灰色 */
.xun-related-post-item .post-meta {
  font-size: 12px;
  color: #999;
}