/*
 * Gallery lightbox (see assets/js/lightbox.js). White 90% overlay, green
 * controls, one image per slide with 70px around it (70px top and bottom on
 * mobile).
 */

.lightbox {
	--lightbox-ui-color: rgba(238, 238, 238, .9);
	--lightbox-header-icons-size: 20px;
	--lightbox-navigation-icons-size: 25px;
	--swiper-theme-color: #000;
	--swiper-navigation-size: 44px;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background-color: #ffffffe6;
	user-select: none;
}

.lightbox:focus { outline: none; }
.lightbox .is-hidden { display: none; }

.lightbox__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: none; box-shadow: none; }

.lightbox__message { box-sizing: border-box; height: 100%; padding: 0; text-align: center; line-height: 1.5; animation: lightbox-zoom-in .3s; }

@keyframes lightbox-zoom-in {
	from { opacity: 0; transform: scale3d(.3, .3, .3); }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.lightbox__message { animation: none; }
}

.lightbox__close { position: absolute; right: .75em; z-index: 2; display: flex; margin-top: 13px; padding: .25em; font-size: var(--lightbox-header-icons-size); line-height: 1; color: var(--c-primary); opacity: 1; cursor: pointer; transition: all .3s; }
.lightbox__close svg { width: 1em; height: 1em; fill: var(--c-primary); }

.lightbox .swiper { height: 100%; }

.lightbox__item { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; margin: auto; padding: 70px; }
.lightbox__image,
.lightbox__image:hover { max-height: 100%; border: none; border-radius: 2px; box-shadow: 0 0 30px rgba(0, 0, 0, .3), 0 0 8px -5px rgba(0, 0, 0, .3); filter: none; opacity: 1; user-select: none; }
.lightbox .swiper-lazy-preloader { --swiper-preloader-color: #a1c44b; }

/* Previous and next */
.lightbox .swiper .lightbox__nav { position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; height: 100%; font-size: var(--lightbox-navigation-icons-size); color: var(--lightbox-ui-color); opacity: 1; cursor: pointer; transform: translateY(-50%); transition: all .3s; }
.lightbox .swiper .lightbox__nav svg { width: 1em; height: 1em; fill: var(--c-primary); }
.lightbox .swiper .lightbox__nav--prev { left: 0; }
.lightbox .swiper .lightbox__nav--next { right: 0; }
.lightbox .swiper .lightbox__nav.swiper-button-disabled { opacity: .3; }
.lightbox .lightbox__nav:focus { outline-width: 1px; }

/* Header: zoom, fullscreen and the (white, so unseen) counter */
.lightbox__header,
.lightbox__footer { position: absolute; left: 0; width: 100%; padding: 15px 20px; transition: .3s; }
.lightbox__header { top: 0; z-index: 10; display: flex; flex-direction: row-reverse; align-items: center; padding-left: 1em; padding-right: 2.6em; font-size: var(--lightbox-header-icons-size); color: var(--lightbox-ui-color); }
.lightbox__header > svg { box-sizing: content-box; width: 1em; height: 1em; margin: 0 .35em; padding: .25em; fill: var(--c-primary); cursor: pointer; }
.lightbox__counter { width: max-content; margin-right: auto; font-size: .75em; color: #fff; }

.lightbox__footer { position: fixed; bottom: 0; z-index: 5; color: var(--lightbox-ui-color); }
.lightbox__title,
.lightbox__description { margin: 0; }
.lightbox__title { font-size: 16px; font-weight: bold; }
.lightbox__description { font-size: 14px; }

/* Controls fade after a few seconds without input. */
.lightbox--ui-hidden .lightbox__header,
.lightbox--ui-hidden .lightbox__footer { opacity: 0; pointer-events: none; }
.lightbox .swiper.lightbox--ui-hidden .lightbox__nav { opacity: 0; }

.lightbox--zoom-mode .lightbox__header,
.lightbox--zoom-mode .lightbox__footer { background-color: rgba(0, 0, 0, .5); }
.lightbox .swiper.lightbox--zoom-mode .lightbox__nav { opacity: 0; pointer-events: none; }

@media (max-width: 1024px) {
	.lightbox .lightbox__nav:active { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
	.lightbox .lightbox__nav svg { cursor: pointer; }
	.lightbox .lightbox__nav svg:active { outline: none; background-color: rgba(0, 0, 0, .5); }
}

@media (max-width: 767px) {
	.lightbox__item { padding: 70px 0; }
	.lightbox .lightbox__nav:focus { outline: none; }
	.lightbox .swiper .lightbox__nav { width: 20%; }
	.lightbox .swiper .lightbox__nav--prev { justify-content: flex-start; }
	.lightbox .swiper .lightbox__nav--next { justify-content: flex-end; }
}