/**
 * Moduł: pas CTA.
 * Figma 14557:2354 — karta 1128×310, padding 20, obraz 444×270 po lewej,
 * blok treści 377 px w odstępie 35 px od obrazu, tytuł na wysokości 111 px wnętrza,
 * chip 200×30 przy dolnej krawędzi wnętrza, przycisk w prawym dolnym narożniku.
 */

.cta-band {
	position: relative;
	display: grid;
	grid-template-columns: 444px minmax(0, 1fr);
	gap: var(--cta-band-gap, 35px);
	min-height: 310px;
	padding: 20px;
	border-radius: var(--radius-md);
}

/* Pas bez zdjęcia (brak eksportu z Figmy albo redaktor nie wstawił) nie ma zostać
   ściśnięty do lewej kolumny 444 px — treść bierze wtedy całą kartę. */
.cta-band:not(:has(.cta-band__media)) {
	grid-template-columns: minmax(0, 1fr);
}

.cta-band--dark {
	background-color: var(--color-navy);
	color: var(--color-white);
}

.cta-band--light {
	background-color: var(--color-surface-soft);
	color: var(--color-ink);
}

/* Domyślne `auto` zostawia wysokość obrazu proporcjom pliku. Sekcja, która ma w makiecie
   sztywny kadr (listing usług: 444×270), ustawia pokrętło i dopiero wtedy `height: 100%`
   na <img> ma się do czego odnieść. */
.cta-band__media {
	overflow: hidden;
	height: var(--cta-band-media-h, auto);
	border-radius: var(--radius-sm);
}

.cta-band__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 270px;
	object-fit: cover;
}

/* Blok treści ma w makiecie 377 px, a tytuł „Dołącz do zespołu SIETOM” zajmuje w Geist
   377,6 px — przy równych 377 łamałby się o pół piksela, dlatego 378. */
.cta-band__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: var(--cta-band-body-width, 378px);
	padding-block: var(--cta-band-body-pad, var(--space-lg));
}

.cta-band__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 400;
	line-height: var(--lh-h4);
	letter-spacing: var(--ls-heading);
}

/* Rozmiar opisu zależy od sekcji (home: body-sm, listing usług: body-lg 20/28),
   więc moduł deklaruje domyślną wartość i zostawia sekcji pokrętło. */
.cta-band__text {
	margin: var(--cta-band-text-gap, var(--space-sm)) 0 0;
	font-size: var(--cta-band-text-size, var(--fs-body-sm));
	line-height: var(--cta-band-text-line, var(--lh-body));
}

.cta-band__chip {
	margin: auto 0 0;
	align-self: flex-start;
	padding: 3px 11px;
	border: 1px solid var(--color-primary-bright);
	border-radius: var(--radius-pill);
	font-size: var(--fs-body-sm);
	line-height: 24px;
	color: var(--color-primary-bright);
}

.cta-band__action {
	position: absolute;
	right: 20px;
	bottom: 20px;
}

/* Wariant z chipem na home (14557:2352): tytuł na środku wysokości panelu, chip u dołu.
   Tylko .home-career-cta — pozostałe pasy (uslugi-cta, kariera-cta, cases-cta) bez zmian. */
.home-career-cta .cta-band__body {
	position: relative;
	justify-content: center;
	min-height: 270px;
}

.home-career-cta .cta-band__chip {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
}

@media (max-width: 991px) {
	.cta-band {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.cta-band__body {
		max-width: none;
		padding-block: 0;
	}

	.cta-band__chip {
		margin-top: var(--space-md);
	}

	.home-career-cta .cta-band__body {
		min-height: 0;
	}

	.home-career-cta .cta-band__chip {
		position: static;
	}

	.cta-band__action {
		position: static;
		margin-top: var(--space-md);
	}
}