/**
 * LIGHTBOX
 *
 * Built on the native <dialog> element, which gives focus trapping, Escape to
 * close, inert background content and the top layer for free — all things a
 * hand-rolled overlay gets wrong. Navigation reuses Embla, already on the page
 * for the hero and the What To Expect carousel, so this adds no new library.
 */

@layer components {

	/* ---- Trigger on a gallery item ------------------------------------ */

	.gallery-zoom {
		display: block;
		position: relative;
		padding: 0;
		border: 0;
		background: none;
		cursor: zoom-in;
		inline-size: 100%;
		block-size: 100%;
	}

	.gallery-zoom__icon {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		translate: -50% -50%;
		display: grid;
		place-items: center;
		inline-size: 4rem;
		block-size: 4rem;
		border-radius: 50%;
		background-color: var(--clr-accent);
		color: var(--clr-bg);
		opacity: 0;
		scale: 0.85;
		transition: opacity var(--transition-fast), scale var(--transition-fast);
		pointer-events: none;
	}
	.gallery-zoom__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }

	.gallery-zoom::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgb(0 0 0 / 0);
		transition: background-color var(--transition-fast);
	}

	.gallery-zoom:hover .gallery-zoom__icon,
	.gallery-zoom:focus-visible .gallery-zoom__icon { opacity: 1; scale: 1; }
	.gallery-zoom:hover::after,
	.gallery-zoom:focus-visible::after { background-color: rgb(0 0 0 / 0.25); }

	/* ---- Dialog -------------------------------------------------------- */

	.lightbox {
		inline-size: 100vw;
		max-inline-size: 100vw;
		block-size: 100dvh;
		max-block-size: 100dvh;
		padding: 0;
		border: 0;
		background-color: transparent;
		overflow: hidden;
	}
	.lightbox::backdrop { background-color: rgb(0 0 0 / 0.92); }

	.lightbox__inner {
		position: relative;
		display: flex;
		flex-direction: column;
		block-size: 100%;
		padding: var(--space-l) var(--space-s) var(--space-s);
	}

	.lightbox__viewport {
		flex: 1 1 auto;
		min-block-size: 0;
		overflow: hidden;
	}

	.lightbox__track { display: flex; block-size: 100%; }

	.lightbox__slide {
		flex: 0 0 100%;
		min-inline-size: 0;
		padding-inline: var(--space-s);
	}

	/*
	 * A definite box plus object-fit, rather than max-inline/block-size on an
	 * auto-sized image. Percentage max-* does not constrain a flex or grid item
	 * whose automatic minimum size is its content — the image rendered at its
	 * full natural height and overflowed the dialog. Filling the slide and
	 * letting object-fit letterbox is both simpler and reliable.
	 */
	.lightbox__slide img {
		inline-size: 100%;
		block-size: 100%;
		min-block-size: 0;
		object-fit: contain;
		border-radius: var(--radius-md);
	}

	/* ---- Controls ------------------------------------------------------ */

	.lightbox__bar {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-s);
		padding-block-start: var(--space-s);
		color: var(--white);
	}

	.lightbox__counter {
		margin: 0;
		font-family: var(--font-text);
		font-size: var(--fs-eyebrow);
		font-weight: var(--weight-bold);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		min-inline-size: 5ch;
		text-align: center;
	}

	.lightbox__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;
		block-size: 3rem;
		padding: 0;
		border: 1px solid rgb(255 255 255 / 0.25);
		border-radius: 50%;
		background-color: transparent;
		color: var(--white);
		cursor: pointer;
		transition: background-color var(--transition-fast), color var(--transition-fast);
	}
	.lightbox__button:hover:not(:disabled),
	.lightbox__button:focus-visible {
		background-color: var(--clr-accent);
		border-color: var(--clr-accent);
		color: var(--clr-bg);
	}
	.lightbox__button:disabled { opacity: 0.3; cursor: default; }

	/* Chevrons in CSS, matching the What To Expect controls. */
	.lightbox__button[data-dir]::before {
		content: "";
		inline-size: 0.5rem;
		block-size: 0.5rem;
		border-inline-end: 2px solid currentcolor;
		border-block-start: 2px solid currentcolor;
		transform: rotate(45deg);
		margin-inline-start: -0.15rem;
	}
	.lightbox__button[data-dir="prev"]::before {
		transform: rotate(-135deg);
		margin-inline: 0 -0.15rem;
	}

	.lightbox__close {
		position: absolute;
		inset-block-start: var(--space-s);
		inset-inline-end: var(--space-s);
		z-index: 1;
	}
	.lightbox__close::before,
	.lightbox__close::after {
		content: "";
		position: absolute;
		inline-size: 1rem;
		block-size: 2px;
		background-color: currentcolor;
	}
	.lightbox__close::before { transform: rotate(45deg); }
	.lightbox__close::after  { transform: rotate(-45deg); }

	@media (prefers-reduced-motion: reduce) {
		.gallery-zoom__icon { transition: none; }
	}
}