/**
 * 自定义characters标签样式
 * 复刻sites标签的显示效果
 */

/* 网格布局 - 与sites标签保持一致 */
.characters-wrap .grid-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 1rem 1rem;
}

.characters-wrap .grid-cell {
  aspect-ratio: 1.5;
}

/* 卡片链接样式 */
.characters-wrap .character-card .card-link {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 主图片容器 */
.characters-wrap .character-card .card-link .lazy-box {
  border-radius: 8px;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.characters-wrap .character-card .card-link .lazy-box.snapshot > img {
  object-fit: cover;
  aspect-ratio: 1.5;
  width: 100%;
  height: 100%;
}

/* 信息区域 */
.characters-wrap .character-card .card-link .info {
  margin-top: 0.5rem;
  line-height: 1.2;
  position: relative;
}

/* 小图标 */
.characters-wrap .character-card .card-link .info .lazy-box {
  float: left;
  margin-right: 8px;
  margin-top: 2px;
  border-radius: 50%;
}

.characters-wrap .character-card .card-link .info .lazy-box > img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* 标题和描述 */
.characters-wrap .character-card .card-link .info span {
  display: block;
}

.characters-wrap .character-card .card-link .info .title {
  font-weight: 500;
  color: var(--text-p1);
  font-size: 14px;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.characters-wrap .character-card .card-link .info .desc {
  font-size: 10px;
  margin-top: 2px;
  word-wrap: break-word;
  color: var(--text-p3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

/* 悬停效果 - 模拟floatable效果 */
.characters-wrap .character-card .card-link > .lazy-box {
  transition: transform 0.2s, box-shadow 0.2s;
}

.characters-wrap .character-card .card-link:hover > .lazy-box {
  box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.15);
  transform: translate3d(0, -2px, 0);
}

/* lazy加载占位图标 */
.characters-wrap .lazy-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 确保图片加载后隐藏占位图标 */
.characters-wrap .lazy-box img.lazy[data-src] + .lazy-icon {
  display: block;
}

.characters-wrap .lazy-box img.lazy:not([data-src]) + .lazy-icon {
  display: none;
}