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

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

#modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	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;
	/* Reserve room above for the fixed close button (top: 24px + 56px
	   button) so the box never overlaps it. */
	padding-top: 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-top: 112px;
	}
}

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

#modal-box {
	/* background: #fff; */
	width: 100%;
	max-width: 75vw;
	/* Fills the space left over after #modal-inner's padding, so it
	   always clears the fixed close button and PRV/NXT bar. */
	height: 100%;
	overflow: hidden;
	border-radius: 8px;
}

.modal-image-wrap {
	/* background: var(--color-light-gray); */
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 80vh;
	padding: 1em;
	user-select: none;
	-webkit-user-select: none;
}

/* A "cover" image fills the box edge-to-edge — no padding to bleed past. */
.modal-image-wrap.is-cover {
	padding: 0;
}

#modal-picture {
	display: block;
	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 .icon-play,
.modal-video-toggle .icon-pause {
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-video-toggle svg {
	display: block;
}

/* The play triangle's own shape isn't centered in its viewBox — nudge it
   left so it lands on the optical center of the button, not the
   bounding-box center. */
.modal-video-toggle .icon-play svg {
	transform: translateX(-1px);
}

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

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

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

/* ── 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.85);
	border: 1px solid var(--color-dark);
	padding: 10px 20px;
	border-radius: 999px;
	transition: background 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-scale);
	font-weight: 400;
	letter-spacing: var(--text-ls);
	/* text-transform: uppercase; */
	white-space: nowrap;
	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;
}

/* The follow-the-cursor arrow is a mouse affordance — on touch devices
   there's no cursor to follow, so hide it outright instead of relying
   on mousemove simply never firing (some browsers fire one synthetic
   mousemove on the first touch, which would otherwise flash it). */
@media (hover: none), (pointer: coarse) {
	.lightbox-btn {
		display: none;
	}
}

/* ── 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: #000;
	transition: color 0.2 ease-in-out;
}

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