/* Job Listings Block
--------------------------------------------- */

.block-job-listings {
	margin-top: var(--wp--custom--layout--block-gap);
	margin-bottom: var(--wp--custom--layout--block-gap);
}

.block-job-listings .job-listings-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 0;
	border: var(--wp--custom--border);
	/* border-top: var(--wp--custom--border);
	border-bottom: var(--wp--custom--border); */
}

.block-job-listings .job-listings-empty {
	color: var(--wp--preset--color--theme-3);
}


/* Job item */

.block-job-listings .job-listing {
	border-bottom: var(--wp--custom--border);
	/* border-left: var(--wp--custom--border); */
}

.block-job-listings .job-listing__link {
	display: flex;
	justify-content: flex-start;
	gap: var(--space-2xs);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	text-decoration: none;
	flex-direction: column;
	color: var(--wp--preset--color--theme-2);
	height: 100%;
	transition: all 0.15s ease-in-out;
	box-sizing: border-box;
}

.block-job-listings .job-listing__title {
	font-size: var(--wp--preset--font-size--xx-large);
	display: block;
	line-height: 1.05;
	/* transition: font-size 0.15s ease-in-out; */
}
.block-job-listings .job-listing__role-type {
	font-weight: 600;
	transition: opacity 0.15s ease-in-out;
}

.block-job-listings .job-listing__offices {
	font-size: calc(var(--wp--preset--font-size--medium) * 0.9);
	transition: opacity 0.15s ease-in-out;
}

.block-job-listings .job-listing__link .wp-element-button {
	justify-content: flex-start;
	margin-top: auto;
	min-height: max-content;
}


/* Hover state */

.block-job-listings .job-listing__link:hover {
	background-color: var(--wp--preset--color--accent-3);
	cursor: pointer;
}
.block-job-listings .job-listing__link:hover .job-listing__role-type,
.block-job-listings .job-listing__link:hover .job-listing__offices {
	opacity: 0;
}

/* Block Header */
.block-job-listings__header {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-bottom: var(--wp--preset--spacing--50);
	gap: 2rem 1rem;
}
.block-job-listings__header h2 {
	margin: 0;
}

/* Filters */

.block-job-listings .job-listings-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs-s);
}
.block-job-listings .facetwp-type-dropdown {
	width: 100%;
}
.block-job-listings .facetwp-dropdown {
	max-width: 100%;
}


/**
 * Media Queries
 ---------------------------------------------  */

@media (min-width: 600px) {

	.block-job-listings .facetwp-type-dropdown {
		width: 250px;
		max-width: 31%;
	}

	.block-job-listings .job-listings-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}



}

@media (max-width: 859px) {

	.block-job-listings .job-listing {
		aspect-ratio: 3.5/3.15;
	}

}

@media (min-width: 860px) {

	.block-job-listings .job-listings-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.block-job-listings .job-listing__link {
		aspect-ratio: 1;
	}

	/* hover state */
	.block-job-listings .job-listing__link:hover  .job-listing__title {
		/* font-size: calc(var(--wp--preset--font-size--xx-large) * 1.1); */
	}

	.block-job-listings__header {
		flex-direction: row;
		justify-content: space-between;
	}

	.block-job-listings .job-listings-filters {
		justify-content: flex-end;
		align-items: center;
	}

}

@media (min-width: 1200px) {

	.block-job-listings .job-listings-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/**
 * Item borders
 ---------------------------------------------  */


@media (min-width: 600px) and (max-width: 859px) {

	.block-job-listings .job-listings-list {
		border-left: 0;
		border-right: 0;
	}

	.block-job-listings .job-listing:nth-of-type(odd) {
		border-right: var(--wp--custom--border);
	}

}

@media (min-width: 860px) {

	.block-job-listings .job-listings-list {
		border-left: 0;
		border-right: 0;
	}

	.block-job-listings .job-listing {
		border-left: var(--wp--custom--border);
	}

}


/* mobile */
@media (max-width: 859px) {


	.block-job-listings .job-listing:nth-of-type(odd) {
		border-left: 0;
	}
	/* last row only: last-child always, plus nth-last-child(2) only when in col 1 (last-child fills col 2) */
	.block-job-listings .job-listing:last-child,
	.block-job-listings .job-listing:nth-last-child(2):nth-child(2n+1) {
		border-bottom: 0;
	}

}

/* medium screens */
/* for 3 cols */

@media (min-width: 860px) and (max-width: 1199px) {

	.block-job-listings .job-listing:nth-of-type(odd) {
		border-left: var(--wp--custom--border);
	}
	.block-job-listings .job-listing:nth-child(3n + 1) {
		border-left: 0;
	}

	/* last row only:
	   - nth-last-child(2) in col 1 = last row has 2 items; in col 2 = last row has 3 (full)
	   - nth-last-child(3) in col 1 = last row is full */
	.block-job-listings .job-listing:last-child,
	.block-job-listings .job-listing:nth-last-child(2):nth-child(3n+1),
	.block-job-listings .job-listing:nth-last-child(2):nth-child(3n+2),
	.block-job-listings .job-listing:nth-last-child(3):nth-child(3n+1) {
		border-bottom: 0;
	}

	/* close off incomplete last rows with a right border (skip if last-child is already in col 3).
	   box-shadow rather than border-right so it renders at the same pixel as border-left on items above */
	.block-job-listings .job-listing:last-child:not(:nth-child(3n)) {
		box-shadow: 2px 0 0 0 var(--wp--preset--color--theme-2);
	}

}

/* large screens */
/* for 4 cols */
@media (min-width: 1200px) {



	.block-job-listings .job-listing:nth-child(4n + 1) {
		border-left: 0;
	}

	/* last row only */
	.block-job-listings .job-listing:last-child,
	.block-job-listings .job-listing:nth-last-child(2):nth-child(4n+1),
	.block-job-listings .job-listing:nth-last-child(2):nth-child(4n+2),
	.block-job-listings .job-listing:nth-last-child(2):nth-child(4n+3),
	.block-job-listings .job-listing:nth-last-child(3):nth-child(4n+1),
	.block-job-listings .job-listing:nth-last-child(3):nth-child(4n+2),
	.block-job-listings .job-listing:nth-last-child(4):nth-child(4n+1) {
		border-bottom: 0;
	}

	/* close off incomplete last rows with a right border (skip if last-child is already in col 4).
	   box-shadow rather than border-right so it renders at the same pixel as border-left on items above */
	.block-job-listings .job-listing:last-child:not(:nth-child(4n)) {
		box-shadow: 2px 0 0 0 var(--wp--preset--color--theme-2);
	}

}