/* ==========================================================================
   Blok 1 · Hero — maket 94:579 (1440 × 1096, pozadí #F2B705)
   Souřadnice z maketu: obsah 60 / 204, formulář 900 / 204 (480 × 566),
   jeřáb 524 / 560 (370 × 532), silueta 0 / 846 (1440 × 250),
   vodoznak KWORK 892 / 607 (Oswald Bold 200, ls −4, #DFA904).
   ========================================================================== */

.bx-hero {
	position: relative;
	background: var(--bx-yellow);
	overflow: hidden;
	/* Celá výška bloku z maketu i s hlavičkou, která leží nad ním. */
	min-height: 1096px;
	margin-top: calc(var(--bx-header-h) * -1);
	padding-top: var(--bx-header-h);
}

.bx-hero__inner {
	position: relative;
	z-index: 3;
	max-width: var(--bx-page);
	margin-inline: auto;
	padding: 104px var(--bx-gutter) 0;
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

/* --- Levý sloupec ---------------------------------------------------------- */
.bx-hero__content {
	flex: 0 0 428px;
	width: 428px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bx-hero__badge {
	background: var(--bx-ink);
	color: var(--bx-cream);
	padding: 10px 18px 10px 16px;
	margin-bottom: 40px;
}

.bx-hero__title { color: var(--bx-ink); }
.bx-hero__line { display: block; }

/* --- Formulář -------------------------------------------------------------- */
.bx-hero__form {
	flex: 0 0 480px;
	width: 480px;
	margin-left: auto;
	background: var(--bx-cream);
	padding: 32px 34px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bx-hero__form-title { color: var(--bx-ink); }
.bx-hero__form-text {
	margin-top: 10px;
	color: var(--bx-default);
	max-width: 412px;
}
.bx-hero__form .bx-form { margin-top: 22px; width: 100%; }

/* --- Kresby ---------------------------------------------------------------- */
.bx-hero__watermark {
	position: absolute;
	left: 50%;
	margin-left: 172px;   /* 892 − 720 */
	top: 707px;           /* 607 + 100 (hlavička je nad blokem) */
	z-index: 1;
	font-family: var(--bx-font-head);
	font-weight: 700;
	font-size: 200px;
	line-height: 1;
	letter-spacing: -4px;
	color: #dfa904;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.bx-hero__crane {
	position: absolute;
	left: 50%;
	/* 524 − 720 (střed maketu) */
	margin-left: -196px;
	/* 1096 − 560 − 532 = 4 px nad spodní hranou bloku */
	bottom: 4px;
	width: 370px;
	z-index: 1;
	pointer-events: none;
}

.bx-hero__crane svg,
.bx-hero__crane-svg { width: 100%; height: auto; display: block; }

.bx-hero__art {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
}

.bx-hero__art svg,
.bx-hero__art-svg {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Adaptiv --------------------------------------------------------------- */
@media (max-width: 1320px) {
	.bx-hero__content { flex-basis: 400px; width: 400px; }
	.bx-hero__form { flex-basis: 440px; width: 440px; }
	.bx-hero__watermark { font-size: 160px; margin-left: 100px; }
	.bx-hero__crane { width: 300px; margin-left: -150px; }
}

@media (max-width: 1100px) {
	.bx-hero { min-height: 0; }
	.bx-hero__inner { padding-top: 72px; padding-bottom: 260px; gap: 32px; }
	.bx-hero__content { flex: 1 1 auto; width: auto; }
	.bx-hero__form { flex: 0 0 420px; width: 420px; }
	.bx-hero__watermark { display: none; }
	.bx-hero__crane { width: 220px; left: auto; right: 4%; margin-left: 0; }
}

@media (max-width: 900px) {
	.bx-hero__inner { flex-direction: column; padding-bottom: 220px; }
	.bx-hero__content { width: 100%; }
	.bx-hero__form { flex: 1 1 auto; width: 100%; margin-left: 0; padding: 26px 22px; }
	.bx-hero__badge { margin-bottom: 28px; }
}

@media (max-width: 600px) {
	.bx-hero__inner { padding-top: 44px; padding-bottom: 150px; }
	.bx-hero__crane { width: 140px; }
	.bx-hero__badge {
		padding: 9px 14px;
		white-space: normal;
	}
}