.zdd-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.zdd-hero .pform { align-items: center; }

.zdd-hero__tlo {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.zdd-hero__tlo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

/* Tekst leży po lewej: przyciemnienie 0,76 trzyma kontrast 4,5:1 nawet na białym świetle ze zdjęcia. */
.zdd-hero__tlo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top in oklab, var(--color-bg) 0%, oklch(0.145 0.006 270 / 0) 22%),
		linear-gradient(to right in oklab, oklch(0.145 0.006 270 / 0.8) 0%, oklch(0.145 0.006 270 / 0.76) 46%, oklch(0.145 0.006 270 / 0.3) 100%);
}

@media (max-width: 60rem) {
	/* Sekcja jest tu wysoka: zdjęcie tylko za tekstem, formularz już na jednolitym tle. */
	.zdd-hero__tlo {
		inset: 0 0 auto;
		height: 44rem;
	}

	.zdd-hero__tlo::after {
		background:
			linear-gradient(to top in oklab, var(--color-bg) 0%, oklch(0.145 0.006 270 / 0.78) 30%, oklch(0.145 0.006 270 / 0.78) 100%);
	}
}

.zdd-nad {
	margin: 0 0 var(--space-3);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-weight: 600;
}

.zdd-tytul {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.zdd-hero .section__lead { margin-top: var(--space-4); }
.zdd-lista { margin-top: var(--space-5); }

.zdd-panel-tytul {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 700;
}

.zdd-panel-opis {
	margin: var(--space-1) 0 var(--space-5);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

.zdd-kurs[hidden] { display: none; }
.zdd-razem { white-space: nowrap; }

.psteps.zdd-kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 44rem) {
	.psteps.zdd-kroki { grid-template-columns: minmax(0, 1fr); }
	.fcard.zdd-bez-ikony { grid-template-columns: minmax(0, 1fr); }
}

.zdd-wroc {
	margin: var(--space-6) 0 0;
	text-align: center;
}