.filter-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-weight: 500;
  border: 1px solid rgba(168, 162, 158, 0.25);
  background-color: white;
  color: #44403c;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

.dark .filter-pill {
  background-color: #1c1917;
  border-color: rgba(120, 113, 108, 0.3);
  color: #d6d3d1;
}

.filter-pill:hover {
  background-color: #f5f5f4;
  border-color: #a8a29e;
}

.dark .filter-pill:hover {
  background-color: #292524;
  border-color: #78716c;
}

.active-pill {
  background-color: #15803d !important;
  color: white !important;
  border-color: #15803d !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark .active-pill {
  background-color: #16a34a !important;
  color: white !important;
  border-color: #16a34a !important;
}

.active-lang {
  background-color: #15803d !important;
  color: white !important;
}

.dark .active-lang {
  background-color: #16a34a !important;
  color: white !important;
}

.article-card {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

.dark .article-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}