/* Photo Gallery grid (inc/gallery.php) */

.dfi-gallery {
	display: grid;
	grid-template-columns: repeat(var(--dfi-gallery-columns, 4), minmax(0, 1fr));
	column-gap: var(--dfi-gallery-gap-h, 16px);
	row-gap: var(--dfi-gallery-gap-v, 16px);
	padding: var(--dfi-gallery-gap-v, 16px) var(--dfi-gallery-gap-h, 16px);
}

.dfi-gallery__item {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.dfi-gallery__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.dfi-gallery__item:hover .dfi-gallery__thumb,
.dfi-gallery__item:focus .dfi-gallery__thumb {
	transform: scale(1.05);
}

/* Scroll-triggered entrance (inc/gallery.php "Fade & float in" option,
   assets/js/gallery.js). Hidden by default the moment this stylesheet
   loads — no flash of visible-then-hidden — and revealed by JS adding
   --in-view per item with a staggered transition-delay as the gallery
   scrolls into view. The <noscript> block each animated gallery's
   markup includes forces full visibility back on if JS never runs, so
   photos are never stuck invisible. */

.dfi-gallery--animate .dfi-gallery__item {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.dfi-gallery--animate .dfi-gallery__item.dfi-gallery__item--in-view {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.dfi-gallery--animate .dfi-gallery__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 768px) {
	.dfi-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.dfi-gallery {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* Lightbox */

.dfi-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, background-color 0.25s ease;
}

.dfi-gallery-lightbox[hidden] {
	display: none;
}

.dfi-gallery-lightbox--visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.92);
	pointer-events: auto;
}

.dfi-gallery-lightbox__figure {
	position: relative;
	max-width: 92vw;
	max-height: 92vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: scale(0.94);
	transition: transform 0.25s ease;
}

.dfi-gallery-lightbox--visible .dfi-gallery-lightbox__figure {
	transform: scale(1);
}

.dfi-gallery-lightbox__img {
	display: block;
	max-width: 92vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Next/prev slide: the outgoing image is pushed to one of these before
   the src swaps, then the incoming image starts from the opposite
   side's equivalent and transitions back to rest (assets/js/gallery.js
   removes the class on the next frame to trigger that transition). */

.dfi-gallery-lightbox__img--exit-left,
.dfi-gallery-lightbox__img--enter-from-left {
	transform: translateX(-8vw);
	opacity: 0;
}

.dfi-gallery-lightbox__img--exit-right,
.dfi-gallery-lightbox__img--enter-from-right {
	transform: translateX(8vw);
	opacity: 0;
}

/* Used for one synchronous instant while jumping to the entrance
   starting position (assets/js/gallery.js) — without this, that jump
   can pick up the tail end of the exit transition instead of landing
   cleanly, making the entrance appear to continue in the exit's
   direction rather than starting fresh from the opposite side. */

.dfi-gallery-lightbox__img--no-transition {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.dfi-gallery-lightbox,
	.dfi-gallery-lightbox__figure,
	.dfi-gallery-lightbox__img {
		transition: none !important;
	}
}

.dfi-gallery-lightbox__caption {
	color: #fff;
	text-align: center;
	margin-top: 0.75rem;
	font-size: 0.9rem;
	opacity: 0.85;
}

.dfi-gallery-lightbox__close,
.dfi-gallery-lightbox__prev,
.dfi-gallery-lightbox__next {
	position: fixed;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.5rem 0.75rem;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.dfi-gallery-lightbox__close:hover,
.dfi-gallery-lightbox__prev:hover,
.dfi-gallery-lightbox__next:hover {
	opacity: 1;
}

.dfi-gallery-lightbox__close {
	top: 1rem;
	right: 1.5rem;
}

.dfi-gallery-lightbox__prev {
	left: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
}

.dfi-gallery-lightbox__next {
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 600px) {
	.dfi-gallery-lightbox__close,
	.dfi-gallery-lightbox__prev,
	.dfi-gallery-lightbox__next {
		font-size: 2rem;
	}
}