/* ---------------------------------------------------------------------------
   Lightbox — a native <dialog>. Full-viewport paper ground, the image shown
   whole, caption underneath, close button top right. Escape closes it for
   free; JS handles the open/close buttons and a click on the backdrop.
--------------------------------------------------------------------------- */

.lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	background: var(--color-paper);
	color: var(--color-ink);
}

.lightbox::backdrop {
	background: var(--color-paper);
}

.lightbox[open] {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	animation: lightbox-in .25s var(--ease);
}

@keyframes lightbox-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.lightbox--close {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-paper);
	color: var(--color-ink);
	transition: background-color .25s var(--ease);
}

.lightbox--close:hover {
	background: var(--color-wall);
}

.lightbox--close:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.lightbox--figure {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: .75rem;
	height: 100%;
	padding: clamp(1rem, 4vw, 3rem);
}

.lightbox--image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	object-fit: contain;
	box-shadow: 0 2px 8px rgba(28, 27, 25, .12);
}

.lightbox--caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem 1rem;
	justify-content: center;
	font-size: var(--text-small);
	color: var(--color-ink-soft);
}

.lightbox--title {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	color: var(--color-ink);
}

body.lightbox-open {
	overflow: hidden;
}