/**
 * Sekcja: oś czasu.
 * Figma 14557:4320 — sekcja 1440×546. Nagłówek 64/72 przy prawej krawędzi kontenera
 * (tekst 437 px kończy się na x=1362), strzałki 47×47 przy lewej. Oś od y=204:
 * gniazda kropek 45×45 na wspólnej linii (środek y=22,5), kolumny od y=277 —
 * czyli 73 px pod górną krawędzią osi. Rok 48/57,6, opis 20/28.
 *
 * Kolumny mają 280 px (jedna 316) i odstęp 77. Suma przekracza 1284, więc ostatni
 * kamień milowy wychodzi za prawą krawędź kadru — na froncie oś jest przewijana
 * w poziomie, a strzałki z makiety (14557:4322) przesuwają ją o jedną kolumnę.
 */

.about-timeline {
	padding-block: 81px;
	background-color: var(--color-white);
}

.about-timeline__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	min-height: 72px;
}

.about-timeline__head .about-timeline__heading {
	flex: 0 0 437px;
	width: 437px;
	text-align: right;
}

/* Viewport sięga prawej krawędzi ekranu, żeby ostatnia kolumna była przycięta
   krawędzią kadru tak jak w makiecie, a nie kończyła się na gutterze kontenera. */
.about-timeline__viewport {
	margin-top: 51px;
	margin-right: calc(var(--container-gutter) * -1);
}

.about-timeline__track {
	display: flex;
	gap: 77px;
	overflow-x: auto;
	margin: 0;
	padding: 0 var(--container-gutter) 0 0;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.about-timeline__track::-webkit-scrollbar {
	display: none;
}

.about-timeline__track:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 8px;
}

.about-timeline__item {
	position: relative;
	flex: 0 0 280px;
	padding-top: 73px;
	scroll-snap-align: start;
}

/* 14557:4349 ma 316 px (reszta 280). justify-between na 1387 px daje odstęp 77
   i x kolumn 828 / 1185. Opis 2004–2005 jest szerszy niż kolumna (342 px). */
@media (min-width: 992px) {
	.about-timeline__item:nth-child(2) {
		flex-basis: 316px;
	}

	/* 14557:4354 — opis 1994–1998 w 266 px (3 linie), kolumna zostaje 316. */
	.about-timeline__item:nth-child(2) .about-timeline__text {
		width: 266px;
	}

	/* 14557:4361 — opis 2001 w 265 px, kolumna zostaje 280. */
	.about-timeline__item:nth-child(3) .about-timeline__text {
		width: 265px;
	}

	.about-timeline__item:nth-child(4) .about-timeline__text {
		width: 342px;
	}
}

/* Linię osi rysuje każdy kamień milowy — także pod odstępem po swojej prawej
   stronie. Dzięki temu jest ciągła również w części przewiniętej poza ekran,
   czego nie dałby jeden element pozycjonowany do widocznego obszaru. */
.about-timeline__item::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 0;
	right: -77px;
	height: 1px;
	background-color: var(--color-hairline);
}

.about-timeline__item:last-child::before {
	right: 0;
}

/* Gniazdo 45×45; mierzona kropka to punkt 17×17 (Figma 14557:4329 / 14557:4332). */
.about-timeline__socket {
	position: absolute;
	top: 0;
	left: 0;
	width: 45px;
	height: 45px;
	border: 1px solid transparent;
	border-radius: 50%;
	background-color: var(--color-white);
}

.about-timeline__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background-color: var(--color-neutral-light-2);
	transform: translate(-50%, -50%);
}

.about-timeline__item--active .about-timeline__socket {
	border-color: var(--color-primary);
}

.about-timeline__item--active .about-timeline__dot {
	background-color: var(--color-primary);
}

.about-timeline__year {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--color-muted);
}

.about-timeline__item--active .about-timeline__year {
	color: var(--color-primary);
}

.about-timeline__text {
	margin: 18px 0 0;
	font-size: var(--fs-body-lg);
	line-height: 28px;
	letter-spacing: -0.4px;
	color: var(--color-muted);
}

.about-timeline__item--active .about-timeline__text {
	color: var(--color-primary);
}

@media (max-width: 991px) {
	.about-timeline {
		padding-block: var(--space-section);
	}

	.about-timeline__head {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: var(--space-md);
		min-height: 0;
	}

	.about-timeline__head .about-timeline__heading {
		text-align: left;
	}

	.about-timeline__viewport {
		margin-top: var(--space-lg);
	}

	.about-timeline__track {
		gap: var(--space-lg);
	}

	.about-timeline__item {
		flex: 0 0 240px;
		padding-top: 64px;
	}

	.about-timeline__item::before {
		right: calc(var(--space-lg) * -1);
	}
}