/**
 * Unified listing card photos — desktop list + mobile stack (same image URL, consistent sizing).
 * Load after zillow-explorer-refine.css and listing-cards-mobile.css.
 */

:root {
  --swmo-card-img-w: 220px;
  --swmo-card-img-h: 160px;
  --swmo-card-mobile-photo-h: 240px;
}

/* —— Desktop map list: fixed photo column (not /homes photo-on-top grid) —— */
@media (min-width: 769px) {
  .zillow-explorer.is-map-mode {
    --zx-card-img-w: var(--swmo-card-img-w);
    --zx-card-h: var(--swmo-card-img-h);
    --zx-list-col: 54%;
    --zx-map-col: 46%;
  }

  .zillow-explorer.is-map-mode .homes-list--zillow .zillow-card:not(.zillow-card--skeleton),
  .homes-list--zillow:not(.homes-list--grid) > .zillow-card:not(.zillow-card--skeleton) {
    grid-template-columns: var(--swmo-card-img-w) minmax(0, 1fr) !important;
    max-height: var(--swmo-card-img-h) !important;
  }

  .zillow-explorer.is-map-mode .homes-list--zillow .zillow-card-photo-wrap.listing-card-photo-wrap,
  .homes-list--zillow:not(.homes-list--grid) > .zillow-card .zillow-card-photo-wrap.listing-card-photo-wrap {
    position: relative !important;
    width: var(--swmo-card-img-w) !important;
    min-width: var(--swmo-card-img-w) !important;
    max-width: var(--swmo-card-img-w) !important;
    height: var(--swmo-card-img-h) !important;
    min-height: var(--swmo-card-img-h) !important;
    max-height: var(--swmo-card-img-h) !important;
    aspect-ratio: unset !important;
    flex-shrink: 0 !important;
    background: #e8ecf0 !important;
    overflow: hidden !important;
  }

  .zillow-explorer.is-map-mode .homes-list--zillow .zillow-card-photo-btn.listing-card-photo-btn,
  .homes-list--zillow:not(.homes-list--grid) > .zillow-card .zillow-card-photo-btn.listing-card-photo-btn {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: var(--swmo-card-img-h) !important;
    aspect-ratio: unset !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .zillow-explorer.is-map-mode .homes-list--zillow .listing-card-photo-img,
  .zillow-explorer.is-map-mode .homes-list--zillow .zillow-card-photo-btn img,
  .homes-list--zillow:not(.homes-list--grid) > .zillow-card .listing-card-photo-img,
  .homes-list--zillow:not(.homes-list--grid) > .zillow-card .zillow-card-photo-btn 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;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .zillow-explorer.is-map-mode .homes-list--zillow .zillow-card--skeleton,
  .homes-list--zillow:not(.homes-list--grid) > .zillow-card--skeleton {
    grid-template-columns: var(--swmo-card-img-w) minmax(0, 1fr) !important;
    max-height: var(--swmo-card-img-h) !important;
    min-height: var(--swmo-card-img-h) !important;
  }

  .zillow-explorer.is-map-mode .homes-list--zillow .zillow-card--skeleton .card-skel-thumb,
  .homes-list--zillow:not(.homes-list--grid) > .zillow-card--skeleton .card-skel-thumb {
    min-height: var(--swmo-card-img-h) !important;
    max-height: var(--swmo-card-img-h) !important;
    aspect-ratio: unset !important;
  }
}

/* —— Mobile: full-width photo on top, explicit height —— */
@media (max-width: 768px) {
  .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;
    width: 100% !important;
    max-width: min(100%, 380px) !important;
  }

  .homes-list--zillow .zillow-card-photo-wrap.listing-card-photo-wrap,
  .premium-card--rich .premium-card-photo-wrap.listing-card-photo-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--swmo-card-mobile-photo-h) !important;
    min-height: 220px !important;
    max-height: 260px !important;
    aspect-ratio: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #e8ecf0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  .homes-list--zillow .zillow-card-photo-btn.listing-card-photo-btn,
  .premium-card--rich .zillow-card-photo-btn.listing-card-photo-btn {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
    max-height: 260px !important;
    aspect-ratio: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #e8ecf0 !important;
  }

  .homes-list--zillow .listing-card-photo-img,
  .homes-list--zillow .zillow-card-photo-btn img,
  .premium-card--rich .listing-card-photo-img,
  .premium-card--rich .zillow-card-photo-btn img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
    max-height: 260px !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    object-position: center center !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .featured-carousel .premium-card-photo-wrap.listing-card-photo-wrap,
  .map-listing-rail .premium-card-photo-wrap.listing-card-photo-wrap {
    height: 168px !important;
    min-height: 140px !important;
    max-height: 188px !important;
    aspect-ratio: unset !important;
  }

  .featured-carousel .listing-card-photo-img,
  .map-listing-rail .listing-card-photo-img {
    min-height: 140px !important;
    max-height: 188px !important;
  }

  /* Listing modal — Similar homes & discovery rows (index + homes) */
  body.listing-modal-open #listing-modal .lp-similar-track .premium-card-photo-wrap.listing-card-photo-wrap,
  body.listing-modal-open #listing-modal .ld-similar-track .premium-card-photo-wrap.listing-card-photo-wrap,
  body.listing-modal-open #listing-modal .modal-similar-grid .premium-card-photo-wrap.listing-card-photo-wrap,
  body.listing-modal-open #listing-modal .listing-discovery-track .premium-card-photo-wrap.listing-card-photo-wrap {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 220px !important;
    aspect-ratio: unset !important;
  }

  body.listing-modal-open #listing-modal .lp-similar-track .listing-card-photo-img,
  body.listing-modal-open #listing-modal .ld-similar-track .listing-card-photo-img,
  body.listing-modal-open #listing-modal .modal-similar-grid .listing-card-photo-img,
  body.listing-modal-open #listing-modal .listing-discovery-track .listing-card-photo-img,
  body.listing-modal-open #listing-modal .lp-similar-track .zillow-card-photo-btn img,
  body.listing-modal-open #listing-modal .ld-similar-track .zillow-card-photo-btn img,
  body.listing-modal-open #listing-modal .modal-similar-grid .zillow-card-photo-btn img,
  body.listing-modal-open #listing-modal .listing-discovery-track .zillow-card-photo-btn img {
    position: relative !important;
    display: block !important;
    min-height: 200px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Neutral placeholder when image missing */
.listing-card-photo-wrap.is-placeholder {
  background: #e8ecf0 url('/images/og-image.svg') center / 42% auto no-repeat !important;
}

.listing-card-photo-img.is-fallback {
  object-fit: contain !important;
  object-position: center !important;
  padding: 12px;
  background: #eef1f4;
}