/*
 * Баннер «Клондайк PRO» (категория «Работа») — светлый премиальный, нативная вёрстка HTML + CSS + SVG.
 * Разметка: resources/views/categories/partials/kl-pro-banner.blade.php. Всё под префиксом .kl-pro-banner.
 * Режимы: по умолчанию — горизонтальный (на всю ширину контейнера); плитка 300 px слева от компаний
 * (десктоп ≥1200 при наличии компаний) — вертикальная компоновка.
 */
.kl-pro-banner{
  --kl-gold:#c9953d;--kl-gold-l:#e0b76c;--kl-gold-d:#a87420;--kl-ink:#171b2b;--kl-sub:#656a73;
  position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:104px;padding:14px 24px;
  border-radius:14px;overflow:hidden;isolation:isolate;box-sizing:border-box;text-decoration:none;color:var(--kl-ink);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  border:1px solid rgba(201,149,61,.42);
  background:
    radial-gradient(34% 110% at 100% 60%,rgba(174,185,198,.22) 0%,rgba(174,185,198,0) 100%),
    radial-gradient(22% 90% at 88% 50%,rgba(224,183,108,.28) 0%,rgba(224,183,108,0) 100%),
    radial-gradient(30% 80% at 40% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 100%),
    linear-gradient(100deg,#fff9f0 0%,#f5efe5 58%,#ede5da 100%);
  box-shadow:0 6px 18px -8px rgba(120,84,22,.22),0 1px 2px rgba(120,84,22,.08);
  transition:border-color .18s,box-shadow .18s;
}
.kl-pro-banner *,.kl-pro-banner *::before,.kl-pro-banner *::after{box-sizing:border-box}
.kl-pro-banner:hover{border-color:rgba(201,149,61,.7);box-shadow:0 8px 22px -8px rgba(120,84,22,.3),0 1px 2px rgba(120,84,22,.1)}
.kl-pro-banner:focus-visible{outline:2px solid var(--kl-gold-d);outline-offset:2px}

.kl-pro-banner__waves{position:absolute;z-index:-1;top:0;bottom:0;right:0;width:min(62%,700px);height:100%;pointer-events:none}
.kl-pro-banner__mark{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.kl-pro-banner__crown{width:30px;height:auto;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(120,84,22,.25))}
.kl-pro-banner__pro{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 11px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1;color:#2d2410;
  background:linear-gradient(180deg,#fff7e0 0%,#f1dba6 60%,#e2bd72 100%);border:1px solid rgba(201,149,61,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.kl-pro-banner__text{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto;padding-right:24px}
.kl-pro-banner__title{display:block;font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--kl-ink)}
.kl-pro-banner__title b{font-weight:800;color:var(--kl-gold-d)}
.kl-pro-banner__sub{display:flex;flex-wrap:wrap;align-items:center;column-gap:9px;row-gap:2px;font-size:13px;line-height:1.35;font-weight:500;color:var(--kl-sub)}
.kl-pro-banner__dot{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f3dda0,#c9953d)}
.kl-pro-banner__wave-l{position:absolute;z-index:-1;left:0;bottom:0;width:min(34%,420px);height:60%;pointer-events:none}

/* Плитка 300 px слева от оплаченных компаний (десктоп) */
@media (min-width:1200px){
  .jb-companies:not(.jb-companies--solo) .kl-pro-banner{flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;min-height:154px;padding:18px 20px}
  .jb-companies:not(.jb-companies--solo) .kl-pro-banner__text{padding-right:0;flex:0 1 auto}
  .jb-companies:not(.jb-companies--solo) .kl-pro-banner__title{font-size:17px;max-width:230px}
  .jb-companies:not(.jb-companies--solo) .kl-pro-banner__sub{display:none}
  .jb-companies:not(.jb-companies--solo) .kl-pro-banner__waves{width:100%;opacity:.55}
}

/* Планшет */
@media (max-width:1199px){
  .kl-pro-banner{min-height:100px;padding:14px 22px}
  .kl-pro-banner__title{font-size:20px}
  .kl-pro-banner__text{padding-right:16px}
  .kl-pro-banner__waves{width:min(70%,560px)}
}
@media (max-width:899px){
  .kl-pro-banner__title{font-size:18px}
  .kl-pro-banner__sub{font-size:12px}
  .kl-pro-banner__text{padding-right:16px}
}
/* Мобильный: заголовок может переноситься, корона+PRO над текстом, портфель меньше */
@media (max-width:640px){
  .kl-pro-banner{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;min-height:116px;padding:14px 16px}
  .kl-pro-banner__crown{width:26px}
  .kl-pro-banner__pro{height:20px;padding:0 9px;font-size:11px}
  .kl-pro-banner__text{padding-right:16px;gap:4px;flex:0 1 auto}
  .kl-pro-banner__title{font-size:16px;line-height:1.22}
  .kl-pro-banner__sub{display:block;font-size:11.5px}
  .kl-pro-banner__dot{display:none}
  .kl-pro-banner__sub>span{display:inline-block;margin-right:10px}
  .kl-pro-banner__waves{width:100%;opacity:.7}
}
@media (max-width:380px){
  .kl-pro-banner__sub{display:none}
  .kl-pro-banner__text{padding-right:16px}
}
@media (prefers-reduced-motion:reduce){.kl-pro-banner{transition:none}}