/*
 * Careers: the open-roles list (template-careers.php) and a single role
 * (template-vacancy.php). Both ride on the .works-page shell, the same way
 * template-contacts.php does — the kanji, the blurred bg-gradient and
 * .block-start all already come from styles.min.css.
 *
 * Values are the Figma page design (nodes 2953-16962 and 2964-2) expressed in
 * the theme's 10px rem base: the mock's 1424px content column is the theme's
 * own .container, its 32px card padding is 3.2rem, its 72px headline 7.2rem.
 */

/* .bg-gradient is a 100vw x 178rem blurred blob, absolutely positioned and last in
   source order, so without this it paints over the whole page and swallows every
   hover and click on the cards. The other .works-page templates lift their own
   intro with z-index: 2 for the same reason; here the whole column needs it. */
.careers-page > .container {
	z-index: 2;
}

/* The mock puts 56px between the breadcrumb and the headline; .works-page
   leaves 49px, which was measured against a hero that starts with an image. */
.careers-page .breadcrumb {
	margin-bottom: 5.6rem;
}

/* --- Headline ----------------------------------------------------------- */

.careers-page .careers-h1 {
	/* fit-content keeps the gradient box the width of the text; an
	   inline-block would too, but it also adds a baseline gap under the line. */
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-bottom: 3.2rem;
	/* Spelled out: every .h1 rule in styles.min.css is scoped to a section this
	   page is not inside, so the class alone carries no typography here. */
	font-family: "Random Grotesque Standard", sans-serif;
	font-weight: 600;
	font-size: clamp(3.2rem, 5vw, 7.2rem);
	line-height: 1;
	letter-spacing: normal;
	/* The mock's headline fill: white at the first word, cooling to a deep
	   blue-grey by the end of the line. */
	background: radial-gradient(106% 141% at 21% 38%,
			#fff 0%,
			rgba(202, 207, 214, 0.87) 25%,
			rgba(150, 159, 173, 0.74) 50%,
			rgba(97, 111, 131, 0.61) 75%,
			rgba(45, 63, 90, 0.48) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.careers-lead {
	max-width: 78rem;
	margin: -0.8rem 0 4rem;
	font-size: 2rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
}

.careers-lead p {
	margin: 0 0 1.6rem;
}

.careers-lead p:last-child {
	margin-bottom: 0;
}

/* --- Pills -------------------------------------------------------------- */

.vacancy-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.vacancy-chip {
	padding: 1rem 2.4rem;
	border-radius: 50rem;
	background: rgba(255, 255, 255, 0.06);
	font-size: 1.6rem;
	line-height: 1.1;
	color: #fff;
	white-space: nowrap;
}

/* --- Card chrome, shared by the list rows and the aside cards ------------ */

.vacancy-row,
.vacancy-card {
	position: relative;
	border: 0.1rem solid rgba(255, 255, 255, 0.16);
	border-radius: 1.6rem;
	background-color: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(0.8rem);
	backdrop-filter: blur(0.8rem);
	text-decoration: none;
	color: #fff;
	/* `translate` rather than `transform`: the entrance tween owns the inline
	   transform of whatever carries .js-fade-el, and the two compose instead of
	   overwriting each other. */
	transition: border-color 0.3s ease, background-color 0.3s ease,
		translate 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}

.vacancy-row:hover,
.vacancy-row:focus-visible,
.vacancy-card:hover,
.vacancy-card:focus-visible {
	border-color: rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.07);
	translate: 0 -0.3rem;
	box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.42);
}

/* The teal wash the mock shows on the hovered row. A pseudo element so it
   fades on its own, without fighting the background-color transition. */
.vacancy-row::before,
.vacancy-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(9, 133, 100, 0.28) 0%, rgba(9, 133, 100, 0) 55%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.vacancy-row:hover::before,
.vacancy-row:focus-visible::before,
.vacancy-card:hover::before,
.vacancy-card:focus-visible::before {
	opacity: 1;
}

/* --- Arrow --------------------------------------------------------------- */

.vacancy-arrow {
	flex: 0 0 auto;
	width: 3.2rem;
	height: 3.2rem;
	color: rgba(255, 255, 255, 0.16);
	transition: color 0.3s ease, translate 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.vacancy-arrow svg {
	display: block;
	width: 100%;
	height: 100%;
	/* The glyph points up-left; 135deg lands it on a right arrow, 90deg on the
	   up-right one the mock shows under the cursor. */
	transform: rotate(135deg);
	transition: transform 0.3s ease;
}

/* The arrow turns white, swings from → to ↗ and drifts the way it points. */
.vacancy-row:hover .vacancy-arrow,
.vacancy-row:focus-visible .vacancy-arrow,
.vacancy-card:hover .vacancy-arrow,
.vacancy-card:focus-visible .vacancy-arrow {
	color: #fff;
	translate: 0.4rem -0.4rem;
}

.vacancy-row:hover .vacancy-arrow svg,
.vacancy-row:focus-visible .vacancy-arrow svg,
.vacancy-card:hover .vacancy-arrow svg,
.vacancy-card:focus-visible .vacancy-arrow svg {
	transform: rotate(90deg);
}

/* The title shifts a touch, so the whole row reads as one moving object. */
.vacancy-row__title,
.vacancy-card__title {
	transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.vacancy-row:hover .vacancy-row__title,
.vacancy-row:focus-visible .vacancy-row__title,
.vacancy-card:hover .vacancy-card__title,
.vacancy-card:focus-visible .vacancy-card__title {
	translate: 0.4rem 0;
}

@media (prefers-reduced-motion: reduce) {

	.vacancy-row,
	.vacancy-card,
	.vacancy-row::before,
	.vacancy-card::before,
	.vacancy-arrow,
	.vacancy-arrow svg,
	.vacancy-row__title,
	.vacancy-card__title {
		transition-duration: 0.01ms;
	}

	.vacancy-row:hover,
	.vacancy-row:focus-visible,
	.vacancy-card:hover,
	.vacancy-card:focus-visible,
	.vacancy-row:hover .vacancy-arrow,
	.vacancy-card:hover .vacancy-arrow,
	.vacancy-row:hover .vacancy-row__title,
	.vacancy-card:hover .vacancy-card__title {
		translate: none;
	}
}

/* --- The list ------------------------------------------------------------ */

.vacancy-list {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vacancy-row {
	display: flex;
	align-items: center;
	gap: 4rem;
	padding: 3.2rem;
}

.vacancy-row__title {
	min-width: 0;
	/* Takes the slack, so the pills sit right of centre as in the mock and the
	   arrow still hugs the right edge on a role that carries no pills. */
	margin-right: auto;
	font-family: "Random Grotesque Standard", sans-serif;
	font-weight: 600;
	font-size: 4rem;
	line-height: 1.1;
}

/* 4rem flex gap + this is the mock's 145px between the last pill and the arrow. */
.vacancy-row .vacancy-arrow {
	margin-left: 10.5rem;
}

/* --- Nothing open -------------------------------------------------------- */

.careers-empty {
	max-width: 78rem;
	padding: 4.8rem;
	border: 0.1rem solid rgba(255, 255, 255, 0.16);
	border-radius: 1.6rem;
	background: rgba(255, 255, 255, 0.04);
}

.careers-empty__title {
	margin: 0 0 1.6rem;
	font-family: "Random Grotesque Standard", sans-serif;
	font-weight: 600;
	font-size: 3.2rem;
	line-height: 1.1;
}

.careers-empty__text {
	margin: 0 0 2.4rem;
	font-size: 1.8rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

.careers-empty__mail {
	font-size: 2.4rem;
	text-decoration: none;
	color: #fff;
}

.careers-empty__mail:hover {
	color: #4fd1a5;
}

/* --- A single vacancy ---------------------------------------------------- */

/* 673 | 166 | 584 in the 1920 mock, inside the same .container. */
.vacancy-layout {
	display: grid;
	grid-template-columns: minmax(0, 67.3rem) minmax(0, 58.4rem);
	justify-content: space-between;
	column-gap: 16.6rem;
	align-items: start;
}

.vacancy-page .careers-h1 {
	margin-bottom: 2.4rem;
}

.vacancy-main > .vacancy-chips {
	margin-bottom: 4rem;
}

.vacancy-body {
	font-size: 1.8rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

.vacancy-body h2 {
	margin: 4.8rem 0 1.6rem;
	font-family: "Random Grotesque Standard", sans-serif;
	font-weight: 600;
	font-size: 2.8rem;
	line-height: 1.2;
	color: #fff;
}

.vacancy-body h3 {
	margin: 3.2rem 0 1.2rem;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.vacancy-body h2:first-child,
.vacancy-body h3:first-child {
	margin-top: 0;
}

.vacancy-body p {
	margin: 0 0 1.6rem;
}

.vacancy-body ul,
.vacancy-body ol {
	margin: 0 0 2.4rem;
	padding-left: 2.4rem;
}

.vacancy-body li {
	margin-bottom: 0.8rem;
}

.vacancy-body strong {
	color: #fff;
	font-weight: 600;
}

.vacancy-body a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.3rem;
}

.vacancy-apply {
	margin-top: 6.4rem;
}

.vacancy-apply__label {
	margin: 0 0 0.8rem;
	font-family: "Random Grotesque Standard", sans-serif;
	font-weight: 500;
	font-size: 2rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.62);
}

.vacancy-apply__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2.4rem 4rem;
}

.vacancy-apply__mail {
	display: block;
	width: fit-content;
	max-width: 100%;
	font-family: "Random Grotesque Standard", sans-serif;
	font-weight: 600;
	font-size: clamp(2.6rem, 3vw, 4rem);
	line-height: 1.1;
	letter-spacing: normal;
	text-decoration: none;
	word-break: break-word;
	background: radial-gradient(106% 141% at 21% 38%,
			#fff 0%,
			rgba(202, 207, 214, 0.87) 25%,
			rgba(150, 159, 173, 0.74) 50%,
			rgba(97, 111, 131, 0.61) 75%,
			rgba(45, 63, 90, 0.48) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	transition: opacity 0.3s ease;
}

.vacancy-apply__mail:hover,
.vacancy-apply__mail:focus-visible {
	opacity: 0.75;
}

/* --- Other roles --------------------------------------------------------- */

.vacancy-aside {
	position: sticky;
	top: 12rem;
}

.vacancy-aside__list {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vacancy-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.6rem;
	padding: 3.2rem;
}

.vacancy-card__title {
	font-family: "Random Grotesque Standard", sans-serif;
	font-weight: 600;
	font-size: 2.4rem;
	line-height: 1.2;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1200px) {
	.vacancy-layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6.4rem;
	}

	.vacancy-aside {
		position: static;
	}

	.vacancy-aside__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	}

	.vacancy-row {
		gap: 2.4rem;
	}

	.vacancy-row .vacancy-arrow {
		margin-left: 2.4rem;
	}

	.vacancy-row__title {
		font-size: 3.2rem;
	}
}

@media (max-width: 992px) {
	.careers-page .breadcrumb {
		margin-bottom: 3.2rem;
	}

	.vacancy-row {
		flex-wrap: wrap;
		gap: 1.6rem;
		padding: 2.4rem;
	}

	.vacancy-row__title {
		flex: 0 1 auto;
		font-size: 2.6rem;
	}

	/* Title and arrow on the first line, the pills under them. */
	.vacancy-row .vacancy-chips {
		order: 3;
		flex: 1 1 100%;
	}

	.vacancy-row .vacancy-arrow {
		width: 2.4rem;
		height: 2.4rem;
	}

	.vacancy-chip {
		padding: 0.8rem 1.6rem;
		font-size: 1.4rem;
	}

	.careers-lead {
		font-size: 1.8rem;
	}

	.careers-empty {
		padding: 3.2rem;
	}

	.vacancy-card {
		padding: 2.4rem;
	}

	.vacancy-apply {
		margin-top: 4.8rem;
	}
}