.projecten-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-5);
}
/* De filterbalk staat op dezelfde rij als de weergave-knoppen (rij/kolom,
   style.css: .weergave-toggle-rij), links uitgelijnd, i.p.v. zoals eerst
   naast de introtekst in een 2-koloms lay-out - dat gaf de (soms lange)
   dropdown-items te weinig ruimte. .weergave-toggle-rij zelf (met de
   standaard justify-content:flex-end) blijft ongewijzigd voor de andere
   overzichten (blog/nieuws/partners) die geen filters hebben. */
.weergave-toggle-rij--met-filters {
    justify-content: space-between;
    /* Bewust flex-start i.p.v. flex-end: de chips-lijst (aangevinkte
       filters) staat ONDER de dropdown-knoppen en maakt de filters-wrapper
       daardoor hoger zodra er iets aangevinkt is. Met flex-end schoof de
       hele rij (incl. de rij/kolom-knoppen) dan mee naar beneden. Met
       flex-start lijnen de dropdown-knoppen en de rij/kolom-knoppen uit op
       hun bovenkant, die niet verandert door de chips eronder. */
    align-items: flex-start;
    gap: var(--spacer-4);
}
.projecten-filters-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 767.98px) {
    .weergave-toggle-rij--met-filters {
        flex-direction: column;
        align-items: stretch;
    }
}
.filter-group h3 {
    font-size: 1rem;
    margin-bottom: var(--spacer-2);
}
.filter-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacer-1);
}
.filter-options label {
    display: flex;
    align-items: center;
    gap: var(--spacer-1);
    font-size: 0.95rem;
    cursor: pointer;
}
#projecten-resultaten {
    transition: opacity .2s ease-in-out;
}
#projecten-resultaten.is-loading {
    opacity: .4;
}
/* De wrapper-div .projecten-laad-meer-wrapper (includes/berichtenoverzicht.php
   en includes/projectenoverzicht.php) heeft zelf geen stijl meer nodig -
   .laad-meer-btn (style.css) centreert en spatieert de knop nu zelf
   (display:flex + margin:auto). */
#projecten-laad-meer.is-verborgen {
    display: none;
}
#projecten-laad-meer:disabled {
    opacity: .5;
    cursor: default;
}

/* --- Dropdown + chips (alternatieve weergave, GEARWURKJE_PROJECT_FILTER_WEERGAVE
   op 'dropdown' - zie includes/projecten.php). De "lijst"-weergave hierboven
   (default) blijft hierdoor ongewijzigd; onderstaande regels gelden alleen
   binnen .projecten-filters--dropdown. */
/* Vier dropdowns naast elkaar (i.p.v. het flex-wrap van .projecten-filters
   hierboven, dat was bedoeld voor de volle-breedte "lijst"-weergave) - op
   kleinere schermen valt dit terug naar 2 en dan 1 kolom, zie de
   media-queries onderaan. */
.projecten-filters--dropdown {
    gap: 0;
}
.projecten-filters--dropdown .filter-dropdowns-rij {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacer-3);
    width: 100%;
}
.projecten-filters--dropdown .filter-group {
    position: relative;
    /* De 4 kolommen van de grid hierboven worden door CSS Grid standaard
       even hoog gerekt (align-items:stretch) - zodra één label (bv. "Jaar
       gereed"/"Status project") naar 2 regels afbreekt, werd de dropdown-
       knop van de andere, kortere kolommen daardoor niet zelf lager
       geduwd en kwamen ze dus hoger te staan dan de weergave-knoppen
       ernaast (die uitlijnen op de onderkant van de hele rij). Door hier
       zelf ook de knop onderaan de kolom te zetten, staan alle vier de
       dropdown-knoppen (en dus ook de weergave-knoppen) altijd op één lijn. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.filter-dropdown-knop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacer-2);
    width: 100%;
    padding: var(--spacer-2) var(--spacer-3);
    border: 1px solid var(--color-primary-trans);
    background-color: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease-in-out;
}
.filter-dropdown-knop:hover,
.filter-dropdown-knop:focus {
    border-color: var(--color-secondary);
}
.filter-dropdown-knop svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
    transition: transform .2s ease-in-out;
}
.filter-group.is-open .filter-dropdown-knop svg {
    transform: rotate(180deg);
}
.projecten-filters--dropdown .filter-options {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--spacer-1);
    max-height: 260px;
    overflow-y: auto;
    background-color: var(--color-bg);
    border: 1px solid var(--color-primary-trans);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
}
.filter-group.is-open .filter-options {
    display: flex;
}
.projecten-filters--dropdown .filter-options li {
    padding: var(--spacer-1) var(--spacer-3);
}
.projecten-filters--dropdown .filter-options label {
    font-size: 0.85rem;
}
.projecten-filters--dropdown .filter-options li:hover {
    background-color: var(--color-primary-trans);
}
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.filter-chips:not(:empty) {
    margin-top: var(--spacer-2);
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-1) var(--spacer-2);
    background-color: var(--color-secondary);
    color: var(--color-bg);
    font-size: 0.85rem;
}
.filter-chip-verwijder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    line-height: 1;
    cursor: pointer;
}
@media (max-width: 992px) {
    .projecten-filters--dropdown .filter-dropdowns-rij {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575.98px) {
    .projecten-filters--dropdown .filter-dropdowns-rij {
        grid-template-columns: 1fr;
    }
}