/* Harmonogram projektu na stronie usługi (agencja/parts/usluga-timeline.php, 19.10.2026).
   Wykres Gantta jak we wzorze od użytkownika: oś dni u góry, pionowe linie siatki #e0e0e0, prostokąty etapów z ramką 1 px
   (#111), wybrany etap wypełniony na czarno. Turkus #16b6d6 (jak narożnik pakietów) tylko na linii postępu.
   Siatka i treść widoczne od początku, JS animuje tylko postęp i wybór etapu. Telefon i tablet (do 991 px): ten sam wykres,
   mniejszy, z boksem opisu pod schodkami (wcześniej rozwijana lista — „nieczytelna, podobna do innych elementów”). */

.g2t {
	--g2t-row: 48px;
	--g2t-scale: 56px;
	--g2t-gap: 12px;
	scroll-margin-top: 110px;
}

/* ---------- Wykres ---------- */

.g2t .g2t-chart {
	position: relative;
	padding-bottom: 16px;
}

.g2t .g2t-scale {
	position: relative;
	height: var(--g2t-scale);
}

.g2t .g2t-scale__unit {
	position: absolute;
	top: 0;
	left: 0;
	color: #888;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

.g2t .g2t-scale__tick {
	position: absolute;
	top: 26px;
	left: calc(var(--d) / var(--g2t-days) * 100%);
	color: #888;
	font-size: 14px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transform: translateX(-50%);
}

.g2t .g2t-scale__tick:nth-child(2) {
	transform: none;
}

.g2t .g2t-scale__tick:last-child {
	transform: translateX(-100%);
}

.g2t .g2t-grid {
	position: absolute;
	inset: var(--g2t-scale) 0 0;
	pointer-events: none;
}

.g2t .g2t-grid span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--d) / var(--g2t-days) * 100%);
	width: 1px;
	background: #e0e0e0;
	transform-origin: top;
}

.g2t .g2t-grid span:last-child {
	margin-left: -1px;
}

/* Bez z-index na liście (nie tworzy własnej warstwy): etykiety obok prostokątów mogą stanąć nad linią postępu. */
.g2u .g2t .g2t-bars {
	position: relative;
	margin: 0;
	padding: 14px 0 0;
	list-style: none;
}

.g2t .g2t-bars li {
	position: relative;
	height: var(--g2t-row);
	margin: -1px 0 0;
	padding: 0;
}

.g2t .g2t-bars li:first-child {
	margin-top: 0;
}

.g2t .g2t-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--from) / var(--g2t-days) * 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc((var(--to) - var(--from)) / var(--g2t-days) * 100%);
	margin: 0;
	padding: 0 12px;
	border: 1px solid #111;
	border-radius: 0;
	background: #fff;
	color: #111;
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.g2t .g2t-bar::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background: #111;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.g2t .g2t-bar.is-active::before {
	transform: scaleX(1);
}

/* Białe litery w trybie różnicy są czarne na białym tle i białe nad przesuwającym się wypełnieniem. */
.g2t .g2t-bar__label {
	position: relative;
	z-index: 3;
	color: #fff;
	mix-blend-mode: difference;
}

.g2t .g2t-bar:focus-visible {
	outline: 2px solid #16b6d6;
	outline-offset: 3px;
}

/* Etykieta dłuższa niż prostokąt: obok niego (JS — fit()), po tej stronie, po której jest miejsce. */
.g2t .g2t-bar.is-out,
.g2t .g2t-bar.is-out-left {
	padding: 0;
}

/* Nad linią postępu (z-index 3 > 2), z białą poświatą — linia przechodząca przez napis nie zlewa się z literami. */
.g2t .g2t-bar.is-out .g2t-bar__label,
.g2t .g2t-bar.is-out-left .g2t-bar__label {
	position: absolute;
	z-index: 3;
	top: 50%;
	color: #111;
	mix-blend-mode: normal;
	text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff;
	transform: translateY(-50%);
}

.g2t .g2t-bar.is-out .g2t-bar__label {
	left: calc(100% + var(--g2t-gap));
}

.g2t .g2t-bar.is-out-left .g2t-bar__label {
	right: calc(100% + var(--g2t-gap));
}

.g2t .g2t-bar.is-active.is-out .g2t-bar__label,
.g2t .g2t-bar.is-active.is-out-left .g2t-bar__label {
	font-weight: 600;
}

/* Linia postępu (JS ustawia --g2t-t od 0 do 1). */
.g2t .g2t-now {
	position: absolute;
	z-index: 2;
	top: calc(var(--g2t-scale) - 6px);
	bottom: 0;
	left: 0;
	width: 2px;
	margin-left: -1px;
	background: #16b6d6;
	transform: translate3d(calc(var(--g2t-t, 0) * var(--g2t-width, 0px)), 0, 0);
	pointer-events: none;
	transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.g2t .g2t-now::before {
	content: "";
	position: absolute;
	top: -4px;
	left: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #16b6d6;
}

.g2t.is-playing .g2t-now {
	transition: none;
}

/* ---------- Opis etapu ---------- */

/* Lista etapów zostaje w HTML (treść boksu dla skryptu, wyszukiwarki), na ekranie jest wykres z boksem. */
.g2u .g2t .g2t-steps {
	display: none;
}

/* Boks z opisem wybranego etapu na wykresie (19.10.2026 — zamiast panelu pod wykresem): na komputerze zawsze w lewym
   dolnym rogu (puste pole pod schodkami; prośba użytkownika — prawy górny róg z pustym miejscem w boksie był „dziwny”).
   Wysokość według treści, dolna krawędź stała; treść podmienia JS bez wygaszania. Na telefonie i tablecie boks stoi
   pod schodkami (niżej). Bez ramki i tła (19.10.2026 — „za mocno się rzuca”, „pokaż te linie pod tym”): linie siatki
   widać pod opisem, biała poświata wokół liter (jak przy etykietach) — linie nie przecinają tekstu. Tekst 24 px od lewej
   krawędzi wykresu („nie może być do krawędzi tak dosunięte”). */
.g2t .g2t-box {
	position: absolute;
	z-index: 3;
	width: clamp(340px, 34%, 440px);
	padding: 16px 20px 18px 24px;
	text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff;
}

.g2t .g2t-box--bl {
	bottom: 16px;
	left: 0;
}

.g2u .g2t .g2t-box__meta {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin: 0 0 6px;
	color: #888;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.g2t .g2t-box__num {
	color: #111;
	font-variant-numeric: tabular-nums;
}

.g2u .g2t .g2t-box__name {
	margin: 0 0 8px;
	color: #111;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.g2u .g2t .g2t-box__text {
	margin: 0;
	color: #555;
	font-size: 14px;
	line-height: 1.55;
}

@media (min-width: 992px) and (max-width: 1365px) {
	.g2u .g2t .g2t-box__name {
		font-size: 18px;
	}

	.g2u .g2t .g2t-box__text {
		font-size: 13px;
		line-height: 1.5;
	}
}

@media (min-width: 992px) and (max-width: 1279px) {
	.g2t .g2t-bar {
		font-size: 11px;
		letter-spacing: 0.04em;
	}
}

/* ---------- Telefon i tablet: ten sam wykres, boks z opisem pod schodkami ---------- */

@media (max-width: 991px) {
	.g2t {
		--g2t-row: 44px;
		--g2t-scale: 50px;
		--g2t-gap: 8px;
	}

	.g2t .g2t-chart {
		padding-bottom: 0;
	}

	.g2t .g2t-scale__unit {
		font-size: 11px;
	}

	.g2t .g2t-scale__tick {
		top: 23px;
		font-size: 13px;
	}

	.g2t .g2t-bar {
		padding: 0 8px;
		font-size: 11px;
		letter-spacing: 0.04em;
	}

	/* Cały wiersz wybiera etap (wąskie prostokąty są małym celem dla palca). */
	.g2t .g2t-bars li {
		cursor: pointer;
	}

	/* Boks w toku strony, pod ostatnim wierszem — linie siatki i linia postępu dochodzą do niego (chowają się pod nim).
	   Wysokość = najdłuższy opis (min-height z JS), więc przy zmianie etapu nic pod spodem się nie przesuwa. Tu białe
	   tło: linie siatki kończą się nad opisem, tekst równo z krawędzią treści. */
	.g2t .g2t-box,
	.g2t .g2t-box--bl {
		position: relative;
		inset: auto;
		width: auto;
		max-width: 560px;
		margin-top: 16px;
		padding: 14px 0 0;
		background: #fff;
		text-shadow: none;
	}

	.g2u .g2t .g2t-box__name {
		font-size: 20px;
	}

	.g2u .g2t .g2t-box__text {
		font-size: 15px;
		line-height: 1.6;
	}
}

@media (max-width: 767px) {
	.g2t {
		--g2t-row: 40px;
	}
}

/* Najwęższe telefony (320–359 px): mniejsze etykiety, żeby „Kodowanie front-end” zmieściło się obok prostokąta. */
@media (max-width: 359px) {
	.g2t .g2t-bar {
		font-size: 10px;
		letter-spacing: 0.02em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.g2t .g2t-bar::before,
	.g2t .g2t-now {
		transition: none;
	}
}