/**
 * PS Base — gallery.css
 *
 * Loaded conditionally only on pages that contain a core/gallery block.
 * Includes gallery hover effects and lightbox overlay styles.
 */


/* =============================================================
   GALLERY GRID
   ============================================================= */

/* Clip the zoom animation */
.ps-css .wp-block-gallery .wp-block-image {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

/* Image base state */
.ps-css .wp-block-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hover: zoom */
.ps-css .wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.1) translateY(-3%);
}

/* Hover: dark overlay via pseudo-element */
.ps-css .wp-block-gallery .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0%);
	transition: background 0.4s ease;
	pointer-events: none;
}

.ps-css .wp-block-gallery .wp-block-image:hover::after {
	background: rgb(0 0 0 / 25%);
}

/* Prevent last image expanding to fill remaining row space */
.ps-css .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}

/*
 * Override WP's forced flex behaviour in cropped mode so a fixed
 * clamp() height can be used instead.
 */
.ps-css .wp-block-gallery.has-nested-images.is-cropped
figure.wp-block-image:not(#individual-image) a,
.ps-css .wp-block-gallery.has-nested-images.is-cropped
figure.wp-block-image:not(#individual-image) img {
	flex: none !important;
}

.ps-css .wp-block-gallery.has-nested-images.is-cropped
figure.wp-block-image:not(#individual-image) img {
	height: clamp(200px, 25vw, 300px);
	width: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ps-css .wp-block-gallery .wp-block-image img,
	.ps-css .wp-block-gallery .wp-block-image::after {
		transition: none;
	}
}


/* =============================================================
   LIGHTBOX
   ============================================================= */

#lightbox-overlay {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgb(0 0 0 / 90%);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	cursor: zoom-out;
}

#lightbox-image {
	max-width: 100%;
	max-height: 100%;
	box-shadow: 0 0 30px rgb(0 0 0 / 50%);
	border-radius: 4px;
	transition: transform 0.3s ease;
}

/* Shared button reset */
#lightbox-prev,
#lightbox-next,
#lightbox-close {
	position: absolute;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 10000;
}

/* Prev / Next */
#lightbox-prev,
#lightbox-next {
	background-color: rgb(50 50 50 / 50%);
	border-radius: 15px;
	top: 50%;
	transform: translateY(-50%);
}

#lightbox-prev { left: 20px; }
#lightbox-next { right: 20px; }

/* Close */
#lightbox-close {
	top: 20px;
	right: 20px;
	font-size: 2.5rem;
	color: #fff;
}

/* SVG icon transitions */
#lightbox-prev svg,
#lightbox-next svg {
	transition: stroke 0.3s ease;
}

#lightbox-prev:hover polyline,
#lightbox-next:hover polyline {
	stroke: rgb(255 255 255 / 85%);
}

/* Slide-in animation when switching images */
@keyframes lightbox-slide-in {
	from {
		transform: translateX(50%);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

#lightbox-image.slide-in {
	animation: lightbox-slide-in 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	#lightbox-image {
		transition: none;
	}

	#lightbox-image.slide-in {
		animation: none;
	}
}