/* Container Aware Scoping */
.gr-adv-gallery-wrapper {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

/* Base Item Styles */
.gr-gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--gr-gal-radius, 4px);
	box-sizing: border-box;
	background: #f1f1f1;
	transform: translateZ(0);
}

/* Media handling */
.gr-gallery-img {
	width: 100%;
	height: 100%;
	display: block;
	transition: transform 0.4s ease;
}

.gr-fit-cover .gr-gallery-img { object-fit: cover; }
.gr-fit-contain .gr-gallery-img { object-fit: contain; }

/* Ratios */
.gr-ratio-16\:9 .gr-gallery-item { aspect-ratio: 16/9; }
.gr-ratio-4\:3 .gr-gallery-item { aspect-ratio: 4/3; }
.gr-ratio-1\:1 .gr-gallery-item { aspect-ratio: 1/1; }
.gr-ratio-9\:16 .gr-gallery-item { aspect-ratio: 9/16; }

/* 1. Flex Layout with Dynamic Columns */
.gr-layout-flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gr-gal-gap);
	width: 100%;
}
.gr-layout-flex .gr-gallery-item {
	/* Calculates precise width: (100% / columns) - (gap * (columns - 1) / columns) */
	flex: 1 1 calc((100% / var(--gr-col-desktop, 3)) - (var(--gr-gal-gap) * (var(--gr-col-desktop, 3) - 1) / var(--gr-col-desktop, 3)));
	max-width: calc((100% / var(--gr-col-desktop, 3)) - (var(--gr-gal-gap) * (var(--gr-col-desktop, 3) - 1) / var(--gr-col-desktop, 3)));
}

/* 2. Masonry Layout */
.gr-layout-masonry {
	column-count: var(--gr-col-desktop, 3);
	column-gap: var(--gr-gal-gap);
	width: 100%;
}
.gr-layout-masonry .gr-gallery-item {
	break-inside: avoid;
	margin-bottom: var(--gr-gal-gap);
	aspect-ratio: auto !important;
}

/* 3. Justified Layout */
.gr-layout-justified {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gr-gal-gap);
	width: 100%;
}
.gr-layout-justified .gr-gallery-item {
	flex-grow: 1;
	height: 250px;
	aspect-ratio: auto !important;
}
.gr-layout-justified::after {
	content: "";
	flex-grow: 10;
}

/* Overlays */
.gr-gallery-overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.gr-overlay-gradient .gr-gallery-overlay { background: linear-gradient(to top, rgba(0,0,0,var(--gr-gal-op)) 0%, rgba(0,0,0,0) 100%); }
.gr-overlay-dark .gr-gallery-overlay { background: rgba(0,0,0,var(--gr-gal-op)); }
.gr-gallery-item:hover .gr-gallery-overlay { opacity: 1; }

/* Typography */
.gr-gallery-title {
	margin: 0 0 5px 0;
	font-size: var(--gr-gal-title-sz, 16px);
	font-weight: var(--gr-gal-title-wt, 600);
	color: var(--gr-gal-title-col, #fff);
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.gr-gallery-meta {
	font-size: 12px;
	color: rgba(255,255,255,0.8);
	display: flex;
	gap: 10px;
}
.gr-meta-cat { background: #2563eb; color: #fff; padding: 2px 6px; border-radius: 2px; }

/* Hover Effects */
.gr-hover-zoom .gr-gallery-item:hover .gr-gallery-img { transform: scale(1.08); }
.gr-hover-lift { transition: transform 0.3s; }
.gr-hover-lift .gr-gallery-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
.gr-hover-fade .gr-gallery-img { opacity: 0.8; }
.gr-hover-fade .gr-gallery-item:hover .gr-gallery-img { opacity: 1; }

/* Lightbox System (Vanilla CSS) */
.gr-lightbox-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.95);
	z-index: 999999;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}
.gr-lightbox-modal.active { opacity: 1; visibility: visible; }
.gr-lightbox-content {
	max-width: 90%;
	max-height: 90%;
	position: relative;
}
.gr-lightbox-img {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.gr-lightbox-close, .gr-lightbox-prev, .gr-lightbox-next {
	position: absolute;
	background: rgba(255,255,255,0.1);
	border: none;
	color: #fff;
	font-size: 30px;
	cursor: pointer;
	border-radius: 50%;
	width: 50px; height: 50px;
	display: flex; justify-content: center; align-items: center;
	transition: background 0.2s;
}
.gr-lightbox-close:hover, .gr-lightbox-prev:hover, .gr-lightbox-next:hover { background: rgba(255,255,255,0.3); }
.gr-lightbox-close { top: 20px; right: 20px; }
.gr-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.gr-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* 📱 Responsive Logic (Using the Custom Variables) */
@media (max-width: 992px) {
	.gr-layout-flex .gr-gallery-item {
		flex: 1 1 calc((100% / var(--gr-col-tablet, 2)) - (var(--gr-gal-gap) * (var(--gr-col-tablet, 2) - 1) / var(--gr-col-tablet, 2)));
		max-width: calc((100% / var(--gr-col-tablet, 2)) - (var(--gr-gal-gap) * (var(--gr-col-tablet, 2) - 1) / var(--gr-col-tablet, 2)));
	}
	.gr-layout-masonry { column-count: var(--gr-col-tablet, 2); }
}

@media (max-width: 576px) {
	.gr-layout-flex .gr-gallery-item {
		flex: 1 1 calc((100% / var(--gr-col-mobile, 1)) - (var(--gr-gal-gap) * (var(--gr-col-mobile, 1) - 1) / var(--gr-col-mobile, 1)));
		max-width: calc((100% / var(--gr-col-mobile, 1)) - (var(--gr-gal-gap) * (var(--gr-col-mobile, 1) - 1) / var(--gr-col-mobile, 1)));
	}
	.gr-layout-masonry { column-count: var(--gr-col-mobile, 1); }
	
	.gr-lightbox-prev, .gr-lightbox-next { width: 40px; height: 40px; font-size: 20px; }
	.gr-layout-justified .gr-gallery-item { height: 180px; } /* Slightly smaller for justified mobile */
}