/**
 * Lightbox (template-parts/components/lightbox.php).
 *
 * A real <dialog>, so the backdrop is ::backdrop and the centring is the
 * element's own. Nothing here reimplements a modal.
 */

.lightbox {
	max-width: 100vw;
	max-height: 100svh;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent; /* the backdrop below is the surface */
	overflow: hidden;
}

.lightbox::backdrop {
	/* The megamenu overlay's treatment: the same dark glass the site already
	   puts over the page when something takes it over. */
	background-color: rgba(10, 11, 13, 0.85);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Arrows either side of the figure on the first row, the counter on its own
   row beneath. In flow rather than positioned over the picture: absolutely
   positioning it put "1 / 6" on top of the image, which is a caption competing
   with the thing it counts. */
.lightbox__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr auto;
	align-items: center;
	gap: 32px; /* the site's step between a control and what it acts on */
	width: 100%;
	height: 100%;
	padding: 64px; /* the desktop container inset */
}

.lightbox__arrow--prev {
	grid-column: 1;
	grid-row: 1;
}

.lightbox__arrow--next {
	grid-column: 3;
	grid-row: 1;
}

/* min-height: 0 on both the column and the image is what lets the caption
   have room. A flex item will not shrink below its content by default, so an
   image at max-height: 100% takes the whole column and the caption is laid out
   past the bottom edge, present in the DOM and invisible on screen. */
.lightbox__figure {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px; /* image to its caption, the heading-to-copy step */
	min-width: 0;
	min-height: 0;
	height: 100%;
}

/* contain, and for the reason everything else on this page is: a render must
   not be cropped, least of all in the view opened to see it properly. */
.lightbox__image {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 6px;
}

.lightbox__caption {
	margin: 0;
	max-width: 65ch; /* .prose's measure; the caption is running text */
	text-align: center;
	font-size: var(--type-card-body-size);
	line-height: var(--type-body-line);
	font-weight: var(--type-card-body-weight);
	color: var(--color-body-text-on-dark);
}

.lightbox__count {
	grid-column: 1 / -1;
	grid-row: 2;
	justify-self: center;
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--type-mono-spec-size);
	line-height: var(--type-mono-spec-line);
	letter-spacing: var(--type-mono-spec-spacing);
	font-weight: var(--type-mono-spec-weight);
	color: var(--color-text-secondary-on-dark);
}

/* --------------------------------------------------------------------
 * Controls
 *
 * Not .icon-chip: that component is a light chip for a light surface, and
 * these sit on dark glass. Same 44px touch target, per the accessibility rule
 * that a control is at least that.
 * -------------------------------------------------------------------- */

.lightbox__close,
.lightbox__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-chip-size-touch);
	height: var(--icon-chip-size-touch);
	padding: 0;
	border: 1px solid var(--color-border-on-image);
	border-radius: 6px;
	background-color: var(--color-surface-glass);
	color: var(--color-heading-text-on-dark);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease; /* the interaction tier */
}

.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__arrow:hover,
.lightbox__arrow:focus-visible {
	background-color: var(--color-accent);
	color: var(--color-button-primary-text);
}

.lightbox__close {
	position: absolute;
	top: 64px;
	right: 64px;
	z-index: 1;
}

.lightbox__arrow[hidden] {
	display: none;
}

@media (max-width: 1024px) {
	.lightbox__inner {
		/* The mobile container inset. */
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto auto;
		gap: 24px;
		padding: 16px;
		padding-top: 72px; /* clear of the close button */
	}

	.lightbox__close {
		top: 16px;
		right: 16px;
	}

	/* Arrows under the picture rather than beside it: at 358px of usable width
	   a side arrow takes a quarter of it. */
	.lightbox__arrow--prev {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
	}

	.lightbox__arrow--next {
		grid-column: 1;
		grid-row: 2;
		justify-self: end;
	}

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

	.lightbox__count {
		grid-column: 1;
		grid-row: 3;
	}
}