/* 通用壁纸卡片组件样式（card.css）
 * 全站唯一卡片样式来源：首页 / 分类列表 / 标签列表 / 搜索结果 / 猜你喜欢 / 会员收藏 共用。
 * 风格：图片即卡片（无底部白色标题栏），hover 浮出白色蒙层 + 底部半透明信息条。
 * 结构（template/toopic/html/public/card.html）：
 *   li > .bd > a.pic(img + span.mask + 角标) + .text(p.title + .text-sub[图标/分辨率/下载数])
 *
 * 选择器统一带 `li`（.pic-list li ...）：
 *   1) 各页卡片容器（首页/列表/搜索/猜你喜欢/收藏）都含 .pic-list，一条即可覆盖；
 *   2) 与 style.css / toopic-dark.css 旧卡片规则（同为 .pic-list li .xxx）优先级持平，
 *      再靠 header.html 中「最后加载」胜出，无需 !important。
 */

/* ===== 卡片主体 ===== */
.pic-list li .bd {
  position: relative;
  background: #222;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 26px -20px rgba(14,19,27,.5);
  transition: box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.pic-list li .bd:hover {
  box-shadow: 0 18px 38px -20px rgba(14,19,27,.45);
}

/* ===== 图片层 ===== */
.pic-list li .pic {
  position: relative;
  display: block;
  overflow: hidden;
  background: #121722;
  font-size: 0;
  /* 复位 toopic-dark / 旧版可能设置的裁切比例，竖屏壁纸不被裁 */
  aspect-ratio: auto;
}
.pic-list li .pic img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  transition: filter .45s cubic-bezier(.22,1,.36,1);
}
.pic-list li .bd:hover .pic img {
  filter: saturate(1.08) contrast(1.03) brightness(1.02);
}

/* ===== hover 白色蒙层 ===== */
.pic-list li .pic .mask {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255,255,255,.2);
  pointer-events: none;
}
.pic-list li .bd:hover .pic .mask { display: block; }

/* ===== 底部信息条：默认隐藏，hover 浮出 ===== */
.pic-list li .text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 8px 12px;
  display: none !important;
  background: rgba(0,0,0,.45);
  transition: all .35s cubic-bezier(.22,1,.36,1);
}
.pic-list li .bd:hover .text,
.pic-list li .bd:focus-within .text { display: block !important; }

/* ===== 标题 ===== */
.pic-list li .text .title,
.pic-list li .text .title a,
.pic-list li .title,
.pic-list li .title a {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
.pic-list li .text .title a:hover,
.pic-list li .title a:hover { color: #fff; }

/* ===== 尺寸行：图标 + 分辨率 居左，下载次数 居右 ===== */
.pic-list li .text-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.pic-list li .stat-expand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: .92;
}
.pic-list li .stat-expand svg { width: 16px; height: 16px; display: block; }
.pic-list li .meta {
  flex: 0 0 auto;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 16px;
}
.pic-list li .meta::before { content: attr(data-res); }
.pic-list li .stat-dl {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.pic-list li .stat-dl svg { width: 14px; height: 14px; display: block; }

/* ===== 详情页「猜你喜欢」横排兜底（与 .pic-list li 完全同款） =====
 * studio-detail.js / studio-sjview.js 的 muteRelatedMasonry() 会在宽屏把 rail 的 <ul>
 * 上的 .pic-list 摘掉（为了摆脱 masonry 与 25% 浮动栅格）。但卡片内部信息行
 * （尺寸行 .text-sub / 分辨率 .meta / 下载数 .stat-dl）的全部样式只在「.pic-list li …」
 * 作用域里定义，摘掉后：.meta::before{content:attr(data-res)} 失效 → 分辨率不显示，
 * .text-sub 退回 display:block → 图标/分辨率/下载数错位。
 * 这里用 id 选择器（比分文件里的类选择器更强，且本文件最后加载）给两个 rail 容器补齐
 * 同样的内部样式，保证「摘不摘 .pic-list」卡片内部长得一样。 */
#relatedSection .text-sub,
#relatedSectionMobile .text-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
#relatedSection .stat-expand,
#relatedSectionMobile .stat-expand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: .92;
}
#relatedSection .stat-expand svg,
#relatedSectionMobile .stat-expand svg { width: 16px; height: 16px; display: block; }
#relatedSection .meta,
#relatedSectionMobile .meta {
  flex: 0 0 auto;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 16px;
}
#relatedSection .meta::before,
#relatedSectionMobile .meta::before { content: attr(data-res); }
#relatedSection .stat-dl,
#relatedSectionMobile .stat-dl {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.82);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
#relatedSection .stat-dl svg,
#relatedSectionMobile .stat-dl svg { width: 14px; height: 14px; display: block; }

/* 旧版卡片遗留的 Tag 列表 / 统计行不再展示（新信息条已承载） */
.pic-list li .gray.info { display: none !important; }

/* ===== 移动端收紧 ===== */
@media (max-width: 900px) {
  .pic-list li .text { padding: 8px 12px; }
  .pic-list li .text .title,
  .pic-list li .text .title a,
  .pic-list li .title,
  .pic-list li .title a { font-size: 13px; line-height: 18px; }
}