.af-photo-gallery {
	--af-gallery-gap: 10px;
	display: block;
	width:100%;
}

.af-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* never below 300px */
	column-gap: 20px; /* true spacing between cells */
	row-gap:0px;
	justify-items: center; /* center items inside each track */
}

.af-gallery-item {
	width: 100%;
	max-width: 300px; /* hard cap so they don’t blow up too wide */
	aspect-ratio: 4 / 3; /* or use your item.AspectRatio */
	overflow: hidden;
	border-radius: 6px;
	cursor: pointer;
	transition: 0.3s;
}

	.af-gallery-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.af-gallery-item:hover {
		transform: scale(1.05); /* nice subtle zoom on hover */
	}

/* Lightbox */
/* Lightbox Overlay */
.af-gallery-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
	display: flex; /* Always present, we control visibility with opacity */
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	z-index: 9999;
}

	.af-gallery-lightbox.active {
		opacity: 1;
		visibility: visible;
	}

/* Inner container — gives absolute slides a box to fill */
.af-gallery-lightbox-inner {
	position: relative; /* containing block for slides */
	display: block;
	width: min(90vw, 1200px); /* responsive width with max cap */
	height: min(85vh, 800px); /* responsive height with max cap */
	background: transparent; /* optional: set to #000 if you want a black letterbox */
	transition: transform 0.4s ease, opacity 0.4s ease;
	transform: scale(0.95);
	opacity: 0;
}

.af-gallery-lightbox.active .af-gallery-lightbox-inner {
	transform: scale(1);
	opacity: 1;
}

/* Slides crossfade inside container */
.af-lightbox-slide {
	position: absolute;
	inset: 0; /* top/right/bottom/left:0 */
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

	.af-lightbox-slide.active {
		opacity: 1;
		pointer-events: auto;
		z-index: 1;
	}

	/* Image sizing */
	.af-lightbox-slide img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		display: block;
	}

/* Controls */
.af-gallery-close,
.af-lightbox-prev,
.af-lightbox-next {
	position: absolute;
	z-index: 2; /* ensure above slides */
	background: none;
	border: none;
	color: white;
	font-size: 2rem;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.af-gallery-close {
	top: 10px;
	right: 20px;
}

.af-lightbox-prev {
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.af-lightbox-next {
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

	.af-gallery-close:hover,
	.af-lightbox-prev:hover,
	.af-lightbox-next:hover {
		opacity: 0.7;
	}