@charset "UTF-8";

.tags-hero {
  padding:140px 0 60px;
  background:linear-gradient(135deg, var(--bg-dark) 0%, #153d54 100%);
  text-align:center;
}

.tags-hero h1 {
  font-size:2.2rem;
  color:var(--white);
  margin-bottom:10px;
}

.tags-hero p {
  font-size:1rem;
  color:var(--primary-light);
}

/* Tag Cloud */
.tag-cloud {
  padding:50px 0;
  background:var(--bg-light);
}

.tag-cloud-inner {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.tag-cloud .tag-item {
  padding:10px 22px;
  background:var(--white);
  border-radius:25px;
  font-size:0.9rem;
  color:var(--text-mid);
  box-shadow:0 2px 8px var(--shadow);
  transition:all 0.3s;
  border:1px solid var(--border);
}

.tag-cloud .tag-item:hover,
.tag-cloud .tag-item.active {
  background:var(--primary);
  color:var(--white);
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 4px 15px rgba(41,182,246,0.3);
}

/* Tag Results */
.tag-results { padding:60px 0; background:var(--white); }

.tag-results-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
}

.tag-results-header h2 {
  font-size:1.3rem;
  color:var(--bg-dark);
}

.tag-results-header span {
  font-size:0.9rem;
  color:var(--text-mid);
}

.tag-cards {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.tag-card {
  background:var(--white);
  border-radius:12px;
  padding:25px;
  border:1px solid var(--border);
  transition:all 0.3s;
}

.tag-card:hover {
  border-color:var(--primary);
  box-shadow:0 6px 20px var(--shadow);
  transform:translateY(-3px);
}

.tag-card h3 {
  font-size:1rem;
  color:var(--bg-dark);
  margin-bottom:10px;
  line-height:1.5;
  font-weight:600;
}

.tag-card p {
  font-size:0.85rem;
  color:var(--text-mid);
  line-height:1.7;
  margin-bottom:12px;
}

.tag-card-meta {
  display:flex;
  justify-content:space-between;
  font-size:0.8rem;
  color:var(--text-light);
}

.tag-card-meta .cat {
  color:var(--primary);
  font-weight:600;
}

/* Category Cards Layout */
.category-cards {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:25px;
  padding:60px 0;
}

.category-card {
  background:var(--white);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 20px var(--shadow);
  transition:all 0.3s;
}

.category-card:hover {
  transform:translateY(-5px);
  box-shadow:0 8px 30px var(--shadow-hover);
}

.category-card-header {
  padding:25px;
  background:linear-gradient(135deg, var(--primary-light) 0%, var(--border) 100%);
}

.category-card-header h3 {
  font-size:1.2rem;
  color:var(--bg-dark);
  margin-bottom:5px;
}

.category-card-header p {
  font-size:0.85rem;
  color:var(--text-mid);
}

.category-card-body {
  padding:20px 25px;
}

.category-card-body ul { list-style:none; }

.category-card-body li {
  padding:10px 0;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.category-card-body li:last-child { border-bottom:none; }

.category-card-body a {
  font-size:0.9rem;
  color:var(--text-dark);
  transition:color 0.3s;
}

.category-card-body a:hover { color:var(--primary-dark); }

.category-card-body .count {
  font-size:0.8rem;
  color:var(--text-light);
  background:var(--bg-light);
  padding:2px 8px;
  border-radius:10px;
}

/* Responsive */
@media (max-width:1024px) {
  .tag-cards { grid-template-columns:repeat(2, 1fr); }
  .category-cards { grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px) {
  .tag-cards { grid-template-columns:1fr; }
  .category-cards { grid-template-columns:1fr; }
  .tag-results-header { flex-direction:column; align-items:flex-start; gap:10px; }
}