/* ==========================================================================
   Job vacancy (child pages of /careers/)
   Self-contained: repeats the section header and roles list from careers.css
   so the page needs only this file.
   ========================================================================== */

/* ---------- Page rhythm: section padding and tablet inset ---------- */
.od-page-careers .od-section, .od-page-job .od-section { padding-block: clamp(100px, 1.9vw + 92.6px, 120px); }
.od-page-careers .od-section.od-careers-how, .od-page-job .od-job ~ .od-section.od-careers-roles { padding-bottom: 200px; }

.od-job { padding: calc(var(--od-header-h) + clamp(96px, 3.05vw + 84px, 128px)) 0 clamp(80px, 1.9vw + 73px, 100px); background: var(--od-white); }
.od-job__inner { display: flex; flex-direction: column; gap: clamp(60px, 3.8vw + 45px, 100px); }

/* ---------- Title block ---------- */
.od-job__head { position: relative; }
.od-job__intro { display: flex; flex-direction: column; gap: 12px; max-width: 800px; padding-right: 24px; }
.od-job__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.od-job__title { color: var(--od-black); }
.od-job__meta { display: flex; flex-wrap: wrap; gap: 0 12px; color: var(--od-grey-800); }
.od-job__summary { color: var(--od-grey-700); }
.od-job__corner { position: absolute; top: 0; right: 0; }
.od-job__rule { width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid var(--od-line); }

/* ---------- Details and apply panel ---------- */
.od-job__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px 40px; }
.od-job__details { flex: 1 1 0; min-width: 0; max-width: 540px; display: flex; flex-direction: column; gap: clamp(48px, 1.52vw + 42px, 64px); }
.od-job__block { display: flex; flex-direction: column; gap: 24px; }
.od-job__block h2, .od-job__apply h2 { color: var(--od-grey-900); }
.od-job__fact { display: flex; align-items: center; gap: 16px; color: var(--od-grey-800); }
.od-job__fact-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--od-brand); }
ul.od-job__list { margin: 0; padding: 0 0 0 clamp(30px, 0.57vw + 28px, 36px); list-style: disc; font-size: var(--od-fs-b1); line-height: 1.6; color: var(--od-grey-700); }
.od-job__apply {
	flex: 1 1 0; min-width: 0; max-width: 540px;
	position: sticky; top: calc(var(--od-header-h) + 20px);
	display: flex; flex-direction: column; gap: 48px;
	padding: clamp(20px, 1.9vw + 13px, 40px); background: var(--od-grey-20);
}
.od-job__apply-text { display: flex; flex-direction: column; gap: 16px; color: var(--od-grey-700); }
.od-job__apply-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.od-job__note { font-size: 14px; line-height: 1.6; color: var(--od-grey-600); }
.od-job__note a { color: var(--od-grey-900); transition: color 0.2s; }
.od-job__note a:hover { color: var(--od-brand); }

/* ---------- Section header: label left, title and text right ---------- */
.od-careers-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--od-gap); }
.od-careers-head > .od-label { flex: 1 1 0; min-width: 0; padding-top: clamp(4px, 0.63vw - 1px, 8px); white-space: nowrap; }
.od-careers-head__body { flex: 0 0 66.667%; max-width: 800px; display: flex; flex-direction: column; gap: 12px; color: var(--od-grey-900); }
.od-careers-head__body > h2 { text-wrap: balance; }

/* ---------- Roles list ---------- */
.od-roles__head {
	display: flex; align-items: center; gap: 20px; padding-bottom: var(--od-role-gap);
	font-size: var(--od-fs-b3); line-height: 1.6; color: var(--od-grey-500);
	border-bottom: 1px solid var(--od-line);
}
.od-roles { --od-role-gap: clamp(24px, 0.76vw + 21px, 32px); }
.od-roles__head > span { flex: 1 1 0; min-width: 0; }
.od-roles__head > span:last-child { max-width: 110px; }
.od-roles__list { list-style: none; margin: 0; padding: 0; }
.od-role {
	position: relative;
	display: flex; align-items: flex-start; gap: 20px;
	padding-block: var(--od-role-gap); border-bottom: 1px solid var(--od-line);
}
.od-role__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.od-role__title, .od-role__type { font-size: var(--od-fs-b1); font-weight: 500; line-height: 1.6; }
.od-role__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--od-black); }
.od-role__title a { color: inherit; transition: color 0.2s; }
.od-role__title a::after { content: ""; position: absolute; inset: 0; }
.od-role:hover .od-role__title a { color: var(--od-brand); }
.od-role:hover .od-btn::before { margin-right: 8px; }
.od-role__type { color: var(--od-grey-800); }
.od-role__sub { font-size: var(--od-fs-b3); font-weight: 500; line-height: 1.6; color: var(--od-grey-400); }
.od-role__link { flex: none; }
.od-roles__more { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 56px; }
.od-roles__more-text { display: flex; flex-direction: column; gap: 8px; max-width: 500px; color: var(--od-grey-900); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.od-job__body { flex-direction: column; }
	.od-job__details, .od-job__apply { flex: none; width: 100%; max-width: none; }
	.od-job__apply { position: static; }
	.od-page-careers .od-container, .od-page-job .od-container { padding-inline: clamp(20px, 2.857vw + 8.86px, 40px); }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.od-job__title-row { flex-direction: column; align-items: flex-start; gap: 16px; }
	.od-job__fact-icon { width: 24px; height: 24px; }
	.od-careers-head { flex-direction: column; gap: 32px; }
	.od-careers-head > .od-label { flex: none; padding-top: 0; }
	.od-careers-head__body { flex: none; width: 100%; }
	.od-roles__head { gap: 0; }
	.od-roles__head > span { flex: none; }
	.od-roles__head > span:nth-child(2) { margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--od-grey-300); line-height: 1.2; }
	.od-roles__head > span:last-child { display: none; }
	.od-role__title { flex-direction: column; align-items: flex-start; }
	.od-role { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
	.od-role__col { grid-column: 1; }
	.od-role__link { grid-column: 2; grid-row: 1; }
	.od-roles__more { flex-direction: column; gap: 24px; margin-top: 48px; }
}