/* Suggestions container responsive styling */
.suggestions-container {
  width: 100% !important; /* Full width on mobile */
  left: 0 !important;
  right: 0 !important;
}

@media (min-width: 640px) {
  .suggestions-container {
    width: calc(100% - 4rem) !important; /* Inset on larger screens */
    left: 2rem !important; /* Align with the straight part of the input */
    right: 2rem !important;
    border-radius: 0.5rem !important; /* Less rounded than the input */
  }
}

/* Mobile-specific styles for MLS listings - NO SPLIT VIEW ON MOBILE */
@media (max-width: 768px) {
  /* Force list/grid view on mobile if split view is somehow activated */
  .view-split .split-view {
    display: none !important;
  }
  .view-split .list-view {
    display: block !important;
  }
  .view-split #map-canvas {
    visibility: hidden;
  }
  
  /* Hide split view option in layout dropdown on mobile */
  [data-layout="split"] {
    display: none !important;
  }
  
  /* Ensure proper mobile grid layout */
  #listings-grid {
    grid-template-columns: 1fr !important; /* Single column on mobile */
  }
}

/* Tablet adjustments */
@media (min-width: 640px) and (max-width: 768px) {
  #listings-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on tablets */
  }
}

/* MLS Show Page Main Gallery Container Fix */
.mb-8[data-controller="gallery"] {
  position: relative !important;
  contain: layout !important;
}

/* Hero image section with fixed height */
.mb-8[data-controller="gallery"] > div:first-child {
  height: 500px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Fix desktop layout grid */
.mb-8[data-controller="gallery"] .hidden.lg\\:block {
  position: relative !important;
  overflow: hidden !important;
}

/* Ensure main grid has fixed height */
.mb-8[data-controller="gallery"] .grid.grid-cols-5 {
  height: 500px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Fix column spans */
.mb-8[data-controller="gallery"] .col-span-3 {
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.mb-8[data-controller="gallery"] .col-span-2 {
  height: 100% !important;
  position: relative !important;
}

/* Main gallery section - ensure proper expansion */
#image-gallery {
  position: relative !important;
  z-index: 1 !important;
  background: white !important;
  transition: max-height 0.3s ease !important;
}

/* When gallery is expanded/visible */
#image-gallery:not(.hidden) {
  max-height: 500px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* When gallery is collapsed */
#image-gallery.hidden {
  max-height: 0 !important;
  overflow: hidden !important;
}

/* The main gallery grid container */
.mls-gallery-section {
  position: relative !important;
  overflow: visible !important;
  margin-bottom: 1rem !important;
}

/* When inside the scrollable container, limit height */
#image-gallery .mls-gallery-section {
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Each gallery row should have a fixed height */
.mls-gallery-row {
  height: 200px !important;
  max-height: 200px !important;
  overflow: hidden !important;
  margin-bottom: 1rem !important;
  display: grid !important;
  position: relative !important;
}

/* All gallery containers must respect the row height */
.mls-gallery-container {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  border-radius: 0.5rem !important;
  position: relative !important;
  display: block !important;
}

/* Images must fill containers but not overflow */
.mls-gallery-image {
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: relative !important;
  transform: none !important;
  z-index: 1 !important;
}

/* Stack columns in gallery rows must respect the height */
.mls-gallery-row .flex.flex-col {
  height: 100% !important;
  max-height: 200px !important;
  overflow: hidden !important;
  gap: 0.5rem !important;
}

/* Each stacked image should be half the row height minus gap */
.mls-gallery-row .flex.flex-col .mls-gallery-container {
  height: calc(50% - 0.25rem) !important;
  max-height: calc(50% - 0.25rem) !important;
  min-height: calc(50% - 0.25rem) !important;
  flex: none !important;
}

/* Disable all hover effects that cause positioning issues */
.mls-gallery-container:hover .mls-gallery-image {
  transform: none !important;
  scale: none !important;
}

/* Ensure no images can overflow their containers */
.mls-gallery-container {
  contain: layout !important;
}

/* Fix absolute positioned elements within gallery */
#image-gallery .absolute.inset-0 {
  position: absolute !important;
  z-index: 2 !important;
}

/* Ensure proper stacking context */
.mb-8[data-controller="gallery"] {
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure content below gallery is not covered */
.property-address-section {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  margin-top: 1rem !important;
}