/* ============================================================
   Agru-Frank — Sekcja "Współpraca" (home) — Phase 3 / home-rhythm (03-R1)
   Oś procesu 01→03: numerowane węzły na poziomej linii (desktop) / kolumna (mobile).
   Zamiast 3 pełnych niebieskich kart. Tło białe, niebieski oszczędnie. Tokeny z base.css.
   ⚠ Typografia headline TYMCZASOWA — retype po Księdze znaku.
   ============================================================ */

.collaboration {
	overflow-x: clip;   /* zabezpieczenie przed poziomym scrollem od full-bleed viewportu (mobile carousel) */
}

/* --- Nagłówek sekcji: .section-head w utilities.css --- */
/* Wyjatek od sitewide 16 (utilities.css) — .collaboration__process ma WLASNY rytm
   gap:32 miedzy krokami; header->tresc na 16 wygladal "nierowno" obok wiekszego
   odstepu miedzy krokami (user 2026-07-24). Dopasowane do wlasnego rytmu sekcji. */
.collaboration .section-head {
	margin-bottom: var(--space-32);
}

/* --- Oś procesu --- */
.collaboration__process {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-32);
}
.collaboration__step {
	text-align: center;
}
.collaboration__num {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--space-24);
	background: var(--bg-page);
	box-shadow: var(--shadow-mega);
	font-family: var(--font-mono);
	font-size: var(--text-h4);
	font-weight: 600;
	line-height: 1;
	color: var(--blue);
}
/* brandowe krzyżyki narożne (technika z .u-image) zamiast pełnej ramki */
.collaboration__num::before {
	content: "";
	position: absolute;
	inset: calc(var(--space-8) / -2);
	pointer-events: none;
	background:
		linear-gradient(var(--blue), var(--blue)) left var(--space-4) top 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) left 0 top var(--space-4) / var(--space-8) 1px no-repeat,
		linear-gradient(var(--blue), var(--blue)) right var(--space-4) top 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) right 0 top var(--space-4) / var(--space-8) 1px no-repeat,
		linear-gradient(var(--blue), var(--blue)) left var(--space-4) bottom 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) left 0 bottom var(--space-4) / var(--space-8) 1px no-repeat,
		linear-gradient(var(--blue), var(--blue)) right var(--space-4) bottom 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) right 0 bottom var(--space-4) / var(--space-8) 1px no-repeat;
}
/* .collaboration__title: typografia z .u-card-title (utilities.css); selektor tu zostaje żywy — grid-area mobile niżej */
/* opis: .u-desc.u-desc--faint w utilities.css */

/* --- Mobile: num+title w jednym wierszu (num lewo, title prawo od lewej), opis pod spodem
   pelna szerokoscia. .collaboration__step ma 3 dzieci (num/title/opis) — grid+template-areas
   zamiast flex, bo flex na calosci wciagalby tez opis w ten sam wiersz (bug znaleziony 2026-07-16).
   align-items:START (nie center) — num+title dosuniete do gory wiersza, wiec heading stoi na
   rownej linii miedzy kartami carousela niezaleznie od dlugosci tytulu (user 2026-07-24). --- */
@media (max-width: 767.98px) {
	.collaboration__step {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas: "num title" "desc desc";
		column-gap: var(--space-16);
		row-gap: var(--space-16);
		align-items: start;
		align-content: start;   /* wiersze do gory — desc nie spada gdy stretchowana karta (rowna wysokosc) ma krotszy desc; nadmiar wysokosci na dol (user 2026-07-24) */
		text-align: left;
	}
	.collaboration__num {
		grid-area: num;
		margin: 0;
		font-size: 28px; /* css-lint-ok: zaden token nie daje plaskiego 28 na calym zakresie mobile — h2 floor=28 (rosnie w gore), h3 ceiling=28 (rosnie do niego od dolu); user 2026-07-16 chcial konkretna wartosc */
	}
	.collaboration__title {
		grid-area: title;
		margin: 0;
	}
	.collaboration__step .u-desc {
		grid-area: desc;
	}
}

/* Mobile peek-carousel (Embla) — bez JS fallback = stacked grid wyzej.
   Mechanizm 1:1 z news.css/realizations.css: full-bleed viewport, gutter
   symetryczny 16px pierwsza/ostatnia karta (align:start + trimSnaps). */
@media (max-width: 767.98px) {
	.collaboration__viewport.is-embla {
		overflow: hidden;
		padding-block: var(--space-8);   /* zapas na overshoot krzyzykow num (inset -4px) */
		padding-left: var(--container-pad);   /* gutter — na overflow:hidden viewport, nie na tracku (trimSnaps/align:start
			liczy wzgledem content-box tracku, translate3d kompensowalby padding tam ustawiony) */
		width: calc(100% + 2 * var(--container-pad));
		margin-inline-start: calc(-1 * var(--container-pad));
		cursor: grab;
	}
	.collaboration__viewport.is-embla.is-dragging {
		cursor: grabbing;
		user-select: none;
	}
	.collaboration__viewport.is-embla .collaboration__process {
		display: flex;
		align-items: stretch;   /* rowna wysokosc krokow w wierszu */
		gap: 0;   /* bazowy gap:32 dziala tez we flex, dubluje sie z margin-right nizej */
	}
	.collaboration__viewport.is-embla .collaboration__step {
		flex: 0 0 84%;
		min-width: 0;
		margin-right: var(--space-24);
	}
	.collaboration__viewport.is-embla .collaboration__step:last-child {
		margin-right: var(--container-pad);   /* gutter symetryczny z lewym (16px), nie 0 (flush) ani 24 (bazowy odstep) */
	}
}

/* --- Desktop: 3 kolumny + pozioma linia łącząca węzły --- */
@media (min-width: 768px) {
	.collaboration__process {
		position: relative;
		grid-template-columns: repeat(3, 1fr);
	}
	/* linia za węzłami — środek 1. kolumny → środek 3. kolumny */
	.collaboration__process::before {
		content: "";
		position: absolute;
		top: 27px;                 /* ~połowa węzła (56/2) */
		left: 16.66%;
		right: 16.66%;
		height: 2px;
		background: color-mix(in srgb, var(--graphite) 15%, var(--white));
		z-index: 0;
	}
	.collaboration__step {
		position: relative;
		z-index: 1;                /* węzeł (białe tło) nad linią */
	}
}