/* =========================================================
   BLUMI COMPANY ORIENTATION
   ========================================================= */

.blumi-company-orientation {

	--blumi-orientation-image-width: 48%;
	--blumi-orientation-height: 720px;

	position: relative;

	width: 100%;

	padding:20px 0;

	overflow: hidden;

	color:
		var(
			--blumi-cocoa,
			#401F0F
		);

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

}


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

.blumi-company-orientation__section-title {

	margin:
		0 0 40px;

	color:
		var(
			--blumi-cocoa,
			#401F0F
		);

	font-size: 24px;

	font-weight: 600;

	line-height: 1;

}


/* =========================================================
   LAYOUT
   ========================================================= */

.blumi-company-orientation__layout {

	display: grid;

	grid-template-columns:
		var(
			--blumi-orientation-image-width,
			48%
		)
		minmax(
			0,
			1fr
		);

	align-items: stretch;

	column-gap: 70px;

	width: 100%;

}


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

.blumi-company-orientation__media {

	position: relative;

	width: 100%;

	height:
		var(
			--blumi-orientation-height,
			720px
		);

	overflow: hidden;

}


.blumi-company-orientation__media img {

	display: block;

	width: 100%;
	height: 100%;

	max-width: none;

	object-fit: cover;

	object-position: center center;

}


/* =========================================================
   TIMELINE
   ========================================================= */

.blumi-company-orientation__timeline {

	position: relative;

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	min-width: 0;

	height:
		var(
			--blumi-orientation-height,
			720px
		);

	padding-left: 34px;

}


/* ---------------------------------------------------------
   Vertical line
   --------------------------------------------------------- */

.blumi-company-orientation__timeline::before {

	content: "";

	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;

	width: 2px;

	background:
		var(
			--blumi-lavender,
			#A5ADD8
		);

}


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

.blumi-company-orientation__item {

	position: relative;

	width: 100%;

	max-width: 520px;

	padding:
		10px
		0;

}


/* ---------------------------------------------------------
   Dot
   --------------------------------------------------------- */

.blumi-company-orientation__item::before {

	content: "";

	position: absolute;

	top: 31px;

	left: -40px;

	width: 14px;
	height: 14px;

	border-radius: 50%;

	background:
		var(
			--blumi-lavender,
			#A5ADD8
		);

}


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

.blumi-company-orientation__item-title {

	margin:
		0 0 22px;

	padding: 0;

	color:
		var(
			--blumi-lavender,
			#A5ADD8
		);

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

	font-size: 52px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0;

}


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

.blumi-company-orientation__item-text {

	margin: 0;

	color:
		var(
			--blumi-cocoa,
			#401F0F
		);

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

	font-size:var(--blumi-body-size);

	font-weight: 400;

	line-height: var(--global--line-height-body);

}


.blumi-company-orientation__item-text
> :first-child {

	margin-top: 0;

}


.blumi-company-orientation__item-text
> :last-child {

	margin-bottom: 0;

}


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

@media (max-width: 990px) {

	.blumi-company-orientation {

		padding:
			70px 0;

	}


	.blumi-company-orientation__layout {

		grid-template-columns:
			42%
			minmax(
				0,
				1fr
			);

		column-gap: 45px;

	}


	.blumi-company-orientation__media {

		height: 640px;

	}


	.blumi-company-orientation__timeline {

		height: 640px;

		padding-left: 30px;

	}


	.blumi-company-orientation__item {

		max-width: none;

	}


	.blumi-company-orientation__item::before {

		left: -36px;

	}


	.blumi-company-orientation__item-title {

		font-size: 50px;

		margin-bottom: 18px;

	}


	.blumi-company-orientation__item-text {
	}

}


/* =========================================================
   MOBILE
   <= 767px
   ========================================================= */

@media (max-width: 767px) {

	.blumi-company-orientation {

		position: relative;

		padding:
			60px 0
			75px;

		overflow: hidden;

	}


	/* -----------------------------------------------------
	   Section title
	   ----------------------------------------------------- */

	.blumi-company-orientation__section-title {

		margin-bottom: 45px;

		font-size: 20px;

	}


	/* -----------------------------------------------------
	   Layout
	   ----------------------------------------------------- */

	.blumi-company-orientation__layout {

		position: relative;

		display: block;

		width: 100%;

		min-height: 650px;

	}


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

	.blumi-company-orientation__media {

		position: absolute;

		z-index: 0;

		top: 0;

		left:
			calc(
				-220px
				+
				20px
			);

		width: 220px;

		height: 100%;

		min-height: 650px;

		opacity: 1;

		pointer-events: none;

	}


	.blumi-company-orientation__media img {

		width: 100%;
		height: 100%;

		object-fit: cover;

		object-position: center center;

	}


	/* =====================================================
	   TIMELINE
	   ===================================================== */

	.blumi-company-orientation__timeline {

		position: relative;

		z-index: 1;

		display: flex;

		flex-direction: column;

		justify-content: flex-start;

		gap: 52px;

		width: 100%;

		height: auto;

		min-height: 0;

		padding-left: 80px;

	}


	.blumi-company-orientation__timeline::before {

		left: 45px;

	}


	/* -----------------------------------------------------
	   Item
	   ----------------------------------------------------- */

	.blumi-company-orientation__item {

		max-width: none;

		padding: 0;

	}


	.blumi-company-orientation__item::before {

		top: 18px;

		left: -40px;

		width: 13px;
		height: 13px;

	}


	/* -----------------------------------------------------
	   Title
	   ----------------------------------------------------- */

	.blumi-company-orientation__item-title {

		margin-bottom: 15px;

		font-size: 32px;

		line-height: 1;

	}


	/* -----------------------------------------------------
	   Text
	   ----------------------------------------------------- */

	.blumi-company-orientation__item-text {

	}

}
/* Introduzione opzionale nella colonna della foto. */
.blumi-company-orientation__left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.blumi-company-orientation__intro { width: 100%; min-width: 0; }
.blumi-company-orientation__intro-title {
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--blumi-font-primary);
  color: var(--blumi-lavender);
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 700;
  line-height: 1.05;
  overflow-wrap: break-word;
}
.blumi-company-orientation__intro-text {
  color: var(--blumi-cocoa);
  font-size: var(--blumi-body-size);
  line-height: 1.2;
  overflow-wrap: break-word;
}
.blumi-company-orientation__intro-text > :first-child { margin-top: 0; }
.blumi-company-orientation__intro-text > :last-child { margin-bottom: 0; }
.blumi-company-orientation--with-intro .blumi-company-orientation__timeline {
  height: auto;
  gap: 48px;
}
/* Mobile: introduzione sopra, fascia fotografica decorativa a sinistra
 * della timeline, come nel layout originale. */
@media (max-width: 767px) {
  .blumi-company-orientation--with-intro .blumi-company-orientation__layout {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 25px !important;
    row-gap: 32px;
    min-height: 0;
  }
  .blumi-company-orientation--with-intro .blumi-company-orientation__left {
    display: contents;
  }
  .blumi-company-orientation--with-intro .blumi-company-orientation__intro {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .blumi-company-orientation--with-intro .blumi-company-orientation__media {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    top: auto;
    left: calc(-220px + 20px);
    width: 220px;
    height: 100%;
    min-height: 0;
    pointer-events: none;
  }
  .blumi-company-orientation--with-intro .blumi-company-orientation__timeline {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    padding-left: 34px;
  }
  .blumi-company-orientation--with-intro .blumi-company-orientation__timeline::before { left: 0; }
}

/* Desktop/tablet: introduzione nella prima riga, foto e timeline nella seconda.
 * La riga introduttiva si dimensiona sul testo, senza offset fissi o JavaScript. */
@media (min-width: 768px) {
  .blumi-company-orientation--with-intro .blumi-company-orientation__layout {
    row-gap: 32px;
    grid-template-rows: auto auto;
  }
  .blumi-company-orientation--with-intro .blumi-company-orientation__left {
    display: contents;
  }
  .blumi-company-orientation--with-intro .blumi-company-orientation__intro {
    grid-column: 1;
    grid-row: 1;
  }
  .blumi-company-orientation--with-intro .blumi-company-orientation__media {
    grid-column: 1;
    grid-row: 2;
  }
  .blumi-company-orientation--with-intro .blumi-company-orientation__timeline {
    grid-column: 2;
    grid-row: 2;
  }
}