/*
 * Split from components.css. Selectors unchanged.
 * Careers page.
 */

/* ---------- Careers ---------- */

.wpx-careers {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--c-text);
	background-color: var(--c-white);
}

.wpx-careers.has-bg::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--wpx-careers-bg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.28;
	content: '';
	pointer-events: none;
}

.wpx-careers > .wpx-container {
	position: relative;
	z-index: 1;
}

.wpx-careers__grid {
	display: grid;
	gap: var(--sp-8);
	align-items: start;
}

.wpx-careers__title {
	margin: 0 0 var(--sp-4);
	color: rgb(30 34 36 / 42%);
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: var(--lh-tight);
}

.wpx-careers__intro p,
.wpx-careers__empty {
	margin: 0;
	max-width: 36rem;
	line-height: var(--lh-body);
}

.wpx-careers__empty {
	font-style: italic;
}

.wpx-careers__empty a {
	color: var(--c-gold);
	font-weight: 600;
	font-style: italic;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.wpx-careers__empty a:hover,
.wpx-careers__empty a:focus-visible {
	color: var(--c-accent);
}

.wpx-careers__jobs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpx-careers__jobs li + li {
	margin-top: var(--sp-3);
}

@media (width >= 56rem) {
	.wpx-careers__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(2.5rem, 6vw, 6rem);
	}
}