/* Pro.Gest timeline */

.pg-timeline {
	--pg-dark:    #101829;
	--pg-accent:  #143E60;
	--pg-muted:   #64748B;
	--pg-line:    #CBD5E1;
	--pg-dot-bg:  #FFFFFF;
	--pg-row-gap: 14px;
	--pg-dot:     14px;

	width: 100%;
	padding: 24px 0;
	font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--pg-dark);
	-webkit-font-smoothing: antialiased;
}

.pg-timeline__track {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Horizontal line desktop — endpoints aligned to first/last dot centers */
.pg-timeline__line {
	position: absolute;
	left: calc(24px + (100% - 48px) / (var(--pg-steps, 8) * 2));
	right: calc(24px + (100% - 48px) / (var(--pg-steps, 8) * 2));
	top: 50%;
	height: 1px;
	background: var(--pg-line);
	transform: translateY(-50%);
	transform-origin: left center;
}

.pg-timeline__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--pg-steps, 8), 1fr);
	align-items: center;
	min-height: 260px;
}

.pg-timeline__step {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	justify-items: center;
	text-align: center;
	row-gap: var(--pg-row-gap);
	padding: 0 8px;
	min-width: 0;
}

/* Dot */
.pg-timeline__dot {
	width: var(--pg-dot);
	height: var(--pg-dot);
	border-radius: 50%;
	background: var(--pg-dot-bg);
	border: 1.5px solid var(--pg-line);
	box-shadow: 0 0 0 4px #fff;
	position: relative;
	z-index: 2;
	transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}
.pg-timeline__step.is-active .pg-timeline__dot {
	background: var(--pg-accent);
	border-color: var(--pg-accent);
}

/* Title block */
.pg-timeline__title {
	position: relative;
	max-width: 180px;
}
.pg-timeline__title h3 {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--pg-dark);
}
.pg-timeline__step.is-active .pg-timeline__title h3 {
	color: var(--pg-accent);
}
.pg-timeline__title p {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--pg-muted);
	font-weight: 400;
}

/* Year block */
.pg-timeline__year {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
	font-size: 13px;
	font-weight: 500;
	color: var(--pg-muted);
	letter-spacing: 0;
}
.pg-timeline__step.is-active .pg-timeline__year time {
	color: var(--pg-dark);
}
.pg-timeline__today {
	position: absolute;
	top: 50%;
	left: calc(50% + 14px);
	transform: translateY(-50%);
	font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
	font-size: 12px;
	font-weight: 500;
	color: var(--pg-accent);
	white-space: nowrap;
	line-height: 1;
}

/* Connector line dot -> title (top step) */
.pg-timeline__step--top .pg-timeline__title::after,
.pg-timeline__step--bottom .pg-timeline__title::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 1px;
	background: var(--pg-line);
	transform: translateX(-50%);
}
.pg-timeline__step--top .pg-timeline__title::after {
	top: calc(100% + 4px);
	height: calc(var(--pg-row-gap) - 4px);
}
.pg-timeline__step--bottom .pg-timeline__title::after {
	bottom: calc(100% + 4px);
	height: calc(var(--pg-row-gap) - 4px);
}
.pg-timeline__step.is-today .pg-timeline__title::after {
	display: none;
}

/* Layout swap: top steps -> title above line, year below */
.pg-timeline__step--top .pg-timeline__title { grid-row: 1; align-self: end; }
.pg-timeline__step--top .pg-timeline__dot   { grid-row: 2; }
.pg-timeline__step--top .pg-timeline__year  { grid-row: 3; align-self: start; }

.pg-timeline__step--bottom .pg-timeline__year  { grid-row: 1; align-self: end; }
.pg-timeline__step--bottom .pg-timeline__dot   { grid-row: 2; }
.pg-timeline__step--bottom .pg-timeline__title { grid-row: 3; align-self: start; }

/* Reveal animation */
.pg-timeline__line {
	transform: translateY(-50%) scaleX(0);
	transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.pg-timeline.is-revealed .pg-timeline__line {
	transform: translateY(-50%) scaleX(1);
}
.pg-timeline__step {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .5s ease, transform .5s ease;
}
.pg-timeline.is-revealed .pg-timeline__step {
	opacity: 1;
	transform: none;
}
.pg-timeline.is-revealed .pg-timeline__step:nth-child(1) { transition-delay: .15s; }
.pg-timeline.is-revealed .pg-timeline__step:nth-child(2) { transition-delay: .25s; }
.pg-timeline.is-revealed .pg-timeline__step:nth-child(3) { transition-delay: .35s; }
.pg-timeline.is-revealed .pg-timeline__step:nth-child(4) { transition-delay: .45s; }
.pg-timeline.is-revealed .pg-timeline__step:nth-child(5) { transition-delay: .55s; }
.pg-timeline.is-revealed .pg-timeline__step:nth-child(6) { transition-delay: .65s; }
.pg-timeline.is-revealed .pg-timeline__step:nth-child(7) { transition-delay: .75s; }
.pg-timeline.is-revealed .pg-timeline__step:nth-child(8) { transition-delay: .85s; }

@media (prefers-reduced-motion: reduce) {
	.pg-timeline__line,
	.pg-timeline__step {
		transition: none;
		opacity: 1;
		transform: none;
	}
	.pg-timeline__line { transform: translateY(-50%) scaleX(1); }
}

/* ============ MOBILE / TABLET — vertical layout ============ */
@media (max-width: 900px) {
	.pg-timeline__track {
		padding: 16px 16px 16px 8px;
	}
	.pg-timeline__line {
		left: 24px;
		right: auto;
		top: 0;
		bottom: 0;
		width: 1px;
		height: auto;
		transform: none;
		transform-origin: top center;
	}
	.pg-timeline.is-revealed .pg-timeline__line { transform: none; }
	.pg-timeline__line {
		transform: scaleY(0);
		transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
	}
	.pg-timeline.is-revealed .pg-timeline__line { transform: scaleY(1); }

	.pg-timeline__steps {
		display: flex;
		flex-direction: column;
		gap: 28px;
		min-height: 0;
	}

	.pg-timeline__step,
	.pg-timeline__step--top,
	.pg-timeline__step--bottom {
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr);
		grid-template-rows: auto auto;
		text-align: left;
		justify-items: start;
		row-gap: 4px;
		column-gap: 16px;
		padding: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.pg-timeline__step .pg-timeline__dot {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
		justify-self: center;
		margin-top: 4px;
	}
	.pg-timeline__step .pg-timeline__year {
		grid-column: 2;
		grid-row: 1;
		align-self: auto;
		min-width: 0;
	}
	.pg-timeline__step .pg-timeline__title {
		grid-column: 2;
		grid-row: 2;
		align-self: auto;
		max-width: none;
		text-align: left;
	}
	.pg-timeline__step .pg-timeline__title h3 { font-size: 16px; }
	.pg-timeline__step .pg-timeline__title p  { font-size: 13px; }
	.pg-timeline__step .pg-timeline__title::after { display: none; }

	/* Today: inline next to the year on mobile, not floating */
	.pg-timeline__step.is-today .pg-timeline__today,
	.pg-timeline__today {
		position: static;
		transform: none;
		display: inline-block;
		margin-left: 8px;
		top: auto;
		left: auto;
	}
}