/* ============================================================
   NestAbode Listings — Split-screen UX (v4.0.0)
   File: assets/css/listings-search.css
   Scope: page-templates/page-search.php only
   ============================================================ */

/* Lay-out tokens — local to this template */
.lx-shell {
    --lx-header-offset: 72px;   /* site header height */
    --lx-bar-h: 64px;           /* sticky filter bar height */
    --lx-pane-radius: 0;
    --lx-card-radius: 14px;
    --lx-map-w: 60%;            /* spec: 60/40 */
    --lx-list-w: 40%;
    --lx-card-gap: 18px;
    --lx-shadow: 0 6px 20px rgba(10,13,20,.06);
    --lx-shadow-strong: 0 12px 30px rgba(10,13,20,.12);
}

/* prevent page-level horizontal overflow regardless of grid math */
body.page-template-page-search { overflow-x: hidden; }
.lx-shell, .lx-results, .lx-map-pane, .lx-list-pane { max-width: 100%; box-sizing: border-box; }
.lx-shell *, .lx-shell *::before, .lx-shell *::after { box-sizing: border-box; }

/* ─── Intro strip ─────────────────────────────────────── */
.lx-intro {
    padding: 40px 0 24px;
    border-bottom: 1px solid var(--border);
}
.lx-intro .eyebrow { margin-bottom: 8px; }
.lx-intro h1 {
    margin: 0 0 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: -.01em;
}
.lx-stats {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 14px;
}
.lx-stats strong {
    color: var(--dark);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    margin-right: 4px;
}

/* ─── Sticky filter bar ───────────────────────────────── */
.lx-filterbar {
    position: sticky;
    top: var(--lx-header-offset);
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(10,13,20,.02);
}
.lx-filterbar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    min-height: var(--lx-bar-h);
    max-width: 1600px;
    margin: 0 auto;
    flex-wrap: nowrap;
}
.lx-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    flex: 0 1 auto;
    min-width: 0;
}
.lx-search {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 380px;
}
.lx-search input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 13px;
    background: var(--soft);
    transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.lx-search input:focus {
    outline: none;
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,150,218,.12);
}
.lx-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.lx-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
}
.lx-btn-ghost {
    background: transparent;
    color: var(--muted);
    border: none;
    font-size: 13px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 8px;
    font-family: inherit;
}
.lx-btn-ghost:hover { color: var(--dark); background: var(--soft); }

/* Override the legacy .dsv-pill chrome to a cleaner Compass-style chip */
.lx-shell .dsv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    color: var(--dark);
    user-select: none;
    position: relative;
    transition: all .15s var(--ease);
    white-space: nowrap;
    line-height: 1;
}
.lx-shell .dsv-pill:hover { border-color: var(--blue); color: var(--blue); }
.lx-shell .dsv-pill.has-value {
    background: rgba(0,150,218,.08);
    border-color: var(--blue);
    color: var(--blue);
    font-weight: 500;
}
.lx-shell .dsv-pill svg { opacity: .55; }

/* Filter pill popups (rendered by dolce-search.js) */
.lx-shell .dsv-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-4);
    padding: 16px;
    z-index: 60;
}
.lx-shell .dsv-popup label { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:14px; color:var(--dark); cursor:pointer; margin:0; }
.lx-shell .dsv-popup .dsv-row { display:flex; gap:10px; align-items:center; }
.lx-shell .dsv-popup input[type="number"] { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:13px; }
.lx-shell .dsv-popup .dsv-chip {
    display:inline-flex; align-items:center;
    padding:8px 14px; border:1px solid var(--border);
    border-radius:var(--radius-pill); cursor:pointer;
    font-size:13px; margin:3px;
}
.lx-shell .dsv-popup .dsv-chip.active { background:var(--blue); color:#fff; border-color:var(--blue); }

/* GTA region picker — grouped, scrollable, narrower rows */
.lx-shell .dsv-popup-region {
    min-width: 240px;
    max-width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 14px;
}
/* On narrow screens the pill sits inside .lx-filters which is overflow:auto
   on both axes (set as overflow-x:auto, but the spec auto-promotes overflow-y
   to auto as well). Absolute popups get clipped both horizontally (off-screen
   right) and vertically (cut by the 30px tall scroll container).
   Switch the region popup to position:fixed pinned bottom-right so users can
   actually reach the GTA list. Backdrop tap-out continues to close it. */
@media (max-width: 768px) {
    .lx-shell .dsv-popup-region {
        position: fixed;
        top: auto;
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
        min-width: 0;
        max-height: 70vh;
        z-index: 1200;
        box-shadow: 0 24px 48px rgba(10,13,20,.28);
    }
}
.lx-shell .dsv-popup-region .dsv-group-header {
    margin: 10px 0 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
.lx-shell .dsv-popup-region .dsv-group-header:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.lx-shell .dsv-popup-region .dsv-region-row {
    padding: 4px 0;
    font-size: 13.5px;
}

/* ─── View toggle ─────────────────────────────────────── */
.lx-viewtoggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: #fff;
    padding: 3px;
}
.lx-vt-btn {
    border: 0;
    background: transparent;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--radius-pill);
    font-family: inherit;
    transition: background .15s var(--ease), color .15s var(--ease);
    line-height: 1.4;
}
.lx-vt-btn.is-active { background: var(--dark); color: #fff; }
.lx-vt-btn:not(.is-active):hover { color: var(--dark); }

/* ─── Split-screen results ────────────────────────────── */
.lx-results {
    display: grid;
    grid-template-columns: var(--lx-map-w) var(--lx-list-w);
    /* fill remaining viewport below intro + sticky bar */
    min-height: calc(100vh - var(--lx-header-offset) - var(--lx-bar-h));
}

/* Map pane */
.lx-map-pane {
    position: relative;
    background: #e8e8e8;
}
#dsv-map {
    position: sticky;
    top: calc(var(--lx-header-offset) + var(--lx-bar-h));
    height: calc(100vh - var(--lx-header-offset) - var(--lx-bar-h));
    width: 100%;
    min-height: 480px;
    z-index: 1;
}

/* Mobile close-map button — hidden on desktop, shown when forced map view on mobile */
.lx-map-close {
    display: none;
}

/* List pane */
.lx-list-pane {
    background: #fff;
    border-left: 1px solid var(--border);
    padding: 22px 24px 80px;
    min-width: 0;
    /* allow the column to scroll independently when it overflows */
    overflow-x: hidden;
}
.lx-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 2px 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.lx-count {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    color: var(--dark);
    line-height: 1.2;
}
.lx-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}
.lx-sort-label { letter-spacing: .04em; text-transform: uppercase; }
.lx-sort select {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 30px 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 13px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238A9097' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
    cursor: pointer;
    color: var(--dark);
    font-family: inherit;
}
.lx-sort select:focus { outline: none; border-color: var(--blue); }

/* ─── Card grid ───────────────────────────────────────── */
.lx-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lx-card-gap);
}

/* Override the listing-card visuals scoped to this list pane */
.lx-list-pane .listing-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: var(--lx-card-radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--lx-shadow);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    will-change: transform;
}
.lx-list-pane .listing-card:hover,
.lx-list-pane .listing-card.is-highlight {
    transform: translateY(-3px);
    box-shadow: var(--lx-shadow-strong);
    border-color: rgba(0,150,218,.35);
}
.lx-list-pane .listing-card .card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #ECE9E0 0%, #DAD2C0 100%);
    overflow: hidden;
}
.lx-list-pane .listing-card .card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s var(--ease);
}
.lx-list-pane .listing-card:hover .card-image img { transform: scale(1.04); }

.lx-list-pane .listing-card .status-pill {
    position: absolute;
    top: 10px; left: 10px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255,255,255,.95);
    color: var(--dark);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lx-list-pane .listing-card .status-pill.status-lease { background: var(--gold); color: var(--dark); }
.lx-list-pane .listing-card .status-pill.status-sold  { background: #0E1114; color: #fff; }

.lx-list-pane .listing-card .card-arrow {
    position: absolute;
    right: 10px; bottom: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(14,17,20,.78);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.lx-list-pane .listing-card:hover .card-arrow,
.lx-list-pane .listing-card.is-highlight .card-arrow {
    opacity: 1;
    transform: translateY(0);
    background: var(--blue);
}
.lx-list-pane .listing-card .card-arrow svg { width: 14px; height: 14px; }

.lx-list-pane .listing-card .card-body { padding: 14px 16px 18px; }
.lx-list-pane .listing-card .card-price {
    margin: 0 0 4px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--dark);
}
.lx-list-pane .listing-card .card-lease-suffix {
    color: var(--muted);
    font-weight: 500;
    font-size: 13px;
}
.lx-list-pane .listing-card .card-address {
    margin: 0 0 2px;
    font-size: 13px;
    color: var(--dark);
    line-height: 1.35;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lx-list-pane .listing-card .card-location {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--muted);
}
.lx-list-pane .listing-card .card-specs {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.lx-list-pane .listing-card .card-spec {
    font-size: 12px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Skeleton loader */
.lx-list-pane .skeleton-card {
    border-radius: var(--lx-card-radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
    height: 320px;
    position: relative;
}
.lx-list-pane .skeleton-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f6f6f6 0%, #ececec 50%, #f6f6f6 100%);
    background-size: 200% 100%;
    animation: lx-shimmer 1.4s linear infinite;
}
@keyframes lx-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Pagination */
.lx-pagination {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.lx-pagination button {
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    color: var(--dark);
    font-family: inherit;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.lx-pagination button:hover { border-color: var(--blue); color: var(--blue); }
.lx-pagination .btn-primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

/* TRREB disclaimer */
.lx-disclaimer {
    margin-top: 40px;
    padding: 18px 20px;
    background: var(--soft);
    border-radius: 12px;
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
    border: 1px solid var(--border);
}

/* ─── Leaflet price-marker styling ────────────────────── */
.leaflet-marker-icon.price-marker {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--dark);
    border-radius: var(--radius-pill);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(10,13,20,.18);
    line-height: 1.2;
    transition: transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
    width: auto !important;
    height: auto !important;
}
.leaflet-marker-icon.price-marker:hover,
.leaflet-marker-icon.price-marker.is-highlight {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px) scale(1.06);
    z-index: 1000 !important;
}

/* Marker cluster — size-tiered density (small <10, medium 10-99, large 100+) */
.marker-cluster {
    background-clip: padding-box;
    border-radius: 50%;
}
.marker-cluster div {
    width: 30px;
    height: 30px;
    margin: 5px;
    text-align: center;
    border-radius: 50%;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(10,13,20,.18);
}
/* Cluster size tiers — brand cyan→gold scale per v3.4.2 locked palette */
.marker-cluster-small  { background-color: rgba(42,170,225,.22); }        /* Sky Cyan wash */
.marker-cluster-small  div { background-color: #2AAAE1; }                 /* Sky Cyan */
.marker-cluster-medium { background-color: rgba(0,150,218,.25); }         /* Abode Cyan wash */
.marker-cluster-medium div { background-color: #0096DA; }                 /* Abode Cyan */
.marker-cluster-large  { background-color: rgba(227,178,36,.25); }        /* Keystone Gold wash */
.marker-cluster-large  div { background-color: #E3B224; color: #0E1114; } /* Keystone Gold + ink text (WCAG-safe) */

/* Mapbox wordmark overlay — TOS-recommended (text attribution stays in .leaflet-control-attribution) */
.lx-map-pane::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 76px;
    height: 19px;
    background: url('../img/mapbox-logo.svg') no-repeat center / contain;
    pointer-events: none;
    z-index: 401;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,.9));
    opacity: .9;
}

/* ─── Mobile FAB (open map from list) ─────────────────── */
.lx-fab-map {
    display: none;
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    background: var(--dark);
    color: #fff;
    border: 0;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 22px rgba(10,13,20,.32);
    cursor: pointer;
    font-family: inherit;
}

/* ─── View modes (toggled by listings-search.js) ───────── */
.lx-results[data-view="list"] .lx-map-pane { display: none; }
.lx-results[data-view="list"] { grid-template-columns: 1fr; }
.lx-results[data-view="list"] .lx-list-pane { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.lx-results[data-view="list"] .lx-card-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.lx-results[data-view="map"] .lx-list-pane { display: none; }
.lx-results[data-view="map"] { grid-template-columns: 1fr; }
.lx-results[data-view="map"] #dsv-map { height: calc(100vh - var(--lx-header-offset) - var(--lx-bar-h)); }

/* ─── Responsive ──────────────────────────────────────── */

/* tablet: shrink map to 50/50 */
@media (max-width: 1280px) {
    .lx-results { grid-template-columns: 50% 50%; }
}

/* small tablet */
@media (max-width: 1024px) {
    .lx-list-pane .listing-card .card-price { font-size: 18px; }
    .lx-filterbar-inner { padding: 10px 16px; gap: 10px; }
    .lx-filters { gap: 6px; }
    .lx-shell .dsv-pill { padding: 7px 11px; font-size: 12px; }
    .lx-search { max-width: 240px; }
}

/* mobile: collapse to list-with-FAB pattern */
@media (max-width: 768px) {
    .lx-shell { --lx-header-offset: 60px; }
    .lx-shell, .lx-results, .lx-list-pane, .lx-map-pane { width: 100%; max-width: 100vw; }
    .lx-intro { padding: 28px 0 18px; }
    .lx-stats { gap: 18px; font-size: 13px; }
    .lx-filterbar-inner {
        flex-wrap: wrap;
        padding: 10px 16px;
        gap: 8px;
        align-items: flex-start;
        max-width: 100%;
    }
    .lx-filters {
        max-width: 100%;
    }
    .lx-filters { order: 2; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
    .lx-search { order: 1; flex: 1 1 100%; max-width: none; }
    .lx-actions { order: 3; width: 100%; justify-content: space-between; }

    .lx-viewtoggle .lx-vt-btn[data-view="split"] { display: none; }

    .lx-results,
    .lx-results[data-view="split"] {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .lx-results[data-view="split"] .lx-map-pane { display: none; }
    .lx-results[data-view="map"]  .lx-map-pane { display: block; }
    .lx-results[data-view="map"]  .lx-map-pane #dsv-map {
        position: fixed;
        top: var(--lx-header-offset);
        left: 0; right: 0;
        height: calc(100vh - var(--lx-header-offset));
        z-index: 1050;
    }
    .lx-results[data-view="map"] .lx-map-close {
        display: inline-flex;
        position: fixed;
        bottom: 22px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1100;
        background: var(--dark);
        color: #fff;
        border: 0;
        padding: 12px 22px;
        border-radius: var(--radius-pill);
        font-size: 13px;
        font-weight: 600;
        align-items: center;
        gap: 8px;
        box-shadow: 0 8px 22px rgba(10,13,20,.32);
        cursor: pointer;
        font-family: inherit;
    }

    .lx-list-pane { padding: 18px 16px 90px; border-left: 0; }
    .lx-card-grid { grid-template-columns: 1fr; gap: 14px; }

    /* show floating Map button when in list mode */
    .lx-results[data-view="split"] ~ .lx-fab-map,
    .lx-results[data-view="list"]  ~ .lx-fab-map { display: inline-flex; }
}

/* very narrow */
@media (max-width: 380px) {
    .lx-actions .lx-btn-ghost { display: none; }
}