/* =============================================================
   Career Page — Section Styles
   Source: Banner.module.scss (.career + .layoutTwo variants)

   Self-contained: includes all .mobileAppBanner base rules
   needed for the career page without depending on contact.css.

   Sections covered (grows as migration progresses):
     career_banner — Section 1
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   CAREER BANNER
   Source: Banner.module.scss — .career modifier
   ───────────────────────────────────────────────────────────── */

/* Base layout — mirrors contact.css for standalone use on this page */
.mobileAppBanner {
  padding: 100px 0;
  position: relative;
}

.mobileAppBanner__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.mobileAppBanner__left h1 {
  font-size: 42px;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
}

.mobileAppBanner__left h1 span {
  color: #e80101;
  display: inline;
}

.mobileAppBanner__left p {
  font-size: 18px;
  font-weight: 500;
  color: #2c2c2c;
  padding: 20px 0 30px;
  margin: 0;
  line-height: 1.5;
}

/* .layoutTwo — larger h1, wider column gap */
.mobileAppBanner.layoutTwo .mobileAppBanner__main {
  gap: 100px;
}

.mobileAppBanner.layoutTwo .mobileAppBanner__left h1 {
  font-size: 64px;
  font-weight: 800;
}

.mobileAppBanner.layoutTwo .mobileAppBanner__left h1 span {
  color: #e80101;
  display: inline;
}

/* ── .career modifier ── */
.mobileAppBanner.career {
  padding: 200px 0;
  overflow: hidden;
}

/* Decorative right-side illustration via ::before pseudo-element.
   Mirrors Banner.module.scss: .career::before { width:50%; height:80%;
   right:0; top:0; bottom:0; margin:auto; background-position:center right }
   CSS custom property --crb-bg is injected by PHP when an ACF image is set. */
.mobileAppBanner.career::before {
  content: '';
  position: absolute;
  /* Fallback for browsers that don't support CSS custom properties in url() */
  background-image: url('../../images/careers/career-banner.png');
  /* Override with ACF-uploaded image if set via inline style="--crb-bg:url(...)" */
  background-image: var(--crb-bg, url('../../images/careers/career-banner.png'));
  background-position: center right;
  background-size: contain;
  background-repeat: no-repeat;
  width: 50%;
  height: 80%;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  pointer-events: none;
  z-index: 0;
}

/* Lift text above the ::before illustration */
.mobileAppBanner.career .mobileAppBanner__left {
  position: relative;
  z-index: 1;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1400px) {
  .mobileAppBanner.layoutTwo .mobileAppBanner__left h1 { font-size: 50px; }
  .mobileAppBanner.layoutTwo .mobileAppBanner__main    { gap: 80px; }
}

@media (max-width: 1200px) {
  .mobileAppBanner.layoutTwo .mobileAppBanner__left h1 { font-size: 45px; }
  .mobileAppBanner.layoutTwo .mobileAppBanner__main    { gap: 50px; }
  .mobileAppBanner__left h1                            { font-size: 38px; }
  .mobileAppBanner__left p                             { font-size: 16px; }
}

@media (max-width: 991px) {
  /* Source: Banner.module.scss @991px — .career { padding:100px 0; ::before display:none }
     Base: grid goes single-column, background becomes flat grey */
  .mobileAppBanner.career {
    padding: 100px 0;
    background-color: #f7f7f7;
  }

  .mobileAppBanner.career::before {
    display: none;
  }

  .mobileAppBanner__main {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mobileAppBanner.layoutTwo .mobileAppBanner__main    { gap: 30px; }
  .mobileAppBanner.layoutTwo .mobileAppBanner__left h1 { font-size: 40px; }
}

@media (max-width: 767px) {
  .mobileAppBanner.layoutTwo .mobileAppBanner__left h1 { font-size: 30px; }
}

@media (max-width: 575px) {
  .mobileAppBanner.layoutTwo .mobileAppBanner__left h1 { font-size: 26px; }
  .mobileAppBanner__left p                             { font-size: 14px; }
}