/* Single job page — structure from the reference design: cover banner with an overlapping
   company logo, title row with Save/Apply, then a two-column grid of cards.
   Prefix: .cxjd-  · tokens follow components.css (--cx-primary #ef801f, --cx-accent #2d4f97). */

.cxjd{
  --j-ink:#111827; --j-ink-2:#374151; --j-muted:#5b6472; --j-faint:#9ca3af;
  --j-line:#e8eaf0; --j-line-2:#f0f2f6; --j-bg:#f6f7fa; --j-card:#fff;
  --j-primary:#ef801f; --j-primary-dark:#d86f14;
  background:var(--j-bg); color:var(--j-ink);
  font-family:'Plus Jakarta Sans',Mulish,system-ui,sans-serif;
  padding:24px 0 56px;
}
.cxjd *,.cxjd *::before,.cxjd *::after{box-sizing:border-box}
.cxjd-wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---- banners ---- */
.cxjd-banner{margin-bottom:16px;padding:12px 16px;border-radius:12px;border:1px solid #d9e2f3;background:#f7f9fd;font-size:14px;color:#24427f}
.cxjd-banner.is-warn{border-color:#f5e2cb;background:#fefaf5;color:#a1560d}

/* ---- cover + logo ---- */
.cxjd-cover{position:relative;height:190px;border-radius:18px;background-size:cover;background-position:center;background-repeat:no-repeat}
.cxjd-cover.is-gradient{background-image:linear-gradient(110deg,#7bd4a6 0%,#f2d06b 42%,#ef9b4a 72%,#e8622c 100%)}
.cxjd-logo{position:absolute;left:28px;bottom:-34px;width:92px;height:92px;border-radius:22px;background:#fff;
  border:1px solid var(--j-line);box-shadow:0 6px 20px rgba(17,24,39,.10);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px}
.cxjd-logo img{max-width:100%;max-height:100%;object-fit:contain}
.cxjd-logo b{font-size:24px;font-weight:800;color:var(--cx-accent,#2d4f97)}

/* ---- title row ---- */
.cxjd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:48px 4px 0;margin-bottom:24px}
.cxjd-head-text{min-width:0;flex:1 1 320px}
.cxjd-head h1{margin:0;font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--j-ink)}
.cxjd-co{margin:4px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--j-muted)}
.cxjd-co a{color:var(--j-muted);text-decoration:none}
.cxjd-co a:hover{color:var(--cx-accent,#2d4f97)}
.cxjd-sub{margin:10px 0 0;font-size:14px;color:var(--j-faint)}
.cxjd-sub .dot{margin:0 6px;color:#cbd2de}
.cxjd-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:0 0 auto}

/* ---- buttons: same pill geometry as the site primary (public.css) ---- */
.cxjd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 26px;
  border:1.5px solid transparent;border-radius:999px;font-family:"Mulish",sans-serif;font-size:16px;font-weight:700;
  line-height:1;letter-spacing:.01em;cursor:pointer;text-decoration:none;background:transparent;
  transition:border-color .15s,background .15s,color .15s}
.cxjd-btn-ghost{border-color:#d6dae4;color:var(--j-ink);background:#fff}
.cxjd-btn-ghost:hover{border-color:var(--j-primary);color:var(--j-primary-dark);text-decoration:none}
.cxjd-btn-ghost.saved{border-color:var(--j-primary);color:var(--j-primary-dark)}
.cxjd-btn-block{display:flex;width:100%;margin-top:16px}
/* "See all jobs from X" wraps to two lines - smaller, normal weight, only the
   company name bold. .cxjd-btn sets line-height:1, which crushes a second line. */
.cxjd-btn-seeall{font-size:14px;font-weight:500;line-height:1.45;padding:12px 20px;text-align:center}
.cxjd-btn-seeall strong{font-weight:700}
/* the apply button carries .button from public.css - keep it the same size as the ghost */
.cxjd-cta .cx-easy-apply{margin:0;min-height:46px;padding:11px 26px;border-radius:999px}

/* ---- grid ---- */
.cxjd-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:22px;align-items:start}
.cxjd-col{display:flex;flex-direction:column;gap:22px;min-width:0}

/* ---- cards ---- */
.cxjd-card{background:var(--j-card);border:1px solid var(--j-line);border-radius:16px;padding:26px 28px}
.cxjd-card h2{margin:0 0 14px;font-size:18px;font-weight:700;color:var(--j-ink)}
.cxjd-card h3{margin:22px 0 10px;font-size:16px;font-weight:700;color:var(--j-ink)}
.cxjd-rich{font-size:14px;line-height:1.7;color:var(--j-muted)}
.cxjd-rich p{margin:0 0 10px;font-family:inherit;font-size:14px;font-weight:400;line-height:1.7;color:var(--j-muted)}
.cxjd-rich :last-child{margin-bottom:0}

.cxjd-bullets{list-style:none;margin:0;padding:0}
.cxjd-bullets li{position:relative;padding-left:16px;margin-bottom:7px;font-size:14px;line-height:1.6;color:var(--j-muted)}
.cxjd-bullets li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:#cbd2de}

.cxjd-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.cxjd-chips li{padding:7px 14px;border-radius:999px;background:#f4f6fa;color:var(--j-ink-2);font-size:12px;font-weight:500}

/* ---- about company ---- */
.cxjd-cobox{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cxjd-cologo{width:48px;height:48px;flex:0 0 auto;border-radius:12px;border:1px solid var(--j-line);background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:7px}
.cxjd-cologo img{max-width:100%;max-height:100%;object-fit:contain}
.cxjd-cologo b{font-size:16px;font-weight:800;color:var(--cx-accent,#2d4f97)}
.cxjd-coname{font-size:16px;font-weight:700;color:var(--j-ink);text-decoration:none;display:block}
.cxjd-coname:hover{color:var(--cx-accent,#2d4f97)}
.cxjd-cofollow{font-size:12px;color:var(--j-faint);margin-top:2px}
.cxjd-coabout{font-size:14px;line-height:1.7;color:var(--j-muted);margin:0}

/* ---- facts panel ---- */
.cxjd-pay{font-size:30px;font-weight:800;line-height:1.2;color:var(--j-ink)}
.cxjd-pay-sub{font-size:14px;color:var(--j-faint);margin-top:3px}
.cxjd-pay-none{font-size:16px;color:var(--j-faint)}
.cxjd-rows{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.cxjd-rows li{display:flex;align-items:center;gap:14px}
.cxjd-rows .ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:#f4f6fa;color:#6b7280;
  display:flex;align-items:center;justify-content:center;font-size:16px}
.cxjd-rows .tx{min-width:0}
.cxjd-rows .tx b{display:block;font-size:14px;font-weight:600;color:var(--j-ink);line-height:1.4}
.cxjd-rows .tx small{display:block;font-size:12px;color:var(--j-faint);margin-top:1px}
.cxjd-break{word-break:break-word}
.cxjd-report{display:inline-block;margin-top:16px;font-size:12px;color:var(--j-faint);text-decoration:none}
.cxjd-report:hover{color:#b42318;text-decoration:underline}

/* ---- latest jobs ---- */
.cxjd-count{font-size:14px;color:var(--j-faint);margin:-8px 0 16px}
.cxjd-joblist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cxjd-joblist li{padding:13px 0;border-bottom:1px solid var(--j-line-2)}
.cxjd-joblist li:first-child{padding-top:0}
.cxjd-joblist li:last-child{border-bottom:0;padding-bottom:0}
.cxjd-joblist a{display:block;font-size:14px;font-weight:700;color:var(--j-ink);text-decoration:none;line-height:1.35}
.cxjd-joblist a:hover{color:var(--cx-accent,#2d4f97)}
.cxjd-joblist small{display:block;font-size:12px;color:var(--j-faint);margin-top:3px}
.cxjd-joblist .dot,.cxjd-simgrid .dot{margin:0 4px;color:#cbd2de}
.cxjd-none{margin:0;font-size:14px;color:var(--j-faint)}

/* ---- similar jobs (kept from the previous page - the reference has no equivalent) ---- */
.cxjd-similar{margin-top:22px}
.cxjd-simgrid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0}
.cxjd-simgrid li{border:1px solid var(--j-line);border-radius:12px;padding:14px 16px}
.cxjd-simgrid li:hover{border-color:#cfd6e4}
.cxjd-simgrid a{display:block;font-size:14px;font-weight:700;color:var(--j-ink);text-decoration:none;line-height:1.35}
.cxjd-simgrid a:hover{color:var(--cx-accent,#2d4f97)}
.cxjd-simgrid small{display:block;font-size:12px;color:var(--j-faint);margin-top:3px}

/* the share bar and analysis host sit inside the first card */
.cxjd-card .cx-share-bar{margin-top:22px;padding-top:18px;border-top:1px solid var(--j-line-2)}
#cx-analysis-host[hidden]{display:none}
#cx-analysis-host{margin-top:18px}

/* ---- responsive ---- */
@media (max-width:1000px){
  .cxjd-grid{grid-template-columns:minmax(0,1fr)}
  .cxjd-simgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .cxjd{padding:14px 0 40px}
  .cxjd-wrap{padding:0 16px}
  .cxjd-cover{height:140px;border-radius:14px}
  .cxjd-logo{left:18px;bottom:-28px;width:72px;height:72px;border-radius:18px;padding:9px}
  .cxjd-head{padding-top:40px;margin-bottom:18px}
  .cxjd-head h1{font-size:24px}
  .cxjd-cta{width:100%}
  .cxjd-cta > *{flex:1 1 0}
  .cxjd-card{padding:20px 18px;border-radius:14px}
  .cxjd-grid,.cxjd-col{gap:16px}
  .cxjd-simgrid{grid-template-columns:minmax(0,1fr)}
  .cxjd-pay{font-size:24px}
}