/* filter.css — SHARED filter-bar UI, used by any data-driven listing page
   (Programs, Resources, ...). Extracted from the Programs page once a second
   page needed the same controls — reuse when it's real, not speculative. */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid #e6e6e6;
}
.filter-search { display: flex; flex-direction: column; gap: var(--space-1); }
.filter-search label { font-size: var(--text-caption); font-weight: var(--weight-medium); }
.filter-search input {
  min-width: 16rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid #cccccc;
  background: var(--color-white);
}

.filter-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tag-btn {
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-2);
  border: 1px solid #cccccc;
  background: var(--color-white);
  color: var(--color-text);
}
.tag-btn:hover { border-color: var(--color-accent); }
.tag-btn.is-active {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.no-results { margin-bottom: var(--space-4); font-weight: var(--weight-medium); }