/*
 * Gallery lightbox — native <dialog>, Monumentale register.
 * Progressive enhancement (assets/js/main.js initLightbox). The .pc-m-gallery
 * grid works without JS; with JS the images open full-size in a focus-trapped
 * dialog (ESC + focus restoration come from <dialog> for free). Photography is
 * meant to do the qualifying work, so let an organizer inspect it in depth.
 */

/* Gallery image becomes an accessible trigger (role/tabindex set in JS). */
.pc-lightbox-trigger { cursor: zoom-in; }
.pc-m-gallery img.pc-lightbox-trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 2px;
}

.pc-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100svh;
	max-height: 100svh;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(20, 18, 16, 0.97);
	color: #fff;
	overflow: hidden;
}
.pc-lightbox::backdrop { background: rgba(20, 18, 16, 0.6); }

.pc-lightbox__stage {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 3vw, 2.5rem);
	padding: clamp(3rem, 8vh, 5rem) clamp(1rem, 4vw, 3.5rem);
}

.pc-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: min(100%, 1200px);
	max-height: 100%;
}
.pc-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100svh - 9rem);
	object-fit: contain;
	margin: 0 auto;
}
.pc-lightbox__cap {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #cfc8bf;
}
.pc-lightbox__count {
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

.pc-lightbox__btn,
.pc-lightbox__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	cursor: pointer;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--mono);
	line-height: 1;
	transition: border-color 0.2s var(--pc-ease, ease), color 0.2s var(--pc-ease, ease);
}
.pc-lightbox__btn { width: 3rem; height: 3rem; font-size: 1.1rem; }
.pc-lightbox__close {
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.5rem;
}
.pc-lightbox__btn:hover,
.pc-lightbox__close:hover,
.pc-lightbox__btn:focus-visible,
.pc-lightbox__close:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

@media (max-width: 37.5rem) {
	.pc-lightbox__btn { width: 2.5rem; height: 2.5rem; }
	.pc-lightbox__stage { gap: 0.25rem; padding-inline: 0.5rem; }
}