/**
 * Lightbox
 *
 * The image viewer, shared by the Image Slider block and the project gallery.
 * A component used by more than one thing belongs in neither of their folders,
 * so it has its own handle — see im_norwegianflagstone_register_shared_block_styles().
 *
 * Markup: template-parts/lightbox.php. Behaviour: assets/js/lightbox.js.
 */

.nf-lightbox {
	background: none;
	border: 0;
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	padding: 0;
	width: 100%;
}

.nf-lightbox::backdrop {
	backdrop-filter: blur(4px);
	background-color: rgb(27 25 22 / 88%);
}

.nf-lightbox__inner {
	align-items: center;
	display: grid;
	gap: var(--nf-space-s);
	grid-template-columns: auto minmax(0, 1fr) auto;
	height: 100%;
	padding: var(--nf-space-xl) var(--nf-gutter);
	width: 100%;
}

.nf-lightbox__figure {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--nf-space-s);
	grid-column: 2;
	justify-content: center;
	margin: 0;
	min-height: 0;

	/* The spinner is centred against this. */
	position: relative;
}

/*
 * `width: auto` with `max-width: 100%` is what "original size" means here: the
 * original file, shown as large as the screen allows and never enlarged past
 * its own pixels. A small image stays small rather than being blown up.
 */
.nf-lightbox__image {
	border-radius: var(--nf-radius);
	height: auto;

	/* Leaves room for the caption and the padding. */
	max-height: calc(100vh - 12rem);
	max-width: 100%;
	object-fit: contain;
	transition: opacity var(--nf-transition);
	width: auto;
}

.nf-lightbox__caption {
	color: var(--nf-lys-70);
	font-size: var(--nf-fs-small);
	margin: 0;
	max-width: var(--nf-measure);
	text-align: center;
}

/* Controls ---------------------------------------------------------------- */

.nf-lightbox__nav,
.nf-lightbox__close {
	align-items: center;
	background-color: var(--nf-lys-15);
	border: 0;
	border-radius: var(--nf-radius-pill);
	color: var(--nf-lys);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: 2.75rem;
	justify-content: center;
	transition: background-color var(--nf-transition);
	width: 2.75rem;
}

.nf-lightbox__nav:hover,
.nf-lightbox__close:hover {
	background-color: var(--nf-lys-50);
	color: var(--nf-mork-sort);
}

.nf-lightbox__nav:focus-visible,
.nf-lightbox__close:focus-visible {
	outline: 2px solid var(--nf-gull);
	outline-offset: 2px;
}

.nf-lightbox__nav--prev {
	grid-column: 1;
}

.nf-lightbox__nav--next {
	grid-column: 3;
}

/* A single image has nowhere to page to. */
.nf-lightbox.has-one .nf-lightbox__nav {
	display: none;
}

.nf-lightbox__close {
	inset-block-start: var(--nf-space-s);
	inset-inline-end: var(--nf-gutter);
	position: absolute;
}

/* Chevrons and cross, drawn rather than shipped as icon files. */
.nf-lightbox__arrow {
	border-inline-start: 2px solid currentcolor;
	border-block-start: 2px solid currentcolor;
	display: block;
	height: 0.625rem;
	transform: rotate(-45deg);
	width: 0.625rem;
}

.nf-lightbox__nav--next .nf-lightbox__arrow {
	transform: rotate(135deg);
}

.nf-lightbox__cross {
	display: block;
	height: 0.875rem;
	position: relative;
	width: 0.875rem;
}

.nf-lightbox__cross::before,
.nf-lightbox__cross::after {
	background-color: currentcolor;
	content: "";
	height: 2px;
	inset-block-start: 50%;
	inset-inline-start: 0;
	position: absolute;
	width: 100%;
}

.nf-lightbox__cross::before {
	transform: translateY(-50%) rotate(45deg);
}

.nf-lightbox__cross::after {
	transform: translateY(-50%) rotate(-45deg);
}

.nf-lightbox__counter {
	color: var(--nf-lys-70);
	font-size: var(--nf-fs-small);
	grid-column: 2;
	margin: 0;
	text-align: center;
}

/*
 * Loading ----------------------------------------------------------------- */

/*
 * The viewer shows the original file, which for a project photograph can be
 * several megabytes, so there is a real wait to account for on a slow
 * connection. The image is faded rather than hidden: `visibility` would collapse
 * the box it was just given by the width/height attributes, and the dialog would
 * resize twice.
 */
.nf-lightbox__spinner {
	animation: nf-lightbox-spin 0.8s linear infinite;
	block-size: 2rem;
	border: 2px solid var(--nf-lys-15);
	border-block-start-color: var(--nf-lys-70);
	border-radius: var(--nf-radius-pill);
	inline-size: 2rem;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: opacity var(--nf-transition);
}

.nf-lightbox.is-loading .nf-lightbox__spinner {
	opacity: 1;
}

.nf-lightbox.is-loading .nf-lightbox__image {
	opacity: 0.25;
}

@keyframes nf-lightbox-spin {

	to {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {

	.nf-lightbox__spinner {
		animation-duration: 2.4s;
	}
}

@media (max-width: 599px) {

	.nf-lightbox__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: var(--nf-space-s);
	}

	.nf-lightbox__figure {
		grid-column: 1;
	}

	.nf-lightbox__counter {
		grid-column: 1;
	}

	/* The arrows move under the image where thumbs can reach them. */
	.nf-lightbox__nav--prev,
	.nf-lightbox__nav--next {
		grid-column: 1;
		grid-row: 3;
		justify-self: center;
	}

	.nf-lightbox__nav--prev {
		margin-inline-end: 4rem;
	}

	.nf-lightbox__nav--next {
		margin-inline-start: 4rem;
	}
}