/* ---------------------------------------------------------------------------
   Service page hero — ported verbatim from live #bolt-hero-recruitment.
   Three changes only:
     - the Google Fonts @import is gone (fonts are global now);
     - the hardcoded background URL is now var(--bhr-bg), set inline on the
       section from the hero_background field. No image => no background;
     - #D02479 -> var(--mp-pink), the one exact-literal token match in this
       file. #ffd166, #d7dbff, #fff, #e9ecff and #f5f6ff are left alone.

   The body half of the source file (#bolt-recruitment) lives in
   assets/css/sections/recruitment.css — on live both sections shared one
   Elementor html widget.
   --------------------------------------------------------------------------- */

#bolt-hero-recruitment{
  background:var(--bhr-bg) center/cover no-repeat;
  font-family:"Montserrat",sans-serif;
}

/* Dark overlay */
#bolt-hero-recruitment .bhr-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    110deg,
    rgba(7,10,28,.90) 0%,
    rgba(7,10,28,.78) 32%,
    rgba(7,10,28,.62) 55%,
    rgba(7,10,28,.90) 100%
  );
  z-index:0;
}

/* Vertical divider like home hero */
#bolt-hero-recruitment .bhr-divider{
  position:absolute;
  top:80px;
  bottom:80px;
  left:50%;
  width:1.5px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.7), transparent);
  opacity:.65;
  border-radius:2px;
  z-index:1;
}

/* Inner layout */
#bolt-hero-recruitment .bhr-wrap{
  position:relative;
  z-index:2;
  width:min(1200px,92vw);
  margin:0 auto;
  padding:90px 20px 70px;
  display:flex;
  flex-direction:column;
}

/* FIXED BADGE — auto width */
#bolt-hero-recruitment .bhr-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:6px 18px;
  margin-bottom:14px;

  width:auto;
  max-width:max-content;
  white-space:nowrap;

  border:1px solid var(--mp-pink);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(208,36,121,.25), rgba(37,52,153,.25));
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#d7dbff;
  position:relative;
  z-index:3;
}
#bolt-hero-recruitment .bhr-badge i{
  font-style:normal;font-size:11px;color:#ffd166;
}

/* Titles (forced white) */
#bolt-hero-recruitment .bhr-title{
  font-family:"DM Serif Display",serif;
  font-weight:400;
  font-size:42px;
  line-height:1.12;
  margin:4px 0 6px;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  color:#fff !important;
}
#bolt-hero-recruitment .bhr-kicker{
  font-size:18px;
  font-weight:500;
  color:#e9ecff;
  margin-bottom:18px;
}

/* Grid: text + bullets */
#bolt-hero-recruitment .bhr-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:26px;
  font-size:16px;
  line-height:1.9;
  color:#f5f6ff;
}
#bolt-hero-recruitment .bhr-grid p{margin:0 0 var(--bhr-p-gap,0);}

#bolt-hero-recruitment .bhr-points{
  list-style:none;margin:0;padding:0;
}
#bolt-hero-recruitment .bhr-points li{
  position:relative;
  padding-left:20px;
  margin-bottom:8px;
}
#bolt-hero-recruitment .bhr-points li::before{
  content:"•";
  position:absolute;left:0;top:0;
  color:#ffd166;
}

/* Responsive */
@media (max-width:900px){
  #bolt-hero-recruitment{height:auto !important;min-height:100vh !important;align-items:flex-start !important;}
  #bolt-hero-recruitment .bhr-wrap{padding:110px 20px 60px;}
  #bolt-hero-recruitment .bhr-grid{
    grid-template-columns:1fr;
  }
  #bolt-hero-recruitment .bhr-divider{
    top:40px;bottom:40px;
  }
}
@media (max-width:520px){
  #bolt-hero-recruitment .bhr-title{font-size:36px;}
  #bolt-hero-recruitment .bhr-kicker{font-size:16px;}
  #bolt-hero-recruitment .bhr-divider{display:none;}
}

/* Value/sector heroes: live wraps the widget in a container with margin-top
   -77px under the 132px header, so the hero starts at y 55. Only the first
   one on a page (environmental-engineering stacks fourteen). */
@media (min-width: 1025px) {
  main#main > #bolt-hero-recruitment:first-child { margin-top: var(--bhr-pull, -77px); }
}

/* Below 1025px the desktop pull-up cascades to tablet; phones take the
   container's margin_mobile (-87px on 88 pages, -77px on the 8 that set none). */
@media (max-width: 1024px) {
  main#main > #bolt-hero-recruitment:first-child { margin-top: var(--bhr-pull, -77px); }
}
@media (max-width: 767px) {
  main#main > #bolt-hero-recruitment:first-child { margin-top: var(--bhr-pull-m, -87px); }
}