@charset "utf-8";
/* CSS Document */

/*==masonary Grid==*/

/* Masonry using CSS columns (best browser support) */
.masonry{
column-gap: var(--gap);
/* Set an initial column count — responsive sizes below override it */
column-count: 3;
width:100%;
max-width:1200px;
margin:0 auto;
}


/* Each item must avoid being broken between columns */
.masonry-item{
display:inline-block; /* required for column layout */
width:100%; /* fill the column width */
margin:0 0 var(--gap);
break-inside: avoid;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
background:var(--card-bg);
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;
	
	cursor:pointer;
transition: transform .25s ease;
}


.masonry-item figure{margin:0}
.masonry-item img{
display:block;
width:100%;
height:auto; /* natural height — allows different image heights */
vertical-align:middle;
}


.meta{
padding:0.6rem 0.8rem 0.9rem;
font-size:0.85rem;
color:#374151;
}


/* Responsive column counts */
@media (max-width:1100px){ .masonry{ column-count: 2 } }
@media (max-width:700px){ .masonry{ column-count: 1 } }


/* Optional: make images slightly interactive */
.masonry-item:hover{ transform: translateY(-4px); transition:transform .25s ease; }
.masonry-item img{ transition: transform .35s ease; }
.masonry-item:hover img{ transform: scale(1.03); }


/* Utility: full-width container for heading */
.wrap{ max-width:1200px; margin:0 auto; }
.controls{ margin-bottom:1rem; display:flex; gap:0.5rem; align-items:center; }
.note{ font-size:0.85rem; color:#6b7280 }

/* Popup styles */
.popup-overlay{
position:fixed;
top:0;left:0;right:0;bottom:0;
background:rgba(0,0,0,0.8);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}
.popup-overlay.active{display:flex;}


.popup-content{
position:relative;
background:#fff;
border-radius:var(--radius);
/*max-width:90%;
max-height:90%;*/
max-width:90%;
height:95%;
box-shadow:var(--shadow);
overflow:hidden;
}


.popup-content img{
/*width:100%;
height:auto;*/
	width:auto;
height:100%;	
display:block;
}


.close-btn{
position:absolute;
top:8px;
right:10px;
background:#000;
color:#fff;
border:none;
border-radius:50%;
width:32px;
height:32px;
font-size:20px;
cursor:pointer;
line-height:32px;
}


@media(max-width:600px){
	
.close-btn{width:28px;height:28px;font-size:18px;}
	
}	
@media screen and (max-width:768px){
	.popup-overlay{
		display: none !important;
	}
}