/**
 * Simonis & Buunk Lightbox
 *
 * Sizes are in px, not rem: the theme sets html { font-size: 10px }.
 */

html.sb-lightbox-locked {
	overflow: hidden;
}

.sb-lightbox {
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #fff;
	color: #111;
	overflow: hidden;
	/* The script handles pinch, pan and double tap itself. */
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.sb-lightbox::backdrop {
	background-color: #fff;
}

.sb-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Column filling the viewport: the caption keeps its natural height and the
 * image shrinks to whatever space is left, so the caption is never cut off.
 */
.sb-lightbox-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 64px 72px 40px;
	box-sizing: border-box;
}

/* Takes the space left over by the caption; object-fit scales the image inside it. */
.sb-lightbox-image {
	display: block;
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform-origin: 50% 50%;
	cursor: zoom-in;
	-webkit-user-drag: none;
}

/* The zoomed image lies above the caption and the counter, below the buttons. */
.sb-lightbox.is-zoomed .sb-lightbox-image {
	position: relative;
	z-index: 1;
	cursor: grab;
}

.sb-lightbox.is-dragging .sb-lightbox-image {
	cursor: grabbing;
}

.sb-lightbox-caption {
	flex: none;
	max-width: 60em;
	margin-top: 12px;
	text-align: center;
	font-family: "Nunito Sans", sans-serif;
}

.sb-lightbox-title,
.sb-lightbox-text {
	display: block;
}

.sb-lightbox-counter {
	position: absolute;
	top: 20px;
	left: 20px;
	margin: 0;
	font-family: "Nunito Sans", sans-serif;
	font-weight: 300;
}

/*
 * The theme gives every button a margin and scales it on :active with a transition.
 * Both are reset: a moving button can slip from under the pointer between press and
 * release, and the click then lands on the backdrop. Positioning uses no transform.
 */
.sb-lightbox-button {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background-color: #262626;
	color: #ffc107;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transform: none;
	transition: none;
}

.sb-lightbox-button:hover,
.sb-lightbox-button:active {
	background-color: #000;
	transform: none;
}

.sb-lightbox-button:focus-visible {
	outline: 3px solid #262626;
	outline-offset: 3px;
}

.sb-lightbox-close {
	top: 12px;
	right: 12px;
}

.sb-lightbox-prev,
.sb-lightbox-next {
	top: calc(50% - 24px);
}

.sb-lightbox-prev {
	left: 12px;
}

.sb-lightbox-next {
	right: 12px;
}

.sb-lightbox-button[hidden],
.sb-lightbox-counter[hidden] {
	display: none;
}

@media (max-width: 767px) {
	/* Bottom padding leaves room for the arrow buttons below the caption. */
	.sb-lightbox-figure {
		padding: 64px 8px 84px;
	}

	/* Arrows move to the bottom so they don't cover the image. */
	.sb-lightbox-prev,
	.sb-lightbox-next {
		top: auto;
		bottom: 12px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.sb-lightbox[open] {
		animation: sb-lightbox-fade 0.15s ease-out;
	}

	.sb-lightbox.is-animating .sb-lightbox-image {
		transition: transform 0.2s ease-out;
	}

	@keyframes sb-lightbox-fade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
}