/* ==========================================================================
   LF PROJECTS FILTER BAR
   ========================================================================== */

.lf-projects-filter-bar {
    margin-bottom: 30px;
}

.lf-projects-filter-bar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

/*
 * EQUAL-WIDTH COLUMNS: JS SETS --lf-field-count ON THE BAR ELEMENT.
 * EACH FIELD TAKES 1 / var(--lf-field-count) OF THE ROW MINUS GAPS.
 * FALLBACK OF 4 MATCHES THE DEFAULT (SEARCH + CATEGORY + STAGE + BUTTON).
 */
.lf-projects-filter-bar__field {
    flex: 1 1 calc((100% - (var(--lf-field-count, 4) - 1) * 12px) / var(--lf-field-count, 4));
    min-width: 0;
    box-sizing: border-box;
}

/* INPUTS AND SELECTS FILL THEIR COLUMN */
.lf-projects-filter__search,
.lf-projects-filter__category,
.lf-projects-filter__stage {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.4;
}

.lf-projects-filter__search:focus,
.lf-projects-filter__category:focus,
.lf-projects-filter__stage:focus {
    outline: 2px solid var(--lf-btn-color, #0095d3);
    outline-offset: 1px;
    border-color: var(--lf-btn-color, #0095d3);
}

/*
 * BUTTON COLOR IS DRIVEN BY --lf-btn-color WHICH JS SETS ON THE BAR ELEMENT.
 * FALLS BACK TO THE SAME BLUE USED AS THE DEFAULT ACCENT COLOR.
 */
.lf-projects-filter__btn {
    display: block;
    width: 100%;
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    background-color: var(--lf-btn-color, #0095d3);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
    line-height: 1.4;
}

/* DARKEN ON HOVER WITHOUT NEEDING A SECOND COLOR VALUE */
.lf-projects-filter__btn:hover {
    filter: brightness(0.85);
}

.lf-projects-filter__btn:focus {
    outline: 2px solid var(--lf-btn-color, #0095d3);
    outline-offset: 2px;
    filter: brightness(0.9);
}

/* ==========================================================================
   RESULTS WRAPPER
   ========================================================================== */

.lf-projects-results {
    transition: opacity 0.2s ease;
}

.lf-projects-results--loading {
    opacity: 0.4;
    pointer-events: none;
}

.projects-no-results {
    padding: 20px 0;
    font-style: italic;
}

/* ==========================================================================
   RESPONSIVE — STACK TO FULL WIDTH BELOW 600px
   ========================================================================== */

@media (max-width: 600px) {
    .lf-projects-filter-bar__field {
        flex: 1 1 100%;
    }
}