/* ============================================================
   search.css
   Scoped to the therapist search page via .SearchPage.
   ============================================================ */

@font-face {
    font-family: 'Keskiyon Lumisade';
    src: url('../fonts/KeskiyonLumisade.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.SearchPage {
    --paper-ink: #17161A;
    --paper-rule: rgba(56, 37, 87, .18);
    --display: 'Keskiyon Lumisade', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    --label: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

/* ---------- top band ----------
   Hero and search bar in one full-bleed section closed by a rule,
   the same shape as the homepage's values strip. The band breaks
   out of the page's 1200px track; its inner wrapper puts the
   content back on that track. */
.SearchPage .search-top {
    position: relative;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    border-bottom: var(--rule);
    margin-bottom: var(--space-xl);
}

.SearchPage .search-top-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) var(--space-lg);
}

.SearchPage .search-hero-art {
    position: absolute;
    top: calc(-1 * var(--hero-rise, 150px));
    right: 0;
    /* height, not width, drives this art — it is portrait */
    height: calc(100% + var(--hero-rise, 150px));
    width: 60%;
    z-index: 0;
    background-image: url('../images/General/FloralFrameBottomRight.png');
    background-size: auto 150%;
    background-position: right bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

.SearchPage .search-hero-text {
    position: relative;
    z-index: 1;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    min-height: clamp(200px, 22vw, 290px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.SearchPage .search-top h1 {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: clamp(2.6rem, 6.8vw, 5.2rem) !important;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left !important;
    margin: 0 0 var(--space-md) !important;
    color: var(--paper-ink) !important;
}

.SearchPage .search-top h1 span { display: block; }
.SearchPage .search-top h1 .w-a { color: var(--justicePurple); }
.SearchPage .search-top h1 .w-c { color: var(--justiceOrange); }

.SearchPage .search-top p {
    margin: 0;
    max-width: 44%;
    font-size: 16px;
    font-weight: 600;
    line-height: var(--leading-body);
    color: var(--paper-ink);
}

/* the bar sits inside the band, above the rule */
.SearchPage .search-top .SearchMenu {
    position: relative;
    z-index: 1;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .SearchPage .search-hero-art {
        width: 100%;
        opacity: .28;
        background-size: auto 110%;
    }

    .SearchPage .search-top p { max-width: 100%; }
}

/* ============================================================
   Filter groups
   Goal: every option stays visible and scannable. No hiding
   behind dropdowns — seeing the full vocabulary is the point.
   ============================================================ */

.SearchPage #AdvancedSearchFilterContainer {
    /* same paper treatment as the page ground, one step lighter so
       the panel reads as a sheet laid on top of it */
    background-color: rgb(255, 238, 222);
    background-image: url('../images/General/PaperTile.jpg');
    background-size: 200px 200px;
    background-repeat: repeat;
    background-blend-mode: multiply;
    border: var(--hairline);
    border-radius: 0;
    padding: var(--space-lg);
}

/* ---------- group header ----------
   Top level and nested groups need different treatment. The rule
   below used to hit every <details>, so the inner groups drew their
   own full-width lines inside the outer one and everything ran
   together with no breathing room. */
.SearchPage #AdvancedSearchFilterContainer details {
    padding: 0;
    border: 0;
}

/* outermost groups: separated by a rule */
.SearchPage #AdvancedSearchFilterContainer > div > details {
    border-top: var(--rule);
    padding: 0 0 var(--space-lg);
}

/* nested groups: a card, not another ruled band */
.SearchPage #AdvancedSearchFilterContainer details details {
    background: rgba(255, 252, 248, .7);
    border: var(--hairline);
    padding: 0 var(--space-md) var(--space-md);
    margin-bottom: var(--space-md);
}

.SearchPage #AdvancedSearchFilterContainer details details:last-child {
    margin-bottom: 0;
}

/* the column headings above each group */
.SearchPage #AdvancedSearchFilterContainer > div > details > .row > .col-md-6 > h4 {
    font-family: var(--label);
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tomatoRed) !important;
    padding-bottom: var(--space-xs);
    margin: 0 0 var(--space-md) !important;
    border-bottom: var(--rule);
}

/* room between the two columns */
.SearchPage #AdvancedSearchFilterContainer > div > details > .row > .col-md-6 {
    padding-inline: var(--space-sm);
}

/* labels and inputs inside the groups */
.SearchPage #AdvancedSearchFilterContainer .form-label {
    font-family: var(--label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--justicePurple);
    margin-bottom: var(--space-2xs);
}

.SearchPage #AdvancedSearchFilterContainer .form-control,
.SearchPage #AdvancedSearchFilterContainer select.form-control {
    border-radius: 0;
    border: 1px solid rgba(56, 37, 87, .22);
    background-color: #fff;
    padding: 0 var(--space-sm);
    height: var(--control-height);
    font-size: 14px;
}

.SearchPage #AdvancedSearchFilterContainer .form-control:focus {
    outline: none;
    border-color: var(--justicePurple);
    box-shadow: 0 0 0 3px rgba(56, 37, 87, .12);
}

.SearchPage #AdvancedSearchFilterContainer details summary {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    cursor: pointer;
    padding: var(--space-md) 0;
    margin: 0 !important;
}

.SearchPage #AdvancedSearchFilterContainer details summary::-webkit-details-marker {
    display: none;
}

/* caret drawn so it can rotate; the native marker can't be styled */
.SearchPage #AdvancedSearchFilterContainer details summary::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--justicePurple);
    border-bottom: 2px solid var(--justicePurple);
    transform: rotate(-45deg);
    transition: transform .18s ease;
}

.SearchPage #AdvancedSearchFilterContainer details[open] > summary::before {
    transform: rotate(45deg);
}

/* Archivo in sentence case — the display face plus all-caps was
   shouting a long title at the reader */
.SearchPage #AdvancedSearchFilterContainer summary h4 {
    font-family: 'Archivo', 'IBM Plex Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    line-height: var(--leading-snug);
    text-transform: none;
    color: var(--justicePurple) !important;
    margin: 0 !important;
}

/* nested group titles sit a step down from their parent */
.SearchPage #AdvancedSearchFilterContainer details details summary h4 {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: var(--justiceOrange) !important;
}

/* ---------- Core Values: category bands ----------
   Categories were <strong> tags with an <hr> after each, so the
   groups ran together with no anchor. Treated as real sub-heads now. */
.SearchPage #AdvancedSearchFilterContainer .FormSectionSubHeader {
    display: block;
    font-family: var(--label);
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--tomatoRed) !important;
    padding: var(--space-md) 0 var(--space-xs);
    margin: 0;
    border-bottom: var(--hairline);
}

.SearchPage #AdvancedSearchFilterContainer .FormSectionSubHeader:first-child {
    padding-top: 0;
}

/* the <hr> between categories is redundant now the heads carry a rule */
.SearchPage #AdvancedSearchFilterContainer details hr {
    display: none;
}

.SearchPage .filter-clear {
    margin-left: auto;
    font-family: var(--label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tomatoRed);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 2px;
}

.SearchPage .filter-clear:hover { color: var(--justicePurple); }

/* ---------- the options themselves ----------
   Dense multi-column list, capped height with its own scroll so a
   60-item vocabulary is fully browsable without pushing the page
   to three thousand pixels. */
/* Bootstrap's .col-md-4 brings its own 12px gutters, which is what
   made the vertical rhythm feel uneven — rows sat on one spacing and
   columns on another. Zero them and let the rows own the spacing. */
.SearchPage #AdvancedSearchFilterContainer details > .row {
    margin: 0;
    row-gap: 0;
}

.SearchPage #AdvancedSearchFilterContainer details > .row > [class^="col-"] {
    padding-inline: 0;
}

/* One fixed row height across every option, so a one-word label and
   a two-line label occupy the same band and the list reads as a
   proper column rather than a ragged stack. */
.SearchPage .pill-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--row-height);
    margin: 0;
    padding: 0 var(--space-sm);
    cursor: pointer;
    user-select: none;
    transition: background .12s;
}

.SearchPage .pill-toggle:hover {
    background: rgba(216, 101, 43, .1);
}

.SearchPage .pill-toggle .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.SearchPage .pill-toggle .form-check-label {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: 'Archivo', 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: var(--leading-snug);
    color: var(--paper-ink);
    margin: 0;
}

.SearchPage .pill-toggle .form-check-label::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgba(56, 37, 87, .38);
    background: #fff;
    transition: background .12s, border-color .12s;
}

.SearchPage .pill-toggle:has(input[type="radio"]) .form-check-label::before {
    border-radius: 50%;
}

/* checked: tick, purple semibold label, warm tint */
.SearchPage .pill-toggle:has(.form-check-input:checked) {
    background: rgba(216, 101, 43, .14);
}

.SearchPage .pill-toggle:has(.form-check-input:checked) .form-check-label {
    color: var(--justicePurple);
    font-weight: 600;
}

.SearchPage .pill-toggle .form-check-input:checked + .form-check-label::before {
    background: var(--justicePurple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
    border-color: var(--justicePurple);
}

.SearchPage .pill-toggle:has(input[type="radio"]) .form-check-input:checked + .form-check-label::before {
    background-image: none;
    box-shadow: inset 0 0 0 3px #fff;
}

/* the native box is hidden, so focus needs its own visible state */
.SearchPage .pill-toggle:has(.form-check-input:focus-visible) {
    outline: 3px solid var(--justiceOrange);
    outline-offset: 1px;
}

/* ============================================================
   Search bar + advanced-search toggle
   The two blocks above the filter panel.
   ============================================================ */

.SearchPage .SearchMenu {
    margin: 0 0 18px !important;
    gap: 14px;
    align-items: stretch;
}

/* the bar reads as one printed object: square, hairline edge, the
   button sharing its border rather than floating inside a rounded box */
.SearchPage .SearchBarIconGroup {
    border-radius: 0;
    border: 1.5px solid rgba(56, 37, 87, .28);
    background: rgba(255, 252, 248, .92);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.SearchPage .SearchBarIconGroup:focus-within {
    border-color: var(--justicePurple);
    box-shadow: 0 0 0 3px rgba(56, 37, 87, .12);
}

/* Bootstrap's .form-control is width:100% with no flex sizing, so it
   and the button were negotiating for space instead of the input
   simply taking whatever is left. */
.SearchPage .SearchBarIconGroup input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    padding: 15px 18px;
    font-size: 15px;
    box-shadow: none;
}

.SearchPage .SearchBarIconGroup input:focus {
    outline: none;
    box-shadow: none;
}

.SearchPage .SearchBarIconGroup input::placeholder {
    color: rgba(23, 22, 26, .45);
}

.SearchPage .SearchBarIconGroup .button {
    /* fixed share of the bar rather than sizing off its own text —
       as a content-sized button it stayed a sliver next to a very
       wide input no matter how much padding it had */
    flex: 0 0 22%;
    min-width: 150px;
    justify-content: center;
    align-items: center;
    display: flex;
    white-space: nowrap;
    border-radius: 0;
    padding: 0 20px;
    /* .button sets height: fit-content globally, which opts it out of
       stretching to the flex line — that is why it never filled the
       bar's height regardless of padding */
    height: auto !important;
    align-self: stretch;
    font-family: var(--label);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background-color: var(--justicePurple);
    border: 0;
    border-left: 1.5px solid rgba(56, 37, 87, .28);
    transform: none;
}

.SearchPage .SearchBarIconGroup .button:hover {
    background-color: var(--justiceOrange);
    box-shadow: none;
    transform: none;
}

/* ---------- advanced search toggle ---------- */
.SearchPage .AdvancedSearchLink {
    width: auto;
    flex: none;
}

.SearchPage .AdvancedSearchLink .TextHyperLink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 18px;
    border: 1.5px solid rgba(56, 37, 87, .28);
    font-family: var(--label);
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--justicePurple) !important;
    background: transparent;
    transition: background .15s, color .15s, border-color .15s;
}

/* the sliders glyph marks it as "more controls", not another search */
.SearchPage .AdvancedSearchLink .TextHyperLink::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 4h9M13 4h2M1 12h3M7 12h8'/%3E%3Ccircle cx='11.5' cy='4' r='1.8'/%3E%3Ccircle cx='5.5' cy='12' r='1.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 4h9M13 4h2M1 12h3M7 12h8'/%3E%3Ccircle cx='11.5' cy='4' r='1.8'/%3E%3Ccircle cx='5.5' cy='12' r='1.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

.SearchPage .AdvancedSearchLink .TextHyperLink:hover {
    background: var(--justicePurple);
    border-color: var(--justicePurple);
    color: #fff !important;
}

@media (max-width: 767px) {
    .SearchPage .AdvancedSearchLink .TextHyperLink {
        width: 100%;
        justify-content: center;
        padding: 13px 18px;
    }
}

/* inline radio pairs (Yes / No) sit side by side, not stacked */
.SearchPage .pill-toggle.is-inline {
    display: inline-flex;
    width: auto;
    min-width: 96px;
    border-bottom: 0;
    margin-right: var(--space-xs);
}

/* ============================================================
   Filter tabs
   Four groups as a tab strip: black bar on the paper ground, the
   selected tab cut out of it so it reads as attached to its panel.
   ============================================================ */

.SearchPage .filter-tabs {
    display: grid;
    /* four across at every width — the groups are the map of the
       filter set, so collapsing them hides the structure */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: transparent;
    border-bottom: var(--hairline);
    margin-bottom: var(--space-lg);
}

.SearchPage .filter-tab + .filter-tab {
    border-left: var(--hairline);
}

.SearchPage .filter-tab {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--space-xs);
    min-height: 60px;
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--display);
    font-size: 16px;
    /* the display face only ships Regular — bold here would be a
       browser-synthesised smear, never a real weight */
    font-weight: 400;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: var(--leading-snug);
    color: rgba(23, 22, 26, .55);
    transition: color .14s;
}

.SearchPage .filter-tab:hover {
    color: var(--justiceOrange);
}

/* selected tab: purple, marked with the same hand-drawn stroke the
   nav uses for the current page */
.SearchPage .filter-tab[aria-selected="true"] {
    color: var(--justicePurple);
}

.SearchPage .filter-tab:focus-visible {
    outline: 3px solid var(--justiceOrange);
    outline-offset: -3px;
}

/* marks a group that holds selections while its panel is hidden */
.SearchPage .filter-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--justiceOrange);
}

.SearchPage .filter-dot[hidden] { display: none !important; }

/* ---------- panels ---------- */
.SearchPage .filter-panel {
    border: 0;
    padding: 0 0 var(--space-md);
    background: none;
}

.SearchPage .filter-panel[hidden] { display: none !important; }

/* the summary is the tab now */
.SearchPage .filter-panel > details > summary {
    display: none !important;
}

.SearchPage .filter-panel > details {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.SearchPage .filter-panel .filter-clear {
    display: block;
    margin: 0 0 var(--space-md) auto;
}

@media (max-width: 760px) {
    .SearchPage .filter-tab {
        font-size: 12px;
        padding: var(--space-xs) var(--space-2xs);
        min-height: 52px;
    }
}

/* ============================================================
   Inside a filter panel
   The original markup mixed Bootstrap columns, ad-hoc inline grids
   and three different margin utilities, so no two fields shared a
   baseline. Everything below puts them on one rhythm.
   ============================================================ */

/* the two top-level columns, with a divider between them */
.SearchPage .filter-panel > details > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
    margin: 0;
}

.SearchPage .filter-panel > details > .row > .col-md-6 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

.SearchPage .filter-panel > details > .row > .col-md-6:first-child {
    border-right: var(--hairline);
    padding-right: var(--space-2xl);
}

@media (max-width: 860px) {
    .SearchPage .filter-panel > details > .row {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .SearchPage .filter-panel > details > .row > .col-md-6:first-child {
        border-right: 0;
        padding-right: 0;
        padding-bottom: var(--space-xl);
        border-bottom: var(--hairline);
    }
}

/* every field block gets the same gap, whatever utility it carried */
.SearchPage .filter-panel .mb-3,
.SearchPage .filter-panel .mb-4 {
    margin-bottom: var(--space-lg) !important;
}

.SearchPage .filter-panel .mb-3:last-child,
.SearchPage .filter-panel .mb-4:last-child {
    margin-bottom: 0 !important;
}

/* paired fields (Name/Gender, Availability/Cost) as a real grid so
   their labels and controls sit on the same baseline */
.SearchPage .filter-panel .col-md-6 > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin: 0;
    align-items: start;
}

.SearchPage .filter-panel .col-md-6 > .row > [class^="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

/* option groups (Languages, Populations, Cost) read as one unit */
.SearchPage .opt-block {
    border: var(--hairline);
    background: rgba(255, 252, 248, .55);
    padding: var(--space-xs);
}

.SearchPage .opt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-md);
}

.SearchPage .opt-stack {
    display: flex;
    flex-direction: column;
}

/* rows inside an option block lose the outer divider — the block
   border already encloses them */
.SearchPage .opt-block .pill-toggle {
    padding-inline: var(--space-xs);
}

/* the languages block is a Bootstrap .row wrapper; flatten it */
.SearchPage #advSearchLanguages {
    display: block !important;
    margin: 0 0 var(--space-lg) !important;
}

.SearchPage #advSearchLanguages > .col-12 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

/* sliding-scale box inherits the panel's language */
.SearchPage #sliderContainerSearch {
    border: var(--hairline) !important;
    border-radius: 0 !important;
    background: rgba(255, 252, 248, .8) !important;
    padding: var(--space-sm) !important;
    margin-top: var(--space-xs) !important;
}

/* the submit button under the panels */
.SearchPage #advSearchClinical .button {
    border-radius: 0;
    height: var(--control-height);
    font-family: var(--label);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ============================================================
   Panel interior — corrections
   ============================================================ */

/* Personal / Practice runs full width and stacks. The two-up split
   forced long field labels into narrow columns and never lined up. */
.SearchPage .filter-panel > details > .row {
    display: block !important;
    gap: 0 !important;
}

.SearchPage .filter-panel > details > .row > .col-md-6 {
    width: 100% !important;
    max-width: none !important;
    border-right: 0 !important;
    padding: 0 !important;
}

.SearchPage .filter-panel > details > .row > .col-md-6 + .col-md-6 {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl) !important;
    border-top: var(--hairline);
}

/* Option grids size to their longest label instead of a fixed
   column count, so "Domestic or Intimate Partner Violence" stays on
   one line rather than wrapping in a 33% column. */
/* `:has(.pill-toggle)` matched any ancestor row holding a checkbox
   at any depth, including the Personal/Practice wrapper. Scoped to a
   row whose OWN column children hold the toggles. */
.SearchPage .filter-panel .row:has(> [class^="col-"] > .pill-toggle),
.SearchPage .opt-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    column-gap: var(--space-md) !important;
    row-gap: 0 !important;
    margin: 0 !important;
}

.SearchPage .filter-panel .row:has(> [class^="col-"] > .pill-toggle) > [class^="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

/* Core Values category names */
.SearchPage #AdvancedSearchFilterContainer .FormSectionSubHeader {
    font-size: 15px !important;
    color: var(--justicePurple) !important;
    border-bottom: 0 !important;
    padding: var(--space-lg) 0 var(--space-xs) !important;
}

.SearchPage #AdvancedSearchFilterContainer .FormSectionSubHeader:first-child {
    padding-top: 0 !important;
}

/* ============================================================
   RESULT CARDS
   Markup rewritten with its own classes — the old ones carried
   percentage widths and radii from the previous design that no
   amount of overriding could keep straight.

   Order of information: who they are and where → how they talk
   about their work → how you reach them → the practical facts.
   ============================================================ */

.SearchPage .tcard {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 260px;
    grid-template-areas:
        "photo main facts"
        "action action action";
    margin-bottom: var(--space-md);
    background-color: rgb(253, 246, 236);
    background-image: url('../images/General/PaperTile.jpg');
    background-size: 200px 200px;
    background-repeat: repeat;
    background-blend-mode: multiply;
    border: var(--hairline);
    box-shadow: 0 1px 2px rgba(56,37,87,.06), 0 8px 20px rgba(56,37,87,.09);
    transition: box-shadow .18s ease, transform .18s ease;
}

.SearchPage .tcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(56,37,87,.08), 0 14px 30px rgba(56,37,87,.15);
}

/* ---------- portrait ---------- */
/* Stretched to the row, not held to a ratio — the photo is always
   exactly as tall as the tallest column beside it, so no card ever
   shows dead space under it. */
.SearchPage .tcard-photo {
    grid-area: photo;
    position: relative;
    align-self: stretch;
    margin: var(--space-md);
    min-height: 210px;
    background: rgba(56, 37, 87, .07);
    overflow: hidden;
}

.SearchPage .tcard-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* faces sit high in most portraits */
    object-position: center 22%;
    display: block;
}

.SearchPage .tcard-pronoun {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    /* translucent purple so the portrait reads through it */
    background: rgba(56, 37, 87, .72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: var(--space-2xs) var(--space-xs);
}

/* ---------- the human part ---------- */
.SearchPage .tcard-main {
    grid-area: main;
    min-width: 0;
    padding: var(--space-md) var(--space-md) var(--space-md) 0;
}

.SearchPage .tcard-name {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left !important;
    color: var(--paper-ink) !important;
    margin: 0 !important;
}

/* the credential is a qualification, not part of the name — its
   own line, smaller, in the text face */
.SearchPage .tcard-cred {
    display: block;
    font-family: var(--label);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: none;
    color: rgba(23, 22, 26, .62);
    margin-top: var(--space-3xs);
}

.SearchPage .tcard-place {
    font-family: var(--label);
    font-size: 14px;
    font-weight: 600;
    color: var(--justicePurple);
    margin: var(--space-2xs) 0 0;
}

.SearchPage .tcard-bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: var(--space-sm) 0 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(23, 22, 26, .84);
}

/* ---------- quick tags ---------- */
.SearchPage .tcard-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-xs);
    margin: var(--space-sm) 0 0;
    padding: 0;
}

.SearchPage .tcard-tag {
    font-family: var(--label);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--justiceOrange);
    border: 0;
    padding: var(--space-2xs) var(--space-xs);
}

.SearchPage .tcard-social {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.SearchPage .tcard-social img {
    width: 18px;
    height: 18px;
    opacity: .6;
    transition: opacity .15s;
}

.SearchPage .tcard-social a:hover img { opacity: 1; }

/* ---------- facts slip ---------- */
.SearchPage .tcard-facts {
    grid-area: facts;
    align-self: start;
    margin: var(--space-md) var(--space-md) var(--space-md) 0;
    padding: var(--space-md);
    background-color: rgb(255, 245, 235);
    background-image: url('../images/General/PaperTile.jpg');
    background-size: 200px 200px;
    background-repeat: repeat;
    background-blend-mode: multiply;
    border: var(--hairline);
}

/* label above value — side by side, a long label and a long value
   collide in a column this narrow */
.SearchPage .tcard-fact {
    padding: var(--space-xs) 0;
    border-bottom: 1px dashed rgba(56, 37, 87, .2);
    overflow-wrap: anywhere;
}

.SearchPage .tcard-fact:first-child { padding-top: 0; }

.SearchPage .tcard-fact:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.SearchPage .tcard-fact-label {
    display: block;
    font-family: var(--label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--justicePurple);
    margin-bottom: var(--space-3xs);
}

.SearchPage .tcard-fact-value {
    display: block;
    font-size: 13px;
    line-height: var(--leading-snug);
    color: var(--paper-ink);
}

.SearchPage .tcard-fact-note {
    display: block;
    margin-top: var(--space-3xs);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--justiceOrange);
}

/* ---------- action bar ---------- */
.SearchPage .tcard-action {
    grid-area: action;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    height: 48px;
    border-top: var(--hairline);
    background: var(--justicePurple);
    color: #fff !important;
    font-family: var(--label);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background .15s;
}

.SearchPage .tcard-action:hover {
    background: var(--justiceOrange);
    color: #fff !important;
}

@media (max-width: 1080px) {
    .SearchPage .tcard {
        grid-template-columns: 170px minmax(0, 1fr);
        grid-template-areas:
            "photo main"
            "facts facts"
            "action action";
    }

    .SearchPage .tcard-facts {
        margin: 0 var(--space-md) var(--space-md);
    }
}

@media (max-width: 620px) {
    .SearchPage .tcard {
        grid-template-columns: 1fr;
        grid-template-areas:
            "photo"
            "main"
            "facts"
            "action";
    }

    .SearchPage .tcard-photo {
        height: 260px;
        min-height: 0;
    }

    .SearchPage .tcard-main {
        padding: 0 var(--space-md) var(--space-md);
    }
}

/* the 100vw band would otherwise widen the page */
body:has(.SearchPage) {
    overflow-x: hidden;
}

/* ------------------------------------------------------------
   .SearchBarIconGroup carries width:100% from style.css. In the
   flex row that made it claim the whole line, pushing the Advanced
   Search button past the container edge where the band's overflow
   clipped it out of sight. Let it flex instead.
   ------------------------------------------------------------ */
.SearchPage .SearchMenu {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
}

.SearchPage .SearchBarIconGroup {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

.SearchPage .AdvancedSearchLink {
    flex: 0 0 auto;
}

/* ---- art is never cropped ----
   `contain` fits the whole image inside its box on both axes, so
   nothing is ever cut off; the box is tall enough to keep it large. */
.SearchPage .search-hero-art {
    --hero-rise: 200px;
    background-size: contain;
    background-position: right bottom;
}

/* ------------------------------------------------------------
   Advanced Search: orange outline, type and glyph. The purple on
   the textured ground was too low-contrast to find.
   ------------------------------------------------------------ */
.SearchPage .AdvancedSearchLink .TextHyperLink {
    color: var(--justiceOrange) !important;
    border-color: var(--justiceOrange);
}

.SearchPage .AdvancedSearchLink .TextHyperLink:hover {
    background: var(--justiceOrange);
    border-color: var(--justiceOrange);
    color: #fff !important;
}

/* ------------------------------------------------------------
   Photo opposite the headline.
   The band becomes a two-column grid: copy left, cropped photo
   right. The floral cut-out stays absolute and overlaps the photo's
   right edge, so the two read as one collage rather than two
   rectangles side by side.
   ------------------------------------------------------------ */
.SearchPage .search-top-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38%;
    column-gap: clamp(24px, 4vw, 56px);
    align-items: stretch;
}

.SearchPage .search-hero-text {
    grid-column: 1;
    grid-row: 1;
}

.SearchPage .search-hero-photo {
    grid-column: 2;
    grid-row: 1;
    z-index: 0;
    margin: var(--space-lg) 0;
    background-image: url('../images/General/Protest.jpg');
    /* cover: fills the block and crops, never letterboxes */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: var(--hairline);
}

/* the bar spans the full band, under both columns */
.SearchPage .search-top .SearchMenu {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* floral sits on top of the photo's right edge, collage style */
.SearchPage .search-hero-art {
    width: 30%;
    z-index: 2;
}

.SearchPage .search-top p {
    max-width: 100%;
}

@media (max-width: 900px) {
    .SearchPage .search-top-inner {
        grid-template-columns: 1fr;
    }

    .SearchPage .search-hero-photo {
        grid-column: 1;
        grid-row: 2;
        height: 200px;
        margin: 0 0 var(--space-lg);
    }

    .SearchPage .search-top .SearchMenu {
        grid-column: 1;
        grid-row: 3;
    }
}

/* ------------------------------------------------------------
   The floral frame belongs to the band, not the 1200px track.
   Making the inner wrapper static hands the art's containing block
   to .search-top — which is the full 100vw band — so `right: 0`
   lands on the browser edge instead of the content gutter.
   ------------------------------------------------------------ */
.SearchPage .search-top-inner {
    position: static;
}

.SearchPage .search-hero-art {
    right: 0;
    width: clamp(220px, 26vw, 420px);
}

/* therapist portrait, one step larger */
.SearchPage .tcard {
    grid-template-columns: 228px minmax(0, 1fr) 260px;
}

@media (max-width: 1080px) {
    .SearchPage .tcard {
        grid-template-columns: 204px minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    .SearchPage .tcard {
        grid-template-columns: 1fr;
    }
}

/* The floral sits behind everything in the band — it is decoration,
   not a layer that should ever cover the photo, the type or the bar. */
.SearchPage .search-hero-art {
    z-index: 0;
}

.SearchPage .search-hero-photo {
    position: relative;
    z-index: 1;
}

.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------------------
   The option-grid rule uses :has(.pill-toggle), which matches any
   ancestor row holding a checkbox at any depth — including the
   Personal/Practice wrapper. That turned its two columns into a
   3-up auto-fill grid with an empty third cell. The wrapper row is
   forced back to a plain stack here: Personal & Location full width
   on row one, Practice Details full width on row two.
   ------------------------------------------------------------ */
.SearchPage .filter-panel > details > .row {
    display: block !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
}

.SearchPage .filter-panel > details > .row > .col-md-6 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.SearchPage .filter-panel > details > .row > .col-md-6 + .col-md-6 {
    margin-top: var(--space-xl) !important;
    padding-top: var(--space-xl) !important;
    border-top: var(--hairline);
}

/* ------------------------------------------------------------
   Personal & Location, laid out internally:
   left column  — Name, Gender, Location
   right column — Languages, spanning both rows
   The section still occupies one full-width band; Practice Details
   is the band beneath it.
   ------------------------------------------------------------ */
.SearchPage .filter-panel > details > .row > .col-md-6:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: start;
}

/* the section heading spans both columns */
.SearchPage .filter-panel > details > .row > .col-md-6:first-child > h4 {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* Name + Gender pair, then Location, stacked in the left column */
.SearchPage .filter-panel > details > .row > .col-md-6:first-child > .row:not(#advSearchLanguages) {
    grid-column: 1;
    grid-row: 2;
}

/* :not(h4) matters — the section heading also carries .mb-3, so it
   was being placed into row 3 on top of the Location field. */
.SearchPage .filter-panel > details > .row > .col-md-6:first-child > div.mb-3 {
    grid-column: 1;
    grid-row: 3;
}

/* Languages fills the right column across both rows */
.SearchPage #advSearchLanguages {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    margin: 0 !important;
}

/* narrower column, so the language list wants a smaller track */
.SearchPage #advSearchLanguages .opt-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}

@media (max-width: 860px) {
    .SearchPage .filter-panel > details > .row > .col-md-6:first-child {
        display: block !important;
    }

    .SearchPage #advSearchLanguages {
        margin-top: var(--space-lg) !important;
    }
}

/* ------------------------------------------------------------
   Practice Details: insurance first, then one field per row.
   Reordered with flex `order` rather than moving markup, so the
   Razor bindings and the cost slider's JS stay untouched.
   ------------------------------------------------------------ */
.SearchPage .filter-panel > details > .row > .col-md-6:last-child {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-lg);
}

.SearchPage .filter-panel > details > .row > .col-md-6:last-child > h4 {
    order: -2;
}

/* Accepts Insurance is the last block in source order */
.SearchPage .filter-panel > details > .row > .col-md-6:last-child > .mb-3:last-child {
    order: -1;
}

/* the gap owns the rhythm now, so the utility margins go */
.SearchPage .filter-panel > details > .row > .col-md-6:last-child > * {
    margin-bottom: 0 !important;
}

/* Availability and Cost were a 2-up row — each gets its own row */
.SearchPage .filter-panel > details > .row > .col-md-6:last-child > .row {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-lg);
    margin: 0 !important;
}

.SearchPage .filter-panel > details > .row > .col-md-6:last-child > .row > [class^="col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ------------------------------------------------------------
   Personal & Location: content sat vertically centred in tall grid
   rows. Pin it to the top and let one gap set the rhythm.
   ------------------------------------------------------------ */
.SearchPage .filter-panel > details > .row > .col-md-6:first-child {
    align-content: start;
    row-gap: var(--space-lg);
}

.SearchPage .filter-panel > details > .row > .col-md-6:first-child > * {
    margin-bottom: 0 !important;
    align-self: start;
}

/* ------------------------------------------------------------
   Results: give the heading room and separate it from the filters
   and from the first card.
   ------------------------------------------------------------ */
.SearchPage .SearchResultsHeading {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: 30px !important;
    line-height: var(--leading-tight);
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left !important;
    color: var(--justicePurple) !important;
    /* clears the filter panel above and the first card below */
    margin: var(--space-3xl) 0 var(--space-2xl) !important;
    padding-top: var(--space-2xl);
    border-top: var(--rule);
}

.SearchPage .SearchResultsHeadingFilter {
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.SearchPage .card-footer {
    background: none;
    border: 0;
    padding: var(--space-lg) 0 0;
    margin-top: var(--space-lg);
    border-top: var(--hairline);
}

/* Option rows centre their contents vertically, so a label that
   wraps to two lines keeps its checkbox on the middle axis instead
   of pinned to the first line. */
.SearchPage .filter-panel .row:has(> [class^="col-"] > .pill-toggle),
.SearchPage .opt-grid {
    align-items: center !important;
}

.SearchPage .pill-toggle,
.SearchPage .pill-toggle .form-check-label {
    align-items: center !important;
}

.SearchPage .pill-toggle .form-check-label::before {
    margin-top: 0;
}

/* ============================================================
   Hero frames
   Two collages flanking the band, anchored to its bottom corners
   and running to the browser edges. They replace the single floral
   cut-out and the separate protest photo — the right-hand collage
   already carries that photograph.
   ============================================================ */

/* the band is now one centred column between the two frames */
.SearchPage .search-top-inner {
    display: block;
}

.SearchPage .search-frame {
    position: absolute;
    bottom: 0;
    top: calc(-1 * var(--hero-rise, 200px));
    width: clamp(180px, 24vw, 380px);
    z-index: 0;
    background-repeat: no-repeat;
    /* contain: the whole collage is always visible, never cropped */
    background-size: contain;
    pointer-events: none;
}

.SearchPage .search-frame-left {
    left: 0;
    background-image: url('../images/General/PeopleFrameBottomLeft.png');
    background-position: left bottom;
}

.SearchPage .search-frame-right {
    right: 0;
    background-image: url('../images/General/RadicalACtFrameBottomRight.png');
    background-position: right bottom;
}

/* copy sits between the frames */
.SearchPage .search-hero-text {
    position: relative;
    z-index: 2;
    padding-inline: clamp(0px, 16vw, 300px);
    padding-block: var(--space-xl);
    min-height: clamp(260px, 26vw, 360px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.SearchPage .search-top h1 {
    text-align: center !important;
}

.SearchPage .search-top p {
    margin-inline: auto;
    max-width: 48ch;
}

.SearchPage .search-top .SearchMenu {
    position: relative;
    z-index: 2;
    padding-inline: clamp(0px, 10vw, 180px);
}

@media (max-width: 900px) {
    /* the frames become a quiet backdrop rather than a squeeze */
    .SearchPage .search-frame {
        width: 42%;
        opacity: .3;
    }

    .SearchPage .search-hero-text,
    .SearchPage .search-top .SearchMenu {
        padding-inline: 0;
    }
}

/* frames a step larger */
.SearchPage .search-frame {
    width: clamp(220px, 30vw, 470px);
}

/* headline back to left-aligned, clear of the left frame */
.SearchPage .search-hero-text {
    text-align: left;
    padding-inline: clamp(0px, 22vw, 420px) clamp(0px, 20vw, 380px);
}

.SearchPage .search-top h1 {
    text-align: left !important;
}

.SearchPage .search-top p {
    margin-inline: 0;
}

@media (max-width: 900px) {
    .SearchPage .search-frame { width: 46%; }

    .SearchPage .search-hero-text {
        padding-inline: 0;
    }
}

/* ------------------------------------------------------------
   Copy takes the width, frames sit behind it.
   The earlier padding squeezed the headline into the gap between
   the two collages; now the text runs across and the art reads as
   a backdrop it is set on top of.
   ------------------------------------------------------------ */
.SearchPage .search-frame {
    /* 50% larger again */
    width: clamp(330px, 45vw, 700px);
}

.SearchPage .search-hero-text {
    padding-inline: 0 !important;
    max-width: 80%;
    text-align: left;
    z-index: 2;
}

/* each line holds together — "Search for" never breaks */
.SearchPage .search-top h1 span {
    display: block;
    white-space: nowrap;
}

.SearchPage .search-top .SearchMenu {
    padding-inline: 0 !important;
}

@media (max-width: 900px) {
    .SearchPage .search-hero-text { max-width: 100%; }
    .SearchPage .search-frame { width: 60%; }
}

/* ------------------------------------------------------------
   Matched to the homepage hero exactly: one art layer on the right
   at 100vw sized by height, the same --hero-rise, the same headline
   scale and the same 70% copy width. Left frame retired for now.
   ------------------------------------------------------------ */
.SearchPage .search-frame-left {
    display: none;
}

.SearchPage .search-hero-text {
    max-width: 100%;
    width: 100%;
    padding-block: 0;
    min-height: clamp(340px, 42vw, 560px);
}

.SearchPage .search-frame-right {
    top: calc(-1 * var(--hero-rise, 150px));
    bottom: 0;
    left: 50%;
    right: auto;
    width: 100vw;
    transform: translateX(-50%);
    background-size: auto 100%;
    background-position: right bottom;
}

.SearchPage .search-top h1 {
    font-size: clamp(3.4rem, 9.2vw, 7.2rem) !important;
    line-height: 1;
    margin: 0 0 clamp(18px, 2.5vw, 28px) !important;
}

.SearchPage .search-top p {
    max-width: 70%;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right {
        position: static;
        width: 100%;
        height: 240px;
        transform: none;
        margin-bottom: var(--space-lg);
        background-size: contain;
    }

    .SearchPage .search-hero-text {
        min-height: 0;
    }

    .SearchPage .search-top p { max-width: 100%; }
}

/* ------------------------------------------------------------
   Sizing restored to the version before the homepage match —
   smaller headline, shorter band, frame anchored to the right edge
   at `contain`. The layout (left frame retired, copy at 80% over
   the art) stays as it is.
   ------------------------------------------------------------ */
.SearchPage .search-frame-right {
    top: calc(-1 * var(--hero-rise, 200px));
    bottom: 0;
    left: auto;
    right: 0;
    width: clamp(330px, 45vw, 700px);
    transform: none;
    background-size: contain;
    background-position: right bottom;
}

.SearchPage .search-hero-text {
    max-width: 80%;
    padding-block: var(--space-xl);
    min-height: clamp(260px, 26vw, 360px);
}

.SearchPage .search-top h1 {
    font-size: clamp(2.6rem, 6.8vw, 5.2rem) !important;
    margin: 0 0 var(--space-md) !important;
}

.SearchPage .search-top p {
    max-width: 48ch;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right {
        position: static;
        width: 60%;
        height: 240px;
        margin-bottom: var(--space-lg);
    }

    .SearchPage .search-hero-text {
        max-width: 100%;
        min-height: 0;
    }

    .SearchPage .search-top p { max-width: 100%; }
}

/* the people collage instead, mirrored so its weight falls on the
   right — the art was drawn for a bottom-left corner */
.SearchPage .search-frame-right {
    background-image: url('../images/General/PeopleFrameBottomLeft.png');
    transform: scaleX(-1);
}

/* the copy must not mirror with it */
.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    transform: none;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right {
        transform: scaleX(-1);
    }
}

/* ------------------------------------------------------------
   scaleX(-1) mirrors the rendered content, so art anchored `right
   bottom` ends up on the LEFT of its box once flipped — which is
   why it pulled away from the browser edge. Anchoring left bottom
   lands it on the right after the flip.
   ------------------------------------------------------------ */
.SearchPage .search-frame-right {
    width: clamp(420px, 58vw, 900px);
    background-position: left bottom;
    background-size: auto 100%;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right {
        width: 70%;
        height: 260px;
        background-size: contain;
    }
}

/* frame 40% larger again */
.SearchPage .search-frame-right {
    width: clamp(590px, 81vw, 1260px);
}

/* ------------------------------------------------------------
   Headline, copy and search bar share one width, so the Advanced
   Search button can never reach further right than "THERAPISTS."
   ------------------------------------------------------------ */
.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    max-width: 60%;
    margin-inline: 0 auto;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right { width: 70%; }

    .SearchPage .search-hero-text,
    .SearchPage .search-top .SearchMenu {
        max-width: 100%;
    }
}

/* content block a touch wider, frame another 20% up */
.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    max-width: 70%;
}

.SearchPage .search-frame-right {
    width: clamp(710px, 97vw, 1510px);
}

@media (max-width: 900px) {
    .SearchPage .search-hero-text,
    .SearchPage .search-top .SearchMenu {
        max-width: 100%;
    }

    .SearchPage .search-frame-right { width: 80%; }
}

/* ------------------------------------------------------------
   Widening the box did nothing: `background-size: auto 100%` makes
   HEIGHT the driver, so the art scaled to the band and ignored the
   extra width. 140% of the band height is the 40% increase.
   The collage's top third is empty canvas, so the overflow crops
   nothing that reads.
   ------------------------------------------------------------ */
.SearchPage .search-frame-right {
    background-size: auto 140%;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right {
        background-size: contain;
    }
}

/* ------------------------------------------------------------
   Both frames again: the people collage on the left as drawn, the
   radical-act collage on the right. Height drives the scale for
   both, so they match whatever the band measures.
   ------------------------------------------------------------ */
.SearchPage .search-frame-left {
    display: block;
    top: calc(-1 * var(--hero-rise, 200px));
    bottom: 0;
    left: 0;
    right: auto;
    width: clamp(260px, 34vw, 560px);
    transform: none;
    background-image: url('../images/General/PeopleFrameBottomLeft.png');
    background-position: left bottom;
    background-size: auto 140%;
}

.SearchPage .search-frame-right {
    left: auto;
    right: 0;
    width: clamp(260px, 34vw, 560px);
    /* not mirrored — this one was drawn for a right-hand corner */
    transform: none;
    background-image: url('../images/General/RadicalACtFrameBottomRight.png');
    background-position: right bottom;
    background-size: auto 140%;
}

/* copy clears the left collage and stops short of the right one */
.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    max-width: min(70%, 720px);
    margin-inline: clamp(0px, 18vw, 300px) auto;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-left,
    .SearchPage .search-frame-right {
        position: absolute;
        width: 48%;
        height: auto;
        opacity: .3;
        background-size: contain;
    }

    .SearchPage .search-hero-text,
    .SearchPage .search-top .SearchMenu {
        max-width: 100%;
        margin-inline: 0;
    }
}

/* ============================================================
   Hero middle column — consolidation
   The headline, copy and search bar had each picked up their own
   max-width and margin over several passes, so nothing shared an
   edge. One gutter on the wrapper now defines the column; every
   child simply fills it.
   ============================================================ */
.SearchPage .search-top-inner {
    /* gutters sized to clear the two collages */
    padding-inline: clamp(16px, 19vw, 330px);
    padding-block: 0 var(--space-lg);
}

.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    max-width: 100% !important;
    width: 100%;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

.SearchPage .search-hero-text {
    text-align: left;
    padding-block: var(--space-xl) var(--space-lg);
    min-height: clamp(240px, 24vw, 330px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.SearchPage .search-top h1 {
    text-align: left !important;
}

.SearchPage .search-top p {
    max-width: 100%;
    margin-inline: 0;
}

@media (max-width: 1100px) {
    .SearchPage .search-top-inner {
        padding-inline: clamp(16px, 6vw, 60px);
    }

    .SearchPage .search-frame-left,
    .SearchPage .search-frame-right {
        opacity: .25;
    }
}

/* ------------------------------------------------------------
   The bar and the copy no longer share a column: the bar runs the
   full inner width, while the headline and paragraph sit at 70%
   indented past the left collage.
   ------------------------------------------------------------ */
.SearchPage .search-top-inner {
    padding-inline: clamp(16px, 4vw, 48px);
}

.SearchPage .search-hero-text {
    max-width: 70% !important;
    margin-left: clamp(0px, 15vw, 270px) !important;
    margin-right: 0 !important;
}

.SearchPage .search-top .SearchMenu {
    width: 100%;
    max-width: 100% !important;
    margin-inline: 0 !important;
}

@media (max-width: 1100px) {
    .SearchPage .search-hero-text {
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ============================================================
   HERO — back to the two-column version
   Copy left, image right, search bar spanning underneath. This
   overrides the full-bleed / absolute-frame experiments above;
   everything here is in normal flow, which is why it stays put.
   ============================================================ */

/* the band stops breaking out of the page track */
.SearchPage .search-top {
    left: auto;
    width: auto;
    transform: none;
    border-bottom: var(--rule);
    margin-bottom: var(--space-xl);
}

.SearchPage .search-top-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46%;
    column-gap: clamp(24px, 4vw, 56px);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg) 0 var(--space-2xl);
}

.SearchPage .search-frame-left {
    display: none;
}

/* the art is a grid item again, not an absolute layer */
.SearchPage .search-frame-right {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    height: auto;
    align-self: stretch;
    min-height: clamp(240px, 26vw, 360px);
    transform: none;
    opacity: 1;
    background-image: url('../images/General/Protest.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: var(--hairline);
}

.SearchPage .search-hero-text {
    grid-column: 1;
    grid-row: 1;
    max-width: 100% !important;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
    display: block;
    text-align: left;
}

.SearchPage .search-top h1 {
    font-size: clamp(2.4rem, 5.6vw, 4.4rem) !important;
    line-height: .94;
    text-align: left !important;
    margin: 0 0 var(--space-lg) !important;
}

.SearchPage .search-top p {
    max-width: 44ch;
    margin: 0;
}

/* bar spans the full width beneath both columns */
.SearchPage .search-top .SearchMenu {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100% !important;
    margin: var(--space-xl) 0 0 !important;
    padding: 0 !important;
}

@media (max-width: 860px) {
    .SearchPage .search-top-inner {
        grid-template-columns: 1fr;
        padding-bottom: var(--space-xl);
    }

    .SearchPage .search-frame-right {
        grid-column: 1;
        grid-row: 1;
        min-height: 200px;
    }

    .SearchPage .search-hero-text {
        grid-column: 1;
        grid-row: 2;
        margin-top: var(--space-lg) !important;
    }

    .SearchPage .search-top .SearchMenu {
        grid-column: 1;
        grid-row: 3;
    }

    .SearchPage .search-top p { max-width: 100%; }
}

/* ------------------------------------------------------------
   Full-bleed separator under the top section, like the homepage's
   values strip: the rule runs the width of the window while the
   content stays on the 1200px track.
   ------------------------------------------------------------ */
.SearchPage .search-top {
    position: relative;
    border-bottom: 0;
}

.SearchPage .search-top::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    transform: translateX(-50%);
    border-bottom: var(--rule);
    pointer-events: none;
}

/* ------------------------------------------------------------
   The two collages return as small corner accents — sized to sit
   in the band's bottom corners without crowding the copy.
   ------------------------------------------------------------ */
.SearchPage .search-top-inner {
    position: relative;
}

.SearchPage .search-frame-left {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    /* pulled out to the window edge, then back by its own width */
    margin-left: -50vw;
    width: clamp(90px, 11vw, 170px);
    height: clamp(130px, 16vw, 250px);
    transform: none;
    opacity: 1;
    z-index: 0;
    background-image: url('../images/General/PeopleFrameBottomLeft.png');
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

.SearchPage .search-top-inner::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 0;
    margin-right: -50vw;
    width: clamp(90px, 11vw, 170px);
    height: clamp(130px, 16vw, 250px);
    z-index: 0;
    background-image: url('../images/General/RadicalACtFrameBottomRight.png');
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* content keeps clear of both */
.SearchPage .search-hero-text,
.SearchPage .search-frame-right,
.SearchPage .search-top .SearchMenu {
    position: relative;
    z-index: 1;
}

@media (max-width: 860px) {
    .SearchPage .search-frame-left,
    .SearchPage .search-top-inner::after {
        display: none;
    }
}

/* ============================================================
   HERO — AUTHORITATIVE
   Everything above this point that touches .search-top,
   .search-top-inner, .search-frame-* or .search-hero-text is
   superseded here. Each property is set explicitly rather than
   relying on what an earlier block left behind, so this section
   renders the same regardless of the layers underneath it.

   Shape: copy left, photo right, search bar full width beneath,
   full-bleed rule under the whole thing, small collages in the
   bottom corners.
   ============================================================ */

.SearchPage .search-top {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 0 var(--space-xl) !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    overflow: visible !important;
}

/* full-bleed rule, like the homepage values strip */
.SearchPage .search-top::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    height: 0 !important;
    transform: translateX(-50%) !important;
    border-bottom: var(--rule) !important;
    background: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.SearchPage .search-top-inner {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46% !important;
    grid-template-rows: auto auto !important;
    column-gap: clamp(24px, 4vw, 56px) !important;
    row-gap: 0 !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: var(--space-lg) 0 var(--space-2xl) !important;
    background: none !important;
}

/* ---- copy, left ---- */
.SearchPage .search-hero-text {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    transform: none !important;
}

.SearchPage .search-top h1 {
    font-family: var(--display) !important;
    font-weight: 400 !important;
    font-size: clamp(2.4rem, 5.6vw, 4.4rem) !important;
    line-height: .94 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin: 0 0 var(--space-lg) !important;
    padding: 0 !important;
    color: var(--paper-ink) !important;
}

.SearchPage .search-top h1 span {
    display: block !important;
    white-space: nowrap !important;
}

.SearchPage .search-top h1 .w-a { color: var(--justicePurple) !important; }
.SearchPage .search-top h1 .w-c { color: var(--justiceOrange) !important; }

.SearchPage .search-top p {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 44ch !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: var(--leading-body) !important;
    color: var(--paper-ink) !important;
    text-align: left !important;
}

/* ---- photo, right ---- */
.SearchPage .search-frame-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    align-self: stretch !important;
    width: auto !important;
    height: auto !important;
    min-height: clamp(240px, 26vw, 360px) !important;
    margin: 0 !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    background-image: url('../images/General/Protest.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: var(--hairline) !important;
}

/* ---- search bar, full width beneath ---- */
.SearchPage .search-top .SearchMenu {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: var(--space-sm) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: var(--space-xl) 0 0 !important;
    padding: 0 !important;
}

/* ---- small collages in the bottom corners ---- */
.SearchPage .search-frame-left,
.SearchPage .search-top-inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    width: clamp(300px, 34vw, 520px) !important;
    height: clamp(420px, 48vw, 740px) !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    border: 0 !important;
}

.SearchPage .search-frame-left {
    left: 50% !important;
    right: auto !important;
    margin-left: -50vw !important;
    background-image: url('../images/General/PeopleFrameBottomLeft.png') !important;
    background-position: left bottom !important;
}

.SearchPage .search-top-inner::after {
    right: 50% !important;
    left: auto !important;
    margin-right: -50vw !important;
    background-image: url('../images/General/RadicalACtFrameBottomRight.png') !important;
    background-position: right bottom !important;
}

@media (max-width: 860px) {
    .SearchPage .search-top-inner {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        padding-bottom: var(--space-xl) !important;
    }

    .SearchPage .search-frame-right {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 200px !important;
    }

    .SearchPage .search-hero-text {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin-top: var(--space-lg) !important;
    }

    .SearchPage .search-top .SearchMenu {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .SearchPage .search-top p { max-width: 100% !important; }

    .SearchPage .search-frame-left,
    .SearchPage .search-top-inner::after {
        display: none !important;
    }
}

/* right corner collage off for now */
.SearchPage .search-top-inner::after {
    display: none !important;
}

/* the content-width rule above Search Results — the full-bleed one
   under the hero already does that job */
.SearchPage .SearchResultsHeading {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: var(--space-3xl) !important;
}

/* ------------------------------------------------------------
   Separator after the Advanced Search panel.
   Drawn as a pseudo-element on the panel itself, so it appears and
   disappears with it — the toggle sets display on the container,
   and a child pseudo cannot outlive its parent.
   ------------------------------------------------------------ */
.SearchPage #AdvancedSearchFilterContainer {
    position: relative;
    overflow: visible;
    /* room for the rule plus equal space either side of it */
    margin-bottom: calc(var(--space-2xl) * 2) !important;
}

.SearchPage #AdvancedSearchFilterContainer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--space-2xl));
    height: 0;
    border-bottom: var(--rule);
    pointer-events: none;
}