/* ============================================================================
   us-browse.css - the US design's map-split browse + price-first card layer
   (us-theme-spec.md §4). Component tier for the us design's OWN views
   (listing/list map-split branch + partials/us_card): references only the
   --fwre-* tokens (official's design-tokens.css + the us.css re-tint, loaded
   before this file in the cascade); no raw colors. The map canvas carries a
   caller-supplied inline height (the grandfathered dynamic inline style,
   design-roster.md), so the split pane re-sizes it with !important.
   ============================================================================ */

/* --- the split: single column, map first (a teaser above the list) --------- */
.fwre-us-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fwre-space-20);
}

.fwre-us-mappane { order: -1; }

.fwre-us-mappane .fwre-map {
    height: 300px !important; /* mobile teaser; the inline height is caller-supplied (map_canvas) */
    border-radius: var(--fwre-radius);
}

/* --- >=960px (the @m breakpoint): persistent results-beside-map panes ------ */
@media (min-width: 960px) {
    .fwre-us-split {
        grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
        align-items: start;
    }

    .fwre-us-mappane {
        order: 0;
        position: sticky;
        top: var(--fwre-space-20);
    }

    .fwre-us-mappane .fwre-map { height: calc(100vh - var(--fwre-space-40) - var(--fwre-space-40)) !important; }

    .fwre-us-results {
        max-height: calc(100vh - var(--fwre-space-40) - var(--fwre-space-40));
        overflow-y: auto;
        padding-right: var(--fwre-space-8);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--fwre-space-16);
        align-content: start;
    }

    .fwre-us-results > .fwre-pagination,
    .fwre-us-results > .fwre-empty { grid-column: 1 / -1; }
}

/* --- the price-first card --------------------------------------------------- */
.fwre-us-card {
    background: var(--fwre-white);
    border: 1px solid var(--fwre-grey-border);
    border-radius: var(--fwre-radius);
    overflow: hidden;
}

.fwre-us-card.fwre-item-featured {
    background: var(--fwre-featured-bg);
    border-color: var(--fwre-featured-soft);
}

.fwre-us-card-media .fwre-item-media { border-radius: 0; }

.fwre-us-card-body { padding: var(--fwre-space-12) var(--fwre-space-14) var(--fwre-space-14); }

/* Bold near-black price: the idiom's signature (accent stays for interactions).
   #fwre matches the theme tier's own heading specificity (design-theme.css `#fwre .fwk-h2`),
   and --fwre-text-4xl is the token pair the scale reserves for prices. */
#fwre .fwre-us-card-price a {
    color: var(--fwre-black);
    font-size: var(--fwre-text-4xl);
    line-height: var(--fwre-lh-4xl);
    font-weight: var(--fwre-weight-bold);
    text-decoration: none;
}

#fwre .fwre-us-card-price a:hover { color: var(--fwre-green-hover); }

.fwre-us-card-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fwre-space-10);
    margin-top: var(--fwre-space-6);
    color: var(--fwre-grey-dark-deep);
}

.fwre-us-card-facts .fwk-button { padding: 0; line-height: 1; }

.fwre-us-card-address {
    margin-top: var(--fwre-space-6);
    font-size: var(--fwre-text-md);
    line-height: var(--fwre-lh-md);
}

.fwre-us-card-meta { margin-top: var(--fwre-space-8); gap: var(--fwre-space-8); }

/* Actions row (compare / favorite / share / 3D): the shared .fwre-item-options row closes the
   card body; glyph look + the compare toggle states come from the official design-theme cascade. */
.fwre-us-card .fwre-item-options { margin-top: var(--fwre-space-8); }

/* Marker-hover highlight (demo-map.js usHighlight): the pinned card lights up in the list. */
.fwre-us-card.fwre-us-card-hot {
    border-color: var(--fwre-green);
    box-shadow: 0 0 0 2px var(--fwre-green-alpha), 0 6px 18px rgb(0 0 0 / 0.12);
}

/* --- the us HOME (us-theme-spec.md par.6): search-dominant hero ------------- */
/* This file loads only under the us design, so re-shaping the shared hero band
   classes here is design-scoped by construction (no page scoping needed). */
.fwre-home-hero {
    align-items: center;      /* the Zillow pattern centres the search, not bottom-pins it */
    text-align: center;
}

.fwre-home-hero .fwre-home-hero-title { text-align: center; }

/* The wrapper carries .fwre-search (the module contract's scope class), whose base rule paints
   the dark module panel (bg + 56/88px padding + min-height + flex). The hero is bare: reset it. */
.fwre-home-hero .fwre-search.fwre-search-hero {
    background: transparent;
    border: 0;
    padding: 0;
    min-height: 0;
    display: block;
    width: 100%;
}

.fwre-search-hero-form {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    background: var(--fwre-white);
    border-radius: var(--fwre-radius);
    padding: var(--fwre-space-6);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.22);
    gap: var(--fwre-space-6);
}

.fwre-search-hero-form .fwre-search-hero-input {
    flex: 1;
    min-width: 0;
    border: 0;
    height: auto;
    padding: var(--fwre-space-12) var(--fwre-space-16);
    font-size: var(--fwre-text-lg);
    line-height: var(--fwre-lh-lg);
}

.fwre-search-hero-form .fwre-search-hero-button {
    display: flex;
    align-items: center;
    gap: var(--fwre-space-6);
    padding-left: var(--fwre-space-20);
    padding-right: var(--fwre-space-20);
}

@media (max-width: 639px) {
    .fwre-search-hero-button .fwre-search-hero-button-label { display: none; } /* icon-only submit */
}

/* --- the us HOME: map teaser band ------------------------------------------- */
.fwre-us-home-mappane .fwre-map {
    border-radius: var(--fwre-radius);
    border: 1px solid var(--fwre-grey-border);
}

.fwre-us-home-map .fwre-home-band-cta { margin-top: var(--fwre-space-20); }

/* --- the us DETAIL (us-theme-spec.md par.7): MLS/IDX pointer panel ---------- */
.fwre-us-mls-note {
    display: flex;
    gap: var(--fwre-space-10);
    align-items: flex-start;
    margin-top: var(--fwre-space-16);
    border: 1px solid var(--fwre-grey-border);
    border-radius: var(--fwre-radius);
    padding: var(--fwre-space-12) var(--fwre-space-14);
}

/* The fwre-home glyph is intrinsically 11x11 (demo-icons.js); scale it to a readable size. */
.fwre-us-mls-note .fwre-us-mls-note-icon { color: var(--fwre-green); margin-top: 2px; width: 24px; height: 24px; flex: none; }
.fwre-us-mls-note .fwre-us-mls-note-icon svg { width: 100%; height: 100%; max-width: none; }