/* Masonry Gallery for Elementor - Frontend Styles */

.mg-masonry-gallery-wrap {
	width: 100%;
}

/* CSS multi-column technique: yeh portrait aur landscape dono
   images ko natural height ke saath apne aap arrange kar deta hai,
   kisi JS masonry library ki zaroorat nahi. */
.mg-masonry-gallery {
	--mg-columns: 3;
	--mg-gap: 15px;

	column-count: var(--mg-columns);
	column-gap: var(--mg-gap);
	width: 100%;
}

.mg-masonry-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	display: block;
	width: 100%;
	margin: 0 !important;
	margin-bottom: var(--mg-gap) !important;
	padding: 0 !important;
	overflow: hidden;
	position: relative;
	border-radius: inherit;
}

.mg-masonry-item:last-child {
	margin-bottom: 0 !important;
}

.mg-masonry-item.mg-hidden {
	display: none;
}

.mg-masonry-item img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: middle;
	transition: transform 0.35s ease;
}

.mg-masonry-item a {
	display: block;
	line-height: 0;
}

/* Hover Zoom Effect (optional, toggle se control hota hai) */
.mg-hover-zoom .mg-masonry-item:hover img {
	transform: scale(1.06);
}

/* Load More button */
.mg-load-more-wrap {
	text-align: center;
	margin-top: 24px;
}

.mg-load-more-btn {
	display: inline-block;
	border: none;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	background-color: #222222;
	color: #ffffff;
	padding: 12px 30px;
	border-radius: 4px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.mg-load-more-btn:focus {
	outline: none;
}

.mg-load-more-btn.mg-btn-hidden {
	display: none;
}