/* ==========================================================
   Timeline 2 by UCD — Base Styles
   ========================================================== */

.ucd-t2-wrapper {
	position: relative;
	padding: 20px 0;
	--ucd-t2-connector-top: 14px;
	--ucd-t2-connector-length: 30px;
	--ucd-t2-content-gap: 30px;
	--ucd-t2-branch-text-offset: 2px;
	--ucd-t2-connector-mid-offset: 13px;
	--ucd-t2-featured-mid-offset: 40px;
}

/* Vertical centre line */
.ucd-t2-line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 2px dotted #00d4ff;
	transform: translateX(-50%);
	pointer-events: none;
}

/* ----- Item row --------- */
.ucd-t2-item {
	position: relative;
	display: flex;
	width: 100%;
	box-sizing: border-box;
	--ucd-t2-item-spacing: 35px;
	--ucd-t2-connector-top-local: calc(var(--ucd-t2-connector-top) + var(--ucd-t2-connector-mid-offset));
	margin-bottom: var(--ucd-t2-item-spacing);
}

/* Featured year rows need a larger line anchor to keep connector in the text gap */
.ucd-t2-item.ucd-t2-item-featured {
	--ucd-t2-connector-top-local: calc(var(--ucd-t2-connector-top) + var(--ucd-t2-featured-mid-offset));
}

.ucd-t2-item:last-child {
	margin-bottom: 0;
}

/* Left-positioned item */
.ucd-t2-item.ucd-t2-left {
	justify-content: flex-start;
	padding-right: 50%;
}

.ucd-t2-item.ucd-t2-left .ucd-t2-content {
	text-align: right;
	padding-right: var(--ucd-t2-content-gap);
	width: 100%;
}

/* Right-positioned item */
.ucd-t2-item.ucd-t2-right {
	justify-content: flex-end;
	padding-left: 50%;
}

.ucd-t2-item.ucd-t2-right .ucd-t2-content {
	text-align: left;
	padding-left: var(--ucd-t2-content-gap);
	width: 100%;
}

/* Connected sub-points: push text so it starts after the sub horizontal connector */
.ucd-t2-item.ucd-t2-right.ucd-t2-from-branch .ucd-t2-content {
	padding-left: calc(
		var(--ucd-t2-connector-length) +
		var(--ucd-t2-connector-length) +
		var(--ucd-t2-branch-text-offset)
	) !important;
}

.ucd-t2-item.ucd-t2-left.ucd-t2-from-branch .ucd-t2-content {
	padding-right: calc(
		var(--ucd-t2-connector-length) +
		var(--ucd-t2-connector-length) +
		var(--ucd-t2-branch-text-offset)
	) !important;
}

/* ----- Connector (horizontal line) ----- */
.ucd-t2-connector {
	position: absolute;
	top: var(--ucd-t2-connector-top-local);
	width: var(--ucd-t2-connector-length);
	height: 0;
	border-top: 2px dotted #00d4ff;
	pointer-events: none;
}

.ucd-t2-item.ucd-t2-right .ucd-t2-connector {
	left: 50%;
}

.ucd-t2-item.ucd-t2-left .ucd-t2-connector {
	right: 50%;
}

/* If item continues a same-side branch, its connector starts from branch trunk, not center line */
.ucd-t2-item.ucd-t2-right.ucd-t2-from-branch .ucd-t2-connector {
	left: calc(50% + var(--ucd-t2-connector-length));
}

.ucd-t2-item.ucd-t2-left.ucd-t2-from-branch .ucd-t2-connector {
	right: calc(50% + var(--ucd-t2-connector-length));
}

/* Branch-start row: connect main line to the center of the side trunk */
.ucd-t2-item.ucd-t2-extend-branch::before {
	content: "";
	position: absolute;
	width: var(--ucd-t2-connector-length);
	height: 0;
	border-top: 2px dotted #00d4ff;
	pointer-events: none;
	top: calc(var(--ucd-t2-connector-top-local) + ((100% + var(--ucd-t2-item-spacing)) / 2));
}

.ucd-t2-item.ucd-t2-right.ucd-t2-extend-branch::before {
	left: 50%;
}

.ucd-t2-item.ucd-t2-left.ucd-t2-extend-branch::before {
	right: 50%;
}

/* Sub-branch vertical connector for consecutive same-side items */
.ucd-t2-item.ucd-t2-extend-branch::after {
	content: "";
	position: absolute;
	top: var(--ucd-t2-connector-top-local);
	height: calc(100% + var(--ucd-t2-item-spacing));
	border-left: 2px dotted #00d4ff;
	pointer-events: none;
}

.ucd-t2-item.ucd-t2-right.ucd-t2-extend-branch::after {
	left: calc(50% + var(--ucd-t2-connector-length));
}

.ucd-t2-item.ucd-t2-left.ucd-t2-extend-branch::after {
	right: calc(50% + var(--ucd-t2-connector-length));
}

/* ----- Year ------------- */
.ucd-t2-year {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	margin-bottom: 6px;
}

.ucd-t2-year.ucd-t2-featured {
	font-size: 42px;
	color: #00d4ff;
}

/* ----- Description ------ */
.ucd-t2-desc {
	font-size: 15px;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
}

/* ==========================================================
   Responsive — Single-column mobile layout
   ========================================================== */
@media (max-width: 767px) {
	.ucd-t2-mobile-single {
		--ucd-t2-mobile-line-left: 15px;
		--ucd-t2-mobile-connector-length: 25px;
		--ucd-t2-mobile-text-offset: 2px;
	}

	.ucd-t2-mobile-single .ucd-t2-line {
		left: var(--ucd-t2-mobile-line-left);
		transform: none;
	}

	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-left,
	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-right {
		padding-left: calc(var(--ucd-t2-mobile-line-left) + var(--ucd-t2-mobile-connector-length) + var(--ucd-t2-mobile-text-offset));
		padding-right: 0;
		justify-content: flex-start;
	}

	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-left .ucd-t2-content,
	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-right .ucd-t2-content {
		text-align: left;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-left .ucd-t2-connector,
	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-right .ucd-t2-connector {
		left: var(--ucd-t2-mobile-line-left);
		right: auto;
		width: var(--ucd-t2-mobile-connector-length);
	}

	/* Connected branch points on mobile start from sub-vertical trunk */
	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-left.ucd-t2-from-branch .ucd-t2-connector,
	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-right.ucd-t2-from-branch .ucd-t2-connector {
		left: calc(var(--ucd-t2-mobile-line-left) + var(--ucd-t2-mobile-connector-length));
		right: auto;
	}

	/* Branch trunk + middle bridge in one-side mobile layout */
	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-extend-branch::after {
		display: block;
		left: calc(var(--ucd-t2-mobile-line-left) + var(--ucd-t2-mobile-connector-length));
		right: auto;
	}

	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-extend-branch::before {
		display: block;
		left: var(--ucd-t2-mobile-line-left);
		right: auto;
		width: var(--ucd-t2-mobile-connector-length);
	}

	/* Keep text immediately after horizontal line end for connected points */
	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-left.ucd-t2-from-branch .ucd-t2-content,
	.ucd-t2-mobile-single .ucd-t2-item.ucd-t2-right.ucd-t2-from-branch .ucd-t2-content {
		padding-left: calc(
			var(--ucd-t2-mobile-connector-length) +
			var(--ucd-t2-mobile-text-offset)
		) !important;
	}
}