/* tags.css — 标签聚合页专属样式 */

:root{
  --ink-4:#252a32;
  --gold-dim:#8a7548;
  --text:#c5c9d0;
  --text-2:#9aa0a8;
  --text-3:#6c727a;
  --line-2:#353b45;
}

.tag-container{max-width:1200px;margin:0 auto;padding:0 20px}

.tag-head{text-align:center;padding:26px 0 34px;border-bottom:1px solid var(--line)}
.tag-h1{
  font-family:"Noto Serif SC",serif;
  font-size:2.4rem;
  font-weight:700;
  color:var(--gold);
  letter-spacing:2px;
  line-height:1.3;
  word-break:break-all;
}
.tag-intro{margin-top:14px;font-size:15px;color:var(--text-2)}

.tag-body{display:flex;gap:32px;padding:36px 0 56px;align-items:flex-start}
.tag-main{flex:1;min-width:0}
.tag-side{width:320px;flex-shrink:0;position:sticky;top:84px}

.sec-title{
  display:flex;align-items:center;gap:14px;
  font-size:1.3rem;font-weight:600;color:var(--text);
  margin-bottom:22px;
}
.sec-title::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 28%,transparent 100%);
}

.rel-art{margin-bottom:48px}
.art-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.art-card{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:8px;overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.art-card:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.art-img{width:100%;height:200px;overflow:hidden;background:var(--ink-3)}
.art-img img{width:100%;height:100%;object-fit:cover}
.art-body{padding:16px 18px 18px}
.art-title{
  font-size:1.05rem;font-weight:600;color:var(--text);
  line-height:1.5;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.art-title:hover{color:var(--gold)}
.art-date{font-size:12px;color:var(--gold);margin-bottom:10px;letter-spacing:.5px}
.art-desc{
  font-size:13px;color:var(--text-2);line-height:1.7;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.art-tags{display:flex;gap:8px;flex-wrap:wrap}
.art-tag{
  font-size:12px;padding:3px 10px;border-radius:12px;
  background:var(--ink-4);color:var(--text-2);border:1px solid var(--line-2);
}
.art-tag:hover{color:var(--gold);border-color:var(--gold-dim)}

.rel-mote{margin-bottom:40px}
.mote-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mote-card{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;transition:border-color .2s;
}
.mote-card:hover{border-color:var(--gold-dim)}
.mote-img{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--ink-3)}
.mote-img img{width:100%;height:100%;object-fit:cover}
.mote-info{padding:14px 14px 16px}
.mote-name{
  font-size:1rem;font-weight:600;color:var(--text);
  margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:block;
}
.mote-name:hover{color:var(--gold)}
.mote-line{height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin-bottom:12px}
.mote-keys{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mote-key{
  font-size:11px;padding:2px 9px;border-radius:11px;
  border:1px solid var(--gold-dim);color:var(--gold);
}
.mote-key:hover{background:var(--gold);color:var(--ink)}
.mote-attr{font-size:12px;color:var(--text-2);margin-bottom:8px;line-height:1.5}
.mote-attr span+span::before{content:" · ";color:var(--text-3)}
.mote-desc{
  font-size:12px;color:var(--text-3);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.tag-page{margin-top:36px}
.pagination{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.page-item{
  padding:8px 14px;border:1px solid var(--line-2);border-radius:4px;
  font-size:13px;color:var(--text-2);background:var(--ink-2);
}
.page-item:hover{border-color:var(--gold-dim);color:var(--gold)}
.tag-empty{text-align:center;padding:48px 0;color:var(--text-3);font-size:14px}

.side-card{
  background:var(--ink-2);border:1px solid var(--gold-dim);border-radius:10px;
  padding:24px 22px;margin-bottom:24px;text-align:center;
}
.side-card-label{font-size:12px;color:var(--text-3);letter-spacing:2px;margin-bottom:12px}
.side-card-tag{
  font-family:"Noto Serif SC",serif;font-size:1.6rem;font-weight:700;
  color:var(--gold);word-break:break-all;line-height:1.4;
}
.side-card-note{margin-top:14px;font-size:12px;color:var(--text-3);line-height:1.6}
.side-cloud{background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:22px 20px}
.side-cloud-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cloud-list{display:flex;flex-wrap:wrap;gap:8px}
.cloud-tag{
  font-size:12px;padding:5px 12px;border-radius:14px;
  background:var(--ink-3);color:var(--text-2);border:1px solid var(--line-2);
}
.cloud-tag:hover{color:var(--gold);border-color:var(--gold-dim)}
.cloud-tag.cloud-active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600}

@media(max-width:960px){
  .tag-body{flex-direction:column}
  .tag-side{width:100%;position:static}
  .mote-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .tag-h1{font-size:1.8rem}
  .art-grid{grid-template-columns:1fr}
  .mote-grid{grid-template-columns:repeat(2,1fr)}
  .tag-container{padding:0 14px}
}