/* Full web design portfolio — industry filter bar.
   Grid/card styles are inherited from web-design.css (.wd-dev-grid/.wd-dev-card). */

.pf-all .wd-work-head { margin-bottom: 28px; }

.pf-all-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.pf-all-chip {
  appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 180ms, border-color 180ms, background 180ms;
}
.pf-all-chip:hover {
  color: var(--fg);
  border-color: var(--fg);
}
.pf-all-chip.is-active {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.pf-all-chip-n {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  opacity: 0.55;
}
.pf-all-chip.is-active .pf-all-chip-n { opacity: 0.7; }

.pf-all-count {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 22px;
  letter-spacing: 0.02em;
}
.pf-all-count strong { color: var(--fg); font-weight: 500; }

@media (max-width: 700px) {
  .pf-all-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .pf-all-filters::-webkit-scrollbar { display: none; }
  .pf-all-chip { flex: 0 0 auto; }
}

/* ── Button on /portfolio linking here ─────────────────────────────────── */
.pf-builds-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}