/* tag.php — page-specific styles */
.tag-page { padding: 20px 0 50px; }
.tag-page-grid {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 26px; align-items: start;
}
@media(max-width: 960px) { .tag-page-grid { grid-template-columns: 1fr; } }

.tag-hero {
  background: linear-gradient(135deg, var(--dark2), #2a2a2a);
  border-radius: var(--r-xl); padding: 28px 28px;
  margin-bottom: 28px; color: #fff;
  display: flex; align-items: center; gap: 18px;
}
.tag-icon { font-size: 2.4rem; color: var(--primary); flex-shrink: 0; }
.tag-hero h1 {
  font-family: var(--font-head); font-size: 2rem;
  letter-spacing: 2px; color: #fff;
}
.tag-hero h1 span { color: var(--primary); }
.tag-hero p { font-size: .8rem; color: #999; margin-top: 4px; }
.tag-count { margin-left: auto; text-align: center; flex-shrink: 0; }
.tag-count .num { font-family: var(--font-head); font-size: 2rem; color: var(--primary); line-height: 1; }
.tag-count .lbl { font-size: .65rem; color: #777; text-transform: uppercase; letter-spacing: 1px; }

.breadcrumb { display: flex; gap: 6px; align-items: center; font-size: .75rem; color: var(--muted); margin-bottom: 16px; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); transition: color .2s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: #ccc; }

.articles-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 28px;
}
@media(max-width: 860px) { .articles-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width: 480px) { .articles-grid { grid-template-columns: 1fr; } }

.pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--r-sm); font-size: .8rem; font-weight: 700; border: 1.5px solid var(--border); color: var(--ink); transition: all .18s; }
.pg-btn:hover { border-color: var(--primary); color: var(--primary); }
.pg-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg-btn.disabled { opacity: .35; pointer-events: none; }

.tags-cloud { padding: 14px; display: flex; flex-wrap: wrap; gap: 7px; }