/* DPI: Berufe-Slider — shared card look + slider layout (three data modes: manual, related, profile). */

.dpi-career-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 420px;
	padding: 20px 25px;
	background-color: var(--dpi-bg-dark);
	background-position: center;
	background-size: cover;
	color: var(--dpi-fg-on-dark);
	text-decoration: none;
	overflow: hidden;
}

/* Parent selector needed: Elementor Pro's carousel CSS sets swiper-slide a to display:inline at higher specificity. */
.swiper-slide .dpi-career-card {
	display: flex;
}

/* Gradient only makes sense over a photo; a colour-fallback card (.dpi-card--*) skips it. */
.dpi-career-card--image::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 80%);
	content: '';
	pointer-events: none;
}

/* !important throughout this block: a card's colour is decided at render time (image vs. rotated fallback), so it must win over any explicit colour an editor saved on this widget instance in the Style tab – those Elementor-generated per-instance rules otherwise outrank a plain class selector like this one. */
.dpi-career-card.dpi-card--orange {
	background-color: var(--dpi-orange) !important;
	color: var(--dpi-orange-fg) !important;
}

.dpi-career-card.dpi-card--blue {
	background-color: var(--dpi-blue) !important;
	color: var(--dpi-blue-fg) !important;
}

.dpi-career-card.dpi-card--lime {
	background-color: var(--dpi-lime) !important;
	color: var(--dpi-lime-fg) !important;
}

/* Hook/title default to orange text (readable on the black/photo background); on a colour-fallback card that would blend in or clash, so match the card's own foreground colour instead. */
.dpi-career-card.dpi-card--orange .dpi-career-card__hook,
.dpi-career-card.dpi-card--orange .dpi-career-card__title {
	color: var(--dpi-orange-fg) !important;
}

.dpi-career-card.dpi-card--blue .dpi-career-card__hook,
.dpi-career-card.dpi-card--blue .dpi-career-card__title {
	color: var(--dpi-blue-fg) !important;
}

.dpi-career-card.dpi-card--lime .dpi-career-card__hook,
.dpi-career-card.dpi-card--lime .dpi-career-card__title {
	color: var(--dpi-lime-fg) !important;
}

/* Switches the CTA to orange so it doesn't blend into a blue fallback card's own background. */
.dpi-career-card.dpi-card--blue .dpi-career-card__cta {
	background: var(--dpi-orange) !important;
	color: var(--dpi-orange-fg) !important;
}

/* .dpi-pill defaults to a blue background, so it blends into a blue fallback card too – switches to orange, same fix as the career grid's badge-on-blue-card rule. */
.dpi-career-card.dpi-card--blue .dpi-career-card__category {
	background: var(--dpi-orange) !important;
	color: var(--dpi-orange-fg) !important;
}

.dpi-career-card__category,
.dpi-career-card__badge,
.dpi-career-card__content {
	position: relative;
	z-index: 1;
}

.dpi-career-card__category {
	position: absolute;
	top: 18px;
	left: 24px;
	min-height: 22px;
	line-height: 22px;
}

.dpi-career-card__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 4px 10px;
	background: var(--dpi-lime);
	border-radius: 999px;
	color: var(--dpi-lime-fg);
	font-family: var(--dpi-font);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.dpi-career-card__content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dpi-career-card__hook {
	color: var(--dpi-orange);
	font-family: var(--dpi-font);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
}

.dpi-career-card__title {
	color: var(--dpi-orange);
	font-family: var(--dpi-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.dpi-career-card__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 18px;
	background: var(--dpi-blue);
	color: var(--dpi-blue-fg);
	font-family: var(--dpi-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
}

.dpi-career-card__cta-arrow {
	transition: transform 0.15s ease;
}

.dpi-career-card:hover .dpi-career-card__cta-arrow,
.dpi-career-card:focus-visible .dpi-career-card__cta-arrow {
	transform: translateX(3px);
}

.dpi-career-card:focus-visible {
	outline: 2px solid var(--dpi-lime);
	outline-offset: 2px;
}

.dpi-career-slider {
	position: relative;
}

.dpi-career-slider__swiper {
	overflow: hidden;
}

.dpi-career-slider__swiper .swiper-slide {
	height: auto;
}

/* Modifier only — base card look (background image, badge, hook, title, CTA) comes from .dpi-career-card above. */
.dpi-career-slider__card {
	aspect-ratio: 357 / 425;
}

.dpi-career-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY( -50% );
	display: inline-flex;
	border: 0;
	background: transparent;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
	user-select: none;
}

.dpi-career-slider__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Own display:inline-flex above ties with Swiper's .swiper-button-lock on specificity; this beats both so watchOverflow can actually hide the arrows. */
.dpi-career-slider__arrow.swiper-button-lock {
	display: none;
}

/* Fallback for --dpi-career-arrow-offset until Elementor's own CSS generates (stale per-post cache). */
.dpi-career-slider__arrow--prev {
	left: var( --dpi-career-arrow-offset, -60px );
}

.dpi-career-slider__arrow--next {
	right: var( --dpi-career-arrow-offset, -60px );
}

.dpi-career-slider__arrow--prev span {
	display: inline-block;
	transform: scaleX( -1 );
}

.dpi-career-slider__arrow.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}

@media ( max-width: 1300px ) {
	.dpi-career-slider__arrow--prev {
		left: -30px;
	}

	.dpi-career-slider__arrow--next {
		right: -30px;
	}
}

@media ( max-width: 1200px ) {
	.dpi-career-slider__swiper {
		margin: 0 20px;
	}

	.dpi-career-slider__card {
		width: 100%;
	}

	.dpi-career-slider__arrow--prev {
		left: 0;
	}

	.dpi-career-slider__arrow--next {
		right: 0;
	}
}