/**
 * Find Wrestlers — filters, results bar, grid cards, list rows
 * File: /wp-content/themes/theme/assets/css/athlete-search.css
 *
 * Loads after search.css (which other pages share), so everything here is
 * scoped to .wf-find / .wf-result / .wf-results and never restyles the
 * legacy .wf-athlete-card or the college search.
 *
 * Mobile first. Breakpoints:
 *   filters  — bottom sheet below 768px (public bar) / 1024px (coach panel)
 *   results  — row cards below 640px; 2 cols from 640px, 3 from 1024px,
 *              4 from 1600px
 *   list     — rows from 1024px; cards below that
 *
 * Colors come from design-system.css tokens, so light mode follows.
 */

.wf-find {
    /* One chip spec for every filter chip: sidebar, public bar, sheet. */
    --wf-chip-height: 44px;            /* tap target */
    --wf-chip-pad:    var(--space-4);  /* 16px each side */
    --wf-chip-gap:    var(--space-2);  /* 8px between chips */
    --wf-chip-font:   var(--text-sm);

    /* Filter spacing: between filters, and around section dividers. */
    --wf-filter-gap:  var(--space-5);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
}

/* ------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------ */

/* Title divider. The header is a .wf-container, so a border on it would run
   through the side gutters; draw the line inside the gutters instead, so it
   spans exactly the content below (sidebar's left edge to results' right
   edge). --wf-find-gutter mirrors .wf-container's padding-inline. */
.wf-find {
    --wf-find-gutter:      var(--space-4);
    --wf-find-divider-gap: var(--space-6); /* title → divider, and divider → content */
}

@media ( min-width: 768px ) {
    .wf-find { --wf-find-gutter: var(--space-8); }
}

.wf-find .wf-search-header {
    position: relative;
    padding-bottom: var(--wf-find-divider-gap);
    border-bottom: 0;
}

/* With nothing under the title (logged-in viewers), its own bottom margin
   would add to the gap above the divider. */
.wf-find .wf-search-header > :last-child {
    margin-bottom: 0;
}

.wf-find .wf-search-header::after {
    content: '';
    position: absolute;
    left: var(--wf-find-gutter);
    right: var(--wf-find-gutter);
    bottom: 0;
    height: 1px;
    background-color: var(--color-border);
}

.wf-find__body {
    display: block;
    padding-top: var(--wf-find-divider-gap);
    padding-bottom: var(--space-16);
}

.wf-find__results {
    min-width: 0;
}

@media ( min-width: 1024px ) {
    /* The list is a data table; give coaches the width for it. */
    .wf-find--coach .wf-find__body {
        display: grid;
        grid-template-columns: 316px minmax( 0, 1fr );
        gap: var(--space-6);
        align-items: start;
        max-width: 1480px;
    }

    .wf-find--coach .wf-search-header {
        max-width: 1480px;
    }
}

/* ------------------------------------------------------------------------
   Filters — bottom sheet (base), bar (public), panel (coach)
   ------------------------------------------------------------------------ */

.wf-find__filters {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-height: 88dvh;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY( 105% );
    visibility: hidden;
    transition: transform var(--transition-base), visibility 0s linear 0.3s;
}

.wf-find__filters.is-open {
    transform: translateY( 0 );
    visibility: visible;
    transition: transform var(--transition-base);
}

.wf-find__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.wf-find__sheet-title {
    margin: 0;
    font-size: var(--text-lg);
}

.wf-find__sheet-close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    cursor: pointer;
}

.wf-find__filters-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--space-4);
}

.wf-find__sheet-foot {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc( var(--space-3) + env( safe-area-inset-bottom, 0px ) );
    border-top: 1px solid var(--color-border-subtle);
    background-color: var(--color-surface);
}

.wf-find__sheet-apply {
    width: 100%;
}

.wf-find__backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: rgba( 0, 0, 0, 0.55 );
}

body.wf-find-sheet-open {
    overflow: hidden;
}

/* The floating feedback button would sit on the sheet's Show button. */
body.wf-find-sheet-open .wf-feedback-btn,
body.wf-find-sheet-open .wf-feedback {
    display: none;
}

/* Groups */

/* Filters in a section are spaced by gap, so a hidden filter leaves no
   hole. The divider sits one --wf-filter-gap below the last filter and
   one above the next section's title. */
.wf-fsection {
    display: flex;
    flex-direction: column;
    gap: var(--wf-filter-gap);
    padding-bottom: var(--wf-filter-gap);
    margin-bottom: var(--wf-filter-gap);
    border-bottom: 1px solid var(--color-border-subtle);
}

.wf-fsection:last-child {
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 0;
}

.wf-fsection .wf-fgroup {
    margin-bottom: 0;
}

.wf-fsection__title {
    margin: 0 0 calc( var(--space-3) - var(--wf-filter-gap) ); /* title sits closer to its first filter */
    font-size: var(--text-lg);
    letter-spacing: 0.06em;
    color: var(--color-text);
}

.wf-fgroup {
    margin-bottom: var(--wf-filter-gap);
}

.wf-fgroup:last-child {
    margin-bottom: 0;
}

.wf-fgroup__label,
.wf-fgroup__btn {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}

/* In the sheet a popover group is just a labeled section. */
.wf-fgroup__btn {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: default;
}

.wf-fgroup__caret {
    display: none;
}

.wf-find__lock {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -2px;
    color: var(--color-text-muted);
}

/* Public bar — from 768px */
@media ( min-width: 768px ) {
    .wf-find--public .wf-find__filters {
        position: static;
        display: block;
        max-height: none;
        margin-bottom: var(--space-4);
        padding: var(--space-3);
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: none;
        transform: none;
        visibility: visible;
        transition: none;
    }

    .wf-find--public .wf-find__sheet-head,
    .wf-find--public .wf-find__sheet-foot {
        display: none;
    }

    .wf-find--public .wf-find__filters-scroll {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
        padding: 0;
        overflow: visible;
    }

    .wf-find--public .wf-fgroup {
        position: relative;
        margin-bottom: 0;
    }

    .wf-find--public .wf-fgroup--inline .wf-fgroup__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect( 0, 0, 0, 0 );
    }

    .wf-find--public .wf-fgroup__btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-height: 44px;
        margin: 0;
        padding: 0 var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        background-color: var(--color-surface-2);
        font-weight: 500;
        cursor: pointer;
    }

    .wf-find--public .wf-fgroup__btn:hover,
    .wf-find--public .wf-fgroup__btn[aria-expanded="true"],
    .wf-find--public .wf-fgroup.has-value .wf-fgroup__btn {
        border-color: var(--color-primary);
    }

    .wf-find--public .wf-fgroup__caret {
        display: inline-block;
    }

    .wf-find--public .wf-fgroup__body {
        display: none;
        position: absolute;
        top: calc( 100% + var(--space-2) );
        left: 0;
        z-index: 50;
        width: 340px;
        max-width: calc( 100vw - var(--space-8) );
        padding: var(--space-4);
        background-color: var(--color-surface-2);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    .wf-find--public .wf-fgroup.is-open .wf-fgroup__body {
        display: block;
    }

    .wf-find.wf-find--public .wf-find__filters .fs-dropdown {
        position: absolute;
    }

    .wf-find--public .wf-fgroup--locked {
        margin-left: auto;
    }

    .wf-find--public .wf-fgroup--locked .wf-fgroup__body {
        left: auto;
        right: 0;
    }
}

/* Coach panel — from 1024px */
@media ( min-width: 1024px ) {
    .wf-find--coach .wf-find__filters {
        /* Runs full length, no inner scroll. search.js adds .is-sticky only
           when the whole panel fits in the viewport. */
        position: static;
        display: block;
        max-height: none;
        overflow: visible;
        padding: var(--space-5);
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: none;
        transform: none;
        visibility: visible;
        transition: none;
    }

    .wf-find--coach .wf-find__filters.is-sticky {
        position: sticky;
        top: calc( var(--wf-site-header-height) + var(--space-4) );
    }

    .wf-find--coach .wf-find__sheet-head,
    .wf-find--coach .wf-find__sheet-foot {
        display: none;
    }

    /* The option list floats over the panel instead of pushing it down. */
    .wf-find.wf-find--coach .wf-find__filters .fs-dropdown {
        position: absolute;
    }

    .wf-find--coach .wf-find__filters-scroll {
        padding: 0;
        overflow: visible;
    }
}

/* Locked "More filters" panel */

.wf-locked__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
}

.wf-locked__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.wf-locked__list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wf-locked__body {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.wf-locked .wf-btn {
    width: 100%;
}

/* ------------------------------------------------------------------------
   FacetWP controls as chips. No sliders anywhere; every target is 44px.
   search.css styles .facetwp-checkbox as a checkbox row — reset that here.
   ------------------------------------------------------------------------ */

.wf-find .facetwp-facet {
    margin-bottom: 0;
}

.wf-find .facetwp-type-checkboxes,
.wf-find .facetwp-type-radio {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wf-chip-gap);
}

.wf-find .facetwp-checkbox,
.wf-find .facetwp-radio,
.wf-find .wf-chip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: var(--wf-chip-height);
    /* !important: search.css pins .facetwp-checkbox padding + margin with
       !important for its checkbox-row look (college search still uses it). */
    margin: 0 !important;
    padding: 0 var(--wf-chip-pad) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-image: none !important;
    background-color: var(--color-surface-2);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--wf-chip-font);
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.wf-find .facetwp-checkbox::before,
.wf-find .facetwp-radio::before,
.wf-find .facetwp-checkbox.checked::before,
.wf-find .facetwp-radio.checked::before {
    content: none;
    display: none;
}

.wf-find .facetwp-checkbox:hover,
.wf-find .facetwp-radio:hover,
.wf-find .wf-chip-btn:hover {
    border-color: var(--color-primary);
    background-color: var(--color-surface-2);
}

.wf-find .facetwp-checkbox.checked,
.wf-find .facetwp-radio.checked,
.wf-find .wf-chip-btn[aria-pressed="true"] {
    border-color: var(--color-primary);
    background-color: var(--color-teal-dim);
    color: var(--color-primary);
    font-weight: 600;
}

.wf-find .facetwp-checkbox.disabled,
.wf-find .facetwp-radio.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.wf-find .facetwp-counter {
    display: none;
}

/* Gender: two chips on the shared spec (single choice). */

/* Weight: chip grid; the set for the picked gender is revealed by search.js */
.wf-weight__set {
    display: none;
}

.wf-weight__prompt {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.wf-find .facetwp-facet-weight-boys,
.wf-find .facetwp-facet-weight-girls {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 56px, 1fr ) );
    gap: var(--wf-chip-gap);
}

.wf-find .facetwp-facet-weight-boys .facetwp-checkbox,
.wf-find .facetwp-facet-weight-girls .facetwp-checkbox {
    padding: 0 !important; /* numbers center in equal grid cells */
    border-radius: var(--radius-md);
}

/* Region shortcuts */
/* Region shortcuts: shared chip spec, sized to their text. Order in
   wf_search_regions() is chosen so they wrap into two rows. */
.wf-regions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wf-chip-gap);
    margin-top: var(--space-3);
}

.wf-find .wf-chip-btn {
    cursor: pointer;
}

/* Searchable multi-selects (FacetWP fSelect: State, Major, At event).
   fSelect.css ships a white box; every surface is restated here from the
   design tokens so no light control shows in either theme. */
.wf-find .fs-wrap {
    display: block;
    width: 100%;
    line-height: 1.3;
}

.wf-find .fs-label-wrap {
    display: flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-2);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.wf-find .fs-wrap:hover .fs-label-wrap,
.wf-find .fs-wrap.fs-open .fs-label-wrap {
    border-color: var(--color-primary);
}

.wf-find .fs-label-wrap .fs-label {
    padding: 0 var(--space-8) 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.wf-find .fs-arrow {
    right: var(--space-3);
    border-top-color: var(--color-text-muted);
}

.wf-find .fs-dropdown {
    left: 0;
    width: 100%;
    margin-top: var(--space-1);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-2);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    z-index: 40;
}

.wf-find .fs-dropdown .fs-options {
    max-height: 264px;
    padding: var(--space-1);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.wf-find .fs-search {
    padding: 0 var(--space-3);
    background-color: var(--color-surface-3);
    border-bottom: 1px solid var(--color-border);
}

.wf-find .fs-wrap .fs-search input {
    min-height: 44px;
    background-color: transparent;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base); /* 16px: no zoom on iOS focus */
}

.wf-find .fs-wrap .fs-search input::placeholder {
    color: var(--color-text-subtle);
}

.wf-find .fs-wrap.multiple .fs-option {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-3) 0 var(--space-10);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-text);
    word-break: normal;
    overflow-wrap: anywhere;
}

.wf-find .fs-option:hover,
.wf-find .fs-option.hl {
    background-color: var(--color-surface-3);
}

.wf-find .fs-wrap.multiple .fs-option.selected {
    background-color: var(--color-teal-dim);
    color: var(--color-primary);
}

.wf-find .fs-wrap.multiple .fs-checkbox {
    width: var(--space-10);
}

.wf-find .fs-wrap.multiple .fs-option .fs-checkbox i {
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
}

.wf-find .fs-wrap.multiple .fs-option.selected .fs-checkbox i {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    box-shadow: inset 0 0 0 3px var(--color-surface-2);
}

.wf-find .fs-no-results {
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* In the bottom sheet the list sits in the flow so the sheet's scroll area
   can't clip it; the desktop layouts float it (see the media queries). */
.wf-find__filters .fs-dropdown {
    position: static;
}

/* ------------------------------------------------------------------------
   Results bar — count · chips · Clear all · Filters · Sort · View
   ------------------------------------------------------------------------ */

.wf-find__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.wf-find__bar-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: 44px;
}

.wf-find__count {
    margin-right: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text);
    white-space: nowrap;
}

.wf-find__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.wf-find__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-left: var(--space-3);
    border: 1px solid var(--color-teal-border, var(--color-primary));
    border-radius: var(--radius-full);
    background-color: var(--color-teal-dim);
    color: var(--color-text);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.wf-find__chip-remove {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
}

.wf-find__chip-remove:hover {
    color: var(--color-text);
}

/* Hidden until a filter is active; search.js reveals it. */
.wf-find__clear {
    display: none;
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.wf-find__bar-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.wf-find__sheet-open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.wf-find__sheet-open-count:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-bg);
    font-size: var(--text-xs);
    font-weight: 700;
}

@media ( min-width: 768px ) {
    .wf-find--public .wf-find__sheet-open { display: none; }
}

@media ( min-width: 1024px ) {
    .wf-find--coach .wf-find__sheet-open { display: none; }
}

.wf-find__sort {
    min-width: 150px;
}

@media ( max-width: 639px ) {
    .wf-find__bar-tools { width: 100%; }
    .wf-find__sort      { flex: 1 1 auto; }
}

.wf-find__sort select {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-8) 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

.wf-find__view {
    display: none;
}

@media ( min-width: 1024px ) {
    .wf-find__view {
        display: inline-flex;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        overflow: hidden;
    }
}

.wf-find__view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.wf-find__view-btn[aria-pressed="true"] {
    background-color: var(--color-teal-dim);
    color: var(--color-primary);
}

/* ------------------------------------------------------------------------
   Grid view — vertical card
   ------------------------------------------------------------------------ */

.wf-results .facetwp-template {
    display: grid;
    grid-template-columns: minmax( 0, 1fr );
    gap: var(--space-4);
}

@media ( min-width: 640px ) {
    .wf-results .facetwp-template { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( min-width: 1024px ) {
    .wf-results .facetwp-template { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}

@media ( min-width: 1600px ) {
    .wf-find--public .wf-results .facetwp-template { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
}

.wf-results .wf-no-results {
    grid-column: 1 / -1;
}

.wf-list-head {
    display: none;
}

.wf-result {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.wf-result:hover {
    border-color: var(--color-primary);
}

.wf-result__link {
    display: grid;
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
    align-content: start;
    gap: var(--space-1) var(--space-2);
    flex: 1 1 auto;
    padding-bottom: var(--space-12);
    color: inherit;
    text-decoration: none;
}

.wf-result__photo {
    position: relative;
    grid-column: 1 / -1;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: calc( var(--radius-lg) - 1px ) calc( var(--radius-lg) - 1px ) 0 0;
    background-color: var(--color-surface-2);
}

.wf-result__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* No photo: initials tile on the brand surface (a placeholder, not a highlight). */
.wf-result__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--color-surface-2);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: var(--text-6xl);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.wf-result__chip {
    position: absolute;
    left: var(--space-2);
    bottom: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background-color: rgba( 13, 17, 23, 0.82 );
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Small corner mark; neutral so it never competes with the finish badge. */
.wf-result__pro {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background-color: rgba( 13, 17, 23, 0.72 );
    color: rgba( 255, 255, 255, 0.85 );
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wf-result__name,
.wf-result__place {
    grid-column: 1 / -1;
    padding: 0 var(--space-3);
}

.wf-result__name {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xl);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.wf-result__place {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.wf-result__col,
.wf-result .wf-result__stat--act {
    display: none;
}

/* Mobile row card only (see the end of this file). The stats wrapper adds
   no box anywhere else, so the card grid and the list row keep each stat
   as their own cell. */
.wf-result__meta,
.wf-result__pro-pill,
.wf-result__video-mark,
.wf-find__count--head {
    display: none;
}

.wf-result__stats {
    display: contents;
}

.wf-result__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin-top: var(--space-2);
    padding: 0 var(--space-3);
}

.wf-result__stat-value {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
}

.wf-result__stat-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

/* Quiz GPA estimate ("3.5–3.99"): one line, never split at the en dash. */
.wf-result__stat--gpa-band .wf-result__stat-value {
    white-space: nowrap;
}

/* The finish reads as a sentence ("3rd at State '26"); give it the row. */
.wf-result__stat--finish {
    grid-column: span 2;
}


.wf-result__icons {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    display: flex;
    gap: var(--space-2);
}

.wf-result__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-2);
    color: var(--color-text-muted);
}

.wf-result__save {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-1);
}

.wf-result__save .wf-save-board {
    position: relative;
    top: auto;
    right: auto;
}

.wf-result__save-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}

.wf-result__save-btn:hover {
    color: var(--color-primary);
}

.wf-result--dropdown-open {
    z-index: 20;
}

/* Logged-out Save prompt (one element, positioned by search.js) */
.wf-save-prompt {
    display: none;
    position: absolute;
    z-index: 60;
    width: 260px;
    max-width: calc( 100vw - var(--space-8) );
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-2);
    box-shadow: var(--shadow-lg);
}

.wf-save-prompt__text {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.wf-save-prompt .wf-btn {
    width: 100%;
}

/* ------------------------------------------------------------------------
   List view — dense rows, from 1024px. Below that the cards above apply.
   ------------------------------------------------------------------------ */

@media ( min-width: 1024px ) {
    .wf-results--list {
        /* Defaults for all twelve columns. search.js rewrites the template
           and the --col-* positions to drop columns that are empty for
           every row on the page. */
        --wf-list-cols: 36px minmax( 110px, 1.5fr ) 36px 44px 40px minmax( 80px, 1.3fr ) 56px 128px 40px 32px 52px 76px;
        --col-thumb: 1; --col-name: 2; --col-weight: 3; --col-class: 4; --col-state: 5; --col-school: 6;
        --col-record: 7; --col-finish: 8; --col-gpa: 9; --col-act: 10; --col-icons: 11; --col-save: 12;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background-color: var(--color-surface);
    }

    .wf-results--list .wf-list-head,
    .wf-results--list .wf-result {
        display: grid;
        grid-template-columns: var(--wf-list-cols);
        align-items: center;
        column-gap: var(--space-2);
        padding: 0 var(--space-3);
    }

    .wf-results--list .wf-list-head {
        position: sticky;
        top: var(--wf-site-header-height);
        z-index: 5;
        min-height: 40px;
        border-bottom: 1px solid var(--color-border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        background-color: var(--color-surface-2);
    }

    .wf-list-head__cell {
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
    }

    .wf-list-head__cell--thumb  { grid-column: var(--col-thumb); }
    .wf-list-head__cell--name   { grid-column: var(--col-name); }
    .wf-list-head__cell--weight { grid-column: var(--col-weight); }
    .wf-list-head__cell--class  { grid-column: var(--col-class); }
    .wf-list-head__cell--state  { grid-column: var(--col-state); }
    .wf-list-head__cell--school { grid-column: var(--col-school); }
    .wf-list-head__cell--record { grid-column: var(--col-record); }
    .wf-list-head__cell--finish { grid-column: var(--col-finish); }
    .wf-list-head__cell--gpa    { grid-column: var(--col-gpa); }
    .wf-list-head__cell--act    { grid-column: var(--col-act); }
    .wf-list-head__cell--icons  { grid-column: var(--col-icons); }
    .wf-list-head__cell--save   { grid-column: var(--col-save); justify-self: end; padding-right: var(--space-3); }

    .wf-list-head__cell { grid-row: 1; }

    button.wf-list-head__cell {
        min-height: 40px;
        cursor: pointer;
    }

    button.wf-list-head__cell:hover,
    .wf-list-head__cell.is-sorted {
        color: var(--color-text);
    }

    .wf-list-head__cell.is-sorted .wf-list-head__arrow::after {
        content: ' \2193';
    }

    .wf-list-head__cell.is-sorted.is-reversed .wf-list-head__arrow::after {
        content: ' \2191';
    }

    .wf-results--list .facetwp-template {
        display: block;
    }

    .wf-results--list .wf-result {
        min-height: 46px;
        border: 0;
        border-bottom: 1px solid var(--color-border-subtle);
        border-radius: 0;
        background-color: transparent;
    }

    .wf-results--list .wf-result:last-child {
        border-bottom: 0;
    }

    .wf-results--list .wf-result:hover {
        background-color: var(--color-surface-2);
    }

    /* The link's children become cells of the row grid. */
    .wf-results--list .wf-result__link {
        display: contents;
    }

    .wf-results--list .wf-result__photo {
        grid-column: var(--col-thumb);
        width: 36px;
        height: 36px;
        aspect-ratio: auto;
        border-radius: var(--radius-full);
    }

    .wf-results--list .wf-result__initials {
        font-size: var(--text-xs);
    }

    .wf-results--list .wf-result__chip,
    .wf-results--list .wf-result__pro,
    .wf-results--list .wf-result__place,
    .wf-results--list .wf-result__stat-label {
        display: none;
    }

    .wf-results--list .wf-result__name {
        grid-column: var(--col-name);
        margin: 0;
        padding: 0;
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
    }

    .wf-results--list .wf-result__col,
    .wf-results--list .wf-result__stat,
    .wf-results--list .wf-result__stat--act {
        display: block;
        grid-row: 1;
        margin: 0;
        padding: 0;
        min-width: 0;
        font-size: var(--text-sm);
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wf-results--list .wf-result__name,
    .wf-results--list .wf-result__photo,
    .wf-results--list .wf-result__icons,
    .wf-results--list .wf-result__save {
        grid-row: 1;
    }

    .wf-results--list .wf-result__col--wt     { grid-column: var(--col-weight); }
    .wf-results--list .wf-result__col--class  { grid-column: var(--col-class); }
    .wf-results--list .wf-result__col--state  { grid-column: var(--col-state); }
    .wf-results--list .wf-result__col--school { grid-column: var(--col-school); color: var(--color-text-muted); }
    .wf-results--list .wf-result__stat--record { grid-column: var(--col-record); }
    .wf-results--list .wf-result__stat--finish { grid-column: var(--col-finish); overflow: visible; }
    .wf-results--list .wf-result__stat--gpa    { grid-column: var(--col-gpa); }
    .wf-results--list .wf-result__stat--act    { grid-column: var(--col-act); }

    .wf-results--list .wf-result__stat-value {
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: 500;
    }

    .wf-results--list .wf-result__icons {
        position: static;
        grid-column: var(--col-icons);
        gap: var(--space-1);
    }

    .wf-results--list .wf-result__icon {
        width: 24px;
        height: 24px;
        background-color: transparent;
    }

    .wf-results--list .wf-result__save {
        position: relative;
        right: auto;
        bottom: auto;
        grid-column: var(--col-save);
        justify-self: end;
    }

    .wf-results--list .wf-no-results {
        padding: var(--space-8);
    }
}

/* Wide coach grid (toggle to grid at 1600px+) */
@media ( min-width: 1600px ) {
    .wf-find--coach .wf-results--grid .facetwp-template { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
}

/* ------------------------------------------------------------------------
   Mobile — below 640px. Every viewer, either view: a horizontal row card
   (thumb left; name + Pro, meta line, stat strip right) so a coach sees
   four to five wrestlers per screen. Same markup as the card above.
   ------------------------------------------------------------------------ */

@media ( max-width: 639px ) {
    /* Header: title and count sit close together; no divider. */
    .wf-find .wf-search-header {
        padding-block: var(--space-4) 0;
    }

    .wf-find .wf-search-header::after {
        content: none;
    }

    /* Title and count on one line; the results-bar count is hidden. */
    .wf-find__titlebar {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .wf-find .wf-search-header__title {
        margin: 0;
        font-size: var(--text-2xl);
        white-space: nowrap;
    }

    .wf-find__count--head {
        display: block;
        margin: 0;
        font-size: var(--text-base);
        color: var(--color-text-muted);
    }

    .wf-find__bar-main > .wf-find__count {
        display: none;
    }

    .wf-find .wf-search-header__sub,
    .wf-find .wf-search-coach-cta {
        margin: var(--space-2) 0 0;
    }

    .wf-find__body {
        padding-top: var(--space-2);
        /* Room under the last card for the floating feedback button. */
        padding-bottom: calc( var(--space-20) + env( safe-area-inset-bottom, 0px ) );
    }

    /* Results bar: count + chips scroll away; Filters + Sort stick under
       the site header. The bar box drops out so the tools row can stick
       inside the (tall) results column instead of the (short) bar. */
    .wf-find__bar {
        display: contents;
    }

    .wf-find__bar-main {
        min-height: 0;
    }

    /* Only takes room once a filter chip or Clear all shows. */
    .wf-find__bar-main:has( .wf-find__chip, .wf-find__clear[style*="inline"] ) {
        margin-bottom: var(--space-2);
    }

    /* Chips scroll sideways on one row, Clear all at its end. */
    .wf-find__bar-main {
        flex-wrap: nowrap;
    }

    .wf-find__chips {
        flex: 0 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .wf-find__clear {
        flex-shrink: 0;
    }

    .wf-find__chips::-webkit-scrollbar {
        display: none;
    }

    .wf-find__bar-tools {
        position: sticky;
        top: var(--wf-site-header-height);
        z-index: 30; /* over cards and open Save menus; under the sheet (999+) */
        width: auto; /* full bleed: the negative margins widen it */
        margin: 0 calc( -1 * var(--wf-find-gutter) ) var(--space-3);
        padding: var(--space-2) var(--wf-find-gutter);
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-border-subtle);
    }

    /* Rows */
    .wf-results .facetwp-template {
        gap: var(--space-2);
    }

    .wf-result__link {
        display: grid;
        grid-template-columns: 88px minmax( 0, 1fr );
        grid-template-rows: auto auto auto; /* a 1fr row took the thumb's full height */
        column-gap: var(--space-3);
        row-gap: 2px;
        align-items: start;
        padding: var(--space-3);
    }

    .wf-result__photo {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 88px;
        height: 88px;
        aspect-ratio: auto;
        border-radius: var(--radius-lg);
    }

    .wf-result__initials {
        font-size: var(--text-2xl);
    }

    .wf-result__chip,
    .wf-result__pro,
    .wf-result__place,
    .wf-result__icons {
        display: none;
    }

    .wf-result__name,
    .wf-result__meta,
    .wf-result__stats {
        grid-column: 2;
        min-width: 0;
        padding: 0;
    }

    .wf-result__name {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        grid-row: 1;
        margin: 0;
        font-size: var(--text-lg);
        line-height: 1.2;
    }

    /* Clear the Save button in the top-right corner. */
    .wf-result:has( .wf-result__save ) .wf-result__name {
        padding-right: var(--space-10);
    }

    .wf-result__name-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wf-result__pro-pill {
        display: inline-block;
        flex-shrink: 0;
        padding: 2px 6px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .wf-result__video-mark {
        display: inline-flex;
        flex-shrink: 0;
        color: var(--color-text-muted);
    }

    .wf-result__meta {
        display: block;
        grid-row: 2;
        overflow: hidden;
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Stat strip: only the stats that have a value render, so a missing one
       leaves no slot. The finish badge gives way first on a narrow row. */
    /* Fixed columns, so Record, Best Finish and GPA line up from card to
       card. Each stat keeps its own column; a missing one leaves its column
       empty rather than shifting the others. */
    .wf-result__stats {
        display: grid;
        grid-template-columns: 52px minmax( 0, 1fr ) 36px;
        column-gap: var(--space-2);
        align-items: start;
        grid-row: 3;
        margin-top: var(--space-1);
    }

    .wf-result__stat {
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .wf-result__stat--record { grid-column: 1; }
    .wf-result__stat--finish { grid-column: 2; }
    .wf-result__stat--gpa    { grid-column: 3; }

    /* A GPA estimate ("3.5–3.99") is wider than a GPA ("3.85"): that card's
       GPA column sizes to it, and the finish badge gives way (ellipsis). */
    .wf-result__stats:has( .wf-result__stat--gpa-band ) {
        grid-template-columns: 52px minmax( 0, 1fr ) auto;
    }

    .wf-result__stat-label {
        white-space: nowrap;
    }

    .wf-result__stat {
        gap: 0;
    }

    .wf-result__stat-value {
        font-size: var(--text-base);
        line-height: 1.25;
    }

    .wf-result__stat--finish .wf-finish {
        max-width: 100%;
        padding: 1px 6px;
        font-size: 11px;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Save: icon only, top-right corner, full 44px target. */
    .wf-result__save {
        top: 0;
        right: 0;
        bottom: auto;
    }

    .wf-result__save-btn {
        justify-content: center;
        width: 44px;
        padding: 0;
    }

    .wf-result__save .wf-save-board__btn {
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-color: transparent;
        background-color: transparent;
    }

    .wf-result__save-btn span,
    .wf-result__save .wf-save-board__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect( 0, 0, 0, 0 );
        white-space: nowrap;
    }
}