/*
 * atvesmir — at-lightbox (block 08)
 * A dark "night" image overlay used site-wide in place of opening full-res images
 * in a new tab. Theme-independent (always dark, like the prototype's night
 * surfaces); controls use the terracotta --accent and IBM Plex Mono. Hidden until
 * JS adds .is-open; honours prefers-reduced-motion via .at-lb-reduce.
 */

.at-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
}
.at-lb.is-open {
	display: flex;
}

/* Scroll-lock the page behind the open overlay. */
.at-lb-lock,
.at-lb-lock body {
	overflow: hidden;
}

.at-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 20, .92);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	cursor: zoom-out;
}

.at-lb__figure {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 92vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.at-lb__img {
	display: block;
	max-width: 92vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
	background: #11131c;
	animation: at-lb-in .28s ease;
}
.at-lb__caption {
	font-family: var(--font-mono, monospace);
	font-size: 12px;
	letter-spacing: .04em;
	line-height: 1.5;
	color: rgba(255, 255, 255, .82);
	text-align: center;
	max-width: 70ch;
}

/* Controls — round translucent buttons with an accent hover. */
.at-lb__btn {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: rgba(255, 255, 255, .10);
	border-radius: 999px;
	font-family: var(--font-serif, Georgia, serif);
	line-height: 1;
	transition: background .18s ease, transform .12s ease, color .18s ease;
}
.at-lb__btn:hover {
	background: var(--accent, #db8a63);
	color: #fff;
}
.at-lb__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.at-lb__close {
	top: clamp(10px, 2vw, 22px);
	right: clamp(10px, 2vw, 22px);
	width: 46px;
	height: 46px;
	font-size: 30px;
}
.at-lb__prev,
.at-lb__next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 32px;
	padding-bottom: 4px;
}
.at-lb__prev:hover,
.at-lb__next:hover {
	transform: translateY(-50%) scale(1.06);
}
.at-lb__prev { left: clamp(8px, 2vw, 26px); }
.at-lb__next { right: clamp(8px, 2vw, 26px); }
.at-lb__btn[hidden] { display: none; }

.at-lb__counter {
	position: absolute;
	z-index: 2;
	top: clamp(14px, 2.4vw, 26px);
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono, monospace);
	font-size: 12px;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .72);
}
.at-lb__counter[hidden] { display: none; }

@keyframes at-lb-in {
	from { opacity: 0; transform: scale(.985); }
	to   { opacity: 1; transform: scale(1); }
}

/* Touch: drop the side arrows out of the image's way on small screens. */
@media (max-width: 560px) {
	.at-lb__prev { left: 6px; }
	.at-lb__next { right: 6px; }
	.at-lb__prev,
	.at-lb__next { width: 44px; height: 44px; font-size: 26px; }
}

.at-lb-reduce .at-lb__img { animation: none; }
.at-lb-reduce .at-lb__btn { transition: none; }