/**
 * Sekcja: hero.
 * Figma 14559:9481 — sekcja 1440×1309. Zdjęcie 14559:9810 = 1440×979 w y=-30.
 * Kadr od góry (center top) od 1200 px: klasa object-bottom z codegenu obcinała
 * ~83 px sufitu i podnosiła urządzenia pod nagłówek. 1240–1439: ten sam
 * kadr co przy 1440, szerokość 1440 dosunięta do prawej — inaczej cover
 * wciąga drukarkę pod „musiał.”. ≤1239: zdjęcie schodzi pod treść (Q-vg-02).
 * Treść od y=216 w kolumnie 749,
 * lead 456 w odstępie 50, akcje w odstępie 50 pod leadem.
 * Woal na zdjęciu: 180° fade + 131° scrim + radial (get_design_context 14559:9809).
 * Linie Union 1 px na y=104 i y=869. Kafle 14559:9522 — pięć sztuk 238×292
 * z odstępem 24, wjeżdżają 55 px na zdjęcie, dolna część sekcji jest granatowa.
 */

.home-hero {
	position: relative;
	background-color: var(--color-navy);
	padding-bottom: 123px;
}

.home-hero__stage {
	position: relative;
	min-height: 949px;
}

.home-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Warstwa 14559:9810: 1440×979, top -30. Asset zostaje w 2386×1760 —
   kadr jest CSS, nie downscale MCP 1024. Domyślnie center bottom (≤1199). */
.home-hero__bg-img {
	position: absolute;
	top: -30px;
	left: 0;
	width: 100%;
	height: calc(100% + 30px);
	object-fit: cover;
	object-position: center bottom;
}

/* ≥1200: góra dużej drukarki na linii „— żebyś Ty nie musiał.” */
@media (min-width: 1200px) {
	.home-hero__bg-img {
		object-position: center top;
	}
}

/* 1240–1439: kadr jak przy 1440 (box 1440×979, center top), prawa krawędź
   przy prawej krawędzi viewportu. max-width:none zdejmuje reset img 100%,
   inaczej szerokość wraca do szerokości stage i drukarka wjeżdża w tekst.
   Przy 1234 kropka „musiał.” dotyka obudowy. Od 1240 zostaje ≥7 px bieli,
   więc niżej zdjęcie jest blokiem pod treścią, nie tłem. */
@media (min-width: 1240px) and (max-width: 1439px) {
	.home-hero__bg-img {
		left: auto;
		right: 0;
		width: 1440px;
		max-width: none;
		object-position: center top;
	}
}

/* ≥1441: zdjęcie nie rośnie z viewportem — skala jak przy 1440, wyśrodkowane,
   boki gasną do bieli. Woal zostaje na pełnej szerokości. */
@media (min-width: 1441px) {
	.home-hero__bg {
		background-color: var(--color-white);
	}

	.home-hero__bg-img {
		left: 50%;
		width: 1440px;
		height: calc(100% + 30px);
		transform: translateX(-50%);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* Trzy warstwy z Figmy (pierwsza = wierzch): fade do bieli u dołu,
   skos 131° na tekście, radial 40% (środek przezroczysty, brzeg biały). */
.home-hero__veil {
	position: absolute;
	top: -30px;
	left: 0;
	width: 100%;
	height: calc(100% + 30px);
	pointer-events: none;
	background-image:
		linear-gradient(
			180deg,
			transparent 81.869%,
			var(--color-white) 100%
		),
		linear-gradient(
			131.09deg,
			color-mix(in srgb, var(--color-white) 80%, transparent) 27.438%,
			transparent 46.293%
		),
		radial-gradient(
			51.8% 95.7% at 60.1% 46.5%,
			transparent 0%,
			color-mix(in srgb, var(--color-white) 40%, transparent) 100%
		);
}

.home-hero__rule {
	position: absolute;
	inset-inline: 0;
	z-index: 1;
	height: 1px;
	pointer-events: none;
	background-color: color-mix(in srgb, var(--color-white) 40%, transparent);
}

.home-hero__rule--top {
	top: 104px;
}

.home-hero__rule--bottom {
	top: 869px;
}

.home-hero__inner {
	position: relative;
	max-width: 749px;
	padding-top: 216px;
}

.home-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--color-ink);
}

.home-hero__lead {
	max-width: 456px;
	margin: 50px 0 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-ink);
}

.home-hero__actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-top: 50px;
}

/* --- kafle usług --- */

.home-hero__tiles {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: start;
	gap: var(--space-md);
	margin: -55px 0 0;
	padding: 0;
	list-style: none;
}

.home-hero__tile,
.home-hero__tile .card-service {
	height: 292px;
	max-height: 292px;
	min-height: 0;
}

.home-hero__tile {
	display: flex;
}

.home-hero__tile > * {
	flex: 1 1 auto;
}

@media (max-width: 1199px) {
	.home-hero__stage {
		min-height: 0;
		padding-bottom: 80px;
	}

	.home-hero__bg-img,
	.home-hero__veil {
		top: 0;
		height: 100%;
	}

	.home-hero__rule--bottom {
		display: none;
	}

	.home-hero__inner {
		padding-top: 200px;
	}

	.home-hero__tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: var(--space-lg);
	}

	.home-hero__tile,
	.home-hero__tile .card-service {
		height: auto;
		min-height: 292px;
	}
}

@media (max-width: 767px) {
	.home-hero__actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.home-hero__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ≤1239: zdjęcie nie jest tłem. Ten sam <img> schodzi pod tytuł, lead i CTA
   (order), na pełną szerokość, kadr na urządzenia z kadru desktopowego.
   Tekst na bieli, bez woalu. Pad-top 212 czyści header ~188 px (pigułka
   nawigacji w drugim rzędzie, 768–1199) i jednorzędowy header ~106 px
   (1200–1239); na ≤767 jest 140 px pod header ~106 px. */
@media (max-width: 1239px) {
	.home-hero__stage {
		display: flex;
		flex-direction: column;
		padding-bottom: 0;
		background-color: var(--color-white);
	}

	.home-hero__stage > * {
		min-width: 0;
	}

	.home-hero__bg {
		position: relative;
		inset: auto;
		order: 2;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.home-hero__bg-img {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: none;
		object-position: 58% 62%;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.home-hero__veil,
	.home-hero__rule {
		display: none;
	}

	.home-hero__inner {
		/* 212 czyści zawinięty header (~188 px) od 768 do 1199. Na ≤767 schodzi do 140 — patrz niżej. */
		padding-top: 212px;
		padding-bottom: 32px;
	}

	/* Kafle zostają pod zdjęciem (są za stage), bez wjazdu -55 px. */
	.home-hero__tiles {
		margin-top: var(--space-lg);
	}
}

/* ≤767: header ma ~106 px. 140 = spód headera + oddech, jak na pozostałych hero.
   240 px było po to, żeby tekst uciekł znad drukarki w tle — tła już nie ma. */
@media (max-width: 767px) {
	.home-hero__inner {
		padding-top: 140px;
	}
}