/**
 * Shangrila Timeline
 * Base layout
 *
 * @package Shangrila_Elementor_Widgets
 */


/* =========================================================
 * ROOT
 * ========================================================= */

.shangrila-timeline {
	width: 100%;
	position: relative;
}


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

.shangrila-timeline__item {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
}


/* =========================================================
 * MARKER COLUMN
 * ========================================================= */

.shangrila-timeline__marker-wrap {
	position: relative;
	flex: 0 0 46px;
	width: 46px;
	min-width: 46px;
	align-self: stretch;

	display: flex;
	flex-direction: column;
	align-items: center;
}


/* =========================================================
 * MARKER
 * ========================================================= */

.shangrila-timeline__marker {
	position: relative;
	z-index: 2;

	width: 46px;
	height: 46px;
	min-width: 46px;

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

	box-sizing: border-box;

	border-radius: 50%;

	background-color: #e8d8b8;
	color: #8f7140;

	line-height: 1;
}


/* =========================================================
 * ICON
 * ========================================================= */

.shangrila-timeline__marker i {
	display: block;

	margin: 0;
	padding: 0;

	font-size: 16px;
	line-height: 1;

	color: inherit;
}


.shangrila-timeline__marker svg {
	display: block;

	width: 16px;
	height: 16px;

	margin: 0;
	padding: 0;

	fill: currentColor;
}


/* =========================================================
 * VERTICAL LINE
 * ========================================================= */

.shangrila-timeline__line {
	position: absolute;

	z-index: 1;

	left: 50%;

	/*
	 * Start exactly at the bottom of the current marker.
	 */
	top: var(--shangrila-marker-size, 46px);

	/*
	 * Extend through the item spacing and stop
	 * at the center of the next marker.
	 */
	bottom: calc(
		-1 * var(--shangrila-item-spacing, 30px)
		- (var(--shangrila-marker-size, 46px) / 2)
	);

	width: 0;

	transform: translateX(-50%);

	border-left: 1px solid #e8d8b8;

	box-sizing: border-box;

	pointer-events: none;
}


/*
 * Make sure the line cannot accidentally inherit
 * dimensions from Elementor or other widgets.
 */

.shangrila-timeline__line::before,
.shangrila-timeline__line::after {
	display: none;
}


/* =========================================================
 * CONTENT
 * ========================================================= */

.shangrila-timeline__content {
	flex: 1 1 auto;
	min-width: 0;

	padding-left: 14px;

	box-sizing: border-box;

	align-self: flex-start;
}


/* =========================================================
 * LABEL
 * ========================================================= */

.shangrila-timeline__label {
	margin: 0 0 3px;

	padding: 0;

	color: #c8a66a;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;

	text-align: left;
}


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

.shangrila-timeline__title {
	margin: 0 0 6px;

	padding: 0;

	color: #ffffff;

	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;

	text-align: left;
}


/* =========================================================
 * DESCRIPTION
 * ========================================================= */

.shangrila-timeline__description {
	margin: 0;
	padding: 0;

	color: #b8b8b8;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.65;

	text-align: left;

	max-width: 100%;
}


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

.shangrila-timeline__item:not(:last-child) {
	margin-bottom: 30px;
}


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

/*
 * The PHP does not output .line for the final item
 * when "Show Line After Last Item" is disabled.
 *
 * This is only a safety rule.
 */

.shangrila-timeline__item:last-child
	.shangrila-timeline__line {
	display: block;
}


/* =========================================================
 * ELEMENTOR EDITOR
 * ========================================================= */

.elementor-editor-active
	.shangrila-timeline__item {
	width: 100%;
}


/* =========================================================
 * CLEAR DEFAULT ELEMENTOR MARGINS
 * ========================================================= */

.shangrila-timeline p {
	margin: 0;
}


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

@media (max-width: 1024px) {

	.shangrila-timeline__marker-wrap {
		flex-basis: 42px;
		width: 42px;
		min-width: 42px;
	}


	.shangrila-timeline__marker {
		width: 42px;
		height: 42px;
		min-width: 42px;
	}


	.shangrila-timeline__line {
		top: 42px;
	}


	.shangrila-timeline__content {
		padding-left: 13px;
	}


	.shangrila-timeline__item:not(:last-child) {
		margin-bottom: 28px;
	}

}


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

@media (max-width: 767px) {

	.shangrila-timeline__marker-wrap {
		flex-basis: 38px;
		width: 38px;
		min-width: 38px;
	}


	.shangrila-timeline__marker {
		width: 38px;
		height: 38px;
		min-width: 38px;
	}


	.shangrila-timeline__line {
		top: 38px;
	}


	.shangrila-timeline__marker i {
		font-size: 14px;
	}


	.shangrila-timeline__marker svg {
		width: 14px;
		height: 14px;
	}


	.shangrila-timeline__content {
		padding-left: 12px;
	}


	.shangrila-timeline__label {
		font-size: 13px;
	}


	.shangrila-timeline__title {
		font-size: 15px;
	}


	.shangrila-timeline__description {
		font-size: 13px;
		line-height: 1.6;
	}


	.shangrila-timeline__item:not(:last-child) {
		margin-bottom: 26px;
	}

}
.shangrila-timeline__item:last-child
	.shangrila-timeline__line {
	bottom: 0;
}