/**
 * The agency ranking.
 *
 * Auto-loaded by inc/enqueue.php because the filename matches the template
 * slug. Only what is unique to this page lives here — hero, filter bar and the
 * control that reveals the rest of the list. The agency record itself sits in
 * style.css section 8, because the dienstpagina's list agencies too.
 */

/* --- Hero ---------------------------------------------------------------- */

.comparisonHeroInner {
    max-width: 54rem;
    margin-top: var(--space6);
}

.comparisonIntro {
    margin-top: var(--space5);
}

.comparisonStats {
    margin-top: var(--space8);
    padding-top: var(--space6);
    border-top: 1px solid var(--colorBorder);
}

.comparisonStats .statValue {
    font-size: var(--textXl);
}

/* --- Filter bar ----------------------------------------------------------
   Sticks under the site header rather than at the top of the viewport, so the
   two never overlap. */

.filterBar {
    position: sticky;
    top: 4.5rem;
    z-index: 30;
    padding-block: var(--space3);
    background-color: color-mix(in srgb, var(--colorPaper) 92%, transparent);
    backdrop-filter: blur(12px);
    border-block: 1px solid var(--colorBorder);
}

.filterBarInner {
    display: grid;
    gap: var(--space3) var(--space4);
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    align-items: end;
}

.filterLabel {
    display: block;
    margin-bottom: var(--space1);
    font-size: var(--textXs);
    font-weight: var(--weightMedium);
    letter-spacing: var(--trackingWide);
    text-transform: uppercase;
    color: var(--colorInkSubtle);
}

.filterBar .fieldSelect {
    padding-block: var(--space2);
}

.filterStatus {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space2);
    padding-bottom: var(--space1);
}

.filterCount {
    font-family: var(--fontMono);
    font-size: var(--textXs);
    font-variant-numeric: tabular-nums;
    color: var(--colorInkMuted);
    white-space: nowrap;
}

@media (max-width: 48rem) {
    .filterStatus {
        grid-column: 1 / -1;
        justify-content: space-between;
    }
}

/* --- Methodology ------------------------------------------------------------ */

.methodologyCallout {
    border-color: var(--colorBrandBorder);
    background-color: var(--colorBrandSoft);
}

/* --- Reveal the rest of the list ------------------------------------------
   Only ever shown by JavaScript; without it the full list is already on the
   page and there is nothing to reveal. */

.agencyListMore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space3);
    margin-top: var(--space6);
    padding-top: var(--space6);
    border-top: 1px solid var(--colorBorder);
}

.agencyListMoreCount {
    font-family: var(--fontMono);
    font-size: var(--textXs);
    font-variant-numeric: tabular-nums;
    color: var(--colorInkSubtle);
}