/* AI Remix Photo — shared public image lightbox. */

.hre-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.hre-lightbox[hidden] {
	display: none !important;
}

/* Inner controls also use the hidden attribute (single-image mode hides
   prev/next and the counter); scope the guard so author display rules
   never beat the UA's [hidden] rule again. */
.hre-lightbox [hidden] {
	display: none !important;
}

.hre-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 17, 24, 39, 0.88 );
	cursor: zoom-out;
}

.hre-lightbox-panel {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min( 1120px, 100% );
	max-height: 100%;
}

.hre-lightbox-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.hre-lightbox-image {
	display: block;
	width: auto;
	max-width: min( 100%, calc( 100vw - 160px ) );
	max-height: calc( 100dvh - 128px );
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.35 );
	object-fit: contain;
}

.hre-lightbox-caption,
.hre-lightbox-counter {
	max-width: min( 760px, calc( 100vw - 48px ) );
	margin: 10px 0 0;
	color: #ffffff;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.4;
}

.hre-lightbox-counter {
	margin-top: 4px;
	font-size: 0.78rem;
	opacity: 0.78;
}

.hre-lightbox-close,
.hre-lightbox-nav {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.5 );
	border-radius: 999px;
	background: rgba( 17, 24, 39, 0.7 );
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hre-lightbox-close svg,
.hre-lightbox-nav svg {
	display: block;
	pointer-events: none;
}

.hre-lightbox-close:hover,
.hre-lightbox-close:focus-visible,
.hre-lightbox-nav:hover,
.hre-lightbox-nav:focus-visible {
	border-color: #ffffff;
	background: rgba( 37, 99, 235, 0.92 );
	outline: none;
}

.hre-lightbox-close:disabled,
.hre-lightbox-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.hre-lightbox-close {
	top: 8px;
	right: 8px;
}

.hre-lightbox-nav {
	top: 50%;
	transform: translateY( -50% );
}

.hre-lightbox-previous {
	left: 8px;
}

.hre-lightbox-next {
	right: 8px;
}

.hre-gallery-link,
.hre-share-link,
.hre-result-view {
	cursor: zoom-in;
}

.hre-gallery-link:focus-visible,
.hre-share-link:focus-visible,
.hre-result-view:focus-visible {
	outline: 2px solid var(--hre-accent, #2563eb);
	outline-offset: 3px;
}

@media ( max-width: 600px ) {
	.hre-lightbox {
		padding: 16px 8px;
	}

	.hre-lightbox-image {
		max-width: calc( 100vw - 32px );
		max-height: calc( 100dvh - 154px );
	}

	.hre-lightbox-close {
		top: -2px;
		right: 2px;
	}

	.hre-lightbox-previous {
		left: 2px;
	}

	.hre-lightbox-next {
		right: 2px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hre-lightbox * {
		transition: none !important;
	}
}