/* ============================================================
   Career single (job detail) — Theme-design/career-page/v5.
   Two-column: left = details, right = Benefits / Process / Enquiry.
   Scoped under .single-career so .job-list etc. don't clash with the
   careers archive (.careers-archive .job-list is a different component).
   ============================================================ */

.single-career .job-headmeta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4); }
.single-career .job-headmeta__logo { width: 48px; height: 48px; object-fit: contain; border-radius: var(--r-sm); padding: 4px; }
.single-career .job-headmeta strong { color: var(--ah-navy); }
.single-career .job-headmeta .muted { color: var(--c-text-soft); }

.single-career .job-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: var(--sp-8); align-items: start; }
.single-career .job-main h2 {
    font-size: var(--fs-xl); color: var(--ah-navy); margin: var(--sp-7) 0 var(--sp-4);
    padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-border);
}
.single-career .job-main > h2:first-child { margin-top: 0; }
.single-career .job-main p { margin: 0 0 var(--sp-4); color: var(--c-text); }

/* WYSIWYG block bodies: style editor-produced lists like the design's .job-list. */
.single-career .job-main ul { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.single-career .job-main ul li { position: relative; padding: 7px 0 7px 26px; color: var(--c-text); }
.single-career .job-main ul li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--ah-blue); }
.single-career .job-main ol { margin: 0 0 var(--sp-5); padding-left: 22px; color: var(--c-text); }
.single-career .job-main ol li { padding: 4px 0; }
.single-career .job-note p:last-child { margin-bottom: 0; }

.single-career .job-list { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.single-career .job-list li { position: relative; padding: 7px 0 7px 26px; color: var(--c-text); }
.single-career .job-list li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--ah-blue); }

.single-career .job-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.single-career .job-steps li { position: relative; padding: 10px 0 10px 44px; counter-increment: step; }
.single-career .job-steps li::before {
    content: counter(step,decimal-leading-zero); position: absolute; left: 0; top: 8px;
    width: 30px; height: 30px; border-radius: 50%; background: var(--ah-navy); color: #fff;
    font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.single-career .job-note { background: #fff; border: 1px solid var(--c-border); border-left: 4px solid var(--ah-red);
    padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm); color: var(--c-text); margin-bottom: var(--sp-5); }

.single-career .job-aside { display: flex; flex-direction: column; gap: var(--sp-7); }
.single-career .job-box { padding: 0; }
.single-career .job-box h3 { color: var(--ah-navy); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-border); font-size: var(--fs-lg); }
.single-career .job-box .job-list { margin-bottom: 0; }
.single-career .job-box p { color: var(--c-text); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
.single-career .job-box .btn-pill { display: flex; width: 100%; justify-content: center; }

@media (max-width: 900px) { .single-career .job-layout { grid-template-columns: 1fr; } }