/* ==========================================================================
   KG Resource Library — Resource Finder block
   Scope: finder shell, controls, active filters, result count, pagination.
   Card/list styling remains owned by the existing resource list CSS.
   ========================================================================== */

.kg-resource-finder-block,
.kg-resource-finder,
.kg-resource-finder *,
.kg-resource-finder *::before,
.kg-resource-finder *::after {
    box-sizing: border-box;
}

.kg-resource-finder {
    /* Shared brand-token control surface. The finder shell (controls, filters,
       pagination) sits outside the .kg-resource-library results wrapper, so the
       tokens defined there are not in scope here. Mirroring the KG defaults
       keeps the current appearance while routing the shell through the same
       variables as the card/list system. */
    --kg-resource-accent: #0d223f;
    --kg-resource-accent-strong: #ed1b2f;
    --kg-resource-accent-dark: #09182c;

    --kg-resource-surface: #ffffff;
    --kg-resource-surface-muted: #f8fafc;

    --kg-resource-border: #d9dee7;
    --kg-resource-border-strong: #b8c0cc;

    --kg-resource-text: #111827;
    --kg-resource-muted: #5f6b7a;

    --kg-resource-button-text: #ffffff;

    display: grid;
    gap: 1.25rem;
    width: 100%;
}

/* Finder-shell brand overrides. The shell (search submit, pagination, chips,
   focus/border accents) sits outside the .kg-resource-library results wrapper,
   so its accent tokens are set here. Values mirror the 8.1.2 card/list brand
   palettes; every shell control keeps reading var(--kg-resource-*), so future
   brand changes happen by editing these token values only. KG keeps the
   defaults defined above and needs no override. Surface/border/text tokens are
   brand-neutral in 8.1.2 and intentionally inherit the defaults. */

.kg-resource-finder--brand-pw {
    --kg-resource-accent: #003C4B;
    --kg-resource-accent-strong: #E13A3E;
    --kg-resource-accent-dark: #002a34;
}

.kg-resource-finder--brand-pcn {
    --kg-resource-accent: #1a1a1a;
    --kg-resource-accent-strong: #3d3d3d;
    --kg-resource-accent-dark: #000000;
}

.kg-resource-finder--brand-neutral {
    --kg-resource-accent: #374151;
    --kg-resource-accent-strong: #6b7280;
    --kg-resource-accent-dark: #272e39;
}

.kg-resource-finder--brand-crru {
    --kg-resource-accent: #1e4327;
    --kg-resource-accent-strong: #8ab732;
    --kg-resource-accent-dark: #152f1b;
}

.kg-resource-finder__controls {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--kg-resource-border);
    border-radius: 16px;
    background: var(--kg-resource-surface-muted);
}

.kg-resource-finder__form,
.kg-resource-finder__form-inner {
    display: grid;
    gap: 0.9rem;
}

.kg-resource-finder__search {
    display: grid;
    gap: 0.35rem;
}

.kg-resource-finder__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.75rem;
    align-items: end;
}

.kg-resource-finder__filter {
    display: grid;
    gap: 0.35rem;
}

.kg-resource-finder__label {
    color: var(--kg-resource-text);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.kg-resource-finder__search-input,
.kg-resource-finder__select {
    width: 100%;
    min-height: 2.65rem;
    border: 1px solid var(--kg-resource-border-strong);
    border-radius: 10px;
    background: var(--kg-resource-surface);
    color: var(--kg-resource-text);
    font: inherit;
    font-size: 0.95rem;
}

.kg-resource-finder__search-input {
    padding: 0.65rem 0.8rem;
}

.kg-resource-finder__select {
    padding: 0.55rem 0.7rem;
}

.kg-resource-finder__search-input:focus,
.kg-resource-finder__select:focus {
    outline: 3px solid var(--kg-resource-accent-strong);
    outline-offset: 2px;
    border-color: var(--kg-resource-accent);
}

.kg-resource-finder__submit {
    min-height: 2.65rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--kg-resource-accent);
    border-radius: 10px;
    background: var(--kg-resource-accent);
    color: var(--kg-resource-button-text);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.kg-resource-finder__submit:hover,
.kg-resource-finder__submit:focus {
    background: var(--kg-resource-accent-dark);
    border-color: var(--kg-resource-accent-dark);
}

.kg-resource-finder__submit:focus-visible {
    outline: 3px solid var(--kg-resource-accent-strong);
    outline-offset: 2px;
}

.kg-resource-finder__active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.kg-resource-finder__active-filters-label,
.kg-resource-finder__result-count {
    color: var(--kg-resource-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.kg-resource-finder__active-filter-list,
.kg-resource-finder__pagination-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kg-resource-finder__active-filter-chip,
.kg-resource-finder__clear-filters,
.kg-resource-finder__pagination a,
.kg-resource-finder__pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--kg-resource-border);
    border-radius: 999px;
    background: var(--kg-resource-surface);
    color: var(--kg-resource-accent);
    font-size: 0.85rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
}

.kg-resource-finder__active-filter-remove {
    margin-inline-start: 0.35rem;
    font-weight: 800;
}

.kg-resource-finder__clear-filters {
    border-color: transparent;
    background: transparent;
    color: var(--kg-resource-muted);
    text-decoration: underline;
}

.kg-resource-finder__result-count {
    margin: 0;
}

.kg-resource-finder__results {
    display: grid;
    gap: 1rem;
}

.kg-resource-finder__empty {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--kg-resource-border);
    border-radius: 10px;
    background: var(--kg-resource-surface-muted);
    color: var(--kg-resource-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.kg-resource-finder__pagination {
    display: flex;
    justify-content: center;
}

.kg-resource-finder__pagination .current {
    border-color: var(--kg-resource-accent);
    background: var(--kg-resource-accent);
    color: var(--kg-resource-button-text);
}

@media (max-width: 760px) {
    .kg-resource-finder__controls {
        padding: 0.9rem;
    }

    .kg-resource-finder__filters {
        grid-template-columns: 1fr;
    }

    .kg-resource-finder__submit {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kg-resource-finder__submit {
        transition: none;
    }
}