/* Grid optimization for better performance with large datasets */

/* Optimize card rendering */
.card {
    contain: content; /* Improve rendering performance */
    will-change: transform; /* Optimize for animations */
}

/* Optimize image loading */
.img-container img {
    content-visibility: auto; /* Defer off-screen image rendering */
    contain: size layout; /* Reduce layout thrashing */
}

/* Reduce layout shifts */
.card-title, .card-price {
    min-height: 2.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Optimize for touch devices */
@media (pointer: coarse) {
    .card {
        padding-bottom: 0.25rem; /* Add space for touch targets */
    }
    
    .btn {
        min-height: 44px; /* Ensure touch targets are large enough */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Optimize grid layout for different screen sizes */
@media (max-width: 359px) {
    /* Extra small phones */
    .grid-container {
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .card-content {
        padding: 0.75rem;
    }
}

/* Optimize for landscape orientation on phones */
@media (max-height: 480px) and (orientation: landscape) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Optimize for larger screens */
@media (min-width: 1400px) {
    .grid-container {
        grid-template-columns: repeat(5, 1fr); /* 5 columns for very large screens */
    }
}

/* Optimize for print */
@media print {
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}