.hbt-jobs {
	--hbt-jobs-accent: #4f8df7;
	--hbt-jobs-ink: #1f2937;
	--hbt-jobs-muted: #64748b;
	--hbt-jobs-border: #dbe3ee;
	max-width: 980px;
	margin: 2rem auto;
	color: var(--hbt-jobs-ink);
}

.hbt-jobs__heading {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -.02em;
}

.hbt-jobs__intro {
	max-width: 48rem;
	margin: .8rem 0 1.5rem;
	color: var(--hbt-jobs-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.hbt-jobs__list {
	display: grid;
	gap: 1rem;
}

.hbt-job {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem;
	border: 1px solid var(--hbt-jobs-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(24, 45, 75, .06);
}

.hbt-job__body {
	min-width: 0;
	flex: 1 1 auto;
}

.hbt-job__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.hbt-job__title a {
	color: inherit;
	text-decoration-thickness: 2px;
	text-underline-offset: .15em;
}

.hbt-job__title a:hover,
.hbt-job__title a:focus-visible {
	color: var(--hbt-jobs-accent);
}

.hbt-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem 1rem;
	margin-top: .7rem;
	color: var(--hbt-jobs-muted);
	font-size: .92rem;
}

.hbt-job__meta-item {
	display: inline-block;
}

.hbt-job__meta-label {
	font-weight: 700;
	color: var(--hbt-jobs-ink);
}

.hbt-job__summary {
	margin-top: .85rem;
	color: var(--hbt-jobs-muted);
	line-height: 1.6;
}

.hbt-job__summary p {
	margin: 0 0 .65rem;
}

.hbt-job__summary p:last-child {
	margin-bottom: 0;
}

.hbt-job__action {
	flex: 0 0 auto;
	align-self: center;
}

.hbt-job__apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: .65rem 1rem;
	border-radius: 7px;
	background: var(--hbt-jobs-accent);
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.hbt-job__apply:hover,
.hbt-job__apply:focus-visible {
	background: #286edc;
	color: #fff;
}

.hbt-jobs__empty {
	margin-top: 1.5rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--hbt-jobs-border);
	border-radius: 10px;
	color: var(--hbt-jobs-muted);
}

@media (max-width: 640px) {
	.hbt-job {
		flex-direction: column;
		gap: 1rem;
	}

	.hbt-job__action,
	.hbt-job__apply {
		width: 100%;
	}
}