/*
 * Filter chips. One visible row; scrolls sideways inside itself on mobile (never widens the page); wraps from 768px.
 *   <ul class="c-chips" aria-label="Filter jobs">
 *     <li><a class="c-chip" href="?x=1" aria-current="true">Saudi Arabia <span class="c-chip__count">120</span></a></li>
 *     <li><button type="button" class="c-chip" aria-pressed="false">Nurse</button></li> ...
 * (or <div class="c-chips" role="group" aria-label="..."> with chips as direct children)
 * Active state: aria-current="true" | aria-pressed="true" | .is-active. Chips may be <a>, <button> or <label>.
 */
.c-chips { display: flex; flex-wrap: nowrap; gap: var(--space-2); margin: 0; padding: var(--space-1); list-style: none; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.c-chips::-webkit-scrollbar { display: none; }
.c-chips > li { display: contents; }
.c-chip { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); font: inherit; font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); cursor: pointer; text-decoration: none; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.c-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.c-chip:is([aria-current="true"], [aria-pressed="true"], .is-active) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.c-chip__count { font-size: var(--fs-12); opacity: .8; }
@media (min-width: 768px) { .c-chips { flex-wrap: wrap; overflow-x: visible; } }