/**
 * Haris Timeline for Elementor — frontend styles.
 * Colours, sizes and spacing come from the Elementor Style tab;
 * the values here are structural fallbacks only.
 */

.haris-timeline {
	position: relative;
	width: 100%;
	padding: 90px 60px 120px;
	background-color: #000;
}

.haris-timeline,
.haris-timeline *,
.haris-timeline *::before,
.haris-timeline *::after {
	box-sizing: border-box;
}

.haris-timeline__wrap {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
}

/* --------------------------------------------------------------- Heading */

.haris-timeline__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 110px;
}

.haris-timeline__eyebrow {
	display: block;
	margin: 0 0 18px;
	color: #c9a227;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	line-height: 1;
}

.haris-timeline__title {
	margin: 0;
	color: #fff;
	font-size: 42px;
	font-weight: 300;
	line-height: 1.2;
}

.haris-timeline__subtitle {
	margin: 16px 0 0;
	color: #a8a8a8;
	font-size: 16px;
	line-height: 1.6;
}

/* ----------------------------------------------------------------- Items */

.haris-timeline__items {
	--haris-tl-line-x: 50%;
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: 90px;
}

.haris-timeline__line {
	--haris-tl-line: rgba(255, 255, 255, 0.14);
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--haris-tl-line-x);
	width: 1px;
	transform: translateX(-50%);
	background-color: var(--haris-tl-line);
	pointer-events: none;
}

.haris-timeline--line-fade .haris-timeline__line {
	background-color: transparent;
	background-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		var(--haris-tl-line) 12%,
		var(--haris-tl-line) 88%,
		rgba(0, 0, 0, 0) 100%
	);
}

.haris-timeline__item {
	--haris-tl-dot: 9px;
	position: relative;
	display: flex;
	align-items: center;
	column-gap: 60px;
}

.haris-timeline__item--text-right {
	flex-direction: row-reverse;
}

.haris-timeline__text,
.haris-timeline__media {
	flex: 1 1 0;
	min-width: 0;
}

.haris-timeline__media {
	line-height: 0;
}

/* Dots sit on the line, vertically centred on the row. */
.haris-timeline--dots .haris-timeline__item::after {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--haris-tl-line-x, 50%);
	width: var(--haris-tl-dot);
	height: var(--haris-tl-dot);
	margin: 0;
	border-radius: 50%;
	background-color: #c9a227;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

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

.haris-timeline--text-inward .haris-timeline__item--text-left .haris-timeline__text {
	text-align: right;
}

.haris-timeline--text-inward .haris-timeline__item--text-right .haris-timeline__text {
	text-align: left;
}

.haris-timeline--text-inward .haris-timeline__item--text-left .haris-timeline__item-text {
	margin-left: auto;
}

.haris-timeline--text-inward .haris-timeline__item--text-right .haris-timeline__item-text {
	margin-right: auto;
}

.haris-timeline__year {
	display: block;
	margin: 0 0 14px;
	color: #e0b83c;
	font-size: 21px;
	letter-spacing: 1px;
	line-height: 1;
}

.haris-timeline__item-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.haris-timeline__item-title {
	display: block;
	margin: 0 0 18px;
	color: #fff;
	font-size: 23px;
	font-weight: 500;
	line-height: 1.3;
	transition: color 0.3s ease;
}

.haris-timeline__item-text {
	max-width: 420px;
	color: #a2a2a2;
	font-size: 14px;
	line-height: 1.7;
}

/* ---------------------------------------------------------------- Images */

.haris-timeline__media-inner {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	border: 0 solid transparent;
	line-height: 0;
	text-decoration: none;
}

.haris-timeline__image {
	--haris-tl-gray: 0%;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	filter: grayscale(var(--haris-tl-gray, 0%));
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

/* ------------------------------------------------- Side-aware animation */

.haris-timeline--anim-side .haris-timeline__item--text-left.haris-anim {
	--haris-anim-x: calc(-1 * var(--haris-anim-dist, 26px));
	--haris-anim-y: 0px;
}

.haris-timeline--anim-side .haris-timeline__item--text-right.haris-anim {
	--haris-anim-x: var(--haris-anim-dist, 26px);
	--haris-anim-y: 0px;
}

@media (max-width: 767px) {
	.haris-timeline--anim-side .haris-timeline__item.haris-anim {
		--haris-anim-x: 0px;
		--haris-anim-y: var(--haris-anim-dist, 26px);
	}
}

/* -------------------------------------------------------------- Stacking */

@media (max-width: 1024px) {
	.haris-timeline {
		padding: 70px 32px 80px;
	}

	.haris-timeline__head {
		margin-bottom: 70px;
	}

	.haris-timeline--stack-tablet .haris-timeline__item,
	.haris-timeline--stack-tablet .haris-timeline__item--text-right {
		flex-direction: column;
		align-items: stretch;
		row-gap: 24px;
	}

	.haris-timeline--stack-tablet.haris-timeline--stacked-image-first .haris-timeline__item,
	.haris-timeline--stack-tablet.haris-timeline--stacked-image-first .haris-timeline__item--text-right {
		flex-direction: column-reverse;
	}

	.haris-timeline--stack-tablet.haris-timeline--text-inward .haris-timeline__text {
		text-align: left;
	}

	.haris-timeline--stack-tablet.haris-timeline--text-inward .haris-timeline__item-text {
		margin-left: 0;
		margin-right: 0;
	}

	.haris-timeline--stack-tablet .haris-timeline__line {
		display: none;
	}

	.haris-timeline--stack-tablet.haris-timeline--keep-line .haris-timeline__line {
		display: block;
		left: 0;
		transform: none;
	}

	.haris-timeline--stack-tablet.haris-timeline--keep-line .haris-timeline__item {
		padding-left: 28px;
	}

	.haris-timeline--stack-tablet.haris-timeline--keep-line.haris-timeline--dots .haris-timeline__item::after {
		top: 10px;
		left: 0;
	}

	.haris-timeline--stack-tablet:not(.haris-timeline--keep-line).haris-timeline--dots .haris-timeline__item::after {
		display: none;
	}
}

@media (max-width: 767px) {
	.haris-timeline {
		padding: 56px 20px 64px;
	}

	.haris-timeline__head {
		margin-bottom: 52px;
	}

	.haris-timeline__title {
		font-size: 30px;
	}

	.haris-timeline--stack-mobile .haris-timeline__item,
	.haris-timeline--stack-mobile .haris-timeline__item--text-right {
		flex-direction: column;
		align-items: stretch;
		row-gap: 24px;
	}

	.haris-timeline--stack-mobile.haris-timeline--stacked-image-first .haris-timeline__item,
	.haris-timeline--stack-mobile.haris-timeline--stacked-image-first .haris-timeline__item--text-right {
		flex-direction: column-reverse;
	}

	.haris-timeline--stack-mobile.haris-timeline--text-inward .haris-timeline__text {
		text-align: left;
	}

	.haris-timeline--stack-mobile.haris-timeline--text-inward .haris-timeline__item-text {
		margin-left: 0;
		margin-right: 0;
	}

	.haris-timeline--stack-mobile .haris-timeline__line {
		display: none;
	}

	.haris-timeline--stack-mobile.haris-timeline--keep-line .haris-timeline__line {
		display: block;
		left: 0;
		transform: none;
	}

	.haris-timeline--stack-mobile.haris-timeline--keep-line .haris-timeline__item {
		padding-left: 28px;
	}

	.haris-timeline--stack-mobile:not(.haris-timeline--keep-line).haris-timeline--dots .haris-timeline__item::after {
		display: none;
	}

	.haris-timeline--animate .haris-timeline__item--text-left,
	.haris-timeline--animate .haris-timeline__item--text-right {
		transform: translateY(24px);
	}
}

/* ------------------------------------------------------------ A11y / RM */

@media (prefers-reduced-motion: reduce) {
	.haris-timeline *,
	.haris-timeline *::before,
	.haris-timeline *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}