/**
 * Strona „How we work” — layout + szyna scrolla (wypełnianie kolorem).
 *
 * Szyna: segmenty SVG na sekcję (ścieżki jak mockup how_we_work_27.html): szary path +
 * pomarańczowy path przycinany przez clipPath + rect — wysokość rect proporcjonalna do
 * postępu scrolla (JS w `assets/js/how-we-work-scroll.js`).
 */

.how-we-work-layout {
	--kfb-hww-scroll: 0;
	display: block;
	min-height: 320vh;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.how-we-work-layout {
		min-height: 260vh;
	}
}

.how-we-work-layout__main {
	position: relative;
	min-width: 0;
	width: 100%;
}

.how-we-work-layout__rail {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 68px;
	transform: translateX(-50%);
	align-self: unset;
	flex: unset;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

/* Treść strony ponad pionową szyną (maską); niżej niż pierścień startu, żeby dekor był widoczny na herosie. */
.how-we-work-layout__main > article {
	position: relative;
	z-index: 1;
}

/* Desktop (≥1025): pierścień absolutny na layout — podniesiony top (kfbs-112), bez wpływu na mobile. */
@media (min-width: 1025px) {
	.how-we-work-layout__rail-start {
		position: absolute;
		left: 50%;
		top: 280px;
		width: 215px;
		height: 355px;
		margin: 0;
		transform: translateX(-50%);
		pointer-events: none;
		z-index: 2;
	}

	.how-we-work-layout__rail-start-shape {
		display: block;
		width: 215px;
		height: 355px;
		color: var(--color-orange-400, #ee5017);
	}

	.how-we-work-layout__rail-start-label {
		position: absolute;
		left: 50%;
		top: 30.28%;
		box-sizing: border-box;
		width: 155px;
		margin: 0;
		padding: 0 6px;
		transform: translate(-50%, -50%);
		font-family: var(--font-heading);
		font-size: 14px;
		font-weight: var(--font-weight-regular);
		line-height: 1.3;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--color-labs-black, #050505);
		white-space: pre-line;
	}
}

@media (min-width: 1280px) {
	.how-we-work-layout__rail-start {
		top: 358px;
	}
}

.how-we-work-rail--svg-mount {
	position: absolute;
	inset: 0;
	min-height: 100%;
	pointer-events: none;
}

.kfb-hww-spine {
	position: absolute;
	left: 0;
	width: 100%;
	pointer-events: none;
	box-sizing: border-box;
}

.kfb-hww-spine-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.kfb-hww-spine-fill {
	fill: var(--color-orange-400, #ee5017);
}

/*
 * Rozmiary etapów jak mockup how_we_work_27.html:
 * `.stage { min-height: 600px }`, `.stage-left` / `.stage-right { padding: 60px 0 }`,
 * brak dodatkowej przerwy między etapami odsyłamy do zera (`image-text-split` ma globalnie margin-block 80px).
 * Szyna w JS zakłada wysokość = prostokąt sekcji, więc sekcje muszą przylegać jak w prototypie.
 */
.how-we-work-page__content > section.image-text-split {
	margin-block: 0;
}

/* Desktop tokens dopiero od 1025px — poniżej działa wspólny układ mobile/tablet (≤1024). */
@media (min-width: 1025px) {
	.how-we-work-page__content > section.image-text-split {
		--image-text-split-section-pad-y: 60px;
		--image-text-split-section-min-h: 600px;
	}
}

.how-we-work-page__content > section.cta-block {
	margin-block-start: 0;
}

@media (min-width: 1025px) {
	.how-we-work-page__content > section.cta-block {
		min-height: 700px;
	}
}

/* Placeholder wysokości treści, dopóki nie ma sekcji z Figmy */
.how-we-work-page__content {
	min-height: 280vh;
}

@media (max-width: 640px) {
	.how-we-work-layout {
		min-height: 260vh;
	}

	.how-we-work-page__content {
		min-height: 220vh;
	}
}

/* --- Mobile + tablet (≤1024px) — wspólny layout: intro w hero, szyna po lewej.
   Powyżej 1024 desktop (pierścień absolutny w środku, szyna centrowana). --- */
@media (max-width: 1024px) {
	/* Padding sekcji (24px), nie globalny entry-content (16px ze style.css) — intro musi się wyrównać z szyną. */
	.site-main .site-container .entry-content.how-we-work-page__content {
		--entry-content-pad-x: 0px;
		padding: 0;
	}

	.how-we-work-layout__rail {
		/* Figma: szyna 24px od krawędzi karty (site-main ma inset 8px → 16px od layoutu). */
		left: 16px;
		width: 68px;
		transform: none;
		overflow: visible;
	}

	.how-we-work-rail--svg-mount {
		overflow: visible;
	}

	.how-we-work-layout__rail-start {
		display: none;
	}

	/* Blok WP owija sekcję w `.wp-block-kfb-s-how-we-work-hero` — bez `>` w selektorze. */
	.how-we-work-page__content .how-we-work-hero {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin-bottom: 0;
		overflow: visible;
		background: transparent;
	}

	.how-we-work-page__content .how-we-work-hero__main {
		background: #fff;
		border-radius: 24px 24px 0 0;
	}

	/*
	 * Intro 400×390 (viewBox): trzon kończy przy x=58 — stały box + -8px (site-main inset),
	 * bez max-width:100% (skalowanie rozjeżdżało dół trzonu względem szyny na wąskich ekranach).
	 */
	.how-we-work-page__content .how-we-work-hero__rail-start {
		display: block;
		position: relative;
		z-index: 2;
		flex-shrink: 0;
		box-sizing: border-box;
		width: 400px;
		height: 390px;
		margin: 38px 0 0 -8px;
	}

	/* Bez przerwy między hero a pierwszym krokiem (wp-block / .kfb-entrance). */
	.how-we-work-page__content > :is(
			.wp-block-kfb-s-how-we-work-hero,
			.kfb-entrance:has(.how-we-work-hero)
		) {
		margin-block-end: 0;
	}

	.how-we-work-page__content
		> :is(
			.wp-block-kfb-s-how-we-work-hero,
			.kfb-entrance:has(.how-we-work-hero)
		)
		+ :is(
			.wp-block-kfb-s-image-text-split,
			.kfb-entrance:has(.image-text-split),
			section.image-text-split
		) {
		margin-block-start: 0;
	}

	.how-we-work-hero__rail-start-shape {
		display: block;
		width: 400px;
		height: 390px;
		color: var(--color-orange-400, #ee5017);
	}

	/* Figma 1774:5118 — środek pierścienia (200×86 w viewBox 400×390) */
	.how-we-work-hero__rail-start-label {
		position: absolute;
		left: 200px;
		top: 86px;
		box-sizing: border-box;
		width: 110px;
		margin: 0;
		padding: 0;
		transform: translate(-50%, -50%);
		font-family: var(--font-sans);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-xs);
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 0;
		color: var(--color-labs-black, #050505);
		white-space: pre-line;
	}

	.how-we-work-page__content > section.image-text-split {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
		padding: 0 24px;
		box-sizing: border-box;
	}

	.how-we-work-page__content > section.image-text-split::before {
		content: "";
		display: block;
		flex: 0 0 68px;
		width: 68px;
		min-height: 1px;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__inner {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		max-width: none;
		gap: 24px;
		margin: 48px 0;
	}

	.how-we-work-page__content > section.image-text-split:first-of-type .image-text-split__inner {
		margin-top: 24px;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__text {
		order: 1;
		display: flex;
		flex-direction: column;
		gap: 12px;
		max-width: none;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__media {
		order: 2;
		width: 100%;
		max-width: 100%;
		align-self: stretch;
		aspect-ratio: 300 / 200;
		height: auto;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__media--dual,
	.how-we-work-page__content > section.image-text-split .image-text-split__media--slider,
	.how-we-work-page__content > section.image-text-split .image-text-split__media--video {
		aspect-ratio: auto;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__media--audio {
		aspect-ratio: auto;
		height: auto;
		align-self: flex-start;
		max-width: min(100%, 200px);
		border-radius: 13px;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__heading,
	.how-we-work-page__content > section.image-text-split .image-text-split__title,
	.how-we-work-page__content > section.image-text-split .image-text-split__description {
		margin: 0;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__heading {
		font-size: var(--font-size-xs);
		line-height: var(--line-height-xs);
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__title {
		font-size: var(--font-size-4xl);
		line-height: var(--line-height-4xl);
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__description {
		font-size: var(--font-size-md);
		line-height: var(--line-height-md);
	}

	/* Pojedyncze zdjęcie — proporcja 300×200 z Figmy */
	.how-we-work-page__content > section.image-text-split .image-text-split__media:not(.image-text-split__media--slider):not(.image-text-split__media--dual):not(.image-text-split__media--audio):not(.image-text-split__media--video) {
		border-radius: 15px;
	}

	/* Dual — kolumna, gap 16px */
	.how-we-work-page__content > section.image-text-split .image-text-split__media--dual {
		aspect-ratio: auto;
		height: auto;
		overflow: visible;
		border-radius: 0;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__dual-collage {
		position: static;
		transform: none;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__dual-frame {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 486 / 324;
		border-radius: 16px;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__dual-frame--secondary {
		width: min(196px, 100%);
		aspect-ratio: 196 / 124;
		align-self: flex-start;
	}

	/* Audio — kompaktowy player, bez pełnej fali w tle */
	.how-we-work-page__content > section.image-text-split.image-text-split--has-audio {
		width: auto;
		max-width: none;
		margin-inline: 0;
		padding-inline: 24px;
		overflow: visible;
	}

	.how-we-work-page__content > section.image-text-split.image-text-split--has-audio > .image-text-split__audio-wave-theme {
		display: none;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__audio {
		padding: 10px 12px;
		gap: 10px;
		border-radius: 13px;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__audio-play {
		width: 22px;
		height: 22px;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__audio-play .image-text-split__audio-icon-svg {
		width: 22px;
		height: 22px;
	}

	.how-we-work-page__content > section.image-text-split .image-text-split__audio-time {
		font-size: var(--font-size-xs);
		line-height: var(--line-height-xs);
		min-width: 4ch;
	}

	/* Slider — strzałki wyrównane do prawej */
	.how-we-work-page__content > section.image-text-split .image-text-split__slider-nav {
		align-self: flex-end;
	}

	/* Ostatni krok — węższa kolumna treści (Figma Quote 5) */
	.how-we-work-page__content > section.image-text-split:not(:has(+ section.image-text-split)) .image-text-split__inner {
		margin-left: auto;
	}

	/* CTA na dole strony */
	.how-we-work-page__content > section.cta-block {
		padding: 8px;
	}

	.how-we-work-page__content > section.cta-block .cta-block__inner {
		gap: 24px;
		padding: 32px 0;
	}

	.how-we-work-page__content > section.cta-block .cta-block__lead {
		gap: 8px;
	}

	.how-we-work-page__content > section.cta-block .cta-block__eyebrow {
		font-size: var(--font-size-xs);
		line-height: var(--line-height-xs);
		color: var(--color-orange-400);
	}

	.how-we-work-page__content > section.cta-block .cta-block__heading {
		font-size: var(--font-size-4xl);
		line-height: var(--line-height-4xl);
	}

}