/* ============================================================================
   Projects listing — filter bar and grid.
   ========================================================================== */

.projects__notice { margin-bottom: var(--s-7); }

/* ---------------------------------------------------------------- filters */
.projects__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5) var(--s-7);
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--border);
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}

.filter-group__label {
    margin-right: var(--s-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.filter {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    min-height: 40px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-600);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: color var(--dur) var(--ease),
                background var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.filter:hover { color: var(--c-black); border-color: var(--gold-300); }

.filter.is-active {
    color: var(--c-white);
    background: var(--c-gold);
    border-color: var(--c-gold);
}

.filter__count {
    font-size: var(--fs-xs);
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- grid */
.projects__grid { margin-top: var(--s-8); }

/* [hidden] needs help against the grid display rule. */
.projects__cell[hidden] { display: none; }

.projects__empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-9);
    padding: var(--s-8);
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

@media (max-width: 767px) {
    .projects__bar { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}