/**
 * Gallery variation: Lightbox Slideshow
 *
 * Enhances core gallery's optional lightbox with prev/next buttons.
 * The Interactivity API view module (blocks/gallery-variations/lightbox-slideshow/view.js)
 * adds keyboard nav (arrow keys), aria-modal handling, focus trap,
 * and live region "image X of Y" announcements.
 *
 * Visual layout when lightbox is closed: same as default gallery
 * (.is-layout-flex). Open state styles target [data-pfbt-lightbox-open].
 *
 * @package PostFormatsBlockThemes
 * @since 2.1.0
 */

.wp-block-gallery.is-style-lightbox-slideshow.is-layout-flex {
	gap: var(--pfbt-lightbox-gap, 0.5rem);
}

.wp-block-gallery.is-style-lightbox-slideshow.is-layout-flex .wp-block-image {
	cursor: zoom-in;
}

/* Lightbox dialog — appended to body by view.js when an item opens */
.pfbt-lightbox-dialog[role="dialog"] {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Overlay is fixed dark by convention; controls stay light on any palette. */
	background: var(--pfbt-lightbox-overlay, rgba(0, 0, 0, 0.92));
	padding: var(--wp--preset--spacing--medium, 1.5rem);
}

.pfbt-lightbox-dialog__image {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.pfbt-lightbox-dialog__close,
.pfbt-lightbox-dialog__prev,
.pfbt-lightbox-dialog__next {
	position: absolute;
	background: transparent;
	color: var(--pfbt-lightbox-fg, #fafafa);
	border: 1px solid currentColor;
	padding: var(--wp--preset--spacing--small, 0.75rem);
	border-radius: 50%;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1;
}

.pfbt-lightbox-dialog__close { inset-block-start: 1rem; inset-inline-end: 1rem; }
.pfbt-lightbox-dialog__prev  { inset-block-start: 50%; inset-inline-start: 1rem; transform: translateY(-50%); }
.pfbt-lightbox-dialog__next  { inset-block-start: 50%; inset-inline-end: 1rem; transform: translateY(-50%); }

.pfbt-lightbox-dialog__counter {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	color: var(--pfbt-lightbox-fg, #fafafa);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.pfbt-lightbox-dialog__close:focus-visible,
.pfbt-lightbox-dialog__prev:focus-visible,
.pfbt-lightbox-dialog__next:focus-visible {
	outline: 2px solid var(--pfbt-lightbox-focus, #e8f0fa);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.pfbt-lightbox-dialog {
		transition: opacity 150ms ease-out;
	}
}