/* Background image position options (from Layout Options > Background Image Position) */

.hero-section.cover-bg.contain {
  background-size: contain;
  background-color: #000000;
}

.hero-section.cover-bg.cover-bg--top-center {
  background-position: center 100px;
}
.hero-section.cover-bg.cover-bg--center-center {
  background-position: center center;
}
.hero-section.cover-bg.cover-bg--bottom-center {
  background-position: bottom center;
}
/* Right-side position options */
/* Top Right: 100px from top to sit below header (matches Top Center behaviour) */
.hero-section.cover-bg.cover-bg--top-right {
  background-position: right 100px;
  background-color: #000000;
}
.hero-section.cover-bg.cover-bg--center-right {
  background-position: center right;
  background-color: #000000;
}
.hero-section.cover-bg.cover-bg--bottom-right {
  background-position: bottom right;
  background-color: #000000;
}

/* Gradient overlay: only on desktop (>1024px). */
/* CONTAIN mode: gradient is locked to the image edge using calc() – tracks 16:9 image with background-size: contain. */
/* COVER mode: fixed percentage gradient. */
/* Custom gradient: uses --hero-gradient-solid and --hero-gradient-transparent from module fields. */
@media (min-width: 1025px) {
  .hero-section.cover-bg.cover-bg--top-right::before,
  .hero-section.cover-bg.cover-bg--center-right::before,
  .hero-section.cover-bg.cover-bg--bottom-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Default for COVER: 30% solid, 60% transparent */
    background: linear-gradient(to right, #000000 0%, #000000 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
  }
  
}
/* Custom gradient: uses CSS variables from module fields when "Custom gradient" is enabled */
@media (min-width: 1025px) {
  /* COVER + custom: fixed percentages from module fields */
  .hero-section.cover-bg:not(.contain).hero-gradient-custom.cover-bg--top-right::before,
  .hero-section.cover-bg:not(.contain).hero-gradient-custom.cover-bg--center-right::before,
  .hero-section.cover-bg:not(.contain).hero-gradient-custom.cover-bg--bottom-right::before {
    background: linear-gradient(to right, #000000 0%, #000000 var(--hero-gradient-solid, 30%), transparent var(--hero-gradient-transparent, 60%));
  }
}

.hero-section.cover-bg.cover-bg--top-right,
.hero-section.cover-bg.cover-bg--center-right,
.hero-section.cover-bg.cover-bg--bottom-right {
  position: relative;
}
.hero-section.cover-bg.cover-bg--top-right > div,
.hero-section.cover-bg.cover-bg--center-right > div,
.hero-section.cover-bg.cover-bg--bottom-right > div {
  position: relative;
  z-index: 1;
}
.hero-section__mobile-banner.cover-bg--top-center {
  background-position: center 70px;
}
.hero-section__mobile-banner.cover-bg--center-center {
  background-position: center center;
}
.hero-section__mobile-banner.cover-bg--bottom-center {
  background-position: bottom center;
}
.hero-section__mobile-banner.cover-bg--top-right {
  background-position: right 70px;
}
.hero-section__mobile-banner.cover-bg--center-right {
  background-position: center right;
}
.hero-section__mobile-banner.cover-bg--bottom-right {
  background-position: bottom right;
}

/* Mobile banner gradient removed – gradient only applies on desktop (>1024px), banner is hidden there */
.hero-section__mobile-banner.cover-bg--top-right,
.hero-section__mobile-banner.cover-bg--center-right,
.hero-section__mobile-banner.cover-bg--bottom-right {
  position: relative;
}

.hero-section .page-center {
  margin-top:10rem;
  margin-bottom:10rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-section > div {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-section .paddingTB, .hero-section .paddingT {
  padding-top: 10em;
} 

.global-ab--active .hero-section .paddingTB, .global-ab--active .hero-section .paddingT {
  padding-top: calc(10em + 60px) !important;
} 

/* Hide mobile banner on desktop */
.hero-section__mobile-banner {
  display: none !important;
}

@media only screen and (max-width: 1024px) {
  .hero-section.cover-bg.cover-bg--top-center {
    background-position: center 70px;
  }
  .hero-section.cover-bg.cover-bg--top-right {
    background-position: right 70px;
  }
}

@media (max-width: 1024px) {
  #main-content .cover-bg>div h1 {
    font-size: 46px;
  }
  
  /* Mobile layout: image as separate banner above text */
  /* Hide background image on the section for mobile */
  .cover-bg.hero-section {
    background-image: none !important;
  }
  
  /* Mobile banner image - fixed height for consistency */
  .hero-section__mobile-banner {
    display: block !important;
    width: 100%;
    height: 400px; /* Fixed height for consistency across different image sizes */
    background-size: cover;
    background-position: center 60px;
    background-repeat: no-repeat;
  }
  
  /* Remove top padding/margin on mobile since banner is separate */
  .cover-bg.hero-section > div {
    padding-top: 3em !important;
    margin-top: 0 !important;
  }
  
  .hero-section .page-center {
    margin-top: 0 !important;
    margin-bottom: 3rem;
  }
  
  /* Set background overlay to 100% opacity (black) on mobile for paddingTB element */
  .cover-bg.hero-section .paddingTB, .cover-bg.hero-section .paddingT {
    background: #000000 !important;
  }
}

@media (max-width: 420px) {
  #main-content .hero-section .page-center {
    margin: 2.4rem 0;
    padding-top: 0;
    padding-bottom: 2em;
  }
}

@media (min-width: 1400px) {
  .hero-section.cover-bg.cover-bg--top-right::before,
  .hero-section.cover-bg.cover-bg--center-right::before,
  .hero-section.cover-bg.cover-bg--bottom-right::before {
    
  }