/**
 * Vacancies: the list on Work or volunteer with us, and a single role.
 *
 * Deliberately plain. A job advert is scanned, not admired: the facts sit in a
 * definition list a screen reader can read as pairs, inside a buff panel that
 * separates them from the prose, and the closing date is the one thing pulled
 * out, because it is what decides whether the reader acts today.
 *
 * Colours come from the design system's own tokens rather than new ones.
 */

/* ---------- the list ---------- */

.pb-vacancies {
	margin: 1.75rem 0;
}

.pb-vacancies .vac-list,
.pb-vacancies .vac-meta {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The design system marks up content lists with an absolutely positioned dot
   and 32px of padding. These are cards and label pairs, not prose, so both
   have to go: the padding is also what was forcing the meta row to wrap. */
.pb-vacancies ul.vac-list > li::before,
.pb-vacancies ul.vac-meta > li::before,
.vac-docs ul > li::before {
	content: none;
	display: none;
}

.pb-vacancies ul.vac-list > li,
.pb-vacancies ul.vac-meta > li,
.vac-docs ul > li {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.pb-vacancies ul.vac-list > li::marker,
.pb-vacancies ul.vac-meta > li::marker,
.vac-docs ul > li::marker {
	content: "";
}

.pb-vacancies .vac-list {
	display: grid;
	gap: 1.25rem;
}

.pb-vacancies .vac-card {
	display: block;
	padding: 1.75rem 1.875rem;
	border: 1px solid var(--border-card, rgba(35, 55, 90, .10));
	border-radius: 14px;
	background: var(--white, #fefefe);
	box-shadow: var(--shadow-card, 0 8px 24px -12px rgba(35, 55, 90, .14));
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* The whole card is one link, so nothing inside should read as link text. */
.pb-vacancies .vac-card,
.pb-vacancies .vac-card .vac-title,
.pb-vacancies .vac-card .vac-summary,
.pb-vacancies .vac-meta li {
	color: var(--navy, #23375a);
	text-decoration: none;
}

.pb-vacancies .vac-card:hover,
.pb-vacancies .vac-card:focus-visible {
	border-color: var(--teal, #1e6c82);
	box-shadow: var(--shadow-card-hover, 0 14px 32px -12px rgba(35, 55, 90, .22));
	transform: translateY(-2px);
}

.pb-vacancies .vac-title {
	margin: 0 0 1.125rem;
	font-size: 1.25rem;
	line-height: 1.3;
}

.pb-vacancies .vac-summary {
	margin: 0 0 1.25rem;
	color: var(--text-muted, rgba(35, 55, 90, .78));
	line-height: 1.55;
}

.pb-vacancies .vac-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem 1.75rem;
	margin: 0 0 1.25rem;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid var(--border-subtle, #edeae7);
	font-size: .9375rem;
	line-height: 1.4;
}

.pb-vacancies .vac-meta span {
	display: block;
	margin-bottom: .2rem;
	color: var(--text-muted-soft, rgba(35, 55, 90, .72));
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.pb-vacancies .vac-more {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	color: var(--teal, #1e6c82);
	font-weight: 600;
}

.pb-vacancies .vac-card:hover .vac-more .arr {
	transform: translateX(3px);
}

.pb-vacancies .vac-more .arr {
	transition: transform .15s ease;
}

.pb-vacancies .vac-empty {
	margin: 0;
	padding: 1.5rem 1.625rem;
	border-radius: 14px;
	background: var(--buff, #f4efe9);
	color: var(--text-muted, rgba(35, 55, 90, .78));
}

/* ---------- one role ---------- */

.vac-closed {
	margin: 0 0 2rem;
	padding: 1.125rem 1.375rem;
	border-left: 3px solid var(--mulberry, #835263);
	border-radius: 0 8px 8px 0;
	background: var(--blossom, #ffe2e0);
	color: var(--navy, #23375a);
}

.vac-closed strong {
	display: block;
	margin-bottom: .2rem;
}

/* The facts panel. Its own ground, so the advert's header block reads as
   reference material rather than as the first paragraph of the prose. */
.vac-panel {
	margin: 0 0 2.5rem;
	padding: 1.75rem 1.875rem;
	border-radius: 14px;
	background: var(--buff, #f4efe9);
}

.vac-panel .vac-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem 2rem;
	margin: 0;
}

.vac-panel .vac-facts > div {
	margin: 0;
}

.vac-panel dt {
	margin: 0 0 .3rem;
	color: var(--text-muted-soft, rgba(35, 55, 90, .72));
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.vac-panel dd {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
}

.vac-facts__closing dd {
	font-weight: 700;
}

/* The design system zeroes block margins and expects a managed container to
   supply the rhythm. This content is raw blocks, so it has to bring its own. */
.vac-prose > * + * {
	margin-top: 1.125rem;
}

.vac-prose > h2 {
	margin-top: 2.75rem;
	margin-bottom: .65rem;
}

.vac-prose > h2:first-child {
	margin-top: 0;
}

.vac-prose > h2 + * {
	margin-top: 0;
}

.vac-prose ul,
.vac-prose ol {
	padding-left: 1.5rem;
}

.vac-prose li + li {
	margin-top: .45rem;
}

.vac-docs {
	margin: 3rem 0 0;
	padding: 1.75rem 1.875rem;
	border-radius: 14px;
	background: var(--buff, #f4efe9);
}

.vac-docs h2 {
	margin: 0 0 1rem;
	font-size: 1.125rem;
}

.vac-docs ul {
	display: grid;
	gap: .625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vac-doc {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .75rem;
	padding: .9rem 1.125rem;
	border: 1px solid var(--border-card, rgba(35, 55, 90, .10));
	border-radius: 10px;
	background: var(--white, #fefefe);
	text-decoration: none;
}

.vac-doc:hover,
.vac-doc:focus-visible {
	border-color: var(--teal, #1e6c82);
}

.vac-doc__name {
	font-weight: 600;
}

.vac-doc__meta {
	color: var(--text-muted-soft, rgba(35, 55, 90, .72));
	font-size: .8125rem;
}

.vac-apply {
	margin: 3rem 0 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--border-subtle, #edeae7);
}

.vac-apply-note {
	margin: .875rem 0 0;
	color: var(--text-muted, rgba(35, 55, 90, .78));
	font-size: .9375rem;
}

@media (max-width: 700px) {
	.pb-vacancies .vac-card {
		padding: 1.375rem 1.25rem;
	}

	.vac-panel,
	.vac-docs {
		padding: 1.375rem 1.25rem;
	}

	.vac-panel .vac-facts {
		grid-template-columns: 1fr;
		gap: 1.125rem;
	}
}

/* Paul, 13 October: the role cards sit on the buff of the sidebar panel, and
   the title loses the heading margin the content area gives every h3. */
body.fl-ds-page .pb-vacancies .vac-card{background:var(--ds-color-buff,#F4EFE9);border-color:transparent;box-shadow:none;}
body.fl-ds-page .pb-vacancies .vac-card:hover,body.fl-ds-page .pb-vacancies .vac-card:focus-visible{border-color:var(--ds-color-teal,#1E6C82);box-shadow:none;}
body.fl-ds-page .pb-vacancies .vac-card .vac-title.vac-title{margin-top:0;}
body.fl-ds-page .pb-vacancies .vac-meta{border-bottom-color:rgba(35,55,90,.12);}