/* EQ v15.343 — hero composition correction
   Goal: preserve the approved persona artwork without cropping and stop live HTML
   overlays from competing with the illustration. Only the vacancy title/count stay
   live; the rest of the floating cards are already part of the approved artwork. */

.hero-panel{
  align-items:center;
}

.hero-visual{
  width:100%;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:1672 / 941;
  justify-self:center;
  align-self:center;
  overflow:hidden;
  background:#07142d;
  border-radius:24px;
}

.hero-visual.is-male{
  aspect-ratio:1448 / 1086;
  width:min(100%,640px);
}

.hero-image-underlay{
  inset:0;
  background-size:100% 100%!important;
  background-position:center center!important;
  background-repeat:no-repeat;
  transform:none!important;
  filter:saturate(.96) contrast(1.015) brightness(.90);
}

/* Keep only a very soft edge treatment. Do not darken or crop the approved artwork. */
.hero-image-vignette{
  background:
    linear-gradient(180deg,rgba(4,11,28,.015),transparent 74%,rgba(4,11,28,.11)),
    radial-gradient(circle at 50% 48%,transparent 0 68%,rgba(4,12,28,.05) 100%);
}

/* The approved PNG already contains candidate / interview / target cards at the
   correct visual scale. Hide duplicate live overlays that were covering the person. */
.hero-visual .candidate-chip,
.hero-visual .interview-calendar-card,
.hero-visual .interview-mini-card,
.hero-visual .target-badge{
  display:none!important;
}

/* Vacancy data remains live, but the overlay now behaves like a text replacement
   inside the vacancy card baked into the approved artwork, rather than a second card. */
.hero-visual .vacancy-mini-card{
  display:block!important;
  position:absolute;
  z-index:5;
  right:4.1%;
  top:4.0%;
  width:25.2%;
  min-width:0!important;
  height:25.5%;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  pointer-events:none;
}

.hero-visual .vacancy-mini-card::before{
  content:'';
  position:absolute;
  left:8%;
  right:7%;
  top:27%;
  height:24%;
  border-radius:7px;
  background:linear-gradient(180deg,rgba(9,31,76,.99),rgba(8,29,72,.99));
  box-shadow:0 0 12px rgba(7,25,66,.24);
}

.hero-visual .vacancy-mini-card::after{
  content:'';
  position:absolute;
  left:8%;
  right:7%;
  bottom:3%;
  height:15%;
  border-radius:6px;
  background:linear-gradient(180deg,rgba(8,29,72,.98),rgba(8,28,69,.98));
}

.hero-visual .vacancy-mini-head,
.hero-visual .vacancy-mini-card .mini-bars,
.hero-visual #heroVacancyMeta{
  display:none!important;
}

.hero-visual .vacancy-mini-card>b{
  position:absolute;
  z-index:2;
  left:10%;
  right:9%;
  top:28.5%;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  margin:0!important;
  padding:2px 0;
  color:#f5f8ff;
  font-size:clamp(11px,1.05vw,17px)!important;
  line-height:1.12;
  letter-spacing:-.02em;
  white-space:normal!important;
  text-overflow:ellipsis;
  text-shadow:0 1px 8px rgba(0,0,0,.28);
}

.hero-visual .vacancy-mini-card>small{
  position:absolute;
  z-index:2;
  left:10%;
  right:9%;
  bottom:5%;
  display:block;
  margin:0!important;
  color:#dce7ff!important;
  font-size:clamp(8px,.72vw,11px)!important;
  line-height:1.15;
  font-weight:600!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* The male artwork is 4:3 and must never be forced into the female 16:9 frame. */
.hero-visual.is-male .vacancy-mini-card{
  right:5.0%;
  top:5.2%;
  width:24.8%;
  height:23.5%;
}
.hero-visual.is-male .vacancy-mini-card::before{
  top:27%;
  height:25%;
}
.hero-visual.is-male .vacancy-mini-card>b{
  top:28.5%;
}

/* Desktop: keep enough breathing room around the persona. */
@media (min-width:1321px){
  .hero-panel{grid-template-columns:minmax(0,1.06fr) minmax(500px,.94fr)}
  .hero-visual.is-female{max-width:720px}
  .hero-visual.is-male{max-width:620px}
}

/* One-column layouts: keep the artwork centered and avoid oversized floating UI. */
@media (max-width:1320px){
  .hero-visual.is-female{width:min(100%,860px)}
  .hero-visual.is-male{width:min(100%,680px)}
}

@media (max-width:900px){
  .hero-visual .vacancy-mini-card>b{font-size:clamp(10px,2.1vw,15px)!important}
  .hero-visual .vacancy-mini-card>small{font-size:clamp(7px,1.5vw,10px)!important}
}

@media (max-width:760px){
  .hero-visual,
  .hero-visual.is-male{
    width:100%;
    max-width:100%;
  }
  .hero-visual .vacancy-mini-card,
  .hero-visual.is-male .vacancy-mini-card{
    transform:none!important;
  }
}