/*
 * Career CTA strips — Figma "No Vacancies Banner" (438:3098) and
 * "Internship" (438:3073). Same card, two colourways.
 */

.career-strip { padding-block: 30px; }

.career-strip__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	padding: 32px 24px 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.career-strip--light .career-strip__card { background: var(--color-white); }
.career-strip--muted .career-strip__card { background: var(--color-neutral-1); }

.career-strip__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.career-strip__text {
	display: flex;
	flex-direction: column;
	gap: 19px;
}

.career-strip__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: var(--h3-weight);
	line-height: var(--h3-lh);
}

.career-strip__desc {
	margin: 0;
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

.career-strip--light .career-strip__title { color: var(--color-primary); }
.career-strip--light .career-strip__desc  { color: var(--color-neutral-1); }
.career-strip--muted .career-strip__title { color: var(--color-white); }
.career-strip--muted .career-strip__desc  { color: var(--color-neutral-4); }

/*
 * The photos are cut-outs cropped to the Figma slot (522x323 and 597x323), so
 * they keep their own ratio and sit on the card's floor.
 */
.career-strip__image {
	display: block;
	align-self: center;
	width: 100%;
	max-width: 522px;
	height: auto;
}

/* The hand runs off the card's right edge, as on desktop. */
.career-strip--muted .career-strip__image {
	align-self: flex-end;
	width: calc(100% + 24px);
	max-width: 597px;
	margin-right: -24px;
}

@media (max-width: 767px) {
	.career-strip .btn { align-self: stretch; }
}

@media (min-width: 1024px) {
	.career-strip { padding-block: 50px; }

	/* Figma: 42px in from the left, 144px between copy and photo, 323px tall. */
	.career-strip__card {
		flex-direction: row;
		align-items: center;
		gap: 40px;
		min-height: 323px;
		padding: 0 75px 0 42px;
	}

	.career-strip__content { flex: 0 1 557px; }

	.career-strip__title { font-size: var(--h3-size); }

	/* Figma sets this headline 521px wide, so it breaks after "nehledáme,". */
	.career-strip--light .career-strip__title { max-width: 521px; }

	.career-strip__image {
		flex: 0 1 522px;
		align-self: flex-end;
		width: auto;
		min-width: 0;
		margin-left: auto;
	}

	/* The internship photo is wider and runs off the card's right edge. */
	.career-strip--muted .career-strip__card { padding-right: 0; }
	.career-strip--muted .career-strip__image { flex-basis: 597px; }
}