/**
 * property-card-grid.css - Responsive Grid Layouts for Property Cards
 * 
 * Provides responsive grid layouts for property card displays
 */

/* ==========================================================================
   Main Property Grid
   ========================================================================== */

.property-cards-grid,
.properties-grid {
    display: grid;
    gap: 2rem;
    width: 100%;
    align-items: stretch; /* Ensure all cards stretch to same height */
}

/* Ensure all cards have same height */
.property-cards-grid > *,
.properties-grid > * {
    height: 100%;
}

/* Large Desktop: 3 columns for more compact display on large screens */
@media (min-width: 1600px) {
    .property-cards-grid,
    .properties-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Large Desktop: 3 columns */
@media (min-width: 1400px) and (max-width: 1599px) {
    .property-cards-grid,
    .properties-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Desktop: 2 columns for wider, more impressive cards */
@media (min-width: 1200px) and (max-width: 1399px) {
    .property-cards-grid,
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

/* Laptop: 2 columns */
@media (min-width: 992px) and (max-width: 1199px) {
    .property-cards-grid,
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 991px) {
    .property-cards-grid,
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
    .property-cards-grid,
    .properties-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ==========================================================================
   Alternative: Masonry-style Grid (Optional)
   ========================================================================== */

.property-cards-grid.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-auto-rows: 10px;
    gap: 1.5rem;
}

.property-cards-grid.masonry .property-card {
    grid-row-end: span var(--row-span, 40);
}

/* ==========================================================================
   List View Alternative
   ========================================================================== */

.property-cards-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.property-cards-list .property-card {
    display: grid;
    grid-template-columns: 400px 1fr;
    height: auto;
}

.property-cards-list .property-card-image {
    aspect-ratio: 4/3;
}

.property-cards-list .property-card-content {
    padding: 2rem;
}

@media (max-width: 991px) {
    .property-cards-list .property-card {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Featured Property (Hero Size)
   ========================================================================== */

.property-card.featured-hero {
    grid-column: 1 / -1;
}

.property-card.featured-hero .property-card-image {
    aspect-ratio: 21/9;
}

.property-card.featured-hero .property-card-content,
.property-card.featured-hero .property-card-info-overlay {
    padding: 2rem;
}

.property-card.featured-hero .property-title {
    font-size: 1.75rem;
}

/* ==========================================================================
   Similar Properties Grid (Smaller)
   ========================================================================== */

.similar-properties-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1200px) {
    .similar-properties-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .similar-properties-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .similar-properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .similar-properties-grid {
        grid-template-columns: 1fr;
    }
}

.similar-properties-grid .property-card {
    font-size: 0.9rem;
}

.similar-properties-grid .property-card .property-title {
    font-size: 1rem;
}

/* ==========================================================================
   Booking Search Results Grid
   ========================================================================== */

.booking-property-cards-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .booking-property-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1400px) {
    .booking-property-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.property-cards-grid.loading {
    opacity: 0.5;
    pointer-events: none;
}

.property-card.skeleton {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.property-card.skeleton .property-card-image {
    background: linear-gradient(
        90deg,
        var(--color-background-secondary, #f0f0f0) 0%,
        var(--color-background-hover, #e0e0e0) 50%,
        var(--color-background-secondary, #f0f0f0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.properties-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
}

.properties-empty-state i {
    font-size: 4rem;
    color: var(--color-text-secondary, #999);
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.properties-empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-text, #333);
}

.properties-empty-state p {
    color: var(--color-text-secondary, #666);
    margin-bottom: 2rem;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.property-grid-pagination {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* ==========================================================================
   View Toggle Buttons
   ========================================================================== */

.view-toggle-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.view-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid var(--color-border, #ddd);
    background: var(--color-background, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn:hover {
    border-color: var(--accent-color, #d4af37);
    background: var(--color-background-hover, #f5f5f5);
}

.view-toggle-btn.active {
    border-color: var(--accent-color, #d4af37);
    background: var(--accent-color, #d4af37);
    color: white;
}

.view-toggle-btn i {
    font-size: 1.1rem;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

[data-theme="dark"] .property-card.skeleton .property-card-image {
    background: linear-gradient(
        90deg,
        var(--color-dark-bg, #1a1a1a) 0%,
        var(--color-dark-bg-lighter, #2a2a2a) 50%,
        var(--color-dark-bg, #1a1a1a) 100%
    );
}

[data-theme="dark"] .properties-empty-state i {
    color: var(--color-text-secondary-dark, #666);
}

[data-theme="dark"] .properties-empty-state h3 {
    color: var(--color-text-dark, #e5e5e5);
}

[data-theme="dark"] .properties-empty-state p {
    color: var(--color-text-secondary-dark, #999);
}

[data-theme="dark"] .view-toggle-btn {
    border-color: var(--color-dark-border, #444);
    background: var(--color-dark-bg-lighter, #2a2a2a);
}

[data-theme="dark"] .view-toggle-btn:hover {
    background: var(--color-dark-bg-lightest, #3a3a3a);
}