/*
* Propseller Top Agents - [top_agents_grid] shortcode
* Layered on top of style.css, which owns the agent card itself: the grid card and the carousel
* card are the same Figma component, so only the handful of rules that genuinely differ are
* overridden here.
* Colors and fonts reference the child theme variables declared in listify-child/style.css
* Figma: Website Design (Master) node 8418-50655 (desktop), 8418-51249 (mobile)
*/

.top-agents-grid-section {
    position: relative;

    /* Height of the sticky site header — the desktop filter drawer starts below it */
    --tag-header-height: 75px;
}

.tag-container {
    max-width: 1140px;
    margin: 0 auto;
}

.tag-heading {
    margin: 0 0 30px;
    font-family: 'Source Serif Pro', serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--onyx-black, #221F2B);
}

/* Visually hidden but still announced */
.tag-screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.tag-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Search, Filters and Sort By share the same 51px bordered field */
.tag-search,
.tag-field {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    height: 51px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #EFEFEF; /* Mercury Grey */
    border-radius: 3px;
    background: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    /* Explicit, because .tag-search is a <label> and themes tend to bold those */
    font-weight: 400;
    line-height: 1.5;
    /* Iron Grey: the design uses the placeholder tone for the field labels too */
    color: #85868D;
    text-align: left;
}

.tag-field {
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.tag-search {
    flex: 1;
    min-width: 0;
    cursor: text;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Focus state from the design: Cobalt Blue border on a Metallic Blue fill.
   :focus-within rather than :focus so the whole field lights up, not just the inner input. */
.tag-search:focus-within {
    border-color: #3F5CD6; /* Cobalt Blue */
    background: #ECEFFB; /* Metallic Blue */
}

/* The design draws every toolbar icon in Onyx Black even though the labels stay Iron Grey */
.tag-icon {
    flex-shrink: 0;
    display: block;
    color: var(--onyx-black, #221F2B);
}

.top-agents-grid-section .tag-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    color: var(--onyx-black, #221F2B);
    border: none;
    border-radius: 0;
}

.tag-search-input:focus {
    outline: none;
    box-shadow: none;
}

.tag-search-input::placeholder {
    color: #85868D;
    opacity: 1;
    transition: color 0.15s ease;
}

/* "Search by name" is a prompt, not a value: it clears the moment the field is focused and comes
   back on blur while the field is still empty. Transparent rather than display:none so the caret
   keeps its position and the field does not reflow. */
.tag-search-input:focus::placeholder {
    color: transparent;
}

/* The UA's own clear button would sit on top of the design's 6px right inset */
.tag-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.tag-field-label {
    white-space: nowrap;
    transition: color 0.2s ease;
}

.tag-filters,
.tag-sort {
    position: relative;
    flex-shrink: 0;
}

.tag-filters .tag-field {
    width: 142px;
}

.tag-sort .tag-field {
    width: 200px;
}

/*
* Hover and focus get the same treatment on all three fields: Cobalt Blue border, and the resting
* Iron Grey label darkens to Onyx Black. Only the search field adds the Metallic Blue fill, and
* only on focus — the design draws that for the active field, not a hovered one.
*
* :focus rather than :focus-visible because a mouse click on a button does not match
* :focus-visible, and clicking is how these get opened.
*/
.tag-search:hover,
.tag-field:hover,
.tag-field:focus,
.tag-field[aria-expanded="true"] {
    border-color: var(--propseller-blue, #3F5CD6);
}

.tag-field:hover .tag-field-label,
.tag-field:focus .tag-field-label,
.tag-field[aria-expanded="true"] .tag-field-label {
    color: var(--onyx-black, #221F2B);
}

/*
* The placeholder is the search field's equivalent of those labels. :not(:focus-within) keeps it out
* of the way of :focus::placeholder above — this selector is the more specific of the two, so
* without the guard it would win while the field is both focused and hovered, and the placeholder
* would reappear in black instead of clearing.
*/
.tag-search:hover:not(:focus-within) .tag-search-input::placeholder {
    color: var(--onyx-black, #221F2B);
}

.tag-field:focus-visible {
    outline: 2px solid var(--propseller-blue, #3F5CD6);
    outline-offset: 2px;
}

/* Count badge on the Filters button */
.tag-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--propseller-blue, #3F5CD6);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

.tag-filters-count[hidden] {
    display: none;
}

/* Body-level, so the page behind the mobile bottom sheet cannot scroll */
body.tag-sheet-open {
    overflow: hidden;
}

/* ── Sort dropdown ──────────────────────────────────────────────────────── */

.tag-sort-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 10px);
    left: 0;
    width: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.tag-sort-panel[hidden] {
    display: none;
}

.tag-sort-option {
    margin: 0;
    padding: 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: var(--onyx-black, #221F2B);
    cursor: pointer;
}

.tag-sort-option:hover {
    background: rgba(63, 92, 214, 0.05);
}

.tag-sort-option.is-selected {
    background: var(--metallic-blue, #ECEFFB);
    color: var(--propseller-blue, #3F5CD6);
}

/* ── Filter panel ───────────────────────────────────────────────────────── */

/*
* On desktop the panel is a drawer pinned to the right edge, sliding in from off-screen. It
* starts below the sticky site header rather than under it, so the header stays visible and
* clickable while the drawer is open — hence the offset, not a plain `top: 0`.
*
* agents-grid.js only ever toggles the `hidden` attribute, and `display: none` cannot be
* animated — so the panel stays displayed and hides itself with `visibility` plus a transform
* instead. `visibility: hidden` still takes it out of the accessibility tree and out of
* hit-testing, which `opacity: 0` alone would not, and its transition is delayed by the length
* of the slide so the panel stays visible all the way out on close.
*
* The mobile block at the bottom of this file re-points the same rules at a bottom sheet; only
* the geometry and the transform's axis differ.
*/
.tag-filters-panel {
    position: fixed;
    z-index: 1001;
    top: var(--tag-header-height, 75px);
    right: 0;
    bottom: 0;
    left: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 430px;
    max-width: 100vw;
    border-left: 1px solid #EFEFEF;
    background: #fff;
    box-shadow: -5px 0 30px rgba(34, 31, 43, 0.12);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

/* Kept in flow so the slide can animate; `visibility` above does the hiding */
.tag-filters-panel[hidden] {
    display: flex;
}

/* `transform: none` rather than a per-axis value, so mobile's translateY reuses this rule */
.tag-filters-panel:not([hidden]) {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {

    .tag-filters-panel,
    .tag-filters-panel:not([hidden]) {
        transition-duration: 0s;
        transition-delay: 0s;
    }
}

.tag-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding: 20px 24px;
    border-bottom: 1px solid #EFEFEF;
}

.tag-filters-title {
    margin: 0;
    font-family: 'Source Serif Pro', serif;
    font-size: 24px !important;
    font-weight: 400;
    line-height: 1.5 !important;
    color: var(--onyx-black, #221F2B);
}

.tag-filters-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--onyx-black, #221F2B);
    cursor: pointer;
}

/* The groups scroll; the header and Clear All stay put */
.tag-filters-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tag-filter-group {
    padding: 20px 24px;
}

.tag-filter-group + .tag-filter-group {
    border-top: 1px solid #EFEFEF;
}

.tag-filter-group-heading {
    margin: 0;
}

body .tag-filter-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--onyx-black, #221F2B);
    text-align: left;
    cursor: pointer;
}

.tag-chevron {
    flex-shrink: 0;
    /* The asset points right; -90deg gives the design's "open" chevron */
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
    height: 12px;
}

.tag-filter-group-toggle[aria-expanded="false"] .tag-chevron {
    transform: rotate(90deg);
}

.tag-filter-options {
    margin-top: 16px;
}

/* The options are a sibling of the heading, not of the button inside it, so the collapsed state
   rides on the group wrapper — agents-grid.js sets it alongside aria-expanded */
.tag-filter-group.is-collapsed .tag-filter-options {
    display: none;
}

.tag-filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 51px;
    margin: 0;
    padding: 14px 0;
    cursor: pointer;
}

.tag-filter-option-main {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* The real checkbox stays focusable; .tag-checkbox is what gets painted */
.tag-filter-check {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.tag-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 1px solid #2B2935; /* Coal Black */
    border-radius: 6px;
    background: #fff;
    color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tag-filter-check:checked + .tag-checkbox {
    border-color: var(--onyx-black, #221F2B);
    background: var(--onyx-black, #221F2B);
    color: #fff;
}

.tag-filter-check:focus-visible + .tag-checkbox {
    outline: 2px solid var(--propseller-blue, #3F5CD6);
    outline-offset: 2px;
}

.tag-filter-option-label,
.tag-filter-option-count {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.2;
}

.tag-filter-option-label {
    color: var(--onyx-black, #221F2B);
}

.tag-filter-option-count {
    flex-shrink: 0;
    color: var(--ash-grey, #6B6D84);
}

/* Gender: one-of-three segmented control */
.tag-filter-options--segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
}

.tag-segment {
    flex: 1 0 0;
    min-width: 0;
    box-sizing: border-box;
    height: 51px;
    padding: 16px;
    border: 1px solid rgba(34, 31, 43, 0.1);
    border-radius: 3px;
    background: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--onyx-black, #221F2B);
    text-align: center;
    cursor: pointer;
}

.tag-segment.is-selected {
    background: var(--propseller-blue, #3F5CD6);
    color: #fff;
}

.tag-filters-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 20px 24px;
    border-top: 1px solid #EFEFEF;
}

body .tag-filters-clear {
    padding: 0 0 3px;
    text-decoration: underline;
    border: 0 none;
    background: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--onyx-black, #221F2B);
    cursor: pointer;
}

/* ── Grid ───────────────────────────────────────────────────────────────── */

.top-agents-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* The card is style.css's; only the design's wider shadow and the link reset differ */
.top-agents-grid .top-agents-card {
    box-shadow: 0 0 50px rgba(34, 31, 43, 0.1);
}

/*
* Card links are never underlined, in any state.
*
* The child theme underlines every link in the page body with `#content a` — an ID selector that
* no class-only rule here can outrank, and the shortcode can be placed outside #content too, so
* matching that ID is not an option either. !important is the narrowest fix available.
*
* The subtree is covered as well because an anchor draws its underline across everything inside
* it: a child setting `text-decoration: none` does not remove a line its ancestor draws.
*/
.top-agents-grid a.top-agents-card,
.top-agents-grid a.top-agents-card:hover,
.top-agents-grid a.top-agents-card:focus,
.top-agents-grid a.top-agents-card * {
    text-decoration: none !important;
}

/* Every text element in the card sets its own colour, so this only guards the odd one out */
.top-agents-grid a.top-agents-card,
.top-agents-grid a.top-agents-card:hover,
.top-agents-grid a.top-agents-card:focus {
    color: inherit;
}

/* A click focuses the card and draws the browser's ring; only keyboard focus should show it */
.top-agents-grid a.top-agents-card:focus:not(:focus-visible) {
    outline: none;
}

.top-agents-grid .top-agents-card[hidden] {
    display: none;
}

/* Two lines per label, the way the design breaks them */
.top-agents-grid .top-agents-stat-label {
    white-space: normal;
}

/*
* The card is 60px narrower than the carousel's and the photo sits in its right half, so the text
* column runs out before the agent's shoulder.
*/
.top-agents-grid .top-agents-region,
.top-agents-grid .top-agents-name,
.top-agents-grid .top-agents-job-title {
    max-width: 210px;
}

/*
* The design ellipsises the name and the job title, but a half-shown line is worse than a two-line
* one, so nothing on this card truncates — they wrap instead. The details block is anchored to the
* bottom of the photo, so the extra lines grow upward and nothing below them moves.
*/
.top-agents-grid .top-agents-name,
.top-agents-grid .top-agents-job-title {
    overflow-wrap: break-word;
}

/* style.css clamps the quote to two lines for the carousel; the directory card shows all of it */
.top-agents-grid .top-agents-quote p {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}

.tag-empty {
    margin: 40px 0 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ash-grey, #6B6D84);
    text-align: center;
}

.tag-empty[hidden] {
    display: none;
}

.top-agents-grid .top-agents-photo img {
    right: -30px;
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */

/*
* Three columns only get the room they need once the container hits its 1140px maximum; below
* that the cards squeeze against the photo, so the grid drops to two.
*/
@media (min-width: 768px) and (max-width: 1199px) {

    .top-agents-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    .tag-heading {
        font-size: 28px;
    }

    /* Search on its own row, then Filters + Sort By side by side */
    .tag-toolbar {
        flex-wrap: wrap;
        row-gap: 16px;
    }

    .tag-search {
        flex: 1 0 100%;
    }

    .tag-filters {
        flex: 1;
        min-width: 0;
    }

    .tag-filters .tag-field {
        width: 100%;
    }

    .top-agents-grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 50px;
    }

    /*
    * The desktop drawer becomes a bottom sheet over a dimmed page, sliding up from below the
    * viewport. The hide-and-animate mechanics live on the base rules near the top of this file;
    * only the geometry and the transform's axis change here.
    */
    .tag-backdrop {
        position: fixed;
        z-index: 1000;
        inset: 0;
        background: rgba(34, 31, 43, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    .tag-backdrop[hidden] {
        display: block;
    }

    .tag-backdrop:not([hidden]) {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, visibility 0s;
    }

    .tag-filters-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: 70vh;
        border: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -5px 30px rgba(34, 31, 43, 0.2);
        transform: translateY(100%);
    }

    @media (prefers-reduced-motion: reduce) {

        .tag-backdrop,
        .tag-backdrop:not([hidden]) {
            transition-duration: 0s;
            transition-delay: 0s;
        }
    }

    .tag-filters-head {
        padding: 24px;
    }

    /* Anchored to the button on desktop, so it must not stretch to the mobile row width */
    .tag-sort-panel {
        right: 0;
        left: auto;
    }

}