/* ===========================================================================
   Careers details - job list + in-page detail panel (single-career.php)
   Static presentation build from Figma "Beemok/Career" V3,
   frames 475:4501 (list) and 475:5029 (detail open).

   Loaded AFTER careers.css, which owns the shared filter card, collage and
   quote. This file owns the job list, the detail panel, the desktop squish
   and the mobile drawer.

   Figma geometry: content box 1140, detail 723, list 407, gap 10.
   723 / (1140 - 10) = 63.98%   407 / (1140 - 10) = 36.02%
   Colours sampled from the Figma render, not eyeballed:
   selected card #E5E9ED on a 1px #0E385E border; cards/panel #F4F4F4.
   =========================================================================== */

/* This page has no logo wall, so the wrapper closes itself off. */
.jobs-page {
	padding-bottom: 40px;
}

/* Detail bodies cloned into the panel by JS. [hidden] alone is not enough -
   a stray `div { display: block }` anywhere would dump every job on the page. */
.jobs-sources {
	display: none !important;
}

.jobs-filter {
	margin: 0 0 22px;
}
.jobs-filter__selects {
	max-width: 690px;
}

.jobs-count {
	margin: 0 0 22px;
	color: #0E385E;
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
}

.jobs-empty {
	padding: 60px 0;
	color: #000;
	font-size: 17.7px;
	text-align: center;
}

.job-card--expired {
	opacity: .55;
}

.jobs-apply.is-disabled {
	background: #9AA5B1;
	cursor: not-allowed;
	pointer-events: none;
}

.jobs-detail__expired-notice {
	margin: 0 0 20px;
	padding: 10px 16px;
	border-radius: 6px;
	background: #FDEDED;
	color: #B42318;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

/* ------------------------------------------------- layout + desktop squish */

.jobs-layout {
	display: flex;
	align-items: flex-start;
	gap: 0;
	transition: gap .45s cubic-bezier(.4, 0, .2, 1);
}
.jobs-layout.is-detail-open {
	gap: 10px;
}

.jobs-detail {
	flex: 0 0 auto;
	width: 0;
	opacity: 0;
	overflow: hidden;
	border-radius: 11px;
	background: #F4F4F4;
	transition: width .45s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
.jobs-layout.is-detail-open .jobs-detail {
	width: calc((100% - 10px) * 0.6398);
}
.jobs-detail.is-visible {
	opacity: 1;
}

.jobs-list {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.jobs-list__scroll {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ---------------------------------------------------------------- job card */

.job-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	padding: 30px 20px;
	border: 0;
	border-radius: 11px;
	background: #F4F4F4;
	text-align: left;
	cursor: pointer;
	font-family: "indivisible", sans-serif;
	transition: background .3s ease, box-shadow .3s ease;
}
.job-card:hover,
.job-card:focus-visible {
	background: #EDEFF2;
}
.job-card.is-selected {
	background: #E5E9ED;
	box-shadow: inset 0 0 0 1px #0E385E;
}
.job-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.job-card__logo {
	display: block;
	width: auto;
	max-width: 60%;
	max-height: 54px;
}
.job-card__date {
	flex: 0 0 auto;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
}
.job-card__rule {
	display: block;
	height: 1px;
	background: #D9D9D9;
}
.job-card__body {
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.job-card__title {
	display: block;
	color: #0E385E;
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
}
.job-card__loc {
	display: block;
	color: #000;
	font-size: 17.7px;
	font-weight: 400;
	line-height: 25px;
}

/* -------------------------------------------------------------- load more */

.jobs-loadmore {
	display: block;
	padding: 15px 35px;
	border-radius: 8px;
	background: #0E385E;
	color: #FFF !important;
	text-align: center;
	text-decoration: none !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 19px;
	transition: background .3s ease;
}
.jobs-loadmore:hover,
.jobs-loadmore:focus {
	background: #0677A1;
}

/* ----------------------------------------------------------- detail panel */

/* The panel's width animates from 0, so the inner is pinned to the FINAL width
   in JS (sizeInner) before the class lands. Without that the copy re-wraps on
   every frame of the squish instead of being revealed by it. */
.jobs-detail__inner {
	padding: 0 0 30px;
}

.jobs-detail__head {
	padding: 30px 24px 0;
}
.jobs-detail__meta {
	margin: 0 0 30px;
	color: #000;
	font-size: 17.7px;
	font-weight: 400;
	line-height: 25px;
	text-align: center;
}
.jobs-detail__headrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 0 0 18px;
	border-bottom: 1px solid #D9D9D9;
}
.jobs-detail__title {
	margin: 0;
	color: #0E385E;
	font-size: 24px;
	font-weight: 700;
	line-height: 29px;
}
.jobs-detail__loc {
	margin: 4px 0 0;
	color: #000;
	font-size: 17.7px;
	font-weight: 400;
	line-height: 25px;
}
.jobs-apply {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 35px;
	border-radius: 8px;
	background: #0E385E;
	color: #FFF !important;
	text-decoration: none !important;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
	line-height: 19px;
	letter-spacing: .04em;
	transition: background .3s ease;
}
.jobs-apply:hover,
.jobs-apply:focus {
	background: #0677A1;
}

.jobs-detail__section {
	padding: 18px 24px 0;
}
.jobs-detail__section h3 {
	margin: 0 0 20px;
	color: #0E385E;
	font-family: "indivisible", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 25px;
}
.jobs-detail__section p,
.jobs-detail__section li {
	color: #525252;
	font-size: 15px;
	font-weight: 400;
	line-height: 25px;
}
.jobs-detail__section p {
	margin: 0;
}
.jobs-detail__section ul {
	margin: 0;
	padding: 0 0 0 18px;
}
.jobs-detail__section li {
	margin: 0 0 6px;
}

/* ------------------------------------------------- mobile drawer + tab --- */

.jobs-tab,
.jobs-overlay {
	display: none;
}

.jobs-collage {
	margin: 50px 0 0;
}

/* This page's collage has its OWN Figma proportions - 486 / 309 / 267 across a
   1100 content box - not the careers page's 267 / 422 / 373.
   MUST stay inside a min-width query: these selectors are (0,2,0) and would
   otherwise outrank the (0,1,0) mobile stacking rules in careers.css, which is
   what left the drawer-width column and the squeezed quote on phones. */
@media (min-width: 992px) {
	.jobs-collage .careers-collage__img--left {
		flex: 0 0 44.18%;
	}
	.jobs-collage .careers-collage__mid {
		flex: 0 0 28.09%;
	}
	.jobs-collage .careers-collage__mid .careers-collage__img {
		height: 380px;
	}
	.jobs-collage .careers-collage__img--right {
		flex: 1 1 24.27%;
	}
}

/* ================================================== responsive ============ */

@media (max-width: 1200px) {
	.jobs-detail__headrow {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

@media (max-width: 991px) {

	/* the list leaves the flow and becomes a right-hand drawer */
	.jobs-layout,
	.jobs-layout.is-detail-open {
		display: block;
		gap: 0;
	}

	.jobs-detail,
	.jobs-layout.is-detail-open .jobs-detail {
		width: 100%;
		opacity: 1;
		overflow: visible;
		transition: none;
	}
	.jobs-detail:empty,
	.jobs-detail__inner:empty {
		display: none;
	}
	.jobs-detail__inner,
	.jobs-layout.is-detail-open .jobs-detail__inner {
		width: auto;
	}

	/* Until a job is picked the list stays IN THE PAGE - it only becomes a
	   drawer once there is a detail panel to make room for. JS puts
	   `jobs-drawer-mode` on <body> at that moment. Making it a drawer from the
	   start hid every job behind a tab nobody had reason to press yet. */
	body.jobs-drawer-mode .jobs-list {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1002;
		width: 86vw;
		max-width: 480px;
		height: 100vh;
		height: 100dvh;
		margin: 0;
		padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
		gap: 16px;
		background: #EBE8E5;
		box-shadow: -6px 0 24px rgba(0, 0, 0, .18);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(100%);
		transition: transform .38s cubic-bezier(.4, 0, .2, 1);
	}
	body.jobs-drawer-mode .jobs-list.is-open {
		transform: translateX(0);
	}

	/* The tab only earns its place once the list has moved into the drawer.
	   Sat low rather than centred: mid-right is where support/feedback widgets
	   live, and Marker.io was covering it outright. */
	body.jobs-drawer-mode .jobs-tab {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 0;
		top: auto;
		bottom: calc(96px + env(safe-area-inset-bottom));
		z-index: 1003;
		width: 42px;
		height: 62px;
		padding: 0;
		border: 0;
		border-radius: 8px 0 0 8px;
		background: #0E385E;
		color: #FFF;
		font-size: 22px;
		cursor: pointer;
		box-shadow: -3px 0 12px rgba(0, 0, 0, .2);
		transition: right .38s cubic-bezier(.4, 0, .2, 1), background .3s ease;
	}
	/* The drawer is 86vw but CAPPED at 480px, so `right: 86vw` detached the tab
	   from it on wider phones/tablets. min() tracks the width the drawer
	   actually gets, keeping the tab welded to its edge. Must match the
	   .jobs-list width + max-width above. */
	/* must out-specify `body.jobs-drawer-mode .jobs-tab` above, which sets
	   right: 0 - a bare .jobs-tab.is-open loses to it */
	body.jobs-drawer-mode .jobs-tab.is-open {
		right: min(86vw, 480px);
	}
	.jobs-tab i {
		transition: transform .3s ease;
	}

	/* :not([hidden]) is load-bearing - a plain `display: block` beats the UA
	   [hidden] rule and leaves a full-screen, invisible click-blocker sitting
	   at z-index 1001 over the whole page. */
	.jobs-overlay:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1001;
		background: rgba(0, 0, 0, .45);
		opacity: 0;
		transition: opacity .3s ease;
	}
	.jobs-overlay.is-visible {
		opacity: 1;
	}

	body.jobs-drawer-open {
		overflow: hidden;
	}

	.jobs-count {
		margin: 0 0 16px;
	}
	.jobs-collage {
		margin: 30px 0 0;
	}
}

@media (max-width: 768px) {
	.jobs-filter__selects {
		max-width: none;
	}
	.jobs-detail__head {
		padding: 20px 16px 0;
	}
	.jobs-detail__section {
		padding: 16px 16px 0;
	}
	.jobs-detail__title {
		font-size: 21px;
		line-height: 26px;
	}
	.jobs-apply {
		width: 100%;
		justify-content: center;
	}
	.job-card {
		padding: 22px 16px;
	}
}

@media (max-width: 540px) {
	body.jobs-drawer-mode .jobs-list {
		width: 90vw;
	}
	body.jobs-drawer-mode .jobs-tab.is-open {
		right: min(90vw, 480px);
	}
}