/* Careers ([vacancy_list] / [vacancy_meta] / [vacancy_apply]).
   The card "chrome" (background, radius, shadow, padding) lives here rather
   than the builder: [vacancy_list] renders a dynamic, repeating set of cards
   with no per-card builder row to style. Reuses the site's existing tokens
   (--color-custom-3, Blanc-Bold, Open Sans) and the same white-card/soft-shadow
   language as the Machine Finder bar (Impreza-child/style.css .bsc-finder__bar).
   Read More / Apply Now are styled by Impreza's own w-btn/us-btn-style_* classes. */

.bsc-vacancy-list {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.bsc-vacancy-list__empty {
	padding: 2rem;
	text-align: center;
}

.bsc-vacancy-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	padding: 2rem;
}

.bsc-vacancy-card__thumbnail {
	margin-bottom: 1.25rem;
}

.bsc-vacancy-card__thumbnail img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.bsc-vacancy-card__title {
	margin: 0 0 0.85rem;
	text-transform: capitalize;
}

.bsc-vacancy-card__excerpt {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	margin: 1rem 0 0;
}

.bsc-vacancy-card__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* Meta badges (location / employment type / department) — same typography
   for all three, only the icon differs. */
.bsc-vacancy-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 0.75rem;
}

.bsc-vacancy-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.bsc-vacancy-meta__icon {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.bsc-vacancy-meta__icon img {
	display: block;
	width: 20px;
	height: 20px;
}

.bsc-vacancy-meta__label {
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--color-custom-3);
}

.bsc-vacancy-apply--closed {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: var(--color-custom-3);
}

@media (max-width: 768px) {
	.bsc-vacancy-card {
		padding: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Single vacancy detail page — the white box is the "career-container" row
 * built in WPBakery (custom CSS class on the row) around the Post Title /
 * [vacancy_meta] / Post Excerpt / Post Content dynamic elements. Everything
 * below is scoped under .career-container so it never leaks into the
 * [vacancy_list] cards or any other page/row.
 * ---------------------------------------------------------------------- */

.career-container {
	box-sizing: border-box;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	padding: 2.5rem;
}

/* Main vacancy title (Dynamic Content "Post Title", .post_title) — Impreza
   already renders it as Blanc-Bold at the size/weight it controls; only the
   casing needs adjusting. */
.career-container .post_title {
	text-transform: capitalize;
}

/* Location / type / department badges — internal spacing/colours are the
   shared component styles above; here they stack one per row (always, at
   every width) instead of flowing in a horizontal line. */
.career-container .bsc-vacancy-meta {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 1rem;
	margin-bottom: 1.75rem;
}

/* Each badge (icon + label) stays on a single line — its text never wraps
   mid-badge. */
.career-container .bsc-vacancy-meta__item {
	white-space: nowrap;
}

/* Section subheadings inside the excerpt/content ("About Backsaver", "Your
   Role", etc.) — <h4> elements from the editor content (one level below the
   vacancy's own <h3> title, so the page keeps a correct heading hierarchy),
   scoped via their .post_content wrapper so the main title above is untouched.
   Sentence case is applied visually (text stays as written in the editor):
   lowercase everything, then re-capitalise just the first letter. */
.career-container .post_content h4 {
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	margin: 1.75rem 0 0.5rem;
	text-transform: lowercase;
}

.career-container .post_content h4::first-letter {
	text-transform: uppercase;
}

/* Lists (Your work includes / We're looking for someone who / We offer) —
   same left-indent tightened everywhere, no separate mobile override needed. */
.career-container .post_content ul {
	margin: 0 0 1.25rem 1.25rem;
	padding: 0;
}

.career-container .post_content li {
	margin: 0 0 0.5rem;
}

@media (max-width: 768px) {
	.career-container {
		padding: 1.5rem;
	}
}