/* ==========================================================================
   Lightbox: thumbnails and overlay
   Generic component, see assets/js/lightbox.js. Only enqueued where it is
   used (inc/lightbox.php). Uses the theme's tokens from main.css.
   ========================================================================== */

/* Visually hidden, still read by screen readers. */
.lightbox-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Thumbnails
   ========================================================================== */

.lightbox-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	align-items: start;
	margin: var(--space-5) 0 0;
}

.lightbox-item { margin: 0; }

.lightbox-trigger {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--border-hairline);
	border-radius: 0;
	background: var(--white);
	box-shadow: var(--shadow-resting);
	color: inherit;
	font: inherit;
	line-height: 0;
	text-align: left;
	cursor: zoom-in;
	transition: box-shadow var(--duration-slow) var(--ease),
		transform var(--duration-slow) var(--ease),
		border-color var(--duration-base) var(--ease);
}

.lightbox-trigger:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}

.lightbox-trigger:focus-visible {
	border-color: var(--pink);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.lightbox-trigger__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Small corner icon: tells touch visitors the thumbnail opens. */
.lightbox-trigger__icon {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--border-strong);
	background: var(--white);
	color: var(--ink-700);
	transition: border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}

.lightbox-trigger:hover .lightbox-trigger__icon {
	border-color: var(--pink);
	color: var(--pink);
}

.lightbox-item__caption {
	margin-top: var(--space-3);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-500);
}

/* Overlay
   ========================================================================== */

html.lightbox-open,
html.lightbox-open body { overflow: hidden; }

/* Replaces the width the scrollbar took up, so the page doesn't jump. */
html.lightbox-open body { padding-right: var(--lightbox-sbw, 0px); }

.lightbox {
	/* Horizontal and vertical space taken by everything around the image
	   (padding, panel, caption, controls). The image fills what is left. */
	--lightbox-x: 64px;
	--lightbox-chrome: 220px;

	position: fixed;
	inset: 0;
	z-index: 100000; /* above the WordPress admin bar */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px var(--space-4) 76px;
	background: var(--scrim);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	overscroll-behavior: contain;
	touch-action: pinch-zoom;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-base) var(--ease), visibility 0s linear var(--duration-base);
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	margin: 0;
	padding: var(--space-4);
	background: var(--white);
	box-shadow: var(--shadow-overlay);
}

/* Fits the viewport without cropping: 90vh where there is room, less where
   the caption and controls need it. */
.lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(100vw - var(--lightbox-x));
	max-height: calc(100vh - var(--lightbox-chrome));
	max-height: min(90vh, calc(100dvh - var(--lightbox-chrome)));
	object-fit: contain;
	background: var(--teal-050);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease);
}

.lightbox__img.is-loaded { opacity: 1; }

.lightbox__caption {
	margin-top: var(--space-3);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	color: var(--ink-700);
}

.lightbox__caption-text,
.lightbox__count { display: block; }

.lightbox__count {
	font-size: 13px;
	color: var(--ink-500);
}

.lightbox__count[hidden] { display: none; }

/* Controls: square, hairline, as on the testimonials carousel. */
.lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--border-strong);
	border-radius: 0;
	background: var(--white);
	color: var(--ink-900);
	cursor: pointer;
	transition: border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}

.lightbox__btn[hidden] { display: none; }

.lightbox__btn:hover {
	border-color: var(--pink);
	color: var(--pink);
}

.lightbox__close {
	top: var(--space-3);
	right: var(--space-3);
}

.lightbox__nav { bottom: var(--space-4); }
.lightbox__prev { left: var(--space-4); }
.lightbox__next { right: var(--space-4); }

/* Wider screens (including phones on their side): arrows sit beside the image. */
@media (min-width: 700px) {
	.lightbox {
		--lightbox-x: 224px;
		--lightbox-chrome: 156px;
		padding: 48px 96px 24px;
	}

	.lightbox__nav {
		top: 50%;
		bottom: auto;
		margin-top: -22px;
	}

	.lightbox__prev { left: var(--space-5); }
	.lightbox__next { right: var(--space-5); }
	.lightbox__close { top: var(--space-4); right: var(--space-5); }
}

/* Short viewports (landscape phones): trim everything around the image. */
@media (max-height: 520px) and (min-width: 700px) {
	.lightbox {
		--lightbox-x: 176px;
		--lightbox-chrome: 96px;
		padding: 8px 72px;
	}

	.lightbox__figure { padding: var(--space-2); }
	.lightbox__caption { margin-top: var(--space-2); font-size: 13px; line-height: 1.4; }
	.lightbox__nav,
	.lightbox__close { width: 40px; height: 40px; }
	.lightbox__nav { margin-top: -20px; }
	.lightbox__prev { left: var(--space-3); }
	.lightbox__next { right: var(--space-3); }
	.lightbox__close { top: var(--space-2); right: var(--space-3); }
}

@media (max-width: 600px) {
	.lightbox-gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.lightbox,
	.lightbox__img,
	.lightbox__btn,
	.lightbox-trigger,
	.lightbox-trigger__icon { transition: none; }

	.lightbox-trigger:hover { transform: none; }
}