/**
 * The full-size viewer for a gallery photograph.
 *
 * Only the viewer lives here. The grid itself is the theme's, beside the other
 * content components, because that is layout the theme owns; this is a control
 * the plugin ships with its own script and has to look right under any theme.
 */

/*
 * A picture that opens something says so on approach.
 *
 * Keyed off `[data-full][role="button"]` rather than off the grid, because the
 * viewer stopped being a gallery feature: a lone photograph in the prose opens
 * exactly the same way and has to look as though it does. The script writes
 * `role` only on what it has actually bound, so this can never promise a zoom
 * that no handler will deliver.
 */
img[data-full][role="button"] {
	cursor: zoom-in;
	transition: opacity var(--t-fast, 180ms) var(--ease, ease);
}

img[data-full][role="button"]:hover {
	opacity: 0.88;
}

img[data-full][role="button"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 2px;
}

.jmns-lightbox {
	/* The dialog's own box is the whole viewport; the frame inside centres. */
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 100%;
	max-block-size: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.jmns-lightbox::backdrop {
	background-color: rgb(var(--jmns-scrim-rgb, 15 22 19) / 0.88);
}

.jmns-lightbox__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	block-size: 100%;
	padding: 1rem;
}

/*
 * The scroll box the picture lives in.
 *
 * Zoomed past the frame the image has to be pannable, and scrolling the frame
 * would carry the controls away with it — a reader halfway down a gazette page
 * would have to scroll back up to find the close button. This scrolls; the bar
 * and the close button stay put.
 *
 * `place-items: center` keeps a fitted image centred, and `safe` stops the
 * centring pushing an oversized one out of reach: without it a picture wider
 * than its box centres with negative overflow and the left edge cannot be
 * scrolled to at all.
 */
.jmns-lightbox__canvas {
	display: grid;
	place-items: safe center;
	overflow: auto;
	inline-size: 100%;
	min-block-size: 0;
	flex: 1 1 auto;
	overscroll-behavior: contain;
}

.jmns-lightbox.is-zoomed .jmns-lightbox__canvas {
	/* A hint that the picture can be dragged around, on pointers that show one. */
	cursor: grab;
}

/*
 * A scrollbar that stays out of the way of the document it is scrolling.
 *
 * The browser default is a wide opaque track, and over a gazette scan on a
 * dark backdrop it reads as part of the furniture rather than as a control —
 * the reader is looking at a legal record and a grey bar is sitting on top of
 * it. Thin, and only as visible as it needs to be to say the picture continues.
 *
 * Both syntaxes: `scrollbar-width` and `scrollbar-color` are the standard and
 * cover Firefox, `::-webkit-scrollbar` covers Chrome and Safari, which do not
 * implement the standard properties on this element.
 */
.jmns-lightbox__canvas {
	scrollbar-width: thin;
	scrollbar-color: rgb(255 255 255 / 0.3) transparent;
}

.jmns-lightbox__canvas::-webkit-scrollbar {
	/*
	 * `width` and `height`, not the logical properties used everywhere else in
	 * this file. `::-webkit-scrollbar` is a non-standard pseudo-element that
	 * predates them and ignores them, so a logical value here is a rule that
	 * parses and does nothing.
	 */
	width: 6px;
	height: 6px;
}

.jmns-lightbox__canvas::-webkit-scrollbar-track {
	background: transparent;
}

.jmns-lightbox__canvas::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background-color: rgb(255 255 255 / 0.28);
}

/* Brighter under the pointer, so it is still a control and not just a mark. */
.jmns-lightbox__canvas::-webkit-scrollbar-thumb:hover {
	background-color: rgb(255 255 255 / 0.45);
}

.jmns-lightbox__canvas::-webkit-scrollbar-corner {
	background: transparent;
}

.jmns-lightbox__zoom {
	font-variant-numeric: tabular-nums;
}

.jmns-lightbox__zoom[disabled] {
	opacity: 0.4;
	cursor: default;
}

.jmns-lightbox__image {
	/*
	 * Whole, always. The grid letterboxes to keep its rows even; here there is
	 * no grid to keep even and no reason to crop — this is the view a reader
	 * opened the picture to get.
	 */
	max-inline-size: 100%;
	max-block-size: calc(100% - 6rem);
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
	border-radius: var(--r-card, 12px);
	background-color: rgb(255 255 255 / 0.06);
}

.jmns-lightbox__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.jmns-lightbox__count {
	margin: 0;
	min-inline-size: 5rem;
	color: var(--jmns-on-scrim, #FFFFFF);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.jmns-lightbox__step,
.jmns-lightbox__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px, the target size the rest of this portal holds to. */
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 999px;
	background-color: rgb(255 255 255 / 0.1);
	color: var(--jmns-on-scrim, #FFFFFF);
	font: inherit;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}

.jmns-lightbox__step:hover,
.jmns-lightbox__close:hover {
	background-color: rgb(255 255 255 / 0.2);
}

/*
 * `hidden` has to be said out loud here.
 *
 * The step buttons declare `display: inline-flex`, and an author declaration
 * beats the user agent's `[hidden] { display: none }` whatever the specificity,
 * because the origin decides before the arithmetic does. Without this the
 * viewer opens a single photograph with two arrows either side of it that
 * reload the same picture — the one case the script hides them for.
 */
.jmns-lightbox [hidden] {
	display: none;
}

.jmns-lightbox__step:focus-visible,
.jmns-lightbox__close:focus-visible {
	outline: 3px solid var(--jmns-on-scrim, #FFFFFF);
	outline-offset: 2px;
}

.jmns-lightbox__close {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
}

/* Shipped rather than borrowed; the plugin cannot assume the theme has it. */
.jmns-lightbox .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}