/* ========================================
   SWAPPSHACK - GLOBAL GRID STYLES
   More columns on desktop for better display
   ======================================== */

/* Base Grid - Auto-fill approach */
.listings-grid,
.items-grid,
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Desktop Extra Large (>1400px): 6 columns */
@media (min-width: 1400px) {
    .listings-grid,
    .items-grid,
    .products-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Desktop Large (1200-1399px): 5 columns */
@media (min-width: 1200px) and (max-width: 1399px) {
    .listings-grid,
    .items-grid,
    .products-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Desktop (1024-1199px): 4 columns */
@media (min-width: 1024px) and (max-width: 1199px) {
    .listings-grid,
    .items-grid,
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet (768-1023px): 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .listings-grid,
    .items-grid,
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Mobile (481-767px): 2 columns */
@media (min-width: 481px) and (max-width: 767px) {
    .listings-grid,
    .items-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* Mobile Small (<481px): 2 columns with tighter spacing */
@media (max-width: 480px) {
    .listings-grid,
    .items-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Listing Card Adjustments for Smaller Columns */
@media (min-width: 1200px) {
    .listing-card,
    .item-card,
    .product-card {
        /* Ensure cards look good in narrower columns */
        min-height: 280px;
    }
    
    .listing-card img,
    .item-card img,
    .product-card img {
        /* Keep images proportional */
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    
    .listing-title,
    .item-title,
    .product-title {
        /* Truncate long titles */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        max-height: 2.8em;
    }
}

/* Optional: Alternative 2-column grid for my-listings page */
.my-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .my-listings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}