/**
 * Detail Page Lazy Loading Styles
 * Author: Sơn Lê
 */

.lazy-load-image {
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
}
.lazy-load-image.loaded {
    opacity: 1;
}

/* Masonry Grid - Prevent image distortion */
.masonry-grid {
    display: block;
    column-count: 6;
    column-gap: 0.5rem;
}

.masonry-item {
    display: block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 0.5rem;
}

.card-img-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.card-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Detail page main gallery - no override, use responsive rules */
/* Responsive */
@media (max-width: 1400px) {
    .masonry-grid { column-count: 5; }
}

@media (max-width: 1200px) {
    .masonry-grid { column-count: 4; }
}

@media (max-width: 992px) {
    .masonry-grid { column-count: 3; }
}

@media (max-width: 768px) {
    .masonry-grid { column-count: 2; }
}

@media (max-width: 480px) {
    .masonry-grid { column-count: 2; }
}

/* Popular galleries masonry in sidebar */
.popular-galleries .masonry-grid {
    column-count: 2;
    column-gap: 0.5rem;
}