/* ==========================================================================
   FPL Content Image Lightbox
   ========================================================================== */

.fpl-lightbox-open {
	overflow: hidden;
}


/* Content images */

main img[data-fpl-lightbox],
article img[data-fpl-lightbox],
.wp-block-post-content img[data-fpl-lightbox],
.entry-content img[data-fpl-lightbox] {
	cursor: zoom-in;
}


/* Overlay */

.fpl-lightbox {
	position: fixed;
	inset: 0;

	z-index: 99999;

	display: none;

	align-items: center;
	justify-content: center;

	padding: 32px;

	box-sizing: border-box;

	background:
		rgba(4, 15, 20, 0.92);

	opacity: 0;

	transition:
		opacity 160ms ease;
}


.fpl-lightbox.is-open {
	display: flex;
	opacity: 1;
}


/* Main stage */

.fpl-lightbox__stage {
	position: relative;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
}


/* Image */

.fpl-lightbox__image {
	display: block;

	max-width: min(94vw, 1800px);
	max-height: 88vh;

	width: auto;
	height: auto;

	object-fit: contain;

	border-radius: 4px;

	box-shadow:
		0 20px 70px rgba(0, 0, 0, 0.40);
}


/* Caption */

.fpl-lightbox__caption {
	max-width: 900px;

	margin-top: 14px;

	font-size: 14px;
	line-height: 1.5;

	text-align: center;

	color:
		rgba(255, 255, 255, 0.82);
}


/* Controls */

.fpl-lightbox__close,
.fpl-lightbox__prev,
.fpl-lightbox__next {

	position: absolute;

	display: grid;
	place-items: center;

	padding: 0;

	border: 0;

	color: #ffffff;

	background:
		rgba(255, 255, 255, 0.12);

	cursor: pointer;

	transition:
		background 140ms ease,
		transform 140ms ease;
}


.fpl-lightbox__close:hover,
.fpl-lightbox__prev:hover,
.fpl-lightbox__next:hover {
	background:
		rgba(255, 255, 255, 0.22);
}


.fpl-lightbox__close {
	top: 0;
	right: 0;

	width: 44px;
	height: 44px;

	border-radius: 50%;

	font-size: 30px;
	line-height: 1;
}


.fpl-lightbox__prev,
.fpl-lightbox__next {
	top: 50%;

	width: 48px;
	height: 64px;

	transform:
		translateY(-50%);

	border-radius: 8px;

	font-size: 38px;
	line-height: 1;
}


.fpl-lightbox__prev {
	left: 0;
}


.fpl-lightbox__next {
	right: 0;
}


.fpl-lightbox__prev:hover,
.fpl-lightbox__next:hover {
	transform:
		translateY(-50%)
		scale(1.04);
}


.fpl-lightbox__prev[hidden],
.fpl-lightbox__next[hidden] {
	display: none;
}


@media (max-width: 700px) {

	.fpl-lightbox {
		padding: 16px;
	}


	.fpl-lightbox__image {
		max-width: 96vw;
		max-height: 82vh;
	}


	.fpl-lightbox__close {
		top: 4px;
		right: 4px;

		width: 40px;
		height: 40px;
	}


	.fpl-lightbox__prev,
	.fpl-lightbox__next {
		width: 40px;
		height: 56px;

		font-size: 32px;
	}
}