/* Sourcyness Masonry Gallery — frontend styles */

.smg { position: relative; width: 100%; }
.smg-grid {
	column-count: 4; /* fallback — Elementor responsive control overrides this */
	column-gap: var(--smg-gap, 12px);
}
.smg-item {
	display: block;
	break-inside: avoid;
	margin: 0 0 var(--smg-gap, 12px);
	overflow: hidden;
	border-radius: 8px;
	position: relative;
	cursor: zoom-in;
	transition: transform .3s ease, box-shadow .3s ease;
	outline: none;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.smg-item:focus-visible {
	box-shadow: 0 0 0 3px #111, 0 0 0 6px #fff;
}
.smg-item img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .45s ease;
}

/* Hover effect variants (controlled by prefix_class "smg-hover-<value>") */
.smg-hover-none  .smg-item:hover img { transform: none; }
.smg-hover-none  .smg-item:hover     { transform: none; }

.smg-hover-zoom  .smg-item:hover img { transform: scale(1.045); }

.smg-hover-lift  .smg-item:hover     { transform: translateY(-3px); }

.smg-hover-lift-zoom .smg-item:hover     { transform: translateY(-3px); }
.smg-hover-lift-zoom .smg-item:hover img { transform: scale(1.04); }

/* Fallback breakpoints — Elementor's responsive column-count wins via specificity */
@media (max-width: 1024px) { .smg-grid { column-count: 3; } }
@media (max-width: 767px)  { .smg-grid { column-count: 2; } }
@media (max-width: 480px)  { .smg-grid { column-count: 1; } }

/* Pagination */
.smg-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 28px;
	flex-wrap: wrap;
}
.smg-pages { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.smg-pagination button {
	padding: 8px 14px;
	min-width: 40px;
	border: 1px solid #d9d9d9;
	background: #fff;
	color: #111;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	font-family: inherit;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.smg-pagination button:hover:not([disabled]):not(.active) { background: #f4f4f4; }
.smg-pagination button:active:not([disabled]) { transform: scale(.97); }
.smg-pagination button[disabled] { opacity: .45; cursor: not-allowed; }
.smg-pagination .smg-page.active { background: #111; color: #fff; border-color: #111; }
.smg-pagination .smg-ellipsis { padding: 0 4px; color: #888; user-select: none; }

/* Loader */
.smg-loader { display: none; text-align: center; padding: 24px 0 0; }
.smg.is-loading .smg-loader { display: block; }
.smg.is-loading .smg-grid { opacity: .35; pointer-events: none; }
.smg-spinner {
	display: inline-block;
	width: 30px; height: 30px;
	border: 3px solid #eee;
	border-top-color: #111;
	border-radius: 50%;
	animation: smg-spin .8s linear infinite;
}
@keyframes smg-spin { to { transform: rotate(360deg); } }

.smg-grid.is-fading-in { animation: smg-fade .35s ease both; }
@keyframes smg-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.smg-empty {
	padding: 24px;
	border: 1px dashed #c9c9c9;
	border-radius: 8px;
	text-align: center;
	color: #666;
}