/*
 * ILM Components -- Lightbox (1.30.0, G9).
 *
 * One closed `<dialog>` per component that opts in, opened over the page by
 * `showModal()`. Until then it is closed and empty, and a closed dialog is
 * not rendered at all, so nothing here shows on a page whose script never
 * runs. See `ILM\Components\Support\Lightbox`.
 *
 * The picture fits the viewport whichever way it is shaped -- a tall flyer
 * by its height, a wide photograph by its width -- and is never stretched:
 * width and height are the picture's own, capped, and `object-fit` keeps the
 * proportions. `dvh` follows the visible viewport on phones whose toolbars
 * come and go, with `vh` before it for a browser without it.
 *
 * No animation: it opens and closes at once, which is also what a visitor
 * who asked for less movement gets.
 */

.ilm-lightbox {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100vw;
	block-size: 100%;
	max-block-size: 100vh;
	max-block-size: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	overflow: hidden;
}

.ilm-lightbox::backdrop {
	background-color: rgb(0 0 0 / 0.86);
}

.ilm-lightbox__panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	inline-size: 100%;
	block-size: 100%;
	padding: 3.5rem 1rem 1rem;
	pointer-events: none;
}

.ilm-lightbox__panel > * {
	pointer-events: auto;
}

.ilm-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	min-block-size: 0;
	max-inline-size: 100%;
	margin: 0;
}

.ilm-lightbox__image {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: min(100%, 60rem);
	max-block-size: calc(100vh - 8rem);
	max-block-size: calc(100dvh - 8rem);
	object-fit: contain;
	border-radius: var(--ilm-radius-md, 0.375rem);
	background-color: rgb(255 255 255 / 0.06);
}

.ilm-lightbox__caption {
	max-inline-size: 60rem;
	margin: 0;
	text-align: center;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ilm-lightbox__caption[hidden] {
	display: none;
}

/* Top end of the screen, whichever way the text runs, above the picture. */
.ilm-lightbox__close {
	appearance: none;
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.5);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.6);
	color: #fff;
	cursor: pointer;
}

.ilm-lightbox__close:hover {
	background: rgb(0 0 0 / 0.85);
	border-color: #fff;
}

.ilm-lightbox__close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* An X from two rules, as the Modal draws its own. */
.ilm-lightbox__close::before,
.ilm-lightbox__close::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	inline-size: 1.125rem;
	block-size: 2px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.ilm-lightbox__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/*
 * A sequence (1.35.0): Previous and Next at the two sides, half-way down,
 * whichever way the text runs; drawn as the close button is, a chevron of
 * two borders. They sit over the picture's edge on a narrow screen rather
 * than take width from it, and a root of one picture hides them.
 */
.ilm-lightbox__step {
	appearance: none;
	position: absolute;
	inset-block-start: 50%;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-start: -1.375rem;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.5);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.6);
	color: #fff;
	cursor: pointer;
}

.ilm-lightbox__step--previous {
	inset-inline-start: 0.5rem;
}

.ilm-lightbox__step--next {
	inset-inline-end: 0.5rem;
}

.ilm-lightbox__step[hidden] {
	display: none;
}

.ilm-lightbox__step:hover {
	background: rgb(0 0 0 / 0.85);
	border-color: #fff;
}

.ilm-lightbox__step:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.ilm-lightbox__step::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 0.75rem;
	block-size: 0.75rem;
	border-block-start: 2px solid currentColor;
	border-inline-start: 2px solid currentColor;
	transform: translate(-30%, -50%) rotate(-45deg);
}

.ilm-lightbox__step--next::before {
	transform: translate(-70%, -50%) rotate(135deg);
}

/* In a right-to-left page the chevrons point the way their buttons move. */
.ilm-lightbox:dir(rtl) .ilm-lightbox__step--previous::before {
	transform: translate(-70%, -50%) rotate(135deg);
}

.ilm-lightbox:dir(rtl) .ilm-lightbox__step--next::before {
	transform: translate(-30%, -50%) rotate(-45deg);
}

/* Room under the picture for the line that says where it is in the sequence. */
.ilm-lightbox--sequence .ilm-lightbox__image {
	max-block-size: calc(100vh - 9.5rem);
	max-block-size: calc(100dvh - 9.5rem);
}

/* On its own dark ground, so it reads over whatever the backdrop lets through. */
.ilm-lightbox__position {
	margin: 0;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.7);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.ilm-lightbox__position[hidden] {
	display: none;
}

/* The page behind stays where it was while a picture is open. */
html.ilm-lightbox-open {
	overflow: hidden;
}

/* A trigger is the picture it holds: no underline, the focus ring on the picture. */
[data-ilm-lightbox] {
	display: block;
	color: inherit;
	cursor: zoom-in;
}

[data-ilm-lightbox]:focus-visible {
	outline: 3px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}