/* Shared CardIQ public profile cover system.
   Used by company public profiles and employee/public identity profiles. */
.ciq-public-cover{
  --ciq-cover-primary:var(--primary,#00a0b0);
  --ciq-cover-secondary:var(--secondary,#001030);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:var(--ciq-cover-secondary);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.ciq-public-cover::before,
.ciq-public-cover::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.ciq-public-cover::before{
  inset:0;
  z-index:0;
}
.ciq-public-cover::after{
  z-index:1;
}
.ciq-public-cover--default{
  background:
    radial-gradient(circle at 17% 18%,rgba(255,255,255,.16) 0 2%,transparent 24%),
    radial-gradient(circle at 78% 20%,rgba(65,231,239,.16) 0 4%,transparent 27%),
    radial-gradient(circle at 92% 82%,rgba(255,255,255,.10) 0 3%,transparent 24%),
    linear-gradient(118deg,var(--ciq-cover-primary) 0%,color-mix(in srgb,var(--ciq-cover-primary) 46%,var(--ciq-cover-secondary)) 47%,var(--ciq-cover-secondary) 100%);
}
.ciq-public-cover--default::before{
  background:url('../img/hero_image.png') center/min(420px,54%) no-repeat;
  opacity:.12;
  mix-blend-mode:soft-light;
  filter:saturate(.55) contrast(.86) brightness(1.08);
  -webkit-mask-image:radial-gradient(ellipse 64% 58% at center,#000 40%,rgba(0,0,0,.82) 58%,transparent 84%);
  mask-image:radial-gradient(ellipse 64% 58% at center,#000 40%,rgba(0,0,0,.82) 58%,transparent 84%);
}
.ciq-public-cover--default::after{
  width:min(48vw,520px);
  aspect-ratio:1;
  inset-inline-end:-9%;
  bottom:-70%;
  border:clamp(28px,4vw,58px) solid rgba(255,255,255,.075);
  border-radius:50%;
  box-shadow:
    0 0 0 clamp(22px,3vw,44px) rgba(255,255,255,.035),
    0 0 110px rgba(0,16,48,.18);
  transform:rotate(-10deg);
}
.ciq-public-cover--image::before{
  background:
    linear-gradient(180deg,rgba(2,6,23,.04),rgba(2,6,23,.42)),
    linear-gradient(110deg,rgba(0,16,48,.12),transparent 48%);
}
.ciq-public-cover--image::after{
  inset:0;
  background:linear-gradient(90deg,rgba(0,16,48,.12),transparent 30%,rgba(255,255,255,.03));
}
@media(max-width:640px){
  .ciq-public-cover--default::after{
    width:360px;
    inset-inline-end:-150px;
    bottom:-245px;
    border-width:36px;
  }
  .ciq-public-cover--default::before{
    background-size:min(300px,60%);
    opacity:.10;
    -webkit-mask-image:radial-gradient(ellipse 68% 60% at center,#000 38%,rgba(0,0,0,.78) 58%,transparent 86%);
    mask-image:radial-gradient(ellipse 68% 60% at center,#000 38%,rgba(0,0,0,.78) 58%,transparent 86%);
  }
}