/* Jobs: meta list shared by the listing and job pages, and the single job layout. */

/* ---------- Location / job title / job type ---------- */

.th-job-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: var(--th-text-muted);
	font-size: var(--th-fs-sm);
	list-style: none;
}

.th-job-meta li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.th-job-meta .th-icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--th-blue);
}

/* Cards: one wrapping row, smaller icons. */
.th-job-meta--compact {
	flex-flow: row wrap;
	gap: 4px 16px;
	font-size: var(--th-fs-xs);
}

.th-job-meta--compact li {
	gap: 6px;
	align-items: center;
}

.th-job-meta--compact .th-icon {
	width: 16px;
	height: 16px;
	margin: 0;
}

.th-job-meta--large {
	gap: 10px;
	color: var(--th-muted, var(--th-text-muted));
	font-size: var(--th-fs-body-lg);
}

/* ---------- Single job ---------- */

.th-job-header {
	padding-block: clamp(40px, 6vw, 72px);
}

.th-job-header__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.th-job-header h1 {
	max-width: 960px;
	font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem);
	overflow-wrap: break-word;
}

.th-job-header__back {
	font-size: var(--th-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.th-job-header__back:hover {
	text-decoration: underline;
}

.th-job-header__logo {
	max-width: 200px;
	max-height: 80px;
	padding: 12px 16px;
	border-radius: var(--th-radius-sm);
	background: var(--th-white);
	object-fit: contain;
}

.th-job-layout {
	display: grid;
	gap: clamp(32px, 5vw, 56px);
	align-items: start;
}

.th-job-content {
	min-width: 0;
	overflow-wrap: break-word;
}

.th-job-content > :first-child {
	margin-top: 0;
}

.th-job-content :is(ul, ol) {
	padding-left: 1.3em;
}

.th-job-content li + li {
	margin-top: 0.35em;
}

.th-job-layout .th-job-apply {
	max-width: none;
	scroll-margin-top: 24px;
}

.th-job-apply__heading {
	font-size: var(--th-fs-h3);
}

.th-job-apply__intro {
	margin: 8px 0 22px;
	color: var(--th-text-muted);
	font-size: var(--th-fs-sm);
}

/* The Apply button jumps to the form, which only sits off-screen on narrow layouts. */
@media (min-width: 900px) {
	.th-job-layout {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
	}

	.th-job-header__apply {
		display: none;
	}
}