/*
 * Wallex Vertical Timeline – frontend styles
 *
 * Vertical milestone timeline. Desktop: a centered vertical line with circular
 * icon nodes; entries alternate on both sides of it, joined to their node by a
 * thin connector ending in a dot. Tablet / mobile (≤1024px): the line moves to
 * the right edge and all entries stack on its left, connectors hidden.
 *
 * The widget draws no background of its own — the dark backdrop in the designs
 * comes from the surrounding Elementor section.
 */

.wallex-vtl-wrap {
	box-sizing: border-box;
	width: 100%;
	direction: rtl;
}

.wallex-vtl-wrap *,
.wallex-vtl-wrap *::before,
.wallex-vtl-wrap *::after {
	box-sizing: border-box;
}

.wallex-vtl {
	--wallex-vtl-node: 110px;
	--wallex-vtl-ring: #2f6bff;
	--wallex-vtl-line: #2f6bff;
	--wallex-vtl-conn: 170px;
	--wallex-vtl-gap: 90px;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wallex-vtl-gap);
	padding: 40px 0;
}

/* Vertical line behind the nodes, drawn per item so it starts at the first
   circle's center and ends at the last circle's center (no overhang above or
   below). Each segment spans its item plus the flex gap beneath it. */
.wallex-vtl__item::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: calc( -1 * var(--wallex-vtl-gap) );
	left: 50%;
	width: 4px;
	margin-left: -2px;
	background: var(--wallex-vtl-line);
}

.wallex-vtl__item:first-child::before {
	top: 50%;
}

.wallex-vtl__item:last-child::before {
	bottom: 50%;
}

.wallex-vtl__item:only-child::before {
	display: none;
}

/* ---------------------------------- Item ---------------------------------- */
/* Three columns: [visual right] [node] [visual left] (column 1 is on the right
   because the wrapper is RTL). The node always sits in the middle column. */
.wallex-vtl__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr var(--wallex-vtl-node) 1fr;
	align-items: center;
}

.wallex-vtl__node {
	position: relative;
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wallex-vtl-node);
	height: var(--wallex-vtl-node);
	border-radius: 50%;
	background: #ffffff;
	border: 7px solid var(--wallex-vtl-ring);
	color: var(--wallex-vtl-ring);
	line-height: 1;
	z-index: 1;
}

.wallex-vtl__node i {
	font-size: calc(var(--wallex-vtl-node) / 2.2);
	color: inherit;
}

.wallex-vtl__node svg {
	width: calc(var(--wallex-vtl-node) / 2);
	height: calc(var(--wallex-vtl-node) / 2);
	fill: currentColor;
}

/* Thin connector from the node toward the content, ending in a dot. */
.wallex-vtl__node::before {
	content: '';
	position: absolute;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	width: var(--wallex-vtl-conn);
	background: var(--wallex-vtl-line);
}

.wallex-vtl__node::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--wallex-vtl-line);
}

/* Content on the visual left of the line. */
.wallex-vtl__item--end .wallex-vtl__content {
	grid-column: 3;
	grid-row: 1;
	text-align: right;
	margin-left: auto;
	padding-right: calc(var(--wallex-vtl-conn) + 10px);
}

.wallex-vtl__item--end .wallex-vtl__node::before {
	right: 100%;
}

.wallex-vtl__item--end .wallex-vtl__node::after {
	right: calc(100% + var(--wallex-vtl-conn) - 2px);
}

/* Content on the visual right of the line. */
.wallex-vtl__item--start .wallex-vtl__content {
	grid-column: 1;
	grid-row: 1;
	text-align: left;
	margin-right: auto;
	padding-left: calc(var(--wallex-vtl-conn) + 10px);
}

.wallex-vtl__item--start .wallex-vtl__node::before {
	left: 100%;
}

.wallex-vtl__item--start .wallex-vtl__node::after {
	left: calc(100% + var(--wallex-vtl-conn) - 2px);
}

/* --------------------------------- Content --------------------------------- */
.wallex-vtl__content {
	max-width: 360px;
}

.wallex-vtl__year {
	font-size: 64px;
	font-weight: 500;
	line-height: 1.1;
	color: #ffffff;
	direction: ltr;
}

.wallex-vtl__date {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 400;
	color: #5f7fff;
}

.wallex-vtl__text {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
	color: #e8ecf8;
}

/* Year digits stay flush with the rest of the block on either side. */
.wallex-vtl__item--start .wallex-vtl__year {
	text-align: left;
}

.wallex-vtl__item--end .wallex-vtl__year {
	text-align: right;
}

/* ------------------------------- Responsive -------------------------------- */
/* Tablet / mobile: line and nodes on the right edge, every entry stacked on
   the left of it, right-aligned; node connectors hidden. */
@media (max-width: 1024px) {
	.wallex-vtl {
		--wallex-vtl-node: 88px;
		--wallex-vtl-gap: 72px;
	}

	.wallex-vtl__item::before {
		left: auto;
		right: calc(var(--wallex-vtl-node) / 2);
		margin-left: 0;
		margin-right: -2px;
	}

	.wallex-vtl__item {
		grid-template-columns: var(--wallex-vtl-node) 1fr;
	}

	.wallex-vtl__node {
		grid-column: 1;
	}

	.wallex-vtl__node::before,
	.wallex-vtl__node::after {
		display: none;
	}

	.wallex-vtl__item--start .wallex-vtl__content,
	.wallex-vtl__item--end .wallex-vtl__content {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
		margin-left: 0;
		margin-right: 0;
		max-width: none;
		padding-left: 0;
		padding-right: 28px;
	}

	.wallex-vtl__item--start .wallex-vtl__year,
	.wallex-vtl__item--end .wallex-vtl__year {
		text-align: right;
		font-size: 34px;
	}

	.wallex-vtl__date {
		font-size: 14px;
	}

	.wallex-vtl__text {
		font-size: 15px;
	}
}