/* ww-tag-detail.css — 标签详情页主体版式（2026-08 原型 chihan-club-prototype/tag-detail 移植）。
 *
 * 头尾沿用 ww 外壳（header/footer/登录弹层不动），本文件只管主体：
 * 标签页头 / 排序按钮 / 四列视频网格 / 分页 / 相关标签 / 你可能还喜欢 / FAQ。
 * 全部规则收在 .tagd 命名空间下，原型的通用类名（.grid/.card/.chips）一律加 tagd- 前缀，
 * 避免与 ww 预编译 Tailwind 撞名（坑 #1：不自拟原子类，专用版式写专用文件）。
 * 色板取自原型 :root：bg #181818 / panel #202020 / line #343434 / red #c9323b。
 */

.tagd { font-size: 14px; line-height: 1.65; }

/* ── ① 标签页头 ─────────────────────────────────────────────── */
.tagd-intro { padding-bottom: 21px; border-bottom: 1px solid #343434; }
.tagd-intro h1 { font-size: 25px; font-weight: 700; margin: 0 0 7px; }
.tagd-intro p { max-width: 900px; margin: 0; color: #bbb; }
.tagd-count { display: block; margin-top: 8px; color: #929292; }
.tagd-count strong { color: #eee; font-weight: 700; }

/* ── 区块骨架 ───────────────────────────────────────────────── */
.tagd-section { margin-top: 34px; }
.tagd-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.tagd-title-row h2 { font-size: 24px; font-weight: 700; margin: 0; }

/* ── ③ 排序按钮（链接渲染成按钮态） ─────────────────────────── */
.tagd-sorts { display: flex; align-items: center; gap: 7px; }
.tagd-sorts a { display: inline-block; border: 1px solid #3a3a3a; border-radius: 4px; background: #222; color: #bbb; padding: 8px 15px; }
.tagd-sorts a.active, .tagd-sorts a:hover { background: #c9323b; border-color: #c9323b; color: #fff; }

/* ── ② 视频网格（桌面 4 列 / ≤1050 3 列 / ≤720 2 列） ─────────── */
.tagd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px 16px; }
.tagd-card { min-width: 0; }
.tagd-poster { position: relative; display: block; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: linear-gradient(145deg, #292929, #111); }
.tagd-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.tagd-card:hover .tagd-poster img { transform: scale(1.03); }
.tagd-duration { position: absolute; right: 6px; bottom: 6px; z-index: 2; border-radius: 2px; padding: 1px 5px; background: #000; font-size: 12px; color: #fff; }
.tagd-card-title { font-size: 14px; font-weight: 500; line-height: 1.4; margin: 8px 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tagd-card:hover .tagd-card-title { color: #e05259; }
.tagd-card-tags { display: flex; gap: 5px; overflow: hidden; }
.tagd-card-tags a, .tagd-card-tags span { padding: 2px 7px; border: 1px solid transparent; border-radius: 3px; background: #292929; color: #999; font-size: 11px; white-space: nowrap; transition: background .16s, color .16s, border-color .16s, transform .16s; }
.tagd-card-tags a:hover, .tagd-card-tags a:focus-visible { background: #c9323b; border-color: #e45b62; color: #fff; outline: 0; }
.tagd-card-tags a:active { transform: translateY(1px); background: #a7242c; }
.tagd-empty { padding: 50px; text-align: center; color: #888; }

/* ── ⑤a 相关标签 ────────────────────────────────────────────── */
.tagd-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.tagd-chip { padding: 7px 12px; background: #242424; border: 1px solid #3a3a3a; border-radius: 4px; color: #ccc; }
.tagd-chip:hover { background: #c9323b; border-color: #c9323b; color: #fff; }

/* ── ⑤b 你可能还喜欢（3 列链接格） ──────────────────────────── */
.tagd-recommend { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #383838; }
.tagd-recommend a { padding: 13px 15px; background: #202020; border-right: 1px solid #383838; border-bottom: 1px solid #383838; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tagd-recommend a:nth-child(3n) { border-right: 0; }
.tagd-recommend a:nth-last-child(-n+3):nth-child(3n+1),
.tagd-recommend a:nth-last-child(-n+2):nth-child(3n+2),
.tagd-recommend a:nth-last-child(1):nth-child(3n) { border-bottom: 1px solid #383838; }
.tagd-recommend a:hover { color: #e05259; background: #242424; }

/* ── ⑥ 常见问题（原生 details 折叠面板） ────────────────────── */
.tagd-faq { border-top: 1px solid #373737; }
.tagd-faq details { border-bottom: 1px solid #373737; }
.tagd-faq summary { cursor: pointer; list-style: none; padding: 14px 3px; font-weight: 700; }
.tagd-faq summary::-webkit-details-marker { display: none; }
.tagd-faq summary:after { content: "+"; float: right; color: #aaa; font-size: 18px; }
.tagd-faq details[open] summary:after { content: "−"; }
.tagd-faq p { margin: 0; padding: 0 30px 14px 3px; color: #aaa; }

/* ── 响应式（原型断点 1050 / 720） ──────────────────────────── */
@media (max-width: 1050px) {
  .tagd-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .tagd-grid { grid-template-columns: repeat(2, 1fr); gap: 21px 10px; }
  .tagd-title-row { align-items: flex-start; gap: 14px; flex-direction: column; }
  .tagd-sorts { width: 100%; }
  .tagd-sorts a { flex: 1; text-align: center; }
  .tagd-recommend { grid-template-columns: 1fr; }
  .tagd-recommend a, .tagd-recommend a:nth-child(3n) { border-right: 0; }
  .tagd-intro h1, .tagd-title-row h2 { font-size: 21px; }
}