/**
 * Property Detail Page - Layout System
 * 
 * Base container structure, section spacing, and layout foundation
 * Uses modern CSS with fluid scaling and container queries
 * 
 * Version: 2.0 (Modern CSS)
 * Created: 2025-01-27
 */

/* ========================================================================
   MAIN CONTAINER
   ======================================================================== */

.property-detail-container {
  width: 100%;
  min-height: 100vh;
  background: var(--property-bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ========================================================================
   CONTAINER SYSTEM
   ======================================================================== */

.property-container {
  width: 100%;
  padding-inline: var(--container-padding);
  margin-inline: auto;
  max-width: var(--container-xxl);
  box-sizing: border-box;
}

/* Legacy support - maintain compatibility */
.property-container--detail {
  /* Inherit from .property-container */
  width: 100%;
  padding-inline: var(--container-padding);
  margin-inline: auto;
  max-width: var(--container-xxl);
  box-sizing: border-box;
}

/* ========================================================================
   SECTION CONTAINERS
   ======================================================================== */

.property-header-section {
  padding-block: var(--section-spacing-sm);
  background: var(--property-bg);
  border-bottom: 1px solid var(--property-border);
}

.property-content-section {
  padding-block: var(--section-spacing);
  background: var(--property-bg);
}

.property-map-section {
  width: 100%;
  position: relative;
  padding: 0;
  /* Add proper spacing above and below - CRITICAL */
  margin: var(--section-spacing-sm) 0 var(--section-spacing-lg) 0;
  background: var(--color-background-secondary, #f9fafb);
  /* Ensure proper spacing from content above */
  clear: both;
  /* Prevent overlap from other sections */
  isolation: isolate;
}

.similar-properties-section {
  padding-block: var(--section-spacing);
  background: var(--property-bg);
  /* CRITICAL: Add top margin to ensure it doesn't overlap map-info */
  margin-top: 0;
  padding-top: var(--section-spacing-lg);
  clear: both;
  /* Ensure it's below the map section */
  position: relative;
  z-index: 0;
}

/* ========================================================================
   GALLERY SECTION
   ======================================================================== */

.property-gallery-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--property-primary);
  /* Height is handled by gallery.css */
}

/* ========================================================================
   RESPONSIVE ADJUSTMENTS
   ======================================================================== */

/* Tablet and below - reduce section spacing */
@media (max-width: 991px) {
  .property-header-section,
  .property-content-section,
  .similar-properties-section {
    padding-block: var(--section-spacing-sm);
  }
}

/* Mobile - further reduce spacing */
@media (max-width: 767px) {
  .property-container,
  .property-container--detail {
    padding-inline: var(--space-md);
  }
  
  .property-header-section {
    padding-block: var(--space-xl);
  }
  
  .property-content-section,
  .similar-properties-section {
    padding-block: var(--space-xl);
  }
}

/* Large screens - maximize container width */
@media (min-width: 1400px) {
  .property-container,
  .property-container--detail {
    max-width: var(--container-xxl);
  }
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

/* Section spacing utilities */
.section-spacing {
  padding-block: var(--section-spacing);
}

.section-spacing-sm {
  padding-block: var(--section-spacing-sm);
}

.section-spacing-lg {
  padding-block: var(--section-spacing-lg);
}

/* Content visibility for performance */
@media (prefers-reduced-motion: no-preference) {
  .property-content-section,
  .similar-properties-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }
}