/**
 * AIFolio Dark — lightbox.css
 *
 * Styles for the dependency-free lightbox (see lightbox.js). Enqueued site-wide
 * from functions.php alongside the JS. Uses the theme's design tokens
 * (--aif-* custom properties from style.css) so it matches the dark palette.
 *
 * Namespacing: every selector is prefixed `.aif-lb` (overlay) or
 * `.aif-lightbox` (trigger images) — no generic/global selectors — so loading
 * this file everywhere carries negligible collision risk.
 *
 * @package aifolio-dark
 * @since   0.3.0
 */

/* ── Trigger images: signal they are clickable, once JS has wired them ─────── */
img.aif-lightbox--ready {
	cursor: zoom-in;
}

img.aif-lightbox--ready:focus-visible {
	outline: 3px solid var(--aif-accent, #D4AF37);
	outline-offset: 2px;
}

/* Prevent the page scrolling behind an open lightbox. */
body.aif-lb-lock {
	overflow: hidden;
}

/* ── Overlay ───────────────────────────────────────────────────────────────── */
.aif-lb {
	position: fixed;
	inset: 0;
	z-index: 20000; /* above sticky nav + Bootstrap modals' default 1055 */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: clamp(0.75rem, 3vw, 2.5rem);
	background: rgba(6, 8, 12, 0.92);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* [hidden] handles display:none; this is a defensive fallback. */
.aif-lb[hidden] {
	display: none;
}

/* Optional fade-in when opened (respects reduced-motion below). */
.aif-lb {
	opacity: 0;
	transition: opacity 0.18s ease;
}
.aif-lb.is-open {
	opacity: 1;
}

/* ── Stage (image + caption) ───────────────────────────────────────────────── */
.aif-lb__stage {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	max-width: 90vw;
	max-height: 92vh;
}

.aif-lb__img {
	display: block;
	max-width: 90vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--aif-radius, 12px);
	box-shadow: var(--aif-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.45));
	background: var(--aif-surface, #161B24);
}

.aif-lb__caption {
	max-width: min(90vw, 60ch);
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--aif-text, #E8EAF0);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ── Buttons (close + prev/next) ───────────────────────────────────────────── */
.aif-lb__close,
.aif-lb__nav {
	appearance: none;
	border: 1px solid var(--aif-border, #2A3347);
	background: rgba(30, 37, 53, 0.85);
	color: var(--aif-text, #E8EAF0);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.aif-lb__close:hover,
.aif-lb__nav:hover {
	background: var(--aif-accent, #D4AF37);
	color: var(--aif-on-accent, #0A0A0A);
}

.aif-lb__close:focus-visible,
.aif-lb__nav:focus-visible {
	outline: none;
	box-shadow: var(--aif-focus-ring, 0 0 0 0.2rem rgba(212, 175, 55, 0.4));
}

.aif-lb__close[hidden],
.aif-lb__nav[hidden] {
	display: none;
}

/* Close (×) — top-right corner. */
.aif-lb__close {
	position: absolute;
	top: clamp(0.5rem, 2vw, 1.25rem);
	right: clamp(0.5rem, 2vw, 1.25rem);
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	font-size: 1.6rem;
	line-height: 1;
}

/* Prev / next — flanking arrows. */
.aif-lb__nav {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	font-size: 1.8rem;
	line-height: 1;
}

.aif-lb__nav:active {
	transform: scale(0.94);
}

/* On small screens, pin the arrows to the sides so the image gets full width. */
@media (max-width: 575.98px) {
	.aif-lb {
		gap: 0;
	}
	.aif-lb__nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 2.75rem;
		height: 2.75rem;
	}
	.aif-lb__prev {
		left: 0.5rem;
	}
	.aif-lb__next {
		right: 0.5rem;
	}
	.aif-lb__img {
		max-width: 96vw;
	}
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.aif-lb,
	.aif-lb__close,
	.aif-lb__nav {
		transition: none;
	}
}