/* =========================================================
   BLUMI PDP INTEGRATIONS
   ========================================================= */

.blumi-pdp-integrations {

	position: relative;

	display: flex;

	align-items: center;

	width: 100%;

	height: 100vh;
	height: 100svh;

	min-height: 700px;

	overflow: hidden;

	background: #ECEFFA;

	color: #401F0F;

	font-family:
		var(
			--blumi-font-primary,
			"bc-novatica-cyr",
			sans-serif
		);

	scroll-snap-align: start;

	scroll-snap-stop: always;

}


/* =========================================================
   INNER
   ========================================================= */

.blumi-pdp-integrations__inner {

	width: 100%;

	padding-top:
		clamp(
			50px,
			6vh,
			80px
		);

	padding-bottom:
		clamp(
			45px,
			6vh,
			75px
		);

}


/* =========================================================
   HEADER
   ========================================================= */

.blumi-pdp-integrations__header {

	width: 100%;

	margin-bottom:
		clamp(
			42px,
			5vh,
			66px
		);

}


.blumi-pdp-integrations__title {

	margin:
		0 0 16px;

	padding: 0;

	color: #A5ADD8;

	font-size: 60px;

	font-weight: 700;

	line-height: 80px;

	letter-spacing: 0;

}


.blumi-pdp-integrations__intro {

	max-width: 1220px;

	margin: 0;

	color: #401F0F;

	font-size: 18px;

	font-weight: 400;

	line-height: 22px; 

}


.blumi-pdp-integrations__intro
> :first-child {

	margin-top: 0;

}


.blumi-pdp-integrations__intro
> :last-child {

	margin-bottom: 0;

}

.blumi-pdp-integrations__intro p {
	line-height: 22px; 
}


.blumi-pdp-integrations__intro strong {

	font-weight: 700;

}


/* =========================================================
   GRID
   ========================================================= */

.blumi-pdp-integrations__grid {

	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap:
		clamp(
			24px,
			2vw,
			36px
		);

	width: 100%;

}


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

.blumi-pdp-integrations__item {

	min-width: 0;

	margin: 0;

	padding: 0;

}


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

.blumi-pdp-integrations__image {

	position: relative;

	width: 100%;

	aspect-ratio:
		1.72 / 1;

	margin-bottom:
		clamp(
			22px,
			3vh,
			34px
		);

	overflow: hidden;

}


.blumi-pdp-integrations__image picture,
.blumi-pdp-integrations__image img {

	display: block;

	width: 100%;

	height: 100%;

}


.blumi-pdp-integrations__image img {

	max-width: none;

	object-fit: cover;

	object-position:
		var(
			--blumi-integration-image-position,
			center center
		);

}


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

.blumi-pdp-integrations__item-title {

	margin:
		0 0 8px;

	padding: 0;

	color: #401F0F;

	font-size: 50px;

	font-weight: 700;

	line-height: 80px;

	letter-spacing: 0;

}


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

.blumi-pdp-integrations__item-text {

	max-width: 620px;

	margin: 0;

	color: #401F0F;

	font-size: 18px;

	font-weight: 400;

	line-height: 22px;

}


.blumi-pdp-integrations__item-text
> :first-child {

	margin-top: 0;

}

.blumi-pdp-integrations__item-text p {
	line-height: 22px;
}


.blumi-pdp-integrations__item-text
> :last-child {

	margin-bottom: 0;

}


.blumi-pdp-integrations__item-text strong {

	font-weight: 700;

}


/* =========================================================
   SHORT DESKTOP
   ========================================================= */

@media
	(min-width: 768px)
	and
	(max-height: 850px) {

	.blumi-pdp-integrations__inner {

		padding-top: 38px;
		padding-bottom: 35px;

	}


	.blumi-pdp-integrations__header {

		margin-bottom: 30px;

	}


	.blumi-pdp-integrations__title {

		margin-bottom: 8px;

	}


	.blumi-pdp-integrations__image {

		aspect-ratio:
			1.9 / 1;

		margin-bottom: 18px;

	}


	.blumi-pdp-integrations__item-title {

		margin-bottom: 4px;

	}

}


/* =========================================================
   FREE HEIGHT
   Se non entra più nel viewport.
   ========================================================= */

@media (min-width: 991px) {

	.blumi-pdp-integrations.is-height-free {

		display: block;

		height: auto;

		min-height: 100svh;

		overflow: visible;

		scroll-snap-align: none;

		scroll-snap-stop: normal;

	}


	.blumi-pdp-integrations.is-height-free
	.blumi-pdp-integrations__inner {

		padding-top:
			calc(
				var(
					--blumi-header-height,
					120px
				)
				+
				45px
			);

		padding-bottom: 80px;

	}

}

/* =========================================================
   TABLET / STACKED
   <= 990px
   ========================================================= */

@media (max-width: 990px) {

	.blumi-pdp-integrations {

		display: block;

		width: 100%;

		height: auto;

		min-height: 0;

		overflow: visible;

		scroll-snap-align: none;
		scroll-snap-stop: normal;

	}


	.blumi-pdp-integrations__inner {

		padding-top: 70px;
		padding-bottom: 90px;

	}


	/* -----------------------------------------------------
	   Header
	   ----------------------------------------------------- */

	.blumi-pdp-integrations__header {

		margin-bottom: 48px;

	}


	/* -----------------------------------------------------
	   Le 2 colonne diventano una
	   ----------------------------------------------------- */

	.blumi-pdp-integrations__grid {

		display: flex;

		flex-direction: column;

		width: 100%;

		gap: 70px;

	}


	.blumi-pdp-integrations__item {

		width: 100%;

	}


	.blumi-pdp-integrations__image {

		width: 100%;

		aspect-ratio: 1.7 / 1;

		margin-bottom: 28px;

	}


	.blumi-pdp-integrations__item-text {

		max-width: 760px;

	}

}

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

@media (max-width: 767px) {


	/* =====================================================
	   SECTION
	   ===================================================== */

	.blumi-pdp-integrations {

		display: block;

		width: 100%;

		height: auto;

		min-height: 0;

		overflow: visible;

		background: #ECEFFA;

		/*
		 * Mobile sempre a scroll normale.
		 */
		scroll-snap-align: none;

		scroll-snap-stop: normal;

	}


	/* =====================================================
	   INNER
	   ===================================================== */

	.blumi-pdp-integrations__inner {

		width: 100%;

		padding-top: 60px;

		padding-bottom: 60px;

	}


	/* =====================================================
	   INTRO
	   ===================================================== */

	.blumi-pdp-integrations__header {

		width: 100%;

		margin-bottom: 45px;

	}


	.blumi-pdp-integrations__title {

		margin:
			0 0 22px;

		font-size: 46px;

		line-height: 48px;

	}


	.blumi-pdp-integrations__intro {

		width: 100%;

		max-width: none;

		font-size: 18px;

		line-height: 1.22;

	}


	.blumi-pdp-integrations__intro p {

		margin: 0;

	}


	/* =====================================================
	   ITEMS
	   Da 2 colonne a 1 colonna
	   ===================================================== */

	.blumi-pdp-integrations__grid {

		display: flex;

		flex-direction: column;

		width: 100%;

		gap: 60px;

	}


	.blumi-pdp-integrations__item {

		display: block;

		width: 100%;

		min-width: 0;

		margin: 0;

		padding: 0;

	}


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

	.blumi-pdp-integrations__image {

		position: relative;

		width: 100%;

		/*
		 * Immagine abbastanza importante
		 * come nel wireframe.
		 */
		aspect-ratio: 1.25 / 1;

		margin:
			0 0 26px;

		overflow: hidden;

	}


	.blumi-pdp-integrations__image picture {

		display: block;

		width: 100%;

		height: 100%;

	}


	.blumi-pdp-integrations__image img {

		display: block;

		width: 100%;

		height: 100%;

		max-width: none;

		object-fit: cover;

		object-position:
			var(
				--blumi-integration-image-position,
				center center
			);

	}


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

	.blumi-pdp-integrations__item-title {

		margin:
			0 0 16px;

		padding: 0;

		font-size: 38px;

		line-height: 42px;

		font-weight: 700;

	}


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

	.blumi-pdp-integrations__item-text {

		width: 100%;

		max-width: none;

		margin: 0;

		font-size: 18px;

		line-height: 1.22;

	}


	.blumi-pdp-integrations__item-text p {

		margin: 0;

	}


	/* =====================================================
	   SEPARAZIONE TRA LUX E AUDIRE
	   ===================================================== */

	.blumi-pdp-integrations__item + 
	.blumi-pdp-integrations__item {

		margin-top: 5px;

	}

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

	.blumi-pdp-integrations__inner {

		padding-top: 40px;

		padding-bottom: 65px;

	}


	.blumi-pdp-integrations__title {

		font-size: 42px;

		line-height: 44px;

	}


	.blumi-pdp-integrations__grid {

		gap: 52px;

	}


	.blumi-pdp-integrations__image {

		aspect-ratio: 1.15 / 1;

	}


	.blumi-pdp-integrations__item-title {

		font-size: 36px;

		line-height: 40px;

	}

}