/**
 * components/lightbox.css
 *
 * Preview em ecrã inteiro das imagens de um projeto (foto principal,
 * thumbs, galeria nativa do WordPress). Extraído de projetos.css — ver
 * PROJECT_REVIEW.md, O2: é um componente com o seu próprio módulo JS
 * (lightbox.js) e responsabilidade distinta da grid de projetos.
 *
 * Carregado só onde lightbox.js também é carregado (is_singular('projeto')
 * — ver inc/enqueue.php). Se um dia o lightbox passar a ser usado também
 * na grid da homepage ou no arquivo, a condição de enqueue tem de mudar
 * nos dois sítios ao mesmo tempo (CSS e JS), ou fica-se de novo com uma
 * classe "órfã" (ver PROJECT_REVIEW.md, lição nº 14 do contexto do projeto).
 */

body.lightbox-is-open {
	overflow: hidden;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 10, 8, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-md) var(--ease-premium), visibility var(--dur-md);
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.lightbox-img {
	max-width: min(1100px, 90vw);
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	transform: scale(0.96);
	transition: transform var(--dur-md) var(--ease-premium);
}

.lightbox.is-open .lightbox-img {
	transform: scale(1);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
	position: absolute;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(242, 240, 239, 0.1);
	border: 1px solid rgba(242, 240, 239, 0.25);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--dur-sm) ease, border-color var(--dur-sm) ease, transform var(--dur-sm) var(--ease-snap);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
	border-color: var(--color-accent);
	background: rgba(226, 72, 12, 0.15);
}

.lightbox-close {
	top: var(--space-md);
	right: var(--space-md);
}

.lightbox-close svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

.lightbox-prev,
.lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
}

.lightbox-prev:hover,
.lightbox-next:hover {
	transform: translateY(-50%) scale(1.06);
}

.lightbox-prev {
	left: var(--space-md);
}

.lightbox-next {
	right: var(--space-md);
}

.lightbox-contador {
	position: absolute;
	bottom: var(--space-md);
	left: 50%;
	transform: translateX(-50%);
	color: var(--color-dark-text-muted);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
}

@media (max-width: 600px) {
	.lightbox-prev,
	.lightbox-next {
		width: 40px;
		height: 40px;
	}

	.lightbox-prev {
		left: var(--space-xs);
	}

	.lightbox-next {
		right: var(--space-xs);
	}

	.lightbox-close {
		top: var(--space-xs);
		right: var(--space-xs);
	}
}