:root {
    --gallery-gap: 1.5rem; /* Equivalent to 20px if root is 16px */
}
	
/* 1. The Container */
.masonry-wrapper {
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
    column-gap: var(--gallery-gap);
    /* The Core Column Logic */
    column-count: 1;
    /* column-gap: 2%; */

    
    /* THE FIX: Prevents the browser from "balancing" column heights 
       which causes the unaligned tops. */
    /* column-fill: auto; */
	
	/* ADDED: This helps Chrome handle the balance better */
    orphans: 1;
    widows: 1;
}

/* Tablet: 2 columns @ 720px */
@media (min-width: 720px) {
    .masonry-wrapper {
        column-count: 2;
		--gallery-gap: 2rem;
    }
}

/* Desktop: 3 columns @ 1024px */
@media (min-width: 1024px) {
    .masonry-wrapper {
        column-count: 3;
    }
}

/* 2. The Individual Items */
.masonry-item {
    /* Essential for keeping the card whole */
    display: inline-block; 
    width: 100%;
    margin-bottom: var(--gallery-gap); /* Vertical gap matching column-gap */
    
    /* THE FIX: Force everything to the top of the line */
    vertical-align: top; 
    
    /* Prevents images from splitting across columns */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    
    /* Optional Polish */
    background: #f0f0f0; 
    border-radius: 4px;
    overflow: hidden;
	
	position:relative; 

}

/* 3. The Images */
.masonry-item img {
    /* THE FIX: Removes the "baseline" ghost space at the bottom */
    display: block; 
    width: 100%;
    height: auto;
    
    /* Optional: Smooth hover for your lightbox links */
    transition: transform 0.4s ease;
}

.masonry-item a:hover img {
    transform: scale(1.04);
}
	
	
	/* The Hover State */
.masonry-item:hover img {
  transform: scale(1.05); /* Gentle zoom */
  filter: brightness(0.9); /* Slight dim to make the "Click" intent clear */
}

/* Optional: Add a 'View' icon or text on hover */
.masonry-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12H20M12 4V20' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    
    /* Animation Logic */
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    z-index: 2;
}

.masonry-item:hover::after {
    opacity: .7;
    transform: scale(1);
}