/* EQ v15.342 — approved HR persona hero underlays */
.hero-visual{
  min-height:392px;
  background:#07142d;
  isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(117,154,255,.06),0 22px 46px rgba(0,0,0,.16);
}
.hero-image-underlay{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url('/assets/images/hr-personas/hr-hero-female-approved.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:saturate(.96) contrast(1.02) brightness(.88);
  transform:scale(1.015);
  transform-origin:center;
}
.hero-visual.is-male .hero-image-underlay{
  background-image:url('/assets/images/hr-personas/hr-hero-male-approved.png');
}
.hero-image-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,16,36,.10) 0%,transparent 24%,transparent 72%,rgba(6,16,36,.10) 100%),
    linear-gradient(180deg,rgba(5,12,29,.04),transparent 72%,rgba(5,12,29,.25)),
    radial-gradient(circle at 53% 50%,transparent 0 38%,rgba(5,13,30,.04) 63%,rgba(5,13,30,.16) 100%);
}

/* Real HTML cards sit over the approved visual so vacancy/candidate data can remain live. */
.hero-visual .candidate-chip,
.hero-visual .vacancy-mini-card,
.hero-visual .interview-calendar-card,
.hero-visual .interview-mini-card,
.hero-visual .target-badge{z-index:4}

.hero-visual .candidate-chip{
  min-width:190px;
  padding:10px 12px;
  gap:9px;
  border-radius:17px;
  background:linear-gradient(180deg,rgba(19,43,92,.96),rgba(13,31,71,.96));
  border:1px solid rgba(87,126,255,.30);
  box-shadow:0 13px 28px rgba(3,8,25,.32),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
}
.hero-visual .chip-positive{left:5.5%;top:13.5%;width:28.5%}
.hero-visual .chip-neutral{left:4.2%;top:38%;width:25.5%}
.hero-visual .chip-avatar{width:42px;height:42px;flex:0 0 42px;border:2px solid rgba(121,151,255,.8);box-shadow:0 0 0 3px rgba(39,74,174,.28)}
.hero-visual .chip-avatar-male{background:radial-gradient(circle at 50% 34%,#ffd3bd 0 26%,transparent 27%),linear-gradient(180deg,#28345e 0 42%,#121c3a 43% 100%)}
.hero-visual .chip-avatar-female{background:radial-gradient(circle at 50% 34%,#ffd8c3 0 26%,transparent 27%),linear-gradient(180deg,#593c61 0 43%,#203463 44% 100%)}
.hero-visual .candidate-chip b{font-size:13px}
.hero-visual .candidate-chip span{font-size:10px;color:#c0cff1}
.hero-visual .candidate-chip>div:nth-child(2){min-width:0;flex:1}
.hero-visual .chip-score{display:block;width:100%;height:5px;margin-top:6px;border-radius:999px;background:rgba(85,121,205,.28);position:relative;overflow:hidden}
.hero-visual .chip-score::before{content:'';position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,#6b5cff,#3cd9cc)}
.hero-visual .score-strong::before{width:72%}
.hero-visual .score-review::before{width:55%;background:linear-gradient(90deg,#895cff,#46c6ef)}
.hero-visual .chip-status{width:28px;height:28px;flex:0 0 28px;font-size:14px;background:rgba(63,92,189,.52);box-shadow:0 6px 15px rgba(0,0,0,.18)}
.hero-visual .chip-status.success{background:#19a994;color:white}
.hero-visual .chip-status.wait{color:#ffd36d}

.hero-visual .vacancy-mini-card{
  right:4.8%;top:4.8%;width:28%;min-width:190px;padding:14px 15px 13px;
  border-radius:20px;background:linear-gradient(180deg,rgba(18,43,96,.97),rgba(10,31,72,.96));
  border:1px solid rgba(84,112,249,.38);box-shadow:0 16px 30px rgba(2,8,26,.34),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(12px)
}
.vacancy-mini-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.hero-visual .vacancy-mini-card p{margin:0;font-size:10px;letter-spacing:.08em}
.vacancy-open-pill{padding:5px 9px;border-radius:999px;background:#168f83;color:#e6fffb!important;font-size:9px!important;font-weight:700}
.hero-visual .vacancy-mini-card>b{font-size:20px;margin-bottom:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-visual .mini-bars{height:44px;align-items:flex-end;margin:0 0 7px;padding:9px 7px 4px;border-radius:11px;background:rgba(9,29,70,.46);border:1px solid rgba(94,121,255,.18)}
.hero-visual .mini-bars i{width:10%;min-width:8px;background:linear-gradient(180deg,#46ddf0,#4a60ff)}
.hero-visual .mini-bars i:nth-child(1){height:7px}.hero-visual .mini-bars i:nth-child(2){height:11px}.hero-visual .mini-bars i:nth-child(3){height:16px}.hero-visual .mini-bars i:nth-child(4){height:23px}.hero-visual .mini-bars i:nth-child(5){height:31px}.hero-visual .mini-bars i:nth-child(6){height:40px}
.hero-visual .vacancy-mini-card>span{display:block;font-size:10px;color:#cad6ef;margin-bottom:2px}
.hero-visual .vacancy-mini-card>small{display:block;font-size:10px;color:#e5ecff;font-weight:700}

.interview-calendar-card{
  position:absolute;right:3.7%;top:36.7%;width:25.2%;min-width:170px;padding:12px 14px;display:flex;align-items:center;gap:11px;
  border-radius:17px;background:linear-gradient(180deg,rgba(20,45,96,.97),rgba(13,34,78,.96));border:1px solid rgba(85,113,245,.34);box-shadow:0 14px 27px rgba(2,8,26,.30);backdrop-filter:blur(12px)
}
.calendar-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#6557ff,#914dff);font-size:17px;color:white;box-shadow:0 8px 18px rgba(94,76,255,.28)}
.interview-calendar-card div{display:grid;gap:2px}.interview-calendar-card b{font-size:13px}.interview-calendar-card small{font-size:10px;color:#c4d1ef}
.hero-visual .interview-mini-card{right:3.7%;top:54%;width:25.2%;min-width:170px;padding:13px 15px;border-radius:17px;background:linear-gradient(180deg,rgba(18,42,88,.98),rgba(10,30,70,.96));color:#edf4ff;border:1px solid rgba(84,112,241,.30);box-shadow:0 14px 27px rgba(2,8,26,.30);backdrop-filter:blur(12px)}
.hero-visual .interview-mini-card li{font-size:11px;color:#edf4ff}.hero-visual .interview-mini-card li i{width:21px;height:21px;border-radius:50%;background:#20b7ab;color:white}.hero-visual .interview-mini-card li i.risk-dot{background:#f4b640;color:#172347}
.hero-visual .target-badge{right:6.3%;bottom:8%;width:66px;height:66px;background:radial-gradient(circle at 45% 45%,#ffcb67,#efa348);box-shadow:0 0 0 8px rgba(59,102,247,.32),0 0 0 17px rgba(61,65,215,.30),0 0 24px rgba(88,173,255,.42);color:#0b3b82}
.hero-visual .target-badge span{font-size:29px;transform:rotate(-7deg)}

/* Hide legacy CSS illustration primitives if an older cached HTML happens to retain them. */
.hero-visual .hero-orbit,.hero-visual .desk-stage,.hero-visual .person-figure,.hero-visual .laptop,.hero-visual .desk-mug,.hero-visual .desk-book{display:none!important}

@media(max-width:1320px){
  .hero-visual{min-height:420px;max-height:460px}
}
@media(max-width:760px){
  .hero-visual{min-height:330px;aspect-ratio:16/9}
  .hero-image-underlay{background-size:cover;background-position:center center}
  .hero-visual .candidate-chip{transform:scale(.75);transform-origin:top left}
  .hero-visual .vacancy-mini-card,.hero-visual .interview-calendar-card,.hero-visual .interview-mini-card{transform:scale(.74);transform-origin:top right}
  .hero-visual .target-badge{transform:scale(.72);transform-origin:bottom right}
}
@media(max-width:560px){
  .hero-visual{min-height:300px}
  .hero-visual .chip-neutral{top:36%}
  .hero-visual .interview-calendar-card{top:35%}
  .hero-visual .interview-mini-card{top:52%}
}

/* Preserve the approved 16:9 composition instead of stretching the generated art. */
.hero-visual{aspect-ratio:16/9;min-height:0;align-self:center}
@media(max-width:1320px){.hero-visual{width:min(980px,100%);min-height:0;max-height:none;justify-self:center}}
@media(max-width:760px){.hero-visual{width:100%;min-height:0}}