/* ==========================================================================
   Tern Gallery — the gallery view (Figma "Gallery", 769:577)

   Exactly the Figma frame's measurements at 1440px wide. On other widths
   they grow and shrink with the window, the way the frame would if scaled
   ("vw" is 1% of the window's width, so 1440px = 100vw):

     first image starts 193px from the left     193 / 1440 -> 13.403vw
     images start       77px from the top        77 / 1440 ->  5.347vw
     images are         839px tall              839 / 1440 -> 58.264vw
     between images     20px                     20 / 1440 ->  1.389vw
     below the images   66px (982 - 77 - 839)    66 / 1440 ->  4.583vw
     "Close"            16px from the top, 40px from the right; Desktop Text

   Each image keeps its own proportions and is never cropped. The one being
   looked at starts 193px from the left; the next follows 20px after it and
   shows on the right. Figma has 241px between images; Karla reduced it to
   20px on 2026-10-05, the same gap as the artist page's highlights. The
   spacing is set by lightbox.js. In a window shorter than the design's, the
   images shrink to fit the height rather than be cut off at the bottom.

   Phones have no frame in Figma. There each image fills the width, with the
   site's 16px margins, one per swipe.

   Behaviour is in assets/lightbox.js; see includes/lightbox.php.
   ========================================================================== */

/* An image that opens the view says so to the mouse. */
.terngallery-lightbox-trigger {
	cursor: zoom-in;
}

.terngallery-lightbox-trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-black, #000);
	outline-offset: 4px;
}

/* The page behind stays where it was while the view is open. */
html.terngallery-lightbox-open {
	overflow: hidden;
}

/* The browser gives a <dialog> a border, padding and a narrow centred box;
   all of that is taken away so it covers the whole screen. */
.terngallery-lightbox {
	width: 100%;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: var(--wp--preset--color--custom-off-white, #fffbf8);
	color: var(--wp--preset--color--custom-black, #000);
}

.terngallery-lightbox::backdrop {
	background: var(--wp--preset--color--custom-off-white, #fffbf8);
}

.terngallery-lightbox__close {
	position: absolute;
	z-index: 1;
	top: 16px;
	right: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--abc-otto), serif;
	font-size: var(--wp--preset--font-size--medium);
	font-style: italic;
	font-weight: 300;
	line-height: 19px;
}

.terngallery-lightbox__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* The row. It scrolls sideways, and always comes to rest with an image at the
   design's left edge ("snapping") rather than halfway between two.
   position: relative is what the script measures the images' places from. */
.terngallery-lightbox__track {
	position: relative;
	display: flex;
	align-items: flex-start;
	height: 100%;
	box-sizing: border-box;
	padding: 5.347vw 0 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.terngallery-lightbox__track::-webkit-scrollbar {
	display: none;
}

.terngallery-lightbox__image {
	flex: none;
	width: auto;
	height: min(58.264vw, 100dvh - 5.347vw - 4.583vw);
	scroll-snap-align: start;

	/* The stand-in copy (see lightbox.js), placed exactly where the image
	   will appear. */
	background-repeat: no-repeat;
	background-size: cover;
}

/* Phones and narrow windows — the same break as the rest of the site. */
@media (max-width: 781px) {
	.terngallery-lightbox__close {
		right: 16px;
	}

	.terngallery-lightbox__track {
		align-items: center;
		gap: 16px;
		padding: 0 16px;
		scroll-padding-left: 16px;
	}

	.terngallery-lightbox__image {
		width: calc(100vw - 32px);
		max-width: none;
		height: auto;
		max-height: 80dvh;
		object-fit: contain;
		background-position: center;
		background-size: contain;
	}
}