/* Topic filter above the Visaify blog grid (driven by js/blog-filter.js). */
.vfy-filter-bar {
  /* width:0 + min-width:100% keeps the chip row from widening the page on phones */
  width: 0; min-width: 100%;
  display: flex; gap: 8px; margin: 0 0 22px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.vfy-filter-bar::-webkit-scrollbar { display: none; }
.vfy-filter-chip {
  flex: none; font: 600 13px/1 Inter, system-ui, sans-serif;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  color: var(--vfy-tx2); background: var(--vfy-sur);
  border: 1px solid var(--vfy-brd2);
  transition: background .2s, color .2s, border-color .2s;
}
.vfy-filter-chip:hover { color: var(--vfy-tx1); border-color: var(--vfy-acc); }
.vfy-filter-chip:focus-visible { outline: 2px solid var(--vfy-acc); outline-offset: 2px; }
.vfy-filter-chip.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--vfy-acc), var(--vfy-acc3));
}
.vfy-blog-card[hidden] { display: none; }
.vfy-filter-empty { color: var(--vfy-tx2); font-size: 14px; padding: 12px 0; }