/* TABS FILTER — single flat filter strip ("All" + every taxonomy term).
   JS toggles aria-selected and shows/hides .card-case via data-filter-hidden. */

.tabs-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    max-width: 1280px;
    margin: clamp(48px, 5.5vw, 88px) auto 0;
    padding: 0 32px;
}

.tabs-filter button {
    background: transparent;
    border: 0;
    padding: 6px 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-navy);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: border-color 0.18s ease, opacity 0.18s ease;
    opacity: 0.55;
}
.tabs-filter button:hover { opacity: 1; }
.tabs-filter button[aria-selected="true"] {
    border-bottom-color: var(--clr-navy);
    opacity: 1;
}

@media (max-width: 768px) {
    .tabs-filter { gap: 12px 24px; padding: 0 20px; margin-top: 40px; }
    .tabs-filter button { font-size: 0.72rem; letter-spacing: 0.14em; }
}

/* Cards hidden by the filter — kept in flow so the grid doesn't reflow
   under the user's cursor, but removed visually. */
.card-case[data-filter-hidden] {
    display: none;
}