/* =====================================================
   DOPLNĚK do assets/css/main.css - vložte na konec souboru.
   Styly pro lightbox (assets/js/lightbox.js).
   ===================================================== */

.lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	/*background: rgba(33, 58, 142, 0.7);*/
	background: rgba(63, 112, 244, 0.8);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

.lightbox-overlay.is-open {
	display: flex;
}

.lightbox-overlay__img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 3px;
	display: block;
}

.lightbox-overlay__close,
.lightbox-overlay__prev,
.lightbox-overlay__next {
	position: absolute;
	/*background: rgba(255, 255, 255, 0.1);*/
	background: rgba(63, 112, 244, 0.8);
	border: none;
	color: #ffffff;
	font-size: 3rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.6rem 1rem;
	border-radius: 3px;
	transition: background-color 0.2s;
}

.lightbox-overlay__close:hover,
.lightbox-overlay__prev:hover,
.lightbox-overlay__next:hover {
	background: rgba(255, 255, 255, 0.25);
}

.lightbox-overlay__close {
	top: 1rem;
	right: 1rem;
	font-size: 2rem;
	padding: 0.3rem 0.75rem;
}

.lightbox-overlay__prev {
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
}

.lightbox-overlay__next {
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
}

/* Zamezí posouvání stránky pod otevřeným lightboxem */
body.lightbox-locked {
	overflow: hidden;
}

@media (max-width: 40rem) {
	.lightbox-overlay__prev,
	.lightbox-overlay__next {
		font-size: 2rem;
		padding: 0.4rem 0.7rem;
	}
}