/* KengDEV Masonry Gallery — by Keng.DEV */

/* ---------- Masonry grid (JS-positioned) ---------- */
.kdmg-gallery {
	position: relative;
	width: 100%;
}

.kdmg-item {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	overflow: hidden;
	border-radius: 8px;
	cursor: zoom-in;
	line-height: 0;
	opacity: 0;
	transition: opacity .4s ease, transform .35s ease, filter .35s ease;
}

.kdmg-gallery.kdmg-ready .kdmg-item {
	opacity: 1;
}

.kdmg-item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .35s ease, filter .35s ease;
}

.kdmg-item:hover img {
	transform: scale(1.04);
	filter: brightness(.92);
}

/* Fallback before JS runs / if JS disabled: simple responsive grid */
.kdmg-gallery.kdmg-fallback {
	display: grid;
	grid-template-columns: repeat(var(--kdmg-columns, 3), 1fr);
	gap: var(--kdmg-gap, 12px);
}
.kdmg-gallery.kdmg-fallback .kdmg-item {
	position: static;
	opacity: 1;
}

.kdmg-empty {
	color: #888;
	font-style: italic;
}

/* ---------- Lightbox ---------- */
.kdmg-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(12, 12, 14, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	padding: 24px;
}

.kdmg-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.kdmg-lightbox__img {
	max-width: 92vw;
	max-height: 86vh;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	transform: scale(.95);
	transition: transform .3s ease;
}

.kdmg-lightbox.is-open .kdmg-lightbox__img {
	transform: scale(1);
}

.kdmg-lightbox__caption {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	font-size: 14px;
	padding: 0 24px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.kdmg-lightbox__btn {
	position: absolute;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
	user-select: none;
}
.kdmg-lightbox__btn:hover { background: rgba(255, 255, 255, .25); }

.kdmg-lightbox__close { top: 20px; right: 20px; }
.kdmg-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.kdmg-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
	.kdmg-lightbox__prev { left: 10px; }
	.kdmg-lightbox__next { right: 10px; }
}