/* ============================================================================
   PROPERTIES PAGE - Mobile Responsive Fixes
   ============================================================================ */

/* ========================================================================
   MOBILE VIEW TOGGLE FIXES
   ======================================================================== */
@media (max-width: 1200px) {
    .properties-hero-content {
    margin-top: 40px;
    }
}

@media (max-width: 768px) {
    /* Ensure proper grid display on mobile */
    .properties-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
        width: 100% !important;
    }
    
    /* List view specific fixes for mobile */
    .properties-grid.list-view {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    
    .properties-grid.list-view .property-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
    }
    
    .properties-grid.list-view .property-image {
        height: 250px !important;
        min-height: 250px !important;
        width: 100% !important;
    }
    
    .properties-grid.list-view .property-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: var(--space-5) !important;
        flex: 1 !important;
    }
    
    .properties-grid.list-view .property-features {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: var(--space-3) !important;
        margin-bottom: var(--space-4) !important;
    }
    
    .properties-grid.list-view .property-feature {
        display: inline-flex !important;
        align-items: center !important;
        gap: var(--space-2) !important;
        padding: var(--space-2) var(--space-3) !important;
        border-radius: var(--radius-full) !important;
        background: var(--color-gray-50) !important;
        border: 1px solid var(--color-gray-200) !important;
        color: var(--color-gray-700) !important;
        font-size: var(--font-size-sm) !important;
        white-space: nowrap !important;
    }
    
    .properties-grid.list-view .property-actions {
        margin-top: auto !important;
        justify-content: center !important;
        padding-top: var(--space-4) !important;
    }
    
    /* Map view fixes */
    #properties-map {
        min-height: 400px !important;
        height: 400px !important;
        width: 100% !important;
        border-radius: var(--radius-xl) !important;
    }
    
    /* View controls mobile fixes */
    .view-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-4) !important;
    }
    
    .view-toggle {
        justify-content: center !important;
    }
    
    .sort-controls {
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .sort-select {
        min-width: 160px !important;
    }
    
    /* Results header mobile */
    .results-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-4) !important;
    }
    
    .results-info {
        order: 1 !important;
    }
    
    .view-controls {
        order: 2 !important;
    }
    
    /* Active filters mobile */
    .active-filters {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-2) !important;
    }
    
    .filter-tags {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    
    /* Property card mobile improvements */
    .property-card {
        border-radius: var(--radius-xl) !important;
        overflow: hidden !important;
        box-shadow: var(--shadow-base) !important;
        transition: var(--transition-all) !important;
    }
    
    .property-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: var(--shadow-lg) !important;
    }
    
    .property-content {
        padding: var(--space-5) !important;
    }
    
    .property-title {
        font-size: var(--font-size-lg) !important;
        line-height: var(--line-height-tight) !important;
        margin-bottom: var(--space-2) !important;
    }
    
    .property-location {
        margin-bottom: var(--space-3) !important;
        font-size: var(--font-size-sm) !important;
    }
    
    .property-features {
        margin-bottom: var(--space-4) !important;
        gap: var(--space-2) !important;
    }
    
    .property-feature {
        font-size: var(--font-size-xs) !important;
        padding: var(--space-1-5) var(--space-3) !important;
    }
    
    .property-price {
        font-size: var(--font-size-xl) !important;
        margin-bottom: var(--space-4) !important;
    }
    
    .view-details-btn {
        padding: var(--space-3) var(--space-5) !important;
        font-size: var(--font-size-sm) !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================================================
   EXTRA SMALL MOBILE FIXES (480px and below)
   ======================================================================== */

@media (max-width: 480px) {
    .properties-grid {
        gap: var(--space-5) !important;
    }
    
    .property-card {
        border-radius: var(--radius-lg) !important;
    }
    
    .property-content {
        padding: var(--space-4) !important;
    }
    
    .property-title {
        font-size: var(--font-size-base) !important;
    }
    
    .property-price {
        font-size: var(--font-size-lg) !important;
    }
    
    .view-details-btn {
        padding: var(--space-2-5) var(--space-4) !important;
        font-size: var(--font-size-xs) !important;
    }
    
    /* Map mobile fixes */
    #properties-map {
        min-height: 300px !important;
        height: 300px !important;
        border-radius: var(--radius-lg) !important;
    }
    
    /* View toggle mobile */
    .view-btn {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    
    .view-btn svg {
        width: 1rem !important;
        height: 1rem !important;
    }
    
    /* Sort controls mobile */
    .sort-select {
        min-width: 140px !important;
        font-size: var(--font-size-sm) !important;
        padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3) !important;
    }
    
    .sort-label {
        font-size: var(--font-size-xs) !important;
    }
}

/* ========================================================================
   LANDSCAPE MOBILE FIXES
   ======================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .properties-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-4) !important;
    }
    
    .properties-grid.list-view {
        grid-template-columns: 1fr !important;
    }
    
    #properties-map {
        min-height: 350px !important;
        height: 350px !important;
    }
}

/* ========================================================================
   FORCE VISIBILITY AND LAYOUT FIXES
   ======================================================================== */

/* Ensure grid is always visible when not in map mode */
.properties-grid:not([style*="display: none"]) {
    display: grid !important;
}

/* Ensure map is hidden when not in map mode */
#properties-map[style*="display: none"] {
    display: none !important;
}

/* Ensure map is visible when in map mode */
#properties-map[style*="display: block"] {
    display: block !important;
}

/* Force proper grid layout */
.properties-view-container {
    width: 100% !important;
    position: relative !important;
}

/* ========================================================================
   JAVASCRIPT INTERACTION FIXES
   ======================================================================== */

/* Ensure smooth transitions for view changes */
.properties-grid,
#properties-map {
    transition: opacity 0.3s ease !important;
}

/* Loading state fixes */
.properties-grid.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

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

@media (max-width: 768px) {
    /* Ensure touch targets are large enough */
    .view-btn,
    .sort-select,
    .filter-tag .remove-filter {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Improve focus visibility */
    .view-btn:focus,
    .sort-select:focus {
        outline: 2px solid var(--color-accent) !important;
        outline-offset: 2px !important;
    }
    
    /* Ensure readable text */
    .property-title,
    .property-price,
    .property-location {
        color: var(--color-primary) !important;
    }
    
    .property-feature {
        color: var(--color-gray-700) !important;
    }
}

/* ========================================================================
   DEBUGGING HELPERS (Remove in production)
   ======================================================================== */

/* Uncomment for debugging layout issues */
/*
.properties-grid {
    border: 2px solid red !important;
}

.properties-grid.list-view {
    border: 2px solid blue !important;
}

#properties-map {
    border: 2px solid green !important;
}
*/