/* =========================================================
   Masonry Gallery for Elementor
   Uses native CSS multi-column layout.
   Every image keeps its real width/height ratio —
   tall images stay tall, wide images stay wide.
   Nothing is ever cropped.
   ========================================================= */

.emg-masonry {
	column-count: var(--emg-columns, 3);
	column-gap: var(--emg-gap, 16px);
	width: 100%;
}

.emg-item {
	position: relative;
	display: block;
	margin: 0 0 var(--emg-gap, 16px);
	overflow: hidden;
	break-inside: avoid;          /* stops an image splitting across columns */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

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

.emg-item img {
	display: block;
	width: 100%;
	height: auto;                 /* preserves the image's own ratio, no crop */
	transition: transform 0.45s ease, filter 0.45s ease, opacity 0.45s ease;
}

/* ---------- Hover effects ---------- */
.emg-hover-zoom .emg-item img:hover {
	transform: scale(1.07);
}

.emg-hover-fade .emg-item img {
	opacity: 0.88;
}
.emg-hover-fade .emg-item img:hover {
	opacity: 1;
}

.emg-hover-grayscale .emg-item img {
	filter: grayscale(100%);
}
.emg-hover-grayscale .emg-item img:hover {
	filter: grayscale(0%);
}

/* ---------- Caption ---------- */
.emg-caption {
	font-size: 13px;
	line-height: 1.4;
	padding: 6px 2px 0;
	color: #555;
}

/* ---------- Editor empty state ---------- */
.emg-empty-notice {
	padding: 30px 20px;
	text-align: center;
	background: #f5f5f5;
	border: 1px dashed #ccc;
	color: #888;
	border-radius: 4px;
	font-size: 14px;
}

/* ---------- Safety fallback for very small screens ---------- */
@media (max-width: 480px) {
	.emg-masonry {
		column-count: 1 !important;
	}
}