/* Masonry container */
.masonry-grid {
    column-count: 3;
    column-gap: 1.5rem;
}

/* Masonry items */
.masonry-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 1.5rem;
}

/* Optional: make cards fill properly */
.masonry-item .card {
    display: block;
    width: 100%;
}

/* Responsive behavior */
@media (max-width: 992px) {
    .masonry-grid {
        column-count: 2;
    }
}

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

/* Base card animation state */
.masonry-item .card {
    display: block;
    width: 100%;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    animation: masonryFadeIn 0.5s ease forwards;
}

/* Stagger effect */
.masonry-item:nth-child(1) .card { animation-delay: 0.05s; }
.masonry-item:nth-child(2) .card { animation-delay: 0.1s; }
.masonry-item:nth-child(3) .card { animation-delay: 0.15s; }
.masonry-item:nth-child(4) .card { animation-delay: 0.2s; }
.masonry-item:nth-child(5) .card { animation-delay: 0.25s; }
.masonry-item:nth-child(6) .card { animation-delay: 0.3s; }

/* Entry animation */
@keyframes masonryFadeIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hover interaction */
.masonry-item .card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.masonry-item .card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* Optional: image micro-zoom */
.masonry-item .card-img-top {
    transition: transform 0.4s ease;
}

.masonry-item .card:hover .card-img-top {
    transform: scale(1.04);
}

.masonry-grid-col-1 {
    column-count: 1 !important;
}

.masonry-grid-col-2 {
    column-count: 2 !important;
}

.masonry-grid-col-3 {
    column-count: 3 !important;
}

.masonry-grid-col-4 {
    column-count: 4 !important;
}

.masonry-grid-col-5 {
    column-count: 5 !important;
}

.masonry-grid-col-6 {
    column-count: 6 !important;
}

.masonry-grid-col-7 {
    column-count: 7 !important;
}

.masonry-grid-col-8 {
    column-count: 8 !important;
}

.masonry-grid-col-9 {
    column-count: 9 !important;
}

.masonry-grid-col-10 {
    column-count: 10 !important;
}

.masonry-grid-col-11 {
    column-count: 11 !important;
}

.masonry-grid-col-12 {
    column-count: 12 !important;
}