/********************************************************/
/*
/*      Job offers CSS
/*
/********************************************************/
.wp-block-cke-job-offers {
	width: var(--wp--style--global--wide-size);
	max-width: var(--wp--style--global--wide-size) !important;
}

.wp-block-cke-job-offers > .acf-innerblocks-container {
	margin-block-end: var(--wp--preset--spacing--3);
}

.wp-block-cke-job-offers > .acf-innerblocks-container > *,
.wp-block-cke-job-offers > .location,
.wp-block-cke-job-offers .location-header > h3,
.wp-block-cke-job-offers .location-body > .location-body-inner > .job-title {
	margin-block: unset;
}

.wp-block-cke-job-offers > .acf-innerblocks-container > * + * {
	margin-block-start: 1em;
}

.wp-block-cke-job-offers > .location {
	position: relative;
	width: min(var(--wp--custom--viewport-width), calc(var(--wp--style--global--wide-size) + (var(--wp--custom--outer-pad) * 2)));
	max-width: unset;
	color: var(--wp--custom--color--default--bg);
	background-color: var(--wp--custom--color--default--text);
	padding-block: var(--wp--preset--spacing--4);
	padding-inline: var(--wp--custom--outer-pad);
	margin-inline-start: calc(var(--wp--custom--outer-pad) * -1);
	box-shadow: 0 2px 22px 0 var(--wp--preset--color--black);
}

.wp-block-cke-job-offers > .acf-innerblocks-container + .location::before,
.wp-block-cke-job-offers > .location:first-of-type::before {
	content: '';
	display: block;
	position: absolute;
	top: -40px;
	left: 0;
	width: 100%;
	height: 40px;
	background-color: var(--wp--custom--color--default--bg);
}

.wp-block-cke-job-offers .location-header {
	display: block;
	width: max-content;
	height: 100%;
	box-sizing: border-box;
	cursor: pointer;
}

.wp-block-cke-job-offers .location-header > h3 {
	user-select: none;
	pointer-events: none;
	transition: color .3s;
}

.wp-block-cke-job-offers .location-header:is(:hover, :focus, :active) > h3,
.wp-block-cke-job-offers .location-body > .location-body-inner .job-title > a:is(:hover, :focus, :active) {
	color: var(--wp--custom--color--default--accent);
}

.wp-block-cke-job-offers .location-body {
	display: grid;
	grid-template-rows: 0fr;
	grid-template-columns: 1fr;
	transition: grid-template-rows .6s;
}

.wp-block-cke-job-offers input[type="checkbox"]:checked ~ .location-body {
	grid-template-rows: 1fr;
}

.wp-block-cke-job-offers .location-body > .location-body-inner {
	--height: 0px;
	
	position: relative;
	display: grid;
	grid-template-rows: 1fr repeat(var(--job-count), max-content) 1fr;
	grid-template-columns: 47.5% 42.5%;
	justify-content: space-between;
	width: var(--wp--style--global--wide-size);
	max-width: var(--wp--style--global--wide-size);
	min-height: 0px;
	max-height: 0px;
	overflow: clip;
	opacity: 0;
	transition: min-height .6s .3s, max-height .6s .3s, opacity .3s;
}

.wp-block-cke-job-offers input[type="checkbox"]:checked ~ .location-body > .location-body-inner {
	min-height: max(calc(120px * var(--job-count)), 700px);
	max-height: max(calc(120px * var(--job-count)), 700px);
	opacity: 1;
	transition: min-height .6s, max-height .6s, opacity .3s .5s;
}

.wp-block-cke-job-offers .location-body > .location-body-inner .job-title,
.wp-block-cke-job-offers .location-body > .location-body-inner .job-title > a {
	line-height: 1em;
}

.wp-block-cke-job-offers .location-body > .location-body-inner .job-title {
	--mouse-distance: 999;
	--size-modifier: clamp(.8, calc(1 * (1 - (min(var(--mouse-distance), 400) / 400))), 1);
	
	grid-column: 1;
	width: 100%;
	padding-block: var(--wp--preset--spacing--1-5);
	box-sizing: border-box;
}

.wp-block-cke-job-offers .location-body > .location-body-inner .job-title:not(:first-of-type) {
	border-block-start: 1px solid var(--wp--custom--color--default--focus);
}

.wp-block-cke-job-offers .location-body > .location-body-inner .job-title > a {
	display: block;
	width: max-content;
	max-width: calc(800px * var(--size-modifier));
	font-size: calc(var(--wp--preset--font-size--x-large) * var(--size-modifier));
	color: var(--wp--custom--color--default--focus);
	text-decoration: none;
}

.wp-block-cke-job-offers .location-body > .location-body-inner .job-thumbnail,
.wp-block-cke-job-offers .location-body > .location-body-inner .job-thumbnail img {
	width: 100%;
	height: 100%;
}

.wp-block-cke-job-offers .location-body > .location-body-inner .job-thumbnail {
	grid-column: 2;
	grid-row: 1 / span calc(var(--job-count) + 2);
	position: relative;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity	.3s;
	margin-block: var(--wp--preset--spacing--2) var(--wp--preset--spacing--10);
	box-sizing: border-box;
	pointer-events: none;
	z-index: -1;
}

.wp-block-cke-job-offers .location-body > .location-body-inner .job-thumbnail img {
	position: absolute;
	inset: 0;
	object-fit: cover;
	scale: .975;
	transition: scale .3s;
}

.wp-block-cke-job-offers .location-body > .location-body-inner:not(:has(> .job-title:is(:hover, :focus, :active))) > .job-title:first-child + .job-thumbnail,
.wp-block-cke-job-offers .location-body > .location-body-inner:has(> .job-title:is(:hover, :focus, :active) + .job-title) > .job-title:first-child + .job-thumbnail,
.wp-block-cke-job-offers .location-body > .location-body-inner > .job-title:is(:hover, :focus, :active) + .job-thumbnail {
	opacity: 1;
}

.wp-block-cke-job-offers .location-body > .location-body-inner > .job-title:is(:hover, :focus, :active) + .job-thumbnail {
	z-index: 3;
}

.wp-block-cke-job-offers .location-body > .location-body-inner:not(:has(> .job-title:is(:hover, :focus, :active))) > .job-thumbnail:first-of-type {
	z-index: 1;
	opacity: 1;
}

.wp-block-cke-job-offers .location-body > .location-body-inner:not(:has(> .job-title:is(:hover, :focus, :active))) > .job-title:first-child + .job-thumbnail img,
.wp-block-cke-job-offers .location-body > .location-body-inner:has(> .job-title:is(:hover, :focus, :active) + .job-title) > .job-title:first-child + .job-thumbnail img,
.wp-block-cke-job-offers .location-body > .location-body-inner > .job-title:is(:hover, :focus, :active) + .job-thumbnail img {
	scale: 1;
	transition: scale .6s;
}

/* Simplified variation */
.wp-block-cke-job-offers.is-style-simplified .location-body > .location-body-inner .job-title > a {
	font-size: var(--wp--preset--font-size--x-large);
	scale: 1;
	transform-origin: left;
	transition: color .3s, scale .3s;	
}

.wp-block-cke-job-offers.is-style-simplified .location-body > .location-body-inner .job-title > a:is(:hover, :focus, :active) {
	scale: 1.1;
}

/* Backend style */
body.wp-admin .wp-block-cke-job-offers > .wp-block-cke-job-offers {
	display: contents;
}

body.wp-admin .wp-block-cke-job-offers > .location {
	pointer-events: none;
}

body.wp-admin .wp-block-cke-job-offers > .location input[type="checkbox"] {
	display: none;
}

@media (width <= 1600px) {
	.wp-block-cke-job-offers .location-body > .location-body-inner {
		grid-template-columns: 50% 40%;
		column-gap: var(--wp--preset--spacing--4);
	}
}

@media (width <= 1400px) {
	.wp-block-cke-job-offers .location-body > .location-body-inner .job-title > a {
		max-width: calc(700px * var(--size-modifier));	
	}
	
	.wp-block-cke-job-offers.is-style-simplified .location-body > .location-body-inner .job-title > a {
		font-size: calc(var(--wp--preset--font-size--x-large) * .8);
	}
}

@media (width <= 1200px) {
	.wp-block-cke-job-offers .location-body > .location-body-inner {
		grid-template-columns: 50% 37.5%;
		column-gap: var(--wp--preset--spacing--2);
	}
	
	.wp-block-cke-job-offers .location-body > .location-body-inner .job-title > a {
		max-width: calc(600px * var(--size-modifier));	
	}
}

@media (width <= 1000px) {
	.wp-block-cke-job-offers > .acf-innerblocks-container {
		margin-block-end: var(--wp--preset--spacing--4);
	}
	
	.wp-block-cke-job-offers .location-body > .location-body-inner {
		grid-template-columns: 100%;
	}
	
	.wp-block-cke-job-offers input[type="checkbox"]:checked ~ .location-body > .location-body-inner {
		min-height: max(calc(120px * var(--job-count)), 600px);
		max-height: max(calc(120px * var(--job-count)), 600px);
	}
	
	.wp-block-cke-job-offers .location-body > .location-body-inner .job-title > a {
		max-width: 80%;
	}
	
	.wp-block-cke-job-offers.is-style-simplified .location-body > .location-body-inner .job-title > a {
		font-size: var(--wp--preset--font-size--large);
	}
	
	.wp-block-cke-job-offers .location-body > .location-body-inner .job-thumbnail {
		display: none;
	}
}

@media (width <= 600px) {
	.wp-block-cke-job-offers input[type="checkbox"]:checked ~ .location-body > .location-body-inner {
		min-height: max(calc(100px * var(--job-count)), 600px);
		max-height: max(calc(100px * var(--job-count)), 600px);
	}
	
	.wp-block-cke-job-offers.is-style-simplified .location-body > .location-body-inner .job-title > a {
		font-size: calc(var(--wp--preset--font-size--large) * .8);
	}
}

@media (width <= 450px) {
	.wp-block-cke-job-offers input[type="checkbox"]:checked ~ .location-body > .location-body-inner {
		min-height: max(calc(65px * var(--job-count)), 400px);
		max-height: max(calc(65px * var(--job-count)), 400px);
	}
	
	.wp-block-cke-job-offers .location-body > .location-body-inner .job-title {
		padding-block: var(--wp--preset--spacing--0-75);
	}
	
	.wp-block-cke-job-offers .location-body > .location-body-inner .job-title > a {
		hyphens: auto;
	}
	
	.wp-block-cke-job-offers.is-style-simplified .location-body > .location-body-inner .job-title > a {
		font-size: calc(var(--wp--preset--font-size--large) * .65);
	}
}