/* =========================================================
   BLUMI MASONRY GALLERY
   ========================================================= */

.blumi-masonry-gallery {

	--blumi-masonry-columns: 3;
	--blumi-masonry-columns-tablet: 2;
	--blumi-masonry-columns-mobile: 1;

	--blumi-masonry-gap: 20px;

	--blumi-masonry-hover-scale: 1.03;

	position: relative;

	width: 100%;

}


/* =========================================================
   MASONRY
   ========================================================= */

.blumi-masonry-gallery__grid {

	width: 100%;

	column-count:
		var(
			--blumi-masonry-columns,
			3
		);

	column-gap:
		var(
			--blumi-masonry-gap,
			20px
		);

}


/* =========================================================
   ITEM
   ========================================================= */

.blumi-masonry-gallery__item {

	position: relative;

	display: block;

	width: 100%;

	margin:
		0 0
		var(
			--blumi-masonry-gap,
			20px
		);

	padding: 0;

	border: 0;

	background:
		transparent !important;

	overflow: hidden;

	cursor: pointer;

	break-inside:
		avoid;

	-webkit-column-break-inside:
		avoid;

	page-break-inside:
		avoid;

}


/* ---------------------------------------------------------
   Hover overlay
   --------------------------------------------------------- */

.blumi-masonry-gallery__item::after {

	content: "";

	position: absolute;

	z-index: 2;

	inset: 0;

	background-color:
		rgba(
			165,
			173,
			216,
			.22
		);

	opacity: 0;

	pointer-events: none;

	transition:
		opacity .35s ease;

}


/* ---------------------------------------------------------
   Image
   --------------------------------------------------------- */

.blumi-masonry-gallery__item img {

	position: relative;

	z-index: 1;

	display: block;

	width: 100%;
	height: auto;

	max-width: none;

	margin: 0;

	transform:
		scale(1);

	transform-origin:
		center center;

	transition:
		transform .65s
		cubic-bezier(
			.22,
			1,
			.36,
			1
		);

}


/* ---------------------------------------------------------
   Hover
   --------------------------------------------------------- */

.blumi-masonry-gallery__item:hover::after,
.blumi-masonry-gallery__item:focus-visible::after {

	opacity: 1;

}


.blumi-masonry-gallery__item:hover img,
.blumi-masonry-gallery__item:focus-visible img {

	transform:
		scale(
			var(
				--blumi-masonry-hover-scale,
				1.03
			)
		);

}


/* ---------------------------------------------------------
   Focus
   --------------------------------------------------------- */

.blumi-masonry-gallery__item:focus {

	outline: 0;

}


.blumi-masonry-gallery__item:focus-visible {

	outline:
		2px solid
		var(
			--blumi-lavender,
			#A5ADD8
		);

	outline-offset:
		4px;

}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.blumi-masonry-lightbox {

	position: fixed;

	z-index: 10050;

	inset: 0;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	padding:
		clamp(
			40px,
			6vw,
			90px
		);

	background-color:
		#A5ADD8CC;

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transition:
		opacity .35s ease,
		visibility .35s ease;

}


/* ---------------------------------------------------------
   Open
   --------------------------------------------------------- */

.blumi-masonry-lightbox.is-open {

	opacity: 1;

	visibility: visible;

	pointer-events: auto;

}


/* =========================================================
   LIGHTBOX IMAGE
   ========================================================= */

.blumi-masonry-lightbox__figure {

	--blumi-lightbox-image-width: 62%;

	position: relative;

	z-index: 2;

	display: flex;

	align-items: center;
	justify-content: center;

	width:
		var(
			--blumi-lightbox-image-width,
			62%
		);

	height:
		min(
			82vh,
			900px
		);

	margin: 0;

	padding: 0;

}


/*
 * Leggerissimo ingresso.
 */

.blumi-masonry-lightbox__figure {

	transform:
		scale(.985);

	transition:
		transform .45s
		cubic-bezier(
			.22,
			1,
			.36,
			1
		);

}


.blumi-masonry-lightbox.is-open
.blumi-masonry-lightbox__figure {

	transform:
		scale(1);

}


.blumi-masonry-lightbox__figure img {

	display: block;

	width: 100%;

	height: 100%;

	max-width: 100%;

	object-fit: contain;

}


/* =========================================================
   COMMON BUTTONS
   ========================================================= */

.blumi-masonry-lightbox__arrow,
.blumi-masonry-lightbox__close {

	position: absolute;

	z-index: 4;

	display: flex;

	align-items: center;
	justify-content: center;

	margin: 0;
	padding: 0;

	border: 0;

	background:
		transparent !important;

	color: #FFFFFF;

	cursor: pointer;

	transition:
		transform .25s ease,
		opacity .25s ease;

}


.blumi-masonry-lightbox__arrow:hover,
.blumi-masonry-lightbox__close:hover {

	transform:
		scale(1.08);

}


.blumi-masonry-lightbox__arrow:focus-visible,
.blumi-masonry-lightbox__close:focus-visible {

	outline:
		2px solid currentColor;

	outline-offset:
		4px;

}


/* ---------------------------------------------------------
   SVG mask
   --------------------------------------------------------- */

.blumi-masonry-lightbox__arrow span,
.blumi-masonry-lightbox__close span {

	display: block;

	width: 100%;
	height: 100%;

	background:
		currentColor;

	-webkit-mask-image:
		var(--blumi-icon);

	mask-image:
		var(--blumi-icon);

	-webkit-mask-repeat:
		no-repeat;

	mask-repeat:
		no-repeat;

	-webkit-mask-position:
		center;

	mask-position:
		center;

	-webkit-mask-size:
		contain;

	mask-size:
		contain;

}


/* =========================================================
   ARROWS
   ========================================================= */

.blumi-masonry-lightbox__arrow {

	top: 50%;

	width: 50px;
	height: 50px;

	transform:
		translateY(-50%);

}


.blumi-masonry-lightbox__arrow:hover {

	transform:
		translateY(-50%)
		scale(1.08);

}


.blumi-masonry-lightbox__arrow--prev {

	left:
		clamp(
			35px,
			15vw,
			280px
		);

}


.blumi-masonry-lightbox__arrow--next {

	right:
		clamp(
			35px,
			15vw,
			280px
		);

}


/* =========================================================
   CLOSE
   ========================================================= */

.blumi-masonry-lightbox__close {

	top:
		clamp(
			32px,
			7vh,
			80px
		);

	right:
		clamp(
			35px,
			15vw,
			280px
		);

	width: 32px;
	height: 32px;

}


/* =========================================================
   BODY LOCK
   ========================================================= */

html.blumi-lightbox-open,
body.blumi-lightbox-open {

	overflow: hidden !important;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.blumi-masonry-gallery__grid {

		column-count:
			var(
				--blumi-masonry-columns-tablet,
				2
			);

	}


	.blumi-masonry-lightbox {

		padding:
			60px 30px;

	}


	.blumi-masonry-lightbox__figure {

		width:
			var(
				--blumi-lightbox-image-width,
				75%
			);

		height:
			80vh;

	}


	.blumi-masonry-lightbox__arrow--prev {

		left: 25px;

	}


	.blumi-masonry-lightbox__arrow--next {

		right: 25px;

	}


	.blumi-masonry-lightbox__close {

		top: 28px;
		right: 28px;

	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.blumi-masonry-gallery__grid {

		column-count:
			var(
				--blumi-masonry-columns-mobile,
				1
			);

	}


	.blumi-masonry-lightbox {

		padding:
			60px 18px;

	}


	.blumi-masonry-lightbox__figure {

		width:
			var(
				--blumi-lightbox-image-width,
				88%
			);

		height:
			72vh;

	}


	.blumi-masonry-lightbox__arrow {

		top: auto;

		bottom: 28px;

		width: 46px;
		height: 46px;

		transform: none;

	}


	.blumi-masonry-lightbox__arrow:hover {

		transform:
			scale(1.06);

	}


	.blumi-masonry-lightbox__arrow--prev {

		left:
			calc(
				50% - 58px
			);

	}


	.blumi-masonry-lightbox__arrow--next {

		right:
			calc(
				50% - 58px
			);

	}


	.blumi-masonry-lightbox__close {

		top: 22px;
		right: 22px;

		width: 28px;
		height: 28px;

	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.blumi-masonry-gallery__item img,
	.blumi-masonry-gallery__item::after,
	.blumi-masonry-lightbox,
	.blumi-masonry-lightbox__figure,
	.blumi-masonry-lightbox__arrow,
	.blumi-masonry-lightbox__close {

		transition: none !important;

	}

}