/**
 * GMP Jobs — front-end styles.
 *
 * Tokens and primitives come from gmp-core.css, declared as a dependency.
 */

.gmp-post-job {
	max-width: 46rem;
}

.gmp-job-details {
	margin-top: calc( var( --gmp-gap ) * 1.5 );
}

.gmp-job-details__grid {
	display: grid;
	gap: calc( var( --gmp-gap ) * 1.5 );
}

@media ( min-width: 56rem ) {
	.gmp-job-details__grid {
		align-items: start;
		grid-template-columns: 1fr 18rem;
	}
}

.gmp-job-details__aside {
	border: 1px solid var( --gmp-border );
	border-radius: var( --gmp-radius );
	padding: var( --gmp-space-4 );
	position: sticky;
	top: 1rem;
}

.gmp-job-details__salary {
	font-size: var( --gmp-text-xl );
	margin: 0 0 var( --gmp-space-3 );
}

.gmp-job-details__salary small {
	color: var( --gmp-muted );
	font-size: var( --gmp-text-sm );
}

.gmp-job-details__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gmp-space-1 );
	list-style: none;
	margin: 0 0 var( --gmp-space-4 );
	padding: 0;
}

.gmp-job-section + .gmp-job-section {
	margin-top: var( --gmp-gap );
}

.gmp-job-section h2 {
	font-size: var( --gmp-text-lg );
	margin-bottom: var( --gmp-space-2 );
}

.gmp-job-details__main .gmp-table th {
	width: 42%;
}