#modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: none;
}

#modal-overlay.open {
	display: block;
}

#modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	opacity: 0;
	transition: opacity 0.2s ease;
}

#modal-overlay.open #modal-backdrop {
	opacity: 1;
}

#modal-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	padding-bottom: 96px;
	opacity: 0;
	transform: scale(0.95);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

@media (min-width: 768px) {
	#modal-inner {
		padding: 32px;
		padding-bottom: 112px;
	}
}

#modal-overlay.open #modal-inner {
	opacity: 1;
	transform: scale(1);
}

#modal-box {
	/* background: #fff; */
	width: 100%;
	max-width: 75vw;
	/* Reserve room below for the fixed PRV/NXT bar so it never overlaps the box */
	height: calc(100dvh - 128px);
	overflow: hidden;
	border-radius: 8px;
}

@media (min-width: 768px) {
	#modal-box {
		height: calc(100dvh - 160px);
		overflow: hidden;
	}
}

.modal-image-wrap {
	/* background: var(--color-light-gray); */
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}

.modal-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

.modal-image-wrap video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: none;
}

/* ── VIDEO PLAY/PAUSE TOGGLE (bottom-right, appears on hover) ── */
.modal-video-toggle {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	width: 48px;
	height: 48px;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	color: white;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	opacity: 0;
	transition:
		opacity 0.15s ease,
		background 0.15s ease;
}

.modal-video-toggle.is-video {
	display: flex;
}

.modal-image-wrap:hover .modal-video-toggle.is-video {
	opacity: 1;
}

.modal-video-toggle:hover {
	background: var(--color-dark);
}

.modal-video-toggle .icon-pause {
	display: none;
}

.modal-video-toggle.is-playing .icon-play {
	display: none;
}

.modal-video-toggle.is-playing .icon-pause {
	display: block;
}

/* ── LIGHTBOX CONTROLS (follow the cursor within the left/right half of the box) ── */
.lightbox-btn {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.5);
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	transition: background 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	flex-shrink: 0;
	opacity: 0;
	pointer-events: none;
}

.lightbox-btn.is-cursor-visible {
	opacity: 1;
}

/* Hide the native cursor and let the tracked arrow act as the pointer —
   only while there's actually a previous/next item to navigate to. */
.modal-image-wrap.has-nav {
	cursor: none;
}

.lightbox-btn svg {
	stroke-width: 2.5;
}

/* ── MODAL CLOSE & PROJECT NAV ── */
.modal-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 4px;
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 51;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: color 0.2 ease-in-out;
}

.modal-close:hover {
	opacity: 0.85;
}

.modal-project-nav {
	position: fixed;
	bottom: 24px;
	left: 0;
	right: 0;
	display: none;
	justify-content: center;
	align-items: center;
	gap: 16px;
	z-index: 60;
	pointer-events: none;
}

.modal-project-nav.open {
	display: flex;
}

.modal-project-nav .modal-nav-btn {
	pointer-events: all;
}

.modal-nav-btn {
	background: var(--color-dark);
	border: none;
	cursor: pointer;
	color: #fff;
	padding: 10px 20px;
	border-radius: 999px;
	font-size: calc(var(--text-scale) * 0.75);
	font-weight: 400;
	letter-spacing: var(--text-ls);
	text-transform: uppercase;
	transition: background 0.15s;
}

.modal-nav-btn:hover {
	background: var(--primary);
}