/* ============================================================
   Blaek Jobs Slider — Card & Slider Styles
   Design reference: screenshot shows 4-up white cards with
   chevron bullet, department label, job title, meta row,
   start date, and an apply CTA link at the bottom.
   ============================================================ */

/* ── Header (title left · button right) ─────────────────── */
.blaek-jobs-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.blaek-jobs-header__title {
	margin: 0;
}

.blaek-jobs-header__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	text-decoration: none;
	transition: color 200ms ease;
}

.blaek-jobs-header__btn-icon {
	display: inline-flex;
	align-items: center;
}

.blaek-jobs-header__btn-text {
	position: relative;
	bottom: -2px;
}

.blaek-jobs-header__btn--nav {
	display: none;
}

/* ── Slider wrapper ──────────────────────────────────────── */
.blaek-jobs-slider {
	position: relative;
	overflow: hidden;
}

.blaek-jobs-slider--full-width .blaek-jobs-swiper {
	overflow: visible;
}

.blaek-jobs-slider--full-width.blaek-jobs-slider--clip-left .blaek-jobs-swiper {
	/* Clip only the slider viewport at the left edge so cards don't overlap adjacent content. */
	-webkit-clip-path: inset(0 -9999px 0 0);
	clip-path: inset(0 -9999px 0 0);
}

/* Elementor widget container must be overflow-visible when
   full-width is on, so slides can bleed into adjacent columns. */
.elementor-element.elementor-widget-blaek-jobs-slider .elementor-widget-container {
	overflow: hidden !important;
}

.elementor-element:has(.elementor-element .elementor-widget-blaek-jobs-slider .blaek-jobs-slider--full-width) {
	overflow: hidden !important;
}

/* ── Full page width breakout ────────────────────────────── */
/* The breakout is applied to .elementor-widget-blaek-jobs-slider, so its
   parent column/container must not clip it. */
/* .elementor-column:has(.blaek-jobs-slider--page-width),
.e-con:has(.blaek-jobs-slider--page-width),
.elementor-section:has(.blaek-jobs-slider--page-width) {
	overflow: hidden !important;
} */

/* The widget element and its inner container must also stay overflow-visible
   so the inner content is not clipped. */
.elementor-widget-blaek-jobs-slider:has(.blaek-jobs-slider--page-width),
.elementor-widget-blaek-jobs-slider:has(.blaek-jobs-slider--page-width) > .elementor-widget-container {
	overflow: visible !important;
}

/* JS sets width + margin-left on .elementor-widget-blaek-jobs-slider */
.blaek-jobs-slider--page-width {
	box-sizing: border-box;
}

/* Inner wrapper: constrains content to --content-width inside the full-vw breakout */
.blaek-jobs-inner {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
}

.blaek-jobs-slide {
	height: auto; /* Swiper: stretch slides to equal height via align-items:stretch */
}

/* ── Card ───────────────────────────────────────────────── */
.blaek-jobs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: background-color 240ms ease, box-shadow 240ms ease;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

/* ── Card body ──────────────────────────────────────────── */
.blaek-jobs-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 240px;
	padding: 32px 40px 32px 28px;
}

/* ── Job title with chevron bullet ─────────────────────── */
.blaek-jobs-card__title {
	margin: 0 0 20px;
	color: #14466e;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Chevron bullet */
.blaek-jobs-card__chevron {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 0.3em;
}

/* ── Meta info wrap ─────────────────────────────────────── */
.blaek-jobs-card__meta-wrap {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-left: 12px;
}

/* ── Single meta line ───────────────────────────────────── */
.blaek-jobs-card__meta {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #3d4552;
	font-weight: 400;
}

.blaek-jobs-card__meta--date {
	color: #50575e;
}

/* ── Navigation arrows ──────────────────────────────────── */
.blaek-jobs-nav {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
}

.blaek-jobs-nav__controls {
	display: flex;
	flex-direction: row;
	align-items: center;
	background: transparent;
	border-radius: 30px;
	padding: 20px 24px;
	gap: 32px;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.blaek-jobs-nav__btn {
	width: auto;
	height: auto;
	padding: 0;
	color: #111827;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 0;
	background: transparent;
}

.blaek-jobs-nav__btn svg {
	width: 10px;
	height: 20px;
}

/* Previous arrow: flip the SVG chevron */
.blaek-jobs-nav__btn.blaek-jobs-prev {
	transform: rotate(180deg);
}

.blaek-jobs-nav__btn:hover,
.blaek-jobs-nav__btn:focus {
	background: transparent;
}

.blaek-jobs-nav__btn.swiper-button-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* ── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 1024px) {
	.blaek-jobs-card__title {
		font-size: 14px;
	}

	.blaek-jobs-header__btn--desktop {
		display: none;
	}

	.blaek-jobs-header__btn--nav {
		display: inline-flex;
	}

	.blaek-jobs-header--button-only {
		display: none;
		margin-bottom: 0;
	}

	.blaek-jobs-nav {
		justify-content: space-between;
		align-items: center;
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.blaek-jobs-card__body {
		padding: 20px 20px 14px;
	}

	.blaek-jobs-card__title {
		font-size: 14px;
	}
}

/* ── Equal-height Swiper slides ─────────────────────────── */
.blaek-jobs-swiper .swiper-wrapper {
	align-items: stretch;
}

.blaek-jobs-swiper .swiper-slide {
	height: auto;
}