/* ============================================================
   Life Science Jobs Pages: "Boost my application" banner on single
   job listings (markup: LSJ_Job_CTA::banner()).
   Light hairline card, one highlight phrase, solid button, small
   animated CV sheet. Rules are (0,2,0) or more so theme styles for
   h3, p and a inside the listing never win.
   ============================================================ */

.lsj-job-cta.lsj-job-cta {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 24px;
  margin: 28px 0;
  padding: 24px 28px;
  border: 1px solid var(--lsj-edge);
  border-radius: calc(var(--lsj-radius) + 4px);
  background:
    radial-gradient(80% 120% at 0% 0%, rgb(253 186 116 / .14), transparent 60%),
    #fff;
  color: var(--lsj-fg);
  font-family: var(--lsj-font);
  font-size: 15px;
  line-height: 1.6;
  box-sizing: border-box;
}
.lsj-job-cta.lsj-job-cta * { box-sizing: border-box; }
.lsj-job-cta .lsj-job-cta__body :is(p, h3):is(p, h3) { margin: 0; padding: 0; letter-spacing: normal; text-transform: none; }

.lsj-job-cta .lsj-job-cta__eyebrow { font-size: 13px; font-weight: 500; color: var(--lsj-subtle); }
.lsj-job-cta .lsj-job-cta__title.lsj-job-cta__title {
  margin-top: 4px;
  font-family: var(--lsj-font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--lsj-fg);
}
.lsj-job-cta .lsj-job-cta__text.lsj-job-cta__text { margin-top: 6px; color: var(--lsj-muted); }
.lsj-job-cta .lsj-hl {
  font-family: var(--lsj-font-display);
  font-weight: 500;
  letter-spacing: -.02em;
  text-transform: capitalize;
  color: var(--lsj-hl);
}

.lsj-job-cta .lsj-job-cta__btn.lsj-job-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 0 var(--lsj-radius) 0 var(--lsj-radius);
  background: var(--lsj-solid-bg);
  color: var(--lsj-solid-fg);
  font: 500 14px/1 var(--lsj-font);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .2s;
}
.lsj-job-cta .lsj-job-cta__btn.lsj-job-cta__btn:hover { background: var(--lsj-solid-hover); color: var(--lsj-solid-fg); }
.lsj-job-cta .lsj-job-cta__btn:focus-visible { outline: 2px solid var(--lsj-fg); outline-offset: 2px; }
.lsj-job-cta .lsj-icon { display: inline-flex; width: 1em; height: 1em; }
.lsj-job-cta .lsj-icon svg { width: 100%; height: 100%; }

/* Art: a CV sheet whose lines highlight in turn, then a tick */
.lsj-job-cta .lsj-job-cta__art { width: 88px; height: 88px; overflow: visible; }
.lsj-job-cta .a-sheet { fill: #fff; stroke: var(--s-line-strong); stroke-width: 1.5; }
.lsj-job-cta .a-line  { fill: none; stroke: var(--s-line-strong); stroke-width: 4; stroke-linecap: round; animation: lsj-cta-line 4s ease-in-out infinite; }
.lsj-job-cta .a-badge { fill: var(--s-ok); }
.lsj-job-cta .a-tick  { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lsj-cta-tick 4s ease-in-out infinite; }
@keyframes lsj-cta-line { 0%, 20% { stroke: var(--s-line-strong); } 40%, 80% { stroke: var(--s-hl); } 100% { stroke: var(--s-line-strong); } }
@keyframes lsj-cta-tick { 0%, 40% { stroke-dashoffset: 1; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }

@media (max-width: 767px) {
  .lsj-job-cta.lsj-job-cta { grid-template-columns: 64px minmax(0, 1fr); padding: 20px; }
  .lsj-job-cta .lsj-job-cta__art { width: 64px; height: 64px; }
  .lsj-job-cta .lsj-job-cta__btn.lsj-job-cta__btn { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lsj-job-cta .a-line, .lsj-job-cta .a-tick { animation: none; }
  .lsj-job-cta .a-tick { stroke-dashoffset: 0; }
}