/* Widget: timeline vertical, cu cardul activ opac la derulare. */

.icc-tl {
	--icc-tl-card: 420px;
	--icc-tl-gap: 96px;
	--icc-tl-decalaj: 52px;
	--icc-tl-dim: 0.3;
	--icc-tl-durata: 0.45s;
	--icc-tl-card-bg: var(--icc-color-cream, #fef9ef);
	--icc-tl-radius: 6px;
	--icc-tl-icon: var(--icc-color-orange, #bf592d);
	--icc-tl-icon-size: 20px;
	--icc-tl-linie: 1.5px;
	--icc-tl-linie-culoare: var(--icc-color-navy-mid, #173f5d);
	--icc-tl-punct: 34px;
	--icc-tl-punct-bg: var(--icc-color-navy, #0c202f);
	--icc-tl-inel: #fff;
	--icc-tl-inel-grosime: 6px;

	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: calc(var(--icc-tl-decalaj) * 2);
	row-gap: var(--icc-tl-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.icc-tl::before {
	content: '';
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: var(--icc-tl-linie);
	transform: translateX(-50%);
	background-color: var(--icc-tl-linie-culoare);
}

/* --------------------------------------------------------------- Itemi ---- */

.icc-tl__item {
	position: relative;
	grid-row: var(--icc-tl-rand, auto);
	width: min(100%, var(--icc-tl-card));
	transition: opacity var(--icc-tl-durata) ease;
}

.icc-tl__item--stanga {
	grid-column: 1;
	justify-self: end;
}

.icc-tl__item--dreapta {
	grid-column: 2;
	justify-self: start;
}

.icc-tl.is-pornit .icc-tl__item {
	opacity: var(--icc-tl-dim);
}

.icc-tl.is-pornit .icc-tl__item.is-activ {
	opacity: 1;
}

/* ---------------------------------------------------------------- Card ---- */

.icc-tl .icc-tl__card {
	padding: 18px 22px 20px 18px;
	border-radius: var(--icc-tl-radius);
	background-color: var(--icc-tl-card-bg);
}

.icc-tl .icc-tl__titlu {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-family: var(--icc-font-sans);
	font-size: var(--icc-fs-card-title, 1.375rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--icc-ls-card-title, -0.009em);
	color: var(--icc-color-ink, #0c202f);
}

.icc-tl__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: var(--icc-tl-icon);
	font-size: var(--icc-tl-icon-size);
	line-height: 1;
}

.icc-tl__icon svg {
	width: var(--icc-tl-icon-size);
	height: var(--icc-tl-icon-size);
	fill: currentColor;
}

.icc-tl .icc-tl__text {
	margin: 0;
	font-family: var(--icc-font-sans);
	font-size: var(--icc-fs-ui, 1rem);
	font-weight: 400;
	line-height: 1.45;
	color: var(--icc-color-ink, #0c202f);
}

/* --------------------------------------------------------------- Punct ---- */

.icc-tl__punct {
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
}

.icc-tl__item--stanga > .icc-tl__punct {
	left: calc(100% + var(--icc-tl-decalaj));
}

.icc-tl__item--dreapta > .icc-tl__punct {
	right: calc(100% + var(--icc-tl-decalaj));
}

.icc-tl__punct::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: var(--icc-tl-punct);
	height: var(--icc-tl-punct);
	margin: calc(var(--icc-tl-punct) / -2);
	border: 1px solid #173F5D;
	border-radius: 50%;
	background-color: var(--icc-tl-punct-bg);
    box-shadow: inset 0px 0px 0px 5px var(--icc-tl-inel);
	transform: scale(0);
	transition: transform var(--icc-tl-durata) ease;
}

.icc-tl__item.is-activ > .icc-tl__punct::before {
	transform: scale(1);
}

.icc-tl .icc-tl__gol {
	margin: 0;
	font-size: var(--icc-fs-ui, 1rem);
	opacity: 0.8;
}

/* -------------------------------------------------------------- Mobil ----- */

@media (max-width: 900px) {
	.icc-tl {
		--icc-tl-decalaj: 28px;

		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.icc-tl::before {
		left: auto;
		right: calc(var(--icc-tl-punct) / 2);
		transform: none;
	}

	.icc-tl__item--stanga,
	.icc-tl__item--dreapta {
		grid-column: 1;
		justify-self: stretch;
		width: auto;
		margin-inline-start: 0;
		margin-inline-end: calc(var(--icc-tl-punct) / 2 + var(--icc-tl-decalaj));
	}

	.icc-tl__item--stanga > .icc-tl__punct,
	.icc-tl__item--dreapta > .icc-tl__punct {
		right: auto;
		left: calc(100% + var(--icc-tl-decalaj));
	}
}

/* ------------------------------------------------------- Secțiune fixata --- */

.icc-tl-pin {
	--icc-tl-pin-pas: 55vh;

	position: relative;
}

@media (min-width: 901px) {
	.icc-tl-pin.is-fixat {
		height: calc(100vh + var(--icc-tl-pin-pasi, 4) * var(--icc-tl-pin-pas));
	}

	.icc-tl-pin.is-fixat .icc-tl-pin__ecran {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		height: 100vh;
		overflow: hidden;
	}

	.icc-tl-pin.is-fixat .icc-tl {
		will-change: transform;
	}
}

@media (prefers-reduced-motion: reduce) {
	.icc-tl__item,
	.icc-tl__punct::before {
		transition: none;
	}
}