/* ============================================================
   Macteck Divi Suite — Timeline CSS
   ============================================================ */

.mds-timeline {
	position: relative;
	padding: 20px 0;
	font-family: 'Space Grotesk', sans-serif;
}

/* ── Vertical line ────────────────────────────────────────── */
.mds-tl-line {
	position: absolute;
	left: 50%;
	top: 0; bottom: 0;
	width: 2px;
	background: var(--mds-tl-line, rgba(255,107,0,0.2));
	transform: translateX(-50%);
}

.mds-tl-line-progress {
	width: 100%;
	height: 0%;
	background: var(--mds-tl-accent, #FF6B00);
	transition: height 0.8s cubic-bezier(0.4,0,0.2,1);
	box-shadow: 0 0 8px var(--mds-tl-accent, #FF6B00);
}

/* Left/right layouts */
.mds-tl-left  .mds-tl-line { left: 24px; }
.mds-tl-right .mds-tl-line { left: auto; right: 24px; }

/* ── Item ─────────────────────────────────────────────────── */
.mds-tl-item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 56px 1fr;
	gap: 0 24px;
	align-items: start;
	margin-bottom: 48px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s, transform 0.6s;
}

.mds-tl-item.mds-visible { opacity: 1; transform: translateY(0); }

/* Alternating: even items flip */
.mds-tl-alternating .mds-tl-item:nth-child(even) .mds-tl-content { grid-column: 1; grid-row: 1; text-align: right; }
.mds-tl-alternating .mds-tl-item:nth-child(even) .mds-tl-node    { grid-column: 2; grid-row: 1; }
.mds-tl-alternating .mds-tl-item:nth-child(odd)  .mds-tl-content { grid-column: 3; }
.mds-tl-alternating .mds-tl-item:nth-child(odd)  .mds-tl-node    { grid-column: 2; }

/* Left layout */
.mds-tl-left .mds-tl-item { grid-template-columns: 56px 1fr; }
.mds-tl-left .mds-tl-node    { grid-column: 1; }
.mds-tl-left .mds-tl-content { grid-column: 2; }

/* Right layout */
.mds-tl-right .mds-tl-item { grid-template-columns: 1fr 56px; }
.mds-tl-right .mds-tl-content { grid-column: 1; text-align: right; }
.mds-tl-right .mds-tl-node    { grid-column: 2; }

/* ── Node ─────────────────────────────────────────────────── */
.mds-tl-node {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--mds-tl-accent, #FF6B00);
	box-shadow: 0 0 0 4px rgba(255,107,0,0.15), 0 4px 16px rgba(255,107,0,0.3);
	position: relative;
	z-index: 2;
	transition: transform 0.3s, box-shadow 0.3s;
	flex-shrink: 0;
	justify-self: center;
}

.mds-tl-item.mds-visible .mds-tl-node { animation: mds-tl-pop 0.5s 0.3s both; }

@keyframes mds-tl-pop {
	0%   { transform: scale(0); }
	70%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}

.mds-tl-icon { font-size: 22px; line-height: 1; }

/* ── Content ──────────────────────────────────────────────── */
.mds-tl-content {
	padding: 8px 0;
}

.mds-tl-date {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--mds-tl-accent, #FF6B00);
	margin-bottom: 6px;
}

.mds-tl-title {
	font-size: 20px;
	font-weight: 700;
	font-family: 'Rajdhani', sans-serif;
	margin: 0 0 8px;
	line-height: 1.2;
}

.mds-tl-desc {
	font-size: 14px;
	line-height: 1.65;
	opacity: 0.7;
	margin: 0;
}

/* ── Dark mode ────────────────────────────────────────────── */
.mds-tl-dark { color: #fff; }
.mds-tl-dark .mds-tl-title { color: #fff; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
	.mds-tl-alternating .mds-tl-item,
	.mds-tl-right .mds-tl-item {
		grid-template-columns: 44px 1fr;
	}
	.mds-tl-alternating .mds-tl-item .mds-tl-content,
	.mds-tl-right .mds-tl-item .mds-tl-content {
		grid-column: 2 !important;
		text-align: left !important;
		grid-row: 1 !important;
	}
	.mds-tl-alternating .mds-tl-item .mds-tl-node,
	.mds-tl-right .mds-tl-item .mds-tl-node { grid-column: 1 !important; }
	.mds-tl-line { left: 22px !important; right: auto !important; }
}