/* =============================================================================
   13-jobs-board.css — template_jobs.php and the job listing pages
   The card grid, the full-detail panel it swaps to, and the JobClub leftovers.

   The interaction: .jobs-wrap holds the grid and .job-fullinfo holds one job's
   detail. Both are absolutely positioned and faded out by default; adding
   .active returns one to the flow. That keeps them in the same place on the
   page instead of one pushing the other down.
   ============================================================================= */

#jobs {
	padding-top: 1.875rem;
	overflow: hidden;
}

.yellow_background, .col1bk { background-color: var(--js-yellow) !important; }
.blue_background,   .col2bk { background-color: var(--js-blue)   !important; }
.orange_background, .col3bk { background-color: var(--js-orange) !important; }
.purple_background, .col4bk { background-color: var(--js-purple) !important; }

/* --- The card grid -------------------------------------------------------- */
.jobs-wrap {
	position: absolute;
	top: 0;
	left: 30px;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 -1.25rem;
	opacity: 0;
	pointer-events: none;
	transition: all 0.25s ease;
}

.jobs-wrap.active {
	position: relative;
	left: auto;
	opacity: 1;
	pointer-events: auto;
}

.job-wrap {
	width: 33.3333%;
	padding: 0 1.25rem;
	margin-bottom: 2.5rem;
	transform: scale(1);
	transition: transform 400ms ease-out;
}

.job-wrap:hover {
	transform: scale(1.05);
	cursor: pointer;
}

.job {
	position: relative;
	max-width: 100%;
	height: 100%;
	padding: 2.5rem;
	border-radius: 20px;
	background-color: var(--js-white);
}

.job p {
	font-size: 1.75rem;
	line-height: 1.15;
	font-weight: bolder;
	color: var(--js-beige);
}

/* --- The full-detail panel ------------------------------------------------ */
.job-fullinfo {
	position: absolute;
	top: 0;
	left: 30px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.25s ease;
}

.job-fullinfo.active {
	position: relative;
	top: 0;
	left: auto;
	opacity: 1;
	pointer-events: auto;
}

/* Tabs within a job's detail panel. */
.job-fullinfo .info {
	display: none;
}

.job-fullinfo .info.active {
	display: block;
}

/* --- JobClub -------------------------------------------------------------- */
.wrapper1 {
	max-width: 100%;
	padding: 1.5625rem 25% 1.5625rem 0;
	margin-top: -3.125rem;
	border-right: 1px solid var(--js-black);
}

.terms {
	text-align: center;
	margin-bottom: 6.25rem;
}

.terms p {
	font-family: var(--js-font-bold);
	font-size: 0.75rem;
	line-height: 1.35;
}

/* ============================================================================= */

@media (max-width: 1000px) {
	.job-wrap {
		width: 50%;
	}

	/* The divider and its gutter only made sense beside a second column. */
	.wrapper1 {
		padding: 0 0 1.25rem;
		margin-top: 0;
		border-right: none;
	}
}

@media (max-width: 750px) {
	.job-wrap {
		width: 100%;
	}
}