/* Filter Bar — horizontal scrolling filter buttons */

.filter-bar {
  display: flex;
  gap: var(--space-2);
  margin-left: calc(-1 * var(--grid-margin));
  margin-right: calc(-1 * var(--grid-margin));
  margin-bottom: var(--space-8);
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-1);
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: 2rem;
  background: transparent;
  color: var(--meta);
  font-family: 'Crimson Pro', serif;
  font-size: 0.9375rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-bar__btn:hover {
  border-color: var(--text);
  color: var(--text);
}

.filter-bar__btn--active {
  background: var(--heading);
  border-color: var(--heading);
  color: var(--bg);
}

.filter-bar__btn--active:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.filter-bar__count {
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* Filtered items: hide with display none for clean layout reflow */
.content-grid [data-filter-hidden] {
  display: none;
}