/**
 * Zillow-style map + listing feed — proportions, spacing, compact cards.
 * Loads last. v20260521
 */

:root {
  --zx-explorer-h: min(760px, calc(100vh - 132px));
  --zx-map-col: 48%;
  --zx-list-col: 52%;
  --zx-card-h: 160px;
  --zx-card-img-w: 220px;
}

/* Remove disconnected map thumbnail strip */
.map-listing-rail,
#map-listing-rail {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
}

/* —— Desktop explorer: 48/52 split, fixed height —— */
@media (min-width: 769px) {
  .site-premium #homes-explorer.zillow-explorer,
  .zillow-explorer.results-panel {
    min-height: var(--zx-explorer-h) !important;
    max-height: var(--zx-explorer-h) !important;
    height: var(--zx-explorer-h) !important;
  }

  .zillow-explorer.is-map-mode {
    --zx-map-width: var(--zx-map-col);
    display: grid !important;
    grid-template-columns: var(--zx-map-col) var(--zx-list-col) !important;
    grid-template-areas: 'map feed' !important;
    gap: 0 !important;
    min-height: var(--zx-explorer-h) !important;
    max-height: var(--zx-explorer-h) !important;
    height: var(--zx-explorer-h) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #d1d5db;
    box-shadow: 0 2px 12px rgba(7, 21, 38, 0.06);
  }

  .zillow-explorer.is-map-mode .zillow-map-col {
    grid-area: map !important;
    height: var(--zx-explorer-h) !important;
    max-height: var(--zx-explorer-h) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    border-right: 1px solid #e2e6ea;
  }

  .zillow-explorer.is-map-mode .homes-map-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }

  .zillow-explorer.is-map-mode .homes-map-shell .homes-map {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 12px 0 0 0;
  }

  .zillow-explorer.is-map-mode .zillow-list-col {
    grid-area: feed !important;
    height: var(--zx-explorer-h) !important;
    max-height: var(--zx-explorer-h) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .zillow-explorer.is-map-mode .homes-list--zillow {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0.45rem 0.5rem 0.55rem !important;
    gap: 0.45rem !important;
  }

  .zillow-explorer.is-map-mode .homes-pagination {
    flex-shrink: 0;
    padding: 0.45rem 0.55rem !important;
    border-top: 1px solid #e8ecf0;
  }

  /* Compact horizontal Zillow cards */
  .homes-list--zillow .zillow-card:not(.zillow-card--skeleton) {
    display: grid !important;
    grid-template-columns: var(--zx-card-img-w) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    flex-direction: row !important;
    align-items: stretch !important;
    max-height: var(--zx-card-h) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1px solid #e2e6ea !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #fff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  .homes-list--zillow .zillow-card:hover {
    transform: none !important;
    border-color: #c9c9c9 !important;
    box-shadow: 0 2px 8px rgba(7, 21, 38, 0.08) !important;
  }

  .homes-list--zillow .zillow-card-photo-wrap {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: var(--zx-card-h) !important;
    max-height: var(--zx-card-h) !important;
    aspect-ratio: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #e8ecf0 !important;
    overflow: hidden !important;
  }

  .homes-list--zillow .zillow-card-photo-btn {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
    aspect-ratio: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: #e8ecf0 !important;
  }

  .homes-list--zillow .zillow-card-photo-btn img,
  .homes-list--zillow .zillow-card-photo-wrap img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  .homes-list--zillow .zillow-card:hover .zillow-card-photo-wrap img {
    transform: none !important;
  }

  .homes-list--zillow .zillow-card-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 0.5rem 0.65rem 0.55rem !important;
    gap: 0.2rem !important;
  }

  .homes-list--zillow .zillow-card-info {
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }

  .homes-list--zillow .zillow-card-price {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: #2a2a33 !important;
  }

  .homes-list--zillow .zillow-card-address {
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: #596b82 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .homes-list--zillow .zillow-card-meta {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #596b82 !important;
  }

  .homes-list--zillow .zillow-card-meta:empty {
    display: none !important;
  }

  .homes-list--zillow .zillow-card-status {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #1a6b3c;
    margin: 0.1rem 0 0 !important;
  }

  .homes-list--zillow .zillow-card-idx,
  .homes-list--zillow .zillow-card-courtesy {
    display: none !important;
  }

  .homes-list--zillow .zillow-card-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    margin-top: 0.35rem !important;
  }

  .homes-list--zillow .zillow-card-actions .btn-sm {
    flex: 0 1 auto !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 0.28rem 0.55rem !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
  }

  .homes-list--zillow .zillow-card-actions .btn-view-details {
    border-width: 1px !important;
  }

  .homes-list--zillow .zillow-card-save {
    width: 32px !important;
    height: 32px !important;
    top: 0.35rem !important;
    right: 0.35rem !important;
    font-size: 0.95rem !important;
  }

  .homes-list--zillow .zillow-card-tags {
    top: 0.35rem !important;
    left: 0.35rem !important;
    bottom: auto !important;
    gap: 0.25rem !important;
  }

  .homes-list--zillow .zillow-card-tag {
    font-size: 0.62rem !important;
    padding: 0.18rem 0.4rem !important;
  }

  .homes-list--zillow .zillow-card-photo-dots {
    display: none !important;
  }

  /* Skeleton matches horizontal card */
  .homes-list--zillow .zillow-card--skeleton {
    display: grid !important;
    grid-template-columns: var(--zx-card-img-w) minmax(0, 1fr) !important;
    max-height: var(--zx-card-h) !important;
    min-height: var(--zx-card-h) !important;
  }

  .homes-list--zillow .zillow-card--skeleton .zillow-card-photo-wrap,
  .homes-list--zillow .zillow-card--skeleton .zillow-card-photo-btn {
    min-height: var(--zx-card-h) !important;
    height: 100% !important;
  }

  .homes-list--zillow .zillow-card--skeleton .card-skel-thumb {
    width: 100% !important;
    height: 100% !important;
    min-height: var(--zx-card-h) !important;
    aspect-ratio: unset !important;
  }
}

/* —— Mobile: stacked photo-first cards —— */
@media (max-width: 768px) {
  .site-premium #homes-explorer.zillow-explorer {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  .homes-list--zillow {
    gap: 0.65rem !important;
    padding: 0.35rem 0.45rem !important;
  }

  .homes-list--zillow .zillow-card:not(.zillow-card--skeleton) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    max-height: none !important;
    border-radius: 10px !important;
    border: 1px solid #e2e6ea !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .homes-list--zillow .zillow-card-photo-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 220px !important;
    min-height: 0 !important;
  }

  .homes-list--zillow .zillow-card-photo-btn {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    min-height: 0 !important;
  }

  .homes-list--zillow .zillow-card-body {
    padding: 0.55rem 0.65rem 0.6rem !important;
  }

  .homes-list--zillow .zillow-card-price {
    font-size: 1.08rem !important;
  }

  .homes-list--zillow .zillow-card-address {
    white-space: normal !important;
    font-size: 0.84rem !important;
  }

  .homes-list--zillow .zillow-card-idx,
  .homes-list--zillow .zillow-card-courtesy {
    display: none !important;
  }
}

/* Toolbar + results tighter */
.search-results > .container {
  max-width: min(100%, 1560px);
}

.results-toolbar {
  margin-bottom: 0.4rem !important;
  gap: 0.5rem !important;
}

.results-count {
  font-size: 0.95rem !important;
}

.idx-search-disclaimer {
  margin: 0.35rem 0 0.45rem !important;
  font-size: 0.68rem !important;
  line-height: 1.4 !important;
}
