/**
* Job Offers Importer - Frontend Styles
*/

:root {
	--primary-color:   #007bbe;
	--secondary-color: #e83d67;
	--tertiary-color:  #444;

	--gap-cards: 1.25rem; 
	--items:     4;
}


/* Archive container */
.job-offers-archive {
	width: 80%;
	margin: 0 auto;

	.page-header { margin-bottom: 3rem; }

	.featured-image {
		position: relative;
		left: -10vw;
		width: 100vw; height: 345px;
	}

	.featured-image .image-gradient {
		position: absolute;
		top: 0; left: 0;
		background-image: linear-gradient(rgb(2, 132, 199), rgba(2, 132, 199, 0));
		width: 100%; height: 100%;
	}

	.featured-image .page-title {
		position: absolute;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%; height: 100%;
		font-size: 3.75rem;
		color: white;
		text-align: center;
		line-height: 1;
		margin: 0 10%;
	}

	.featured-image img {
		width: 100%; height: 100%;
		max-height: unset;
		object-fit: cover;
		border-radius: 0 0 3.688rem 3.688rem;
	}

	.page-descr {
		width: 100%;
		font-size: 1rem;
		margin-bottom: 4rem;
	}

	.page-introduction p {
		color: var(--tertiary-color);
	}

	.page-introduction em {
		display: block;
		clear: both;
		margin-bottom: 1rem;
	}
}

/* Filters */
.job-offers-filters {
	margin-bottom: 1rem;

	.job-offers-filters-primary {
		display: flex;
		align-items: center;
		gap: 1rem;
	}
}

.job-offers-filters-primary {
	fieldset {
		margin-bottom: 1rem!important;
	}

	input {
		color: #242424;
		border-radius: 8px!important;
		border-width: 1px!important;
	}

	input#toggle { display: none; }

	label.toggle-button-open {
		background-color: var(--secondary-color);
		font-size: 1rem;
		color: white;
		border: 1px solid var(--secondary-color);
		border-radius: 8px;
		cursor: pointer;
		transition: all .3s;
		margin: 0 0 1rem auto;
		padding: .5rem 1rem;
	}

	label.toggle-button-open:before {
		display: inline-block;
		content: '';
		background-color: white;
		mask-image: url('../images/marker.svg');
		mask-repeat: no-repeat;
		mask-size: cover;
		mask-position: center;
		width: 1rem; height: 1rem;
		vertical-align: -.125rem;
		transition: background-color .3s;
		margin-right: .438rem;
	}

	label.toggle-button-open:hover {
		background-color: transparent;
		color: var(--secondary-color);
	}

	label.toggle-button-open:hover:before { background-color: var(--secondary-color); }


	input#toggle:checked ~ .facet-map { left: 50%; }
	input#toggle:checked ~ .facet-map label.toggle-button-close { left: 0; }

	.facet-map {
		position: fixed;
		z-index: 99999;
		left: 100vw; bottom: 0;
		width: 50vw; height: 100vh;
		transition: left 0.3s;
	}

	.facet-map label.toggle-button-close {
		position: fixed;
		z-index: -1;
		background-color: #fafafa90;
		width: 100vw; height: 100vh;
		left: 100vw;
		cursor: pointer;
	}

	.facet-map :is(.wpgb-facet, fieldset, .wpgb-map-facet) { height: 100%; }
}

.job-offers-filters-secondary {
	button {
		background-color: transparent!important;
		font-size: 1rem!important;
		color: var(--secondary-color)!important;
		margin-bottom: 2rem!important;
		padding: 0!important;
	}

	.wpgb-result-count {
		font-size: 1rem!important;
		font-weight: 700!important;
		color: #077bc0;
	}

	.wpgb-result-count:before {
		display: inline-block;
		content: '';
		background-color: var(--secondary-color);
		width: 10px; height: 10px;
		border-radius: 50%;
		margin-right: 10px;
	}
}

/* Job offers grid */
.job-offers-list {
	display: flex;
	flex-flow: row wrap;
	gap: var(--gap-cards);
}

.job-offer-item {
	width: calc((100% - (var(--gap-cards) * (var(--items) - 1))) / var(--items));
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: 0 0 .313rem .313rem rgba(0, 0, 0, .05);
}

.job-image img {
	width: 100%; height: 150px;
	object-fit: cover;
}

.job-offer-item .entry-content {
	font-size: .75rem;
	color: var(--tertiary-color);
	padding: 1rem 1.563rem;

	.entry-title {
		font-size: 1.125rem;
		font-weight: 600;
		margin: 0 0 1rem;
	}

	.job-details {
		font-weight: 700;
		color: #077bc0;
	}

	.job-details .job-contract {
		margin-bottom: 7px;
	}

	.job-details .job-contract:before, .job-details .job-location:before {
		display: inline-block;
		content: '';
		height: 15px;
		background-size: cover;
		vertical-align: middle;
		margin: -3px 5px 0 0;

	}

	.job-details .job-contract:before {
		background-image: url('../images/contract.svg');
		width: 12px;
	}

	.job-details .job-location:before {
		background-image: url('../images/marker.svg');
		width: 15px;
	}

	.job-summary {
		position: relative;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		margin-bottom: 1.5rem;
	}

	.job-summary:after {
		position: absolute;
		bottom: 0; left: 0;
		content: '';
		width: 100%; height: 50%;
		background: linear-gradient(rgba(255, 255, 255, 0), #fff);
	}
}

.job-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.job-date {
		font-weight: 400;
		font-style: italic;
	}

	.job-apply-button {
		background-color: #077bc0;
		border-radius: 3.125rem;
		font-size: 1rem;
		font-weight: 500;
		color: white;
		text-decoration: none;
		padding: .438rem 1.25rem .313rem;
	}
}


/* No jobs message */
.no-jobs {
	font-size: 1rem;
	font-style: italic;
	color: var(--tertiary-color);
}

/* Pagination styles */
.facet-pagination {
	display: flex;
	justify-content: flex-end;
	margin: 50px 0;

	li {
		min-width: auto!important; height: auto!important;
		line-height: unset!important;
		margin: 0!important;
	}

	li a[aria-current] { color: #077bc0!important; }
}

/* Responsive adjustments */
@media (1201px <= width <= 1439px) {
	:root {
		--items: 3;
	}
	
	.job-offers-list {
		flex-wrap: wrap;

		.job-offer-item {
			width: calc((100% - (var(--gap-cards) * (var(--items) - 1))) / var(--items));
		}
	}
}

@media (769px <= width <= 1200px) {
	:root {
		--gap-filters: 1rem;
		--items:       2;
	}

	.job-offers-archive .page-descr { margin-bottom: 2rem; }

	.job-offers-filters-primary {
		flex-wrap: wrap;

		.facet-name-search, .facet-city-search { width: calc((100% - (var(--gap-filters) * (var(--items) - 1))) / var(--items)) }
	}

	.job-offers-list {
		flex-wrap: wrap;

		.job-offer-item {
			width: calc((100% - (var(--gap-cards) * (var(--items) - 1))) / var(--items));
		}
	}
}

@media (width <= 768px) {
	:root {
		--items: 1;
	}

	.job-offers-archive .page-descr { margin-bottom: 2rem; }

	.job-offers-filters-primary {
		flex-direction: column;

		.facet-name-search, .facet-city-search { width: 100%; }

		.toggle-button-open {
			width: calc(100% - 2rem);
			text-align: center;
			margin-left: 0;
		}

		.facet-map {
			left: unset;
			bottom: -100vh;
			width: 100vw; height: 70vh;
			transition: bottom 0.3s;
		}

		.facet-map label.toggle-button-close {
			left: unset;
			bottom: -100vh;
		}

		input#toggle:checked ~ .facet-map, input#toggle:checked ~ .facet-map label.toggle-button-close {
			left: unset;
			bottom: 0;
		}
	}

	.job-offers-list {
		flex-wrap: wrap;

		.job-offer-item { width: calc((100% - (var(--gap-cards) * (var(--items) - 1))) / var(--items)); }
	}

	.facet-pagination { justify-content: flex-start; }
}