/**
 * Project image lightbox trigger + PhotoSwipe overrides.
 */

.kj-lightbox {
	@apply relative overflow-hidden w-full h-full;
}

.kj-lightbox__trigger {
	@apply absolute top-3 right-3 lg:top-4 lg:right-4 z-10 flex items-center justify-center w-10 h-10 bg-white text-dark shadow-sm opacity-0 scale-95 pointer-events-none transition-all duration-300;
}

.kj-lightbox:hover .kj-lightbox__trigger,
.kj-lightbox:focus-within .kj-lightbox__trigger {
	@apply opacity-100 scale-100 pointer-events-auto;
}

.kj-lightbox__trigger:hover {
	@apply bg-primary text-white;
}

.kj-lightbox__trigger:focus-visible {
	@apply opacity-100 scale-100 pointer-events-auto outline outline-2 outline-offset-2 outline-primary;
}

.kj-lightbox__icon {
	@apply flex items-center justify-center;
}

@media (hover: none) {
	.kj-lightbox__trigger {
		@apply opacity-100 scale-100 pointer-events-auto;
	}
}

.single-project__hero .kj-lightbox__trigger {
	@apply z-[5];
}

.pswp {
	--pswp-bg: rgb(4 23 37 / 0.96);
	--pswp-placeholder-bg: rgb(4 23 37 / 0.96);
}

.pswp__button {
	@apply opacity-80 transition-opacity duration-200;
}

.pswp__button:hover {
	@apply opacity-100;
}

.pswp__counter {
	@apply text-white/70 text-sm font-sans tracking-wide;
}

.pswp__preloader {
	display: none;
}