/* FreelanceKu V5.2 — grid accuracy, compact work cards and single-layer WhatsApp */
/* In narrow layouts, the previous flex column used align-items:start;
   flattened display:contents descendants therefore kept intrinsic widths. */
@media(max-width:850px){
  .content-grid{align-items:stretch;width:100%;}
  .content-grid .vacancy-card,.content-grid .details-panel,
  .content-grid .recruiter-panel,.content-grid .other-roles{width:100%;max-width:none;min-width:0;align-self:stretch;}
}
.other-roles{
  box-sizing:border-box;width:100%;min-width:0;
  padding:clamp(19px,3vw,27px);
  background:linear-gradient(155deg,#fff 0%,#f8fbff 96%);
  border:1px solid #deebf6;
  box-shadow:0 15px 45px rgba(14,68,133,.085),inset 0 1px 0 #fff;
}
.other-roles::before{opacity:.35;pointer-events:none}
.other-heading{margin-bottom:17px}
.other-heading h2{font-size:clamp(21px,2.5vw,27px);letter-spacing:-.025em;line-height:1.2}
.filter-chips{display:flex;flex-wrap:nowrap;gap:8px;max-width:100%;margin-bottom:18px}
.filter-chips .chip{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;padding:10px 8px;font-size:clamp(10px,1.3vw,12px);box-shadow:none;background:linear-gradient(180deg,#fff,#f4f7fc);border-color:#e2ebf3}
.filter-chips .chip.active{background:#e8f7ff;border-color:#83d5ef;color:#087caf;box-shadow:0 3px 10px rgba(8,138,207,.08)}
.role-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%}
.role-option{box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:77px;display:flex;align-items:center;gap:13px;text-align:left;padding:12px 14px;border-radius:17px;background:linear-gradient(135deg,#ffffff,#f8fbff);border:1px solid #e3edf5;box-shadow:0 4px 13px rgba(13,66,112,.055),inset 0 1px 0 #fff;transform:none}
.role-option::before,.role-option::after{opacity:.14}
.role-option:hover,.role-option.selected{transform:none;background:linear-gradient(140deg,#f3fcff,#e8f7ff);border-color:#84d1eb;box-shadow:0 7px 17px rgba(5,128,188,.095),inset 0 1px 0 #fff}
.role-small-icon{width:45px;height:45px;flex:0 0 45px;border-radius:13px;background:linear-gradient(155deg,#eaf8ff,#dcf0fc);color:#0b92c8;box-shadow:inset 0 1px 0 #fff,0 3px 9px rgba(5,99,154,.07)}
.role-copy{min-width:0;flex:1 1 auto;overflow:hidden}
.role-copy strong{display:block;font-size:clamp(13px,1.6vw,16px);line-height:1.3;overflow-wrap:anywhere;letter-spacing:-.02em}
.role-copy small{display:block;margin-top:5px;font-size:clamp(10px,1.25vw,12px);line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.role-chevron{margin-left:0;flex-shrink:0;opacity:.78}
/* One WhatsApp surface; remove duplicate green pedestal and surrounding overlay. */
.wa-floating-wrap{filter:none;isolation:isolate;gap:9px}
.wa-floating-button{
  border-radius:50%;border:2px solid #fff;
  background:linear-gradient(150deg,#34d77c,#12b769 70%,#0aa85c);
  box-shadow:0 9px 27px rgba(2,66,57,.24),inset 0 1px 1px rgba(255,255,255,.35);
  outline:0;animation:wa-soft-float 3.8s ease-in-out infinite;
}
.wa-floating-button::before{inset:-6px;border:1px solid rgba(12,194,120,.3);border-radius:50%;background:transparent;box-shadow:none}
.wa-floating-button::after{display:none!important}
.wa-floating-button svg{display:block;filter:none}
.wa-floating-tip{padding:8px 11px;border-radius:11px;font-size:10px;box-shadow:0 7px 20px rgba(6,40,63,.12)}
.wa-floating-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:700px){
  .other-roles{padding:20px 16px 21px;border-radius:21px}
  .role-option{gap:11px;padding:12px;min-height:73px;border-radius:14px}
  .role-small-icon{width:43px;height:43px;flex-basis:43px}
  .role-copy strong{font-size:14px}
  .role-copy small{font-size:11px}
  .role-chevron svg{width:17px;height:17px}
  .filter-chips{gap:7px}
  .filter-chips .chip{padding:9px 5px;font-size:10px}
  .wa-floating-wrap{right:calc(16px + env(safe-area-inset-right));bottom:calc(19px + env(safe-area-inset-bottom))}
  .wa-floating-button{width:56px;height:56px;flex-basis:56px}
  .wa-floating-button svg{width:31px;height:31px}
}
@media(max-width:350px){.filter-chips .chip{font-size:9px;padding:8px 3px}.role-copy strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.wa-floating-button,.wa-floating-button::before,.wa-floating-tip{animation:none!important}.wa-floating-tip{opacity:1;transform:none}}