/* Human Resources page — closing globe banner */
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600&display=swap");

.hr-globe-banner {
  position: relative;
  min-height: clamp(400px, 32vw, 600px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #0b1b3a;
  background-image: url("/img/human-resources/globe.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* Broad cool bloom entering from outside the bottom-left edge. */
.hr-globe-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 110% 69% at 0% 111%,
      rgba(83, 148, 199, 0.98) 0%,
      rgba(76, 137, 188, 0.82) 26%,
      rgba(65, 117, 166, 0.46) 48%,
      rgba(51, 91, 137, 0.17) 65%,
      rgba(38, 70, 112, 0) 82%
    ),
    linear-gradient(
      90deg,
      rgba(4, 11, 24, 0.14) 0%,
      rgba(4, 11, 24, 0.04) 30%,
      rgba(4, 11, 24, 0) 52%
    );
}

/* The top-right edge has a distinct horizontal colour sequence in the
   reference: narrow blue rim → pale red → deep red → pale red fade. */
.hr-globe-banner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(180px, 17vw, 340px);
  height: 34%;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(59, 99, 153, 0.58) 0.1%,
    rgba(66, 106, 160, 0.56) 0.15%,
    rgba(73, 113, 166, 0.54) 0.28%,
    rgba(83, 124, 176, 0.51) 0.36%,
    rgba(94, 135, 183, 0.48) 0.49%,
    rgba(119, 154, 194, 0.41) 0.9%,
    rgba(148, 174, 204, 0.34) 1.25%,
    rgba(174, 191, 210, 0.28) 1.55%,
    rgba(195, 199, 210, 0.24) 1.78%,
    rgba(239, 112, 7, 0.07) 2%,
    rgba(239, 112, 7, 0.13) 4%,
    rgba(239, 112, 7, 0.21) 8%,
    rgba(239, 112, 7, 0.32) 16%,
    rgba(239, 112, 7, 0.63) 30%,
    rgba(239, 112, 7, 0.6) 43%,
    rgba(239, 112, 7, 0.59) 45%,
    rgba(239, 112, 7, 0.52) 49%,
    rgba(239, 112, 7, 0.4) 55%,
    rgba(239, 112, 7, 0.17) 68%,
    rgba(239, 112, 7, 0.13) 80%,
    rgba(239, 112, 7, 0) 90%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.92) 38%,
    rgba(0, 0, 0, 0.42) 70%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.92) 38%,
    rgba(0, 0, 0, 0.42) 70%,
    transparent 100%
  );
}

.hr-globe-banner .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  padding-top: 0;
  padding-right: clamp(32px, 5.25vw, 108px);
  padding-bottom: 0;
  padding-left: clamp(32px, 5.25vw, 108px);
}

.hr-globe-banner-title {
  color: #fff;
  font-family: "Rajdhani", "Nunito Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 2.35vw, 48px);
  /* Rajdhani's cap-height is only 0.643em, so this reads far airier than the number suggests. */
  line-height: 1.25;
  margin: 0;
}

.hr-globe-banner-title-line {
  display: block;
}

.hr-globe-banner-title-emphasis {
  font-weight: 600;
}

@media (max-width: 768px) {
  .hr-globe-banner {
    min-height: 340px;
    background-position: center;
    align-items: center;
  }
  .hr-globe-banner::before {
    background:
      radial-gradient(
        ellipse 140% 66% at 0% 110%,
        rgba(83, 148, 199, 0.94) 0%,
        rgba(68, 125, 177, 0.56) 42%,
        rgba(43, 82, 128, 0.18) 66%,
        rgba(38, 70, 112, 0) 84%
      ),
      linear-gradient(
        90deg,
        rgba(4, 11, 24, 0.46) 0%,
        rgba(4, 11, 24, 0.18) 58%,
        rgba(4, 11, 24, 0.06) 100%
      );
  }
  .hr-globe-banner::after {
    width: min(44vw, 250px);
    height: 32%;
  }
  .hr-globe-banner .container {
    padding-top: 36px;
    padding-right: 24px;
    padding-bottom: 36px;
    padding-left: 24px;
  }
  .hr-globe-banner-title {
    max-width: 100%;
    line-height: 1.25;
  }
  .hr-globe-banner-title-line {
    display: inline;
  }
  .hr-globe-banner-title-line + .hr-globe-banner-title-line::before {
    content: " ";
  }
}