/**
 * jp-jobs-page-redesign.css
 * Scope:  body.single-jobs  (ALL Personio job-detail pages — the job template)
 * Figma:  JTL-Website-Modules node 2392-3323 (desktop job template)
 *
 * jp-jobs-page-redesign.js recomposes the flat Personio dump into:
 *   .jtl-jobs-grid  ->  .jtl-jobs-main (2fr) + .jtl-jobs-aside (1fr, sticky)
 * This sheet styles it to the Figma tokens (read from get_design_context):
 *   overline  Inter 18/24, #2722f8 (Tech Blue), .9px, uppercase
 *   title     40px, #0b1b45 (Dark Blue), bold
 *   apply btn #fb581f (Orange) pill, navy text, uppercase
 *   cards     white, radius 46px, pad 42px; "Du hast noch Fragen?" = #89d2ff
 *   headers   Inter 28/36, #0b1b45
 * If the JS finds no blocks the selectors don't match, so the raw page still
 * renders. Scoped to body.single-jobs — no leakage to other templates.
 */

/* ---- unify the whole job page background to Light Sand (#eeeee7) ---- */
body.single-jobs [data-personio-item] { background: #eeeee7; }

/* ---- 2-column grid (max-w 1280, main 2fr / sidebar 1fr) ---- */
body.single-jobs .jtl-jobs-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}
@media (max-width: 991px) {
    body.single-jobs .jtl-jobs-grid { grid-template-columns: 1fr; gap: 2rem; }
    body.single-jobs .jtl-jobs-aside { position: static; }
}

/* ---- header block (left column top) ---- */
body.single-jobs .jtl-jobs-head { margin-bottom: 2.5rem; }
body.single-jobs .jtl-jobs-overline {
    display: block;
    color: #2722f8;                 /* Tech Blue */
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}
body.single-jobs .jtl-jobs-title {
    color: #0b1b45;                 /* Dark Blue */
    font-weight: 800;
    font-size: clamp(32px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0 0 1.75rem;
}
/* the theme decorates every h1 with an orange ::after underline bar — the Figma
   job header (2392-3352) has none: title flows straight into the apply pill. */
body.single-jobs .jtl-jobs-title::after { display: none !important; }
body.single-jobs .jtl-jobs-overline .headline-link,
body.single-jobs .jtl-jobs-title .headline-link { display: none; }

body.single-jobs .jtl-jobs-apply-btn {
    display: inline-block;
    background: #fb581f;            /* Orange */
    color: #0b1b45;                /* navy text (per Figma) */
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    border: 0;
    border-radius: 100px;
    padding: 12px 24px;
    cursor: pointer;
    transition: background .15s ease;
}
body.single-jobs .jtl-jobs-apply-btn:hover { background: #e44a15; }

/* ---- left-column body typography + arrow lists ---- */
/* Figma H2 (2392:3361/3405): brand heading font, 32px, navy, +0.64px tracking.
   The Personio markup tags these h2 with `.h3` (Inter) — override to the brand
   heading face so "Deine Aufgaben" / "Was Du dafür mitbringst" match the title. */
body.single-jobs .jtl-jobs-main h2,
body.single-jobs .jtl-jobs-main h3 {
    color: #0b1b45;
    font-family: 'Museo', 'Kurdis', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 46px;
    letter-spacing: 0.64px;
    margin-top: 2.5rem;
}
body.single-jobs .jtl-jobs-main h2::after,
body.single-jobs .jtl-jobs-main h3::after { display: none !important; }
body.single-jobs .jtl-jobs-main > section > *:first-child,
body.single-jobs .jtl-jobs-main > *:first-child { margin-top: 0; }
body.single-jobs .jtl-jobs-main ul { list-style: none; padding-left: 0; }
body.single-jobs .jtl-jobs-main li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.85rem;
    line-height: 28px;
}
/* tech-blue right-arrow bullet, matching Figma's Vector591 chevron */
body.single-jobs .jtl-jobs-main li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    top: -1px;
    color: #2722f8;
    font-weight: 700;
    font-size: 20px;
}

/* ---- sidebar cards ---- */
body.single-jobs .jtl-jobs-aside {
    position: sticky;
    top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
body.single-jobs .jtl-job-card {
    background: #fff;
    border-radius: 32px;
    padding: 2.25rem;
    box-shadow: 0 2px 24px rgba(11, 27, 69, 0.06);
}
body.single-jobs .jtl-job-card__title,
body.single-jobs .jtl-job-card > h3:first-child {
    color: #0b1b45;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    margin: 0 0 1.5rem;
}
/* neutralise Bootstrap column widths for content lifted into a card */
body.single-jobs .jtl-job-card [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
body.single-jobs .jtl-job-card .jtl-card-src-heading { display: none; }

/* Infos + Benefits cards — Figma row list (icon 32px + label/value stack).
   Both use the same .jtl-info-list / .jtl-info-row markup built by the JS. */
body.single-jobs .jtl-info-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;               /* Figma 24px between rows */
}
body.single-jobs .jtl-info-row {
    display: flex;
    gap: 1.3rem;               /* Figma 21px icon->text */
    align-items: flex-start;
}
body.single-jobs .jtl-info-ic {
    flex: 0 0 32px;
    width: 32px;
    font-size: 24px;
    line-height: 28px;
    color: #0b1b45;
    text-align: center;
}
body.single-jobs .jtl-info-tc {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;               /* Figma 8px label->value */
    min-width: 0;
}
body.single-jobs .jtl-info-label {
    color: #0b1b45;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
}
body.single-jobs .jtl-info-val {
    color: #0b1b45;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
}
/* Benefits rows are single-line (value only) — tighten the vertical rhythm */
body.single-jobs .jtl-job-card--benefits .jtl-info-list { gap: 1.15rem; }
body.single-jobs .jtl-job-card--benefits .jtl-info-row { align-items: center; }

/* "Du hast noch Fragen?" — light-blue card */
body.single-jobs .jtl-job-card--fragen { background: #89d2ff; box-shadow: none; }
body.single-jobs .jtl-job-card--fragen h3 {
    color: #0b1b45;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    margin: 0 0 1rem;
}
body.single-jobs .jtl-job-card--fragen a { color: #0b1b45; font-weight: 700; }

/* ---- "Du möchtest noch mehr wissen?" infobox (Figma 2392:3581) ---- */
/* Light-Sand band, navy rounded box (headline + copy + outlined CTA) + photo */
body.single-jobs .jtl-jobs-infobox {
    background: #eeeee7;
    padding: 4rem 1.5rem;
}
body.single-jobs .jtl-jobs-infobox__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    align-items: stretch;
}
body.single-jobs .jtl-jobs-infobox__box {
    flex: 1 1 0;
    min-width: 0;
    background: #0b1b45;
    border-radius: 32px;
    padding: 2.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
}
body.single-jobs .jtl-jobs-infobox__box h3 {
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    margin: 0;
}
body.single-jobs .jtl-jobs-infobox__box p {
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    margin: 0;
    max-width: 594px;
}
body.single-jobs .jtl-jobs-infobox__btn {
    align-self: flex-start;
    margin-top: 0.5rem;
    display: inline-block;
    border: 2px solid #eeeee7;
    background: transparent;
    color: #eeeee7;
    border-radius: 100px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
body.single-jobs .jtl-jobs-infobox__btn:hover { background: #eeeee7; color: #0b1b45; }
body.single-jobs .jtl-jobs-infobox__img {
    flex: 0 0 416px;
    border-radius: 32px;
    overflow: hidden;
    background-image: url("jp-jobs-infobox.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
body.single-jobs .jtl-jobs-infobox__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 991px) {
    body.single-jobs .jtl-jobs-infobox { padding: 2.5rem 1.5rem; }
    body.single-jobs .jtl-jobs-infobox__inner { flex-direction: column; }
    body.single-jobs .jtl-jobs-infobox__img { flex-basis: auto; height: 260px; }
}

/* ---- apply CTA "Wir freuen uns auf Deine Bewerbung!" (Figma 2392:3593) ---- */
/* centered single column on a Light-Sand band; the 3 asks become white pills. */
body.single-jobs .jtl-jobs-cta { background: #eeeee7; }
body.single-jobs .jtl-jobs-cta .row { justify-content: center; }
body.single-jobs .jtl-jobs-cta [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.single-jobs .jtl-jobs-cta .col-lg-6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    max-width: 900px !important;
    margin: 0 auto;
    padding: 2.75rem 1rem !important;
}
body.single-jobs .jtl-jobs-cta .jtl-cta-overline {
    color: #2722f8;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    margin: 0;
}
body.single-jobs .jtl-jobs-cta h4 {
    color: #0b1b45;
    font-family: 'Museo', 'Kurdis', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 46px;
    letter-spacing: 0.64px;
    margin: 0;
}
body.single-jobs .jtl-jobs-cta h4::after { display: none !important; }
body.single-jobs .jtl-jobs-cta .headline-link { display: none; }
body.single-jobs .jtl-jobs-cta p:not(.jtl-cta-overline) {
    color: #0b1b45;
    font-size: 18px;
    line-height: 24px;
    margin: 0;
    max-width: 640px;
}
/* the 3 asks -> white rounded pills with tech-blue checks */
body.single-jobs .jtl-jobs-cta ul.list-icons {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
/* Figma 2392:3604/3609/3614 — pl 12, pr 16, gap 8, radius 69, text 18/28 -> 56px tall.
   The height is pinned instead of being derived from vertical padding: the third
   pill ("Deinen fruehsten Starttermin") resolved a 37px line box where the other
   two resolved 28px, so the row rendered 52/52/61. A fixed box makes all three
   exactly 56px whatever metrics the glyph fallback pulls in. Widths stay
   content-sized (227/303/306 in Figma) — the design does not equalise them. */
body.single-jobs .jtl-jobs-cta ul.list-icons li {
    background: #fff;
    border-radius: 69px;
    box-sizing: border-box;
    height: 56px;
    padding: 0 16px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #0b1b45;
    font-size: 18px;
    line-height: 28px;
}
/* The theme's .list-icon hangs the tick 24px LEFT of the text (negative margin /
   absolute) — pin it back INSIDE the pill as a normal inline flex item, and
   override .text-wawi's !important orange to the Figma tech-blue check. */
body.single-jobs .jtl-jobs-cta ul.list-icons li .list-icon {
    position: static !important;
    left: auto !important;
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto;
    color: #2722f8 !important;
    font-size: 18px;
}
/* orange apply pill */
body.single-jobs .jtl-jobs-cta .jtl-cta-apply {
    margin-top: 0.75rem;
    background: #fb581f;
    color: #0b1b45;
    border: 0;
    border-radius: 100px;
    padding: 12px 24px;
    min-width: 320px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease;
}
body.single-jobs .jtl-jobs-cta .jtl-cta-apply:hover { background: #e44a15; }
/* privacy link */
body.single-jobs .jtl-jobs-cta .jtl-cta-privacy {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #000;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.28px;
    text-transform: uppercase;
    /* No underline on the anchor. text-decoration propagates from an ancestor to
       its descendants and a descendant CANNOT switch it back off, so the old
       `.jtl-cta-privacy i { text-decoration: none }` was inert and the shield
       glyph was drawn with the link's underline running under it. The underline
       therefore lives on the label span (emitted by jp-jobs-page-redesign.js),
       which is a sibling of the icon rather than its ancestor. */
    text-decoration: none;
}
body.single-jobs .jtl-jobs-cta .jtl-cta-privacy .jtl-cta-privacy__label {
    text-decoration: underline;
}
body.single-jobs .jtl-jobs-cta .jtl-cta-privacy i { font-size: 18px; }

/* ---------------------------------------------------------------------------
   Header band + breadcrumb strip -> #eeeee7 (page background)

   #header is never painted white: custom-clone.css pins it
   `background: transparent !important`. The white behind the floating nav pill
   is #app (the theme root wrapper, background:white) showing through. Painting
   #header itself is therefore the fix, and it needs ID-level specificity plus
   !important to beat that (1,0,0) !important reset — `body.single-jobs #header`
   is (1,1,1).

   #header is max-width:1600px, so above ~1600px viewport it leaves gutters
   (measured: left 160 / right 160 at 1920). ::before bleeds the band to the
   full viewport. #header is position:relative + z-index:1030, i.e. its own
   stacking context, so z-index:-1 stays INSIDE the header and does not sink
   behind #app's white.

   The floating pill (.jtl-nav-pill) and the megamenus keep their white
   background — deliberately untouched.

   Scoped body.single-jobs: both language twins carry it (verified on /de/ and
   /en/ job singles) and the /de/jobs/ archive does not, so no page-id is
   needed and the WPML twin trap does not apply.
   --------------------------------------------------------------------------- */
body.single-jobs #header {
    background-color: #eeeee7 !important;
}
body.single-jobs #header::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    margin-left: -50vw !important;
    width: 100vw !important;
    background-color: #eeeee7 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}
/* breadcrumb strip ("Startseite > Jobs > ...") sits directly below the header
   band; paint it too so the two cream areas meet with no white seam. */
body.single-jobs .blog-nav {
    background-color: #eeeee7 !important;
}