/*
 * Lightbox and video dialog (assets/js/lightbox.js), ported from the original
 * theme. Colours come from the theme.json palette.
 *
 * Triggers: explicit `.fb-lightbox` / `a[data-fb-lightbox]` links, core Image
 * links to an image file (marked `.fb-lightbox-link` by the script), and video
 * posters (`.fb-video`, core Image links to Vimeo).
 */

/* ------------------------------------------------------------ triggers -- */

.fb-lightbox {
	display: block;
	position: relative;
	cursor: zoom-in;
	color: inherit;
}

.fb-lightbox-link {
	position: relative;
	cursor: zoom-in;
}

/* A quiet "view larger" affordance on hover/keyboard focus, without moving
   the image or changing its crop. */
.fb-lightbox::after,
.fb-lightbox-link::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 2.75rem;
	height: 2.75rem;
	transform: translate( -50%, -50% ) scale( 0.6 );
	border-radius: 50%;
	background: color-mix( in srgb, var(--wp--preset--color--contrast) 55%, transparent ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22'%3E%3Cg fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/g%3E%3C/svg%3E" ) center / 1.4rem no-repeat;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.25s ease;
	pointer-events: none;
}

.fb-lightbox:hover::after,
.fb-lightbox:focus-visible::after,
.fb-lightbox-link:hover::after,
.fb-lightbox-link:focus-visible::after {
	opacity: 1;
	transform: translate( -50%, -50% ) scale( 1 );
}

/* Video posters: a play triangle over the poster image. */
.fb-video {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
}

.wp-block-image a[href*="vimeo.com/"] {
	position: relative;
}

.fb-video::after,
.wp-block-image a[href*="vimeo.com/"]::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate( -50%, -50% );
	width: 0;
	height: 0;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	border-left: 25px solid var(--wp--preset--color--white);
	filter: drop-shadow( 0 1px 4px color-mix( in srgb, var(--wp--preset--color--contrast) 90%, var(--wp--preset--color--white) ) );
	pointer-events: none;
}

/* -------------------------------------------------------------- viewer -- */

.fb-lightbox-ui {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: color-mix( in srgb, var(--wp--preset--color--contrast) 94%, transparent );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.fb-lightbox-ui.is-open {
	opacity: 1;
}

.fb-lightbox-ui[hidden] {
	display: none;
}

.fb-lightbox-ui__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: min( 1120px, 100% );
	max-height: 100%;
}

.fb-lightbox-ui__stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 0;
	flex: 1 1 auto;
}

/* Loading spinner while the full-size file arrives. */
.fb-lightbox-ui__stage::before {
	content: "";
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	border: 3px solid color-mix( in srgb, var(--wp--preset--color--white) 25%, transparent );
	border-top-color: var(--wp--preset--color--accent);
	border-radius: 50%;
	animation: fb-lightbox-spin 0.8s linear infinite;
	opacity: 0;
	pointer-events: none;
}

.fb-lightbox-ui__stage:has( .fb-lightbox-ui__image.is-loading )::before {
	opacity: 1;
}

@keyframes fb-lightbox-spin {
	to {
		transform: rotate( 360deg );
	}
}

.fb-lightbox-ui__image {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
	opacity: 0;
	transform: scale( 0.98 );
	transition: opacity 0.25s ease, transform 0.3s ease;
	box-shadow: 0 18px 60px color-mix( in srgb, var(--wp--preset--color--contrast) 50%, transparent );
}

.fb-lightbox-ui.is-open .fb-lightbox-ui__image {
	opacity: 1;
	transform: scale( 1 );
}

.fb-lightbox-ui__image.is-loading {
	opacity: 0;
	transition: none;
}

.fb-lightbox-ui__image.is-error {
	opacity: 0.25;
}

.fb-lightbox-ui__caption {
	max-width: 70ch;
	margin: 0.9rem 0 0;
	color: var(--wp--preset--color--on-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-align: center;
	opacity: 0.9;
}

.fb-lightbox-ui__counter {
	margin: 0.45rem 0 0;
	color: color-mix( in srgb, var(--wp--preset--color--white) 76%, var(--wp--preset--color--contrast) );
	font-size: 0.8rem;
	letter-spacing: 0.12em;
}

.fb-lightbox-ui__caption[hidden],
.fb-lightbox-ui__counter[hidden] {
	display: none;
}

.fb-lightbox-ui__btn {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--white) 28%, transparent );
	border-radius: 50%;
	background: color-mix( in srgb, var(--wp--preset--color--contrast) 35%, transparent );
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.fb-lightbox-ui__btn:hover {
	background: color-mix( in srgb, var(--wp--preset--color--contrast) 60%, transparent );
	border-color: color-mix( in srgb, var(--wp--preset--color--white) 55%, transparent );
}

.fb-lightbox-ui__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

.fb-lightbox-ui__btn:active {
	transform: scale( 0.94 );
}

.fb-lightbox-ui__btn--close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

.fb-lightbox-ui__btn--prev,
.fb-lightbox-ui__btn--next {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	width: 3rem;
	height: 3rem;
}

.fb-lightbox-ui__btn--prev:active,
.fb-lightbox-ui__btn--next:active {
	transform: translateY( -50% ) scale( 0.94 );
}

.fb-lightbox-ui__btn--prev {
	left: 0.5rem;
}

.fb-lightbox-ui__btn--next {
	right: 0.5rem;
}

.fb-lightbox-ui__btn[hidden] {
	display: none;
}

html.fb-lightbox-locked,
html.fb-lightbox-locked body {
	overflow: hidden;
}

/* -------------------------------------------------------- video dialog -- */

.fb-video-dialog {
	width: min( 1100px, calc( 100vw - 40px ) );
	max-width: none;
	padding: 0;
	overflow: visible;
	border: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.fb-video-dialog::backdrop {
	background: color-mix( in srgb, var(--wp--preset--color--contrast) 88%, transparent );
}

.fb-video-dialog iframe {
	display: block;
	width: 100%;
	max-height: calc( 100dvh - 100px );
	aspect-ratio: 16 / 9;
	border: 0;
}

.fb-video-dialog__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--white);
	font: 36px/1 Arial, sans-serif;
	cursor: pointer;
}

.fb-video-dialog__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

@media ( max-width: 47.999rem ) {
	.fb-lightbox-ui {
		padding: 0.5rem;
	}

	.fb-lightbox-ui__image {
		max-height: 72vh;
	}

	.fb-lightbox-ui__btn--prev,
	.fb-lightbox-ui__btn--next {
		width: 2.5rem;
		height: 2.5rem;
	}

	.fb-lightbox-ui__btn--prev {
		left: 0.25rem;
	}

	.fb-lightbox-ui__btn--next {
		right: 0.25rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.fb-lightbox::after,
	.fb-lightbox-link::after,
	.fb-lightbox-ui,
	.fb-lightbox-ui__image,
	.fb-lightbox-ui__btn {
		transition: none;
	}

	.fb-lightbox-ui.is-open .fb-lightbox-ui__image,
	.fb-lightbox-ui__btn:active {
		transform: none;
	}

	.fb-lightbox-ui__btn--prev:active,
	.fb-lightbox-ui__btn--next:active {
		transform: translateY( -50% );
	}

	.fb-lightbox-ui__stage::before {
		animation-duration: 2.4s;
	}
}