/* ==========================================================================
   LIGHTBOX  (loaded only on singular views — see inc/enqueue.php)
   --------------------------------------------------------------------------
   Always a dark viewing room (images read best on a dark backdrop); round
   controls match the carousel buttons. Motion respects the
   global prefers-reduced-motion reset in style.css.
   ========================================================================== */

.sac-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-lightbox);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
}

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

.sac-lightbox:not([hidden]) {
	animation: sac-lb-in var(--dur-2) ease;
}

@keyframes sac-lb-in {
	from { opacity: 0; }
}

.sac-lightbox__scrim {
	position: absolute;
	inset: 0;
	background: var(--c-scrim);
}

.sac-lightbox__figure {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: min(92vw, 1400px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.sac-lightbox__img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	box-shadow: var(--shadow-lg);
	background: var(--c-surface);
	transition: opacity var(--dur-2) ease;
}

.sac-lightbox.is-loading .sac-lightbox__img {
	opacity: 0.4;
}

.sac-lightbox__caption {
	max-width: 60ch;
	color: #e3eaf4;
	font-size: var(--fs-sm);
	text-align: center;
}

.sac-lightbox__close,
.sac-lightbox__nav {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgb(255 255 255 / 0.08);
	color: #fff;
	border: 1px solid rgb(255 255 255 / 0.28);
	border-radius: 50%;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}

.sac-lightbox__close:hover,
.sac-lightbox__close:focus-visible,
.sac-lightbox__nav:hover,
.sac-lightbox__nav:focus-visible {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
}

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

.sac-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
}

.sac-lightbox__prev {
	left: var(--space-4);
}

.sac-lightbox__next {
	right: var(--space-4);
}

.sac-lightbox__counter {
	position: absolute;
	bottom: var(--space-4);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: var(--space-1) var(--space-3);
	background: color-mix(in srgb, var(--c-navy-900) 60%, transparent);
	color: #e3eaf4;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
}

.sac-lightbox__nav[hidden],
.sac-lightbox__counter[hidden],
.sac-lightbox__caption[hidden] {
	display: none;
}