/*
 * Velora sections — category filter of the preview listing pages (VeloraPreviewListing::filterBar).
 * Colours come from the section tone (.vws--light|soft|dark), so the chips follow the template.
 */
.vws.vws-listing-filter { padding-top: var(--vws-pt, clamp(28px, 4vw, 48px)); padding-bottom: 0; }
.vws.vws-listing-filter + .vws-listing { padding-top: var(--vws-pt, clamp(24px, 3vw, 40px)); }
.vws .vws-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.vws .vws-fchip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border: 1px solid var(--_ln); border-radius: 999px; background: transparent; color: var(--_fg);
    font: 600 .92rem/1 var(--_fb); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.vws .vws-fchip:hover { border-color: var(--_fg); }
.vws .vws-fchip[aria-pressed="true"] { background: var(--_fg); border-color: var(--_fg); color: var(--_bg); }
.vws .vws-fchip:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }
.vws .vws-fchip__n { font-weight: 500; opacity: .7; font-size: .82em; }
@media (max-width: 640px) {
    .vws .vws-fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--_gutter)); padding-inline: var(--_gutter); }
    .vws .vws-fchips::-webkit-scrollbar { display: none; }
    .vws .vws-fchip { flex: none; }
}
/* A listing page shows every item, also on phones (home sections cap causes / event cards at three there). */
.vws.vws-listing .vwl-cause:nth-child(n+4), .vws.vws-listing .vwl-evcard:nth-child(n+4) { display: flex; }