/* Release 10.1.2 — Image overlap and responsive layout correction */

/* Establish predictable stacking and clipping across marketplace sections. */
.market-hero,
.market-hero-inner,
.marketplace-section,
.marketplace-shell,
.property-grid,
.property-card,
.property-image-wrap,
.property-body,
.partner-preview-image,
.hero {
  position: relative;
  isolation: isolate;
}

.marketplace-section,
.marketplace-shell,
.property-grid {
  overflow: visible;
}

/* Each property card owns its image; no image may escape into another card. */
.property-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.property-card:hover {
  z-index: 2;
}

.property-image-wrap {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  background: #e9edf2;
  z-index: 1;
}

.property-image-wrap > img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 1 !important;
}

.property-status,
.property-rank {
  position: absolute !important;
  z-index: 3 !important;
}

.property-body {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  background: #fff;
  z-index: 2;
}

/* Prevent long labels and metadata from expanding or pushing adjacent cards. */
.property-title-row,
.property-title-row > div,
.property-meta,
.property-actions,
.property-price-box {
  min-width: 0;
}

.property-title-row h3,
.property-meta span,
.property-amenities span {
  overflow-wrap: anywhere;
}

/* Grid uses minmax(0,1fr), which prevents overflowing image/card content. */
.property-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
}

.property-grid > * {
  min-width: 0;
}

/* The hero form remains above its background image but below the top navigation. */
.market-hero {
  overflow: hidden;
  z-index: 0;
}

.market-hero::before,
.market-hero::after {
  pointer-events: none;
}

.market-hero-inner {
  z-index: 2;
}

.market-hero-copy,
.market-search-card {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.market-search-card {
  overflow: hidden;
}

/* Protect public hospitality previews and QR images. */
.partner-preview-image,
.qr {
  overflow: hidden;
}

.partner-preview-image img,
.qr img,
img.qr {
  position: relative !important;
  inset: auto !important;
  object-fit: cover;
  transform: none !important;
}

img.qr {
  object-fit: contain !important;
}

/* General safeguard for images inside cards, while leaving logos untouched. */
.card img:not(.brand-logo-img):not(.logo img),
.row img,
.marketplace-section img {
  max-width: 100%;
}

/* Tablet */
@media (max-width: 1080px) {
  .property-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .property-image-wrap {
    aspect-ratio: 16 / 10;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .property-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }

  .property-card {
    width: 100%;
  }

  .property-image-wrap {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  .property-status {
    left: 10px !important;
    top: 10px !important;
  }

  .property-rank {
    right: 10px !important;
    top: 10px !important;
  }
}

/* Very small screens: stack price and action areas cleanly. */
@media (max-width: 430px) {
  .property-price-box,
  .property-actions {
    grid-template-columns: 1fr !important;
  }

  .property-image-wrap {
    aspect-ratio: 4 / 3;
  }
}