/* JOB LISTINGS — .db-joblist   (career = 1)
   Prototype .jb-jobs. Split out of posts.css: it started as "another Query Loop,
   presentation only" and that framing lost the entire desktop layout.

   Desktop is TWO columns — heading left, list right capped at 600px, 120px
   apart — and it re-stacks between 861 and 1100 because 120px of gutter leaves
   neither column usable at that width. The first build had no row layout at all
   (`display: block`, title above list at every width) and also dropped the sand
   background.

   The border migrates on purpose: at mobile each row is separated by a top
   border with 12px of breathing room; from 861px the rule sits under the row's
   head instead and the last row has none, so the list ends flush. */

.db-joblist { background: var(--sand); }

.db-joblist .db-joblist__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-block: 40px;
}

.db-joblist__title { font-size: clamp(1.5rem, 8vw, 5rem); line-height: 1.1; }

.db-joblist .db-joblist__items { display: flex; flex-direction: column; }

.db-joblist__row { padding-block: 12px; }
.db-joblist__row + .db-joblist__row { border-top: 1px solid var(--line); }

.db-joblist .db-joblist__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.db-joblist .db-joblist__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.db-joblist__name { font-size: 1rem; line-height: 1.5; overflow-wrap: break-word; margin: 0; }
.db-joblist__name a { color: var(--ink); transition: color .2s ease; }
.db-joblist__row:hover .db-joblist__name a { color: var(--gold); }

.db-joblist__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-weight: 300;
	font-size: 14px;
	line-height: 24px;
	color: var(--muted);
	margin: 0;
}
.db-joblist__meta a { color: inherit; }
.db-joblist__meta .wp-block-post-terms { margin: 0; }

/* ⚠️ The diamond now sits BETWEEN the three post-terms blocks, not inside one.
   Each field is its own taxonomy (§9.56), so there is no single terms list with
   separators to restyle any more — the marker is drawn on every block after the
   first instead. An `:empty` block draws nothing, so a job that leaves one field
   blank does not leave a stray diamond behind. */
.db-joblist__meta > .wp-block-post-terms:not(:empty) ~ .wp-block-post-terms:not(:empty)::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	vertical-align: middle;
	background: var(--ink);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Decoration, so it is drawn rather than authored into every row — a Query Loop
   template cannot carry a per-post image here, and the arrow is not content. */
.db-joblist .db-joblist__head::after {
	content: "";
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--gold) url("../../images/arrow-white.svg") center / 46px 46px no-repeat;
	transform: scaleX(-1);   /* the asset points left */
	transition: filter .2s ease;
}
.db-joblist__row:hover .db-joblist__head::after { filter: brightness(1.08); }

@media (min-width: 861px) {
	.db-joblist .db-joblist__inner {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		gap: 120px;
		padding-block: 120px;
	}

	.db-joblist__title { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; font-size: 5rem; }

	.db-joblist .db-joblist__list  { flex: 1 1 0; max-width: 600px; min-width: 0; }
	.db-joblist .db-joblist__items { gap: 0; }

	.db-joblist__row { padding-block: 0; }
	.db-joblist__row + .db-joblist__row { border-top: none; }

	.db-joblist .db-joblist__head { padding-block: 12px; border-bottom: 1px solid var(--line); }
	.db-joblist__row:last-child .db-joblist__head { border-bottom: none; }

	/* 24/32 and uppercase — the listing titles are display type, not body
	   (368:3096). The clamp above only ever set a size, never the case. */
	.db-joblist__name { font-size: 1.5rem; line-height: 32px; }
}

.db-joblist__name { font-family: var(--font-display); text-transform: uppercase; }

/* 120px of gutter is too much below ~1100px, so the prototype drops back to a
   single column here and un-caps the list. Without this the two columns are
   ~380px each at 1000px. */
@media (min-width: 861px) and (max-width: 1099.98px) {
	.db-joblist .db-joblist__inner { flex-direction: column; gap: 48px; }
	.db-joblist .db-joblist__list  { max-width: none; }
}