/* ============================================================
   KROKI — oś procesu: czas, tytuł, opis.

   Kolumny układa auto-fit, a nie @container: poniżej 768px kontenery
   zapytań są celowo wyłączone (patrz ks-tokens.css), więc siatka musi
   działać także bez nich.
   ============================================================ */

.ks-kroki {
	--ks-kroki-kropka: 14px;
	--ks-kroki-odstep: clamp(24px, 4cqi, 52px);
	--ks-kroki-wciecie: calc(var(--ks-kroki-kropka) + var(--ks-odstep-3));

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(26px, 3cqi, 38px) var(--ks-kroki-odstep);
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	/* Przycina kreskę wystającą poza ostatnią kolumnę — patrz __kreska. */
	overflow: hidden;
}

.ks-widget .ks-kroki__krok {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/* ---------- wiersz z kropką, czasem i kreską ---------- */

.ks-widget .ks-kroki__czas {
	display: flex;
	align-items: center;
	gap: var(--ks-odstep-3);
	margin: 0 0 var(--ks-odstep-3);
}

.ks-kroki__kropka {
	flex: none;
	width: var(--ks-kroki-kropka);
	height: var(--ks-kroki-kropka);
	border-radius: 50%;
	background: currentColor;
}

/* Oswald jak w cenniku — wąski krój znosi ujemny tracking, więc go tu nie ma. */
.ks-kroki__wartosc {
	font-family: Oswald, sans-serif;
	font-size: clamp(26px, 4.2cqi, 38px);
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--ks-tekst);
}

/* Kreska biegnie przez przerwę siatki aż pod kropkę następnego kroku —
   stąd ujemny margines. Nadmiar przy ostatniej kolumnie przycina
   overflow na .ks-kroki. */
.ks-kroki__kreska {
	flex: 1;
	min-width: 12px;
	height: 1px;
	margin-right: calc(-1 * var(--ks-kroki-odstep));
	background: var(--ks-linia);
}

/* ---------- tytuł i opis, wcięte pod czas ---------- */

.ks-widget .ks-kroki__tytul {
	margin: 0 0 var(--ks-odstep-2);
	padding-left: var(--ks-kroki-wciecie);
	font-size: clamp(16px, 1.9cqi, 18px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ks-tekst);
}

.ks-widget .ks-kroki__opis {
	margin: 0;
	padding-left: var(--ks-kroki-wciecie);
	max-width: 34ch;
	font-size: clamp(15px, 1.7cqi, 16.5px);
	line-height: 1.55;
	color: var(--ks-tekst-3);
}

/* Na ciemnym tle sekcji kreska musi rozjaśniać, nie przyciemniać. */
.ks-sekcja--granat .ks-kroki__wartosc,
.ks-sekcja--granat .ks-kroki__tytul {
	color: var(--ks-biel);
}

.ks-sekcja--granat .ks-kroki__opis {
	color: rgba(255, 255, 255, 0.72);
}

.ks-sekcja--granat .ks-kroki__kreska {
	background: rgba(255, 255, 255, 0.28);
}