/* Category filter chips on the listing pages, and the topic-page nav.
   Loaded by pages/project-updates, pages/success-stories, pages/active-projects
   and every generated pages/topics/* page. Categories come from Sanity; the
   chip's data-category is the Sanity category slug. */

.ap-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.ap-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-600);
  background: var(--paper, #fff);
  border: 1.5px solid var(--line, rgba(20, 20, 10, .14));
  border-radius: 100px;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.ap-filter:hover {
  border-color: var(--pine-700);
  color: var(--pine-ink);
}

.ap-filter[aria-pressed="true"],
.ap-filter[aria-current="page"] {
  background: var(--pine-700);
  border-color: var(--pine-700);
  color: var(--forest-900);
}

.ap-filter .n {
  font-size: .78rem;
  font-weight: 700;
  opacity: .6;
}

/* Hidden by the filter script rather than removed, so the grid keeps its
   DOM order and nothing reflows when a filter is cleared. */
.ap-card[hidden] {
  display: none !important;
}

.ap-empty {
  margin: 0;
  padding: 40px 0;
  font-size: 1.02rem;
  color: var(--ink-600);
}

@media (prefers-reduced-motion: reduce) {
  .ap-filter {
    transition: none;
  }
}