/**
 * Property Detail Page - Content Grid System
 * 
 * Modern responsive 2-column grid layout
 * Uses CSS Grid with intelligent auto-sizing and container queries
 * 
 * Version: 2.0 (Modern CSS)
 * Created: 2025-01-27
 */

/* ========================================================================
   CONTENT GRID - MAIN LAYOUT
   ======================================================================== */

.property-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-lg);
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* ========================================================================
   MAIN CONTENT AREA
   ======================================================================== */

.property-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-width: 0;
  /* Critical: Prevents grid overflow */
  width: 100%;
}

/* Section Cards */
.property-section-card {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  background: var(--property-card-bg);
  border: 1px solid var(--property-border);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
  position: relative;
}

.property-section-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

/* Compact variant for nearby section */
.property-section-card--compact {
  padding: var(--card-padding-sm);
}

/* Section Titles */
.section-title {
  font-family: var(--font-family-heading, 'Playfair Display', serif);
  font-size: var(--font-heading);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--font-heading-line-height);
  color: var(--property-text);
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--property-border);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section-title i {
  color: var(--property-accent);
  font-size: 1.2em;
}

/* ========================================================================
   SIDEBAR AREA
   ======================================================================== */

.property-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
}

/* Sidebar Cards */
.sidebar-card {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  background: var(--property-card-bg);
  border: 1px solid var(--property-border);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
  position: relative;
}

.sidebar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

/* ========================================================================
   RESPONSIVE BEHAVIOR
   ======================================================================== */

/* Desktop: 2-column layout with sticky sidebar */
@media (min-width: 992px) {
  .property-content-grid {
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--grid-gap-lg);
    align-items: start;
  }

  .property-sidebar {
    position: sticky;
    top: calc(var(--header-height, 70px) + var(--space-md));
    align-self: start;
    /* Remove max-height restriction - let content flow naturally */
    height: fit-content;
    max-height: none;
    overflow-y: visible;
  }

  /* Only enable scrolling when sidebar actually overflows viewport (optional class) */
  .property-sidebar.force-scroll {
    max-height: calc(100vh - var(--header-height, 70px) - var(--space-xl));
    overflow-y: auto;
    scroll-behavior: smooth;
  }

  /* Custom scrollbar for sidebar (only when scrolling) */
  .property-sidebar.force-scroll::-webkit-scrollbar {
    width: 6px;
  }

  .property-sidebar.force-scroll::-webkit-scrollbar-track {
    background: var(--property-bg);
    border-radius: var(--card-radius-sm);
  }

  .property-sidebar.force-scroll::-webkit-scrollbar-thumb {
    background: var(--property-border);
    border-radius: var(--card-radius-sm);
  }

  .property-sidebar.force-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--property-text-secondary);
  }
}

/* Tablet: Sidebar below main content */
@media (min-width: 768px) and (max-width: 991px) {
  .property-content-grid {
    grid-template-columns: 1fr;
    gap: var(--grid-gap-md);
  }

  .property-sidebar {
    order: -1;
    /* Move sidebar above main content on tablet */
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Mobile: Single column, full width */
@media (max-width: 767px) {
  .property-content-grid {
    gap: var(--grid-gap-sm);
  }

  /* Move sidebar (with booking tabs) above main content on mobile */
  .property-sidebar {
    order: -1;
    max-width: 100%;
    margin: 0;
  }

  .property-main {
    gap: var(--space-lg);
  }

  .property-section-card,
  .sidebar-card {
    padding: var(--card-padding-sm);
    border-radius: var(--card-radius-sm);
  }

  .section-title {
    font-size: clamp(1.25rem, 4vw + 0.5rem, 1.75rem);
    margin-bottom: var(--space-sm);
  }
}

/* ========================================================================
   CONTAINER QUERIES (Modern browsers)
   ======================================================================== */

@supports (container-type: inline-size) {
  .property-content-grid {
    container-type: inline-size;
    container-name: content-grid;
  }

  /* Adjust sidebar card padding based on container width */
  @container content-grid (max-width: 400px) {
    .sidebar-card {
      padding: var(--card-padding-sm);
    }
  }

  /* Adjust section cards in narrow containers */
  @container content-grid (max-width: 600px) {
    .property-section-card {
      padding: var(--card-padding-sm);
    }
  }
}

/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

/* Focus indicators */
.property-section-card:focus-within,
.sidebar-card:focus-within {
  outline: 2px solid var(--property-accent);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .property-section-card,
  .sidebar-card {
    transition: none;
  }

  .property-section-card:hover,
  .sidebar-card:hover {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {

  .property-section-card,
  .sidebar-card {
    border-width: 2px;
  }

  .section-title {
    border-bottom-width: 3px;
  }
}