/* Sekcja: Jak działa OdwołAI? (oś procesu, 4 kroki) */

.oai-site .oai-process {
	--oai-process-point: 40px;
	--oai-process-gap: 40px;
	position: relative;
	background: var(--oai-color-white);
	padding: 96px 40px;
}

.oai-site .oai-process__inner {
	max-width: var(--oai-container-width);
	margin: 0 auto;
}

.oai-site .oai-process__intro {
	max-width: 640px;
	margin: 0 auto 64px;
	text-align: center;
}

.oai-site .oai-process__title {
	font-size: 2rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--oai-color-navy);
	margin: 0 0 16px;
}

.oai-site .oai-process__lead {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	margin: 0;
}

.oai-site .oai-process__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oai-process-gap);
}

/* Krok: na mobile/tablecie punkt po lewej, treść po prawej (oś pionowa) */

.oai-site .oai-process__step {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 20px;
}

.oai-site .oai-process__step-rail {
	position: relative;
	flex-shrink: 0;
	width: var(--oai-process-point);
}

.oai-site .oai-process__step-point {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--oai-process-point);
	height: var(--oai-process-point);
	border-radius: 50%;
	border: 2px solid var(--oai-color-border);
	background: var(--oai-color-white);
	transition: border-color 400ms ease, background 400ms ease, box-shadow 400ms ease;
}

.oai-site .oai-process__step-number {
	font-size: 13px;
	font-weight: 700;
	color: var(--oai-color-navy-muted);
	transition: color 400ms ease;
}

/* Łącznik: umieszczony wewnątrz pierwszych trzech li, pod punktami (z-index 0).
   Geometria: top/left = środek punktu; height = calc(100% + gap), gdzie 100%
   to wysokość .oai-process__step-rail rozciągniętego przez align-items: stretch
   do pełnej wysokości li — dzięki temu łącznik zawsze trafia dokładnie
   w środek punktu kolejnego kroku, niezależnie od długości opisu. */

.oai-site .oai-process__connector {
	position: absolute;
	top: calc(var(--oai-process-point) / 2);
	left: calc(var(--oai-process-point) / 2 - 1px);
	width: 2px;
	height: calc(100% + var(--oai-process-gap));
	background: var(--oai-color-border);
	z-index: 0;
}

.oai-site .oai-process__connector-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--oai-color-cyan);
	transition: height 1300ms linear;
}

.oai-site .oai-process__connector-fill::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	margin-left: -8px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(33, 225, 253, 0.55) 0%, rgba(33, 225, 253, 0) 70%);
	opacity: 0;
	pointer-events: none;
}

.oai-site .oai-process__step-content {
	min-width: 0;
	flex: 1;
}

.oai-site .oai-process__step-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-navy);
	margin: 0 0 8px;
}

.oai-site .oai-process__step-desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	margin: 0;
}

/* Hover / focus-within: subtelnie mocniejsza poświata punktu (efekt dodatkowy,
   wszystkie informacje pozostają widoczne bez tej interakcji) */

.oai-site .oai-process__step:hover .oai-process__step-point,
html[data-oai-input="keyboard"] .oai-site .oai-process__step:focus-within .oai-process__step-point {
	box-shadow: 0 0 0 8px rgba(33, 225, 253, 0.2);
}

/* Animacja jednorazowa: klasa .is-animated dodawana raz przez how-it-works.js.
   Punkty i wypełnienia łączników "zaświecają się" kolejno przez transition-delay
   (0ms / 1300ms / 2600ms / 3900ms) — bez żadnej matematyki w JS. */

.oai-site .oai-process.is-animated .oai-process__step-point {
	border-color: var(--oai-color-cyan);
	background: var(--oai-color-cyan);
	box-shadow: 0 0 0 6px rgba(33, 225, 253, 0.14);
}

.oai-site .oai-process.is-animated .oai-process__step-number {
	color: var(--oai-color-white);
}

.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="0"] .oai-process__step-point,
.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="0"] .oai-process__step-number {
	transition-delay: 0ms;
}

.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="1"] .oai-process__step-point,
.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="1"] .oai-process__step-number {
	transition-delay: 1300ms;
}

.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="2"] .oai-process__step-point,
.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="2"] .oai-process__step-number {
	transition-delay: 2600ms;
}

.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="3"] .oai-process__step-point,
.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="3"] .oai-process__step-number {
	transition-delay: 3900ms;
}

.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="0"] .oai-process__connector-fill {
	height: 100%;
	transition-delay: 0ms;
}

.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="1"] .oai-process__connector-fill {
	height: 100%;
	transition-delay: 1300ms;
}

.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="2"] .oai-process__connector-fill {
	height: 100%;
	transition-delay: 2600ms;
}

/* Wędrująca poświata na czole wypełnienia — wyłącznie animation (nie transition),
   jednorazowa (iteration-count: 1), więc prefers-reduced-motion (animation: none
   !important w main.css) całkowicie ją wyłącza bez dodatkowego kodu. */

@keyframes oai-process-glow-y {
	0% {
		top: 0%;
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		top: 100%;
		opacity: 0;
	}
}

.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="0"] .oai-process__connector-fill::after {
	animation: oai-process-glow-y 1300ms linear 0ms 1;
}

.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="1"] .oai-process__connector-fill::after {
	animation: oai-process-glow-y 1300ms linear 1300ms 1;
}

.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="2"] .oai-process__connector-fill::after {
	animation: oai-process-glow-y 1300ms linear 2600ms 1;
}

/* Desktop od 1101px: oś pozioma, 4 kroki w jednym rzędzie */

@media (min-width: 1101px) {
	.oai-site .oai-process {
		--oai-process-gap: 32px;
	}

	.oai-site .oai-process__steps {
		flex-direction: row;
		align-items: flex-start;
	}

	.oai-site .oai-process__step {
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 20px;
	}

	.oai-site .oai-process__step-rail {
		width: 100%;
		height: var(--oai-process-point);
		display: flex;
		justify-content: center;
	}

	.oai-site .oai-process__step-content {
		max-width: 240px;
	}

	.oai-site .oai-process__connector {
		top: calc(var(--oai-process-point) / 2 - 1px);
		left: calc(50% - 1px);
		width: calc(100% + var(--oai-process-gap));
		height: 2px;
	}

	.oai-site .oai-process__connector-fill {
		width: 0;
		height: 100%;
		transition: width 1300ms linear;
	}

	.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="0"] .oai-process__connector-fill,
	.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="1"] .oai-process__connector-fill,
	.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="2"] .oai-process__connector-fill {
		width: 100%;
		height: 100%;
	}

	.oai-site .oai-process__connector-fill::after {
		top: 50%;
		left: 0;
		margin-top: -8px;
		margin-left: -8px;
	}

	@keyframes oai-process-glow-x {
		0% {
			left: 0%;
			opacity: 0;
		}
		8% {
			opacity: 1;
		}
		85% {
			opacity: 1;
		}
		100% {
			left: 100%;
			opacity: 0;
		}
	}

	.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="0"] .oai-process__connector-fill::after {
		animation-name: oai-process-glow-x;
	}

	.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="1"] .oai-process__connector-fill::after {
		animation-name: oai-process-glow-x;
	}

	.oai-site .oai-process.is-animated .oai-process__step[data-oai-step="2"] .oai-process__connector-fill::after {
		animation-name: oai-process-glow-x;
	}
}

/* Zagęszczenie paddingów/typografii na mniejszych telefonach — bez zmiany
   rozmiaru punktu ani odstępu --oai-process-gap, żeby nie naruszyć geometrii osi */

@media (max-width: 430px) {
	.oai-site .oai-process {
		padding: 56px 20px;
	}

	.oai-site .oai-process__title {
		font-size: 1.75rem;
	}

	.oai-site .oai-process__intro {
		margin-bottom: 40px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-process {
		padding: 48px 16px;
	}

	.oai-site .oai-process__step-title {
		font-size: 1rem;
	}

	.oai-site .oai-process__step-desc {
		font-size: 14px;
	}
}