/* easyfind.jobs's banner under the ad's card (frontend/src/components/listing/WorkCard.tsx), after the owner's own
   picture of it, made smaller: easyfind.jobs's lavender ground, its wordmark, a bold line with the question in its
   indigo, the fields, its indigo button and a green tick "Her gun yeni elanlar"; beside it a white card of ours, the
   way to find a tradesman in Ustalar. Laid out by the banner's own width (a container): under 560px inside, our card goes
   under easyfind.jobs's part. Inline only on a live ad's page (ListingDetailPage::head), so the page cut of style.css
   is not touched. ASCII only. */
/* the container holds the ground and the padding; the row inside it (.lx-work-in) is what a narrow banner folds */
.lx-work{position:relative;container-type:inline-size;margin-top:16px;padding:20px 20px 20px 26px;overflow:hidden;border:1px solid rgba(70,72,212,.12);border-radius:22px;background:linear-gradient(110deg,#F8F8FD 0%,#EFEFFC 55%,#E7E7FB 100%)}
:root[data-theme="dark"] .lx-work{border-color:rgba(154,156,255,.16);background:linear-gradient(110deg,rgba(154,156,255,.05) 0%,rgba(154,156,255,.1) 55%,rgba(154,156,255,.15) 100%),var(--white)}
.lx-work-in{display:flex;align-items:center;gap:22px}

.lx-work-main{flex:1;min-width:0}
.lx-work-mark{display:inline-block}
.lx-work-mark-img{display:block;width:auto;height:18px}
.lx-work-mark-img--dark{display:none}
:root[data-theme="dark"] .lx-work-mark-img{display:none}
:root[data-theme="dark"] .lx-work-mark-img--dark{display:block}
.lx-work-title{margin:10px 0 0;color:var(--ink);font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.lx-work-title span{color:#4648d4}
:root[data-theme="dark"] .lx-work-title span{color:#9A9CFF}
.lx-work-sub{margin:5px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.4}
.lx-work-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:14px}
.lx-work-cta{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;background:#4648d4;color:#fff;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 6px 14px -6px rgba(70,72,212,.55);transition:background .15s}
.lx-work-cta i{font-size:15px;transition:transform .15s}
/* the whole banner clicks through to easyfind.jobs: the button's link stretched over it (our card sits above) */
.lx-work-cta::after{content:"";position:absolute;inset:0}
.lx-work-note{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:13px;font-weight:600}
.lx-work-note i{color:#16A34A;font-size:16px}

/* our card */
.lx-work-side{position:relative;z-index:1;display:flex;flex-direction:column;flex:none;width:232px;padding:14px 16px 12px;border-radius:16px;background:var(--white);color:var(--ink);text-decoration:none;box-shadow:0 8px 22px -12px rgba(27,25,22,.22),0 1px 2px rgba(27,25,22,.05);transition:box-shadow .2s,transform .2s,background .2s}
:root[data-theme="dark"] .lx-work-side{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lx-work-side-head{display:flex;align-items:center;gap:10px}
.lx-work-side-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#FFF3E3;color:#F08A0C;font-size:16px;transition:background .2s,color .2s}
:root[data-theme="dark"] .lx-work-side-ic{background:rgba(240,138,12,.14)}
.lx-work-side-head strong{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.lx-work-side-text{margin-top:8px;color:var(--ink-2);font-size:12.5px;line-height:1.45}
/* a label, not a link: a sparkle and the name in capitals, like the site's "Birev Instagram-da" */
.lx-work-side-foot{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
:root[data-theme="dark"] .lx-work-side-foot{color:#F0548B}
.lx-work-side-foot i{font-size:15px;letter-spacing:0}

@media (hover:hover) and (pointer:fine){
  .lx-work-cta:hover{background:#3a3cc4}
  .lx-work-cta:hover i{transform:translateX(3px)}
  /* our card has a hover of its own, in our pink: it lifts, takes a pink ring and its wrench tile fills */
  .lx-work-side:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px rgba(var(--accent-rgb),.55),0 14px 28px -12px rgba(var(--accent-rgb),.35)}
  .lx-work-side:hover .lx-work-side-ic{background:#F08A0C;color:#fff}
  :root[data-theme="dark"] .lx-work-side:hover{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(240,84,139,.7),0 14px 28px -14px rgba(240,84,139,.35)}
}

/* a narrow banner: our card under easyfind.jobs's part, as wide as it */
@container (max-width:559px){
  .lx-work-in{flex-direction:column;align-items:stretch;gap:14px}
  .lx-work-title{margin-top:8px;font-size:22px}
  .lx-work-sub{font-size:13px}
  .lx-work-actions{gap:8px 10px;margin-top:12px}
  .lx-work-cta{height:36px;padding:0 13px;font-size:13px}
  .lx-work-note{gap:5px;font-size:12.5px}
  .lx-work-side{width:auto;padding:12px 14px 10px}
  .lx-work-side-text{margin-top:6px}
  .lx-work-side-foot{margin-top:8px;padding-top:8px}
}
@media (max-width:600px){
  .lx-work{padding:18px 16px 16px 18px;border-radius:20px}
}