/**
 * Frontend styles for the Immich Album Gallery block.
 *
 * Layout is handled inline by render_album_block (matches what
 * core/gallery's PHP render emits: per-figure flex-basis on each child
 * figure plus the gap CSS variable on the wrapper), so this file is just
 * for the click-to-expand overlay and the small editor/visitor notices.
 */

.immich-album-gallery[data-immich-lightbox] > figure.wp-block-image > img {
	cursor: zoom-in;
}

/*
 * Uniform-aspect cells: every gallery <img> is sized to the same aspect
 * ratio and cropped via object-fit: cover, so a row of mixed portrait
 * and landscape photos has no whitespace under the shorter cells. The
 * fullsize image opened by the lightbox is unaffected.
 *
 * Override per gallery (or globally in a theme) by setting
 * --immich-album-aspect on .immich-album-gallery, e.g.
 *   .immich-album-gallery { --immich-album-aspect: 4 / 3; }
 */
.immich-album-gallery {
	--immich-album-aspect: 1;
}

.immich-album-gallery > figure.wp-block-image > img {
	width: 100%;
	height: auto;
	aspect-ratio: var( --immich-album-aspect );
	object-fit: cover;
	display: block;
}

.immich-album-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.85 );
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
}

.immich-album-overlay-stage {
	cursor: default;
}

.immich-album-overlay-prev,
.immich-album-overlay-next,
.immich-album-overlay-close {
	cursor: pointer;
}

.immich-album-overlay-stage {
	position: relative;
	max-width: 95vw;
	max-height: 95vh;
}

.immich-album-overlay-img {
	display: block;
	max-width: 95vw;
	max-height: 95vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.immich-album-overlay-close {
	position: absolute;
	top: -36px;
	right: 0;
	background: transparent;
	border: 0;
	color: #ffffff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}

.immich-album-overlay-close:focus-visible,
.immich-album-overlay-prev:focus-visible,
.immich-album-overlay-next:focus-visible {
	outline: 2px solid #ffffff;
}

/*
 * Chevrons attach to the overlay (full viewport) rather than the stage so
 * they stay pinned to the page edges when the image swaps between portrait
 * and landscape. Semi-transparent at rest, fully opaque on hover/focus so
 * they don't overpower the image.
 */
.immich-album-overlay-prev,
.immich-album-overlay-next {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	background: rgba( 0, 0, 0, 0.4 );
	border: 0;
	color: #ffffff;
	font-size: 48px;
	line-height: 1;
	cursor: pointer;
	padding: 8px 14px;
	border-radius: 4px;
	opacity: 0.5;
	transition: opacity 0.15s ease, background-color 0.15s ease;
	/* Sit above the stage so wide images do not paint over the chevrons. */
	z-index: 1;
}

.immich-album-overlay-prev { left: 8px; }
.immich-album-overlay-next { right: 8px; }

.immich-album-overlay-prev:hover,
.immich-album-overlay-prev:focus-visible,
.immich-album-overlay-next:hover,
.immich-album-overlay-next:focus-visible {
	opacity: 1;
	background: rgba( 0, 0, 0, 0.7 );
}

.immich-album-more {
	margin-top: 12px;
	font-size: 14px;
}

.immich-album-error,
.immich-album-stale,
.immich-album-empty {
	margin: 8px 0;
}