/* Date column left of icon; vertical line runs through icon center only */
.timeline {
	--timeline-date-col: 5.125rem;
	--timeline-node-gap: 0.5rem;
	--timeline-icon-size: 2.75rem;
	--timeline-icon-half: 1.375rem;
	--timeline-rail-width: calc(
		var(--timeline-date-col) +
		var(--timeline-node-gap) +
		var(--timeline-icon-size)
	);
	/* Icon center from timeline’s left inner edge (line passes through it) */
	--timeline-line-x: calc(
		var(--timeline-date-col) +
		var(--timeline-node-gap) +
		var(--timeline-icon-half)
	);

	max-width: 900px;
	margin: 0 auto;
	position: relative;
	padding-left: calc(var(--timeline-rail-width) + 0.875rem);
}

.timeline::before {
	content: "";
	position: absolute;
	left: calc(var(--timeline-line-x) - 1px);
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--primary-color);
}

.timeline-item {
	position: relative;
	margin-bottom: 3rem;
	padding-bottom: 2rem;
}

.timeline-node {
	position: absolute;
	left: calc(-1 * (var(--timeline-rail-width) + 0.875rem));
	top: 0;
	width: var(--timeline-rail-width);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--timeline-node-gap);
	z-index: 1;
}

.timeline-node-icon {
	width: var(--timeline-icon-size);
	height: var(--timeline-icon-size);
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--bg-white);
	border: 3px solid var(--bg-white);
	box-shadow: 0 0 0 2px var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0;
	order: 2;
}

.timeline-node-date {
	order: 1;
	flex: 0 1 var(--timeline-date-col);
	min-width: 0;
	width: var(--timeline-date-col);
	max-width: var(--timeline-date-col);
	font-size: 0.72rem;
	line-height: 1.25;
	color: var(--text-light);
	font-weight: 600;
	text-align: right;
}

.timeline-content {
	background: var(--bg-light);
	padding: 2rem;
	border-radius: 12px;
	box-shadow: 0 2px 10px var(--shadow-color);
	transition: all 0.3s ease;
}

.timeline-content:hover {
	transform: translateX(5px);
	box-shadow: 0 5px 20px var(--shadow-hover-color);
}

.timeline-header {
	margin-bottom: 1rem;
}

.timeline-header h3 {
	font-size: 1.5rem;
	color: var(--text-dark);
	margin-bottom: 0.5rem;
}

.timeline-company {
	display: inline-block;
	font-weight: 600;
	color: var(--primary-color);
	margin-right: 1rem;
}

a.timeline-company {
	text-decoration: none;
}

a.timeline-company:hover {
	text-decoration: underline;
}

.timeline-description {
	color: var(--text-light);
	line-height: 1.7;
	margin-bottom: 1rem;
}

.timeline-achievements {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* Responsive Adjustments for New Sections */
@media (max-width: 768px) {
	.timeline {
		--timeline-date-col: 3.75rem;
		--timeline-node-gap: 0.35rem;
		--timeline-icon-size: 2.35rem;
		--timeline-icon-half: 1.175rem;
		padding-left: calc(var(--timeline-rail-width) + 0.65rem);
	}

	.timeline-node {
		left: calc(-1 * (var(--timeline-rail-width) + 0.65rem));
		width: var(--timeline-rail-width);
	}

	.timeline-node-icon {
		font-size: 0.95rem;
	}

	.timeline-node-date {
		font-size: 0.65rem;
	}

	.timeline-content {
		padding: 1.5rem;
	}

	.timeline-header h3 {
		font-size: 1.3rem;
	}

	.timeline-company {
		display: block;
		margin-bottom: 0.5rem;
	}

	.education-grid,
	.opensource-grid {
		grid-template-columns: 1fr;
	}
}