/*
 * Looking at a picture without leaving the page.
 *
 * See AC\Core\View\Lightbox for why this is site-wide. The link still points at the
 * file, so with no JavaScript it navigates as it always did; with it, a native
 * <dialog> opens over the page — which matters most in the installed app, where
 * standalone mode has no address bar and iOS has no back button, so tapping a
 * photograph used to be a dead end.
 *
 * Tokens with fallbacks throughout: this loads on every page, including any that
 * theme.json has not painted, and a dialog with no background is a picture floating
 * on whatever is behind it.
 */

.ac-lightbox {
	background: transparent;
	border: 0;
	max-height: 100dvh;
	max-width: 100vw;
	padding: 0;
	width: 100%;
}

.ac-lightbox::backdrop {
	background-color: rgba( 12, 20, 18, 0.82 );
}

.ac-lightbox__inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	justify-content: center;
	min-height: 100dvh;
	padding: 1rem;
}

/*
 * Sized to the viewport, not to the file. A phone photograph is 1600px wide and the
 * point of opening it is to see detail, so it takes whatever room there is and no
 * more — never enough to need scrolling in two directions.
 *
 * `dvh` rather than `vh` because on a phone the address bar comes and goes, and
 * `vh` measures the tallest state: a picture sized to it is cut off exactly when the
 * bar is showing.
 */
.ac-lightbox__media :is( img, video ) {
	border-radius: var( --wp--custom--radius--md, 0.375rem );
	display: block;
	height: auto;
	max-height: 82dvh;
	max-width: 100%;
}

/*
 * A piece of the page popped up rather than a file: a map pin's notice, with its own
 * words and its own picture. This one needs a background and a readable measure, where
 * a photograph needs neither — hence the class rather than one set of rules trying to
 * be both.
 */
.ac-lightbox__body {
	background-color: var( --wp--preset--color--base, #faf8f6 );
	border-radius: var( --wp--custom--radius--md, 0.375rem );
	color: var( --wp--preset--color--contrast, #182320 );
	max-height: 80dvh;
	max-width: 34rem;
	overflow-y: auto;
	padding: var( --wp--preset--spacing--30, 1.25rem );
	width: 100%;
}

.ac-lightbox__body > :first-child {
	margin-block-start: 0;
}

.ac-lightbox__body > :last-child {
	margin-block-end: 0;
}

.ac-lightbox__body img,
.ac-lightbox__body video {
	border-radius: var( --wp--custom--radius--sm, 0.25rem );
	height: auto;
	max-width: 100%;
}

/*
 * The way out. On a phone this is the only one — there is no Escape key and no
 * address bar — so it is a full 44px target and never smaller.
 */
.ac-lightbox__close {
	background-color: var( --wp--preset--color--base, #faf8f6 );
	border: 0;
	border-radius: var( --wp--custom--radius--md, 0.375rem );
	color: var( --wp--preset--color--contrast, #182320 );
	cursor: pointer;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	font-weight: 600;
	min-height: 44px;
	padding: 0.6rem 1.4rem;
}

.ac-lightbox__close:hover {
	background-color: var( --wp--preset--color--surface, #f3f0ea );
}

.ac-lightbox__close:focus-visible {
	outline: var( --wp--custom--focus--width, 3px ) solid var( --wp--preset--color--base, #faf8f6 );
	outline-offset: var( --wp--custom--focus--offset, 2px );
}