/**
 * Caption styling for the core image lightbox overlay.
 *
 * Polyfill for https://github.com/WordPress/gutenberg/pull/77477.
 *
 * Caption is mounted inside the visible `.lightbox-image-container`
 * (the JS picks the one whose <img> is on screen) so it pins to the
 * bottom edge of the picture frame, not the bottom of the viewport.
 * The visual treatment matches the PR #77477 reference exactly:
 * white text with a soft drop shadow on a barely-there bottom-up
 * scrim, anchored flush to the image.
 */

/**
 * Defensive pin for the core zoom-mode `.scrim` (white, 0.9 opacity).
 * Core leaves it `position: absolute` with no `top`/`left`, relying on
 * its two `.lightbox-image-container` siblings being out of normal flow
 * so the scrim's static position resolves to the overlay's top-left.
 * We keep those containers on core's own positioning (see note below),
 * so this is belt-and-braces — harmless if core already covers the page.
 */
.wp-lightbox-overlay .scrim {
	top: 0 !important;
	left: 0 !important;
}

/*
 * Do NOT set `.lightbox-image-container` to `position: relative`. Core
 * stacks its two containers (zoom-thumbnail + full-res) as absolutely
 * positioned, overlapping siblings; forcing them into normal flow stacks
 * the images vertically and renders the picture twice once both hold a
 * real image (e.g. plugin screenshots). The absolute container is already
 * the caption's containing block — no override needed.
 */

.wp-lightbox-overlay .lightbox-image-container > figcaption.wp-lightbox-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3000001;
	margin: 0;
	padding: 3.5em 1.25em 1em;
	color: #fff;
	text-align: start;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.005em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);

	/* Almost invisible scrim — present only to guarantee contrast on
	   bright photos. The text-shadow does most of the legibility work. */
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 160ms ease-in;
}

.wp-lightbox-overlay.active .lightbox-image-container > figcaption.wp-lightbox-caption.has-caption {
	opacity: 1;
	transition: opacity 220ms ease-out 200ms;
}

/* Hide the caption when there is no text to show. */
.wp-lightbox-overlay .lightbox-image-container > figcaption.wp-lightbox-caption:not(.has-caption) {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {

	.wp-lightbox-overlay .lightbox-image-container > figcaption.wp-lightbox-caption,
	.wp-lightbox-overlay.active .lightbox-image-container > figcaption.wp-lightbox-caption.has-caption {
		transition: none;
	}
}