/* ==========================================================================
   Avarida Group — Portfolio page filter bar
   Reproduces the sticky category filter in routes/portfolio.tsx.
   ========================================================================== */

.avarida-pfilter {
  position: sticky;
  top: 4rem;
  z-index: 30;
  margin-inline: -1.25rem;
  padding: 1rem 1.25rem;
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-block: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

@media (min-width: 1024px) {
  .avarida-pfilter { margin-inline: -2rem; padding-inline: 2rem; }
}

.avarida-pfilter__row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.avarida-pfilter__row::-webkit-scrollbar { display: none; }

.avarida-pfilter__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  background: color-mix(in oklab, var(--accent) 60%, transparent);
  color: var(--ink);
  transition: background-color 150ms;
  font-family: inherit;
}

.avarida-pfilter__btn:hover { background: var(--accent); }

.avarida-pfilter__btn.is-active {
  background: var(--gradient-primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-elegant);
}

.avarida-pfilter__count {
  border-radius: 9999px;
  padding-inline: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.avarida-pfilter__btn.is-active .avarida-pfilter__count {
  background: color-mix(in oklab, var(--primary-foreground) 20%, transparent);
  color: var(--primary-foreground);
}

.avarida-portfolio__grid--full { margin-top: 2.5rem; padding-bottom: 4rem; }

/* Hidden by the JS filter */
.avarida-pcard[hidden] { display: none; }

.avarida-portfolio__empty { padding-block: 6rem; text-align: center; color: var(--muted-foreground); }