/* ==========================================================================
   Mpac Occupop - Jobs Grid
   Matches the design at /careers/vacancies/
   High specificity selectors to prevent theme overrides
   ========================================================================== */

.mpac-occupop-jobs {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 60px 20px !important;
	box-sizing: border-box !important;
}

/* Filters
   ========================================================================== */

.mpac-occupop-jobs .mpac-occupop-filters {
	text-align: center !important;
	margin-bottom: 40px !important;
	display: flex !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
}

.mpac-occupop-jobs .mpac-occupop-filters .mpac-occupop-filter-group {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.mpac-occupop-jobs .mpac-occupop-filters .mpac-occupop-filters__label {
	display: inline !important;
	margin: 0 10px 0 0 !important;
	font-size: 20px !important;
	color: #1e1b2d !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	vertical-align: middle !important;
}

.mpac-occupop-jobs .mpac-occupop-filters .mpac-occupop-filter-select {
	display: inline-block !important;
	font-size: 18px !important;
	color: #1e1b2d !important;
	background-color: #fff !important;
	border: 1px solid #1e1b2d !important;
	padding: 8px 16px !important;
	cursor: pointer !important;
	vertical-align: middle !important;
	appearance: auto !important;
	-webkit-appearance: menulist !important;
	min-width: 200px !important;
}

.mpac-occupop-jobs .mpac-occupop-filters .mpac-occupop-filter-select:focus {
	outline: 2px solid #00a095 !important;
	border-color: #00a095 !important;
}

/* Grid
   ========================================================================== */

.mpac-occupop-jobs .mpac-occupop-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	overflow: hidden !important;
}

/* Vacancy Card
   ========================================================================== */

.mpac-occupop-jobs .mpac-occupop-grid .mpac-occupop-vacancy {
	display: flex !important;
	flex-direction: column !important;
	background-color: #e9e9e9 !important;
	background-image: url("../images/white-chevrons.png") !important;
	background-position: 80% 20% !important;
	background-size: 70% !important;
	background-repeat: no-repeat !important;
	border-left: #00a095 solid 20px !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	flex: 0 0 auto !important;
	min-height: 426px !important;
	margin: 10px !important;
	padding: 20px !important;
	box-sizing: border-box !important;
	width: calc(33.333% - 20px) !important;
}

@media only screen and (max-width: 1200px) {
	.mpac-occupop-jobs .mpac-occupop-grid .mpac-occupop-vacancy {
		width: calc(50% - 20px) !important;
	}
}

@media only screen and (max-width: 767px) {
	.mpac-occupop-jobs .mpac-occupop-grid .mpac-occupop-vacancy {
		width: 100% !important;
		min-height: 60vw !important;
	}
}

.mpac-occupop-jobs .mpac-occupop-grid .mpac-occupop-vacancy.mpac-occupop-hidden,
.mpac-occupop-jobs .mpac-occupop-grid .mpac-occupop-vacancy.mpac-occupop-filtered-out {
	display: none !important;
}

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__content {
	flex: 1 !important;
}

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__title {
	margin: 0 0 12px 0 !important;
	font-size: 28px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: #1e1b2d !important;
	transition: color 0.3s ease !important;
}

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__title a {
	color: inherit !important;
	text-decoration: none !important;
}

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__title:hover,
.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__title a:hover {
	color: #00a095 !important;
}

@media only screen and (max-width: 767px) {
	.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__title {
		font-size: 24px !important;
	}
}

@media only screen and (max-width: 600px) {
	.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__title {
		font-size: 20px !important;
	}
}

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__excerpt {
	--max-lines: 10;
	max-height: calc(1.3rem * var(--max-lines)) !important;
	margin-bottom: 40px !important;
	overflow: hidden !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	color: #1e1b2d !important;
}

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__excerpt p {
	max-width: 90% !important;
}

/* Card Footer / Link
   ========================================================================== */

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__footer {
	margin-top: auto !important;
}

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__link {
	font-family: "Trade Gothic LH Extended", Helvetica, Arial, sans-serif !important;
	color: #1e1b2d !important;
	position: relative !important;
	text-decoration: none !important;
	display: inline-block !important;
	padding-right: 50px !important;
	transition: color 0.3s ease !important;
}

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__link::before {
	content: "" !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cline x1='0' y1='5' x2='35' y2='5' stroke='%231e1b2d' stroke-width='1'/%3E%3Cpolyline points='30,0 35,5 30,10' fill='none' stroke='%231e1b2d' stroke-width='1'/%3E%3C/svg%3E") no-repeat center /
		contain !important;
	position: absolute !important;
	top: 5px !important;
	right: 0 !important;
	height: 10px !important;
	width: 40px !important;
	transition: right 0.3s ease !important;
}

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__link:hover {
	color: #00a095 !important;
}

.mpac-occupop-jobs .mpac-occupop-vacancy .mpac-occupop-vacancy__link:hover::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cline x1='0' y1='5' x2='35' y2='5' stroke='%2300a095' stroke-width='1'/%3E%3Cpolyline points='30,0 35,5 30,10' fill='none' stroke='%2300a095' stroke-width='1'/%3E%3C/svg%3E") no-repeat center /
		contain !important;
	right: -10px !important;
}

/* Load More
   ========================================================================== */

.mpac-occupop-jobs .mpac-occupop-load-more-wrap {
	text-align: center !important;
	margin-top: 40px !important;
}

.mpac-occupop-jobs .mpac-occupop-load-more-wrap .mpac-occupop-load-more {
	background-color: #00a095 !important;
	border: none !important;
	color: #fff !important;
	display: inline-block !important;
	font-weight: 500 !important;
	font-family: "Overpass Mono", monospace !important;
	padding: 15px 25px 18px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.2px !important;
	cursor: pointer !important;
	transition: background-color 0.3s ease !important;
}

.mpac-occupop-jobs .mpac-occupop-load-more-wrap .mpac-occupop-load-more:hover {
	background-color: #1e1b2d !important;
}

/* Notice
   ========================================================================== */

.mpac-occupop-jobs .mpac-occupop-notice {
	text-align: center !important;
	font-size: 16px !important;
	color: #1e1b2d !important;
	padding: 40px 20px !important;
}