.banner-slider__header{
  margin-bottom: clamp(1.5rem,2.5vw, 2.5rem);
}

.banner-slider__header-title{
  letter-spacing: -2.56px;
}

.banner-slider__header-summary,
.banner-slider__header-summary p{
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  line-height: clamp(1.563rem, 2.5vw, 2.375rem);
  font-weight: 300;
}

.banner-slider__swiper-slide{
  position: relative;
  overflow: hidden;
  /* Cover sizing for the slide-level background-image used when add_graphics is off */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile readability overlay - subtle dark gradient over the image so the
 * default white text remains legible regardless of the photo behind it.
 * Hidden at desktop where the curve graphics provide the contrast surface. */
.banner-slider__swiper-slide::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
@media(min-width: 64rem){ /* 1024px */
  .banner-slider__swiper-slide::before{
    display: none;
  }
}


/** Slide image (only present when add_graphics is on) **/

.banner-slider__slide-image{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
@media(min-width: 64rem){ /* 1024px */
  .banner-slider__slide-image{
    /* On desktop the image takes the left portion only, the curve graphics overlay the rest */
    max-width: 66rem; /* 1056px */
  }
}


/** Curve graphics - both SVGs share the main 1298x730 viewBox + preserveAspectRatio="none",
 *  so they fill the same right-anchored container and stay aligned at any viewport. **/

.banner-slider__slide-graphics{
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Cap the graphics container width so the solid blue stays a fixed size
   * on the right side, instead of consuming a percentage of every slide width.
   * 81.125rem (1298px) matches the SVG's natural design width at 1920px. */
  max-width: 81.125rem;
}
/* Hide the curve overlay on phones/tablets - the side-by-side layout
 * cannot read at narrow widths. The slide image (or background image)
 * fills the slide, and content overlays it. */
@media(max-width: 63.99rem){ /* < 1024px */
  .banner-slider__slide-graphics{
    display: none;
  }
}

.banner-slider__slide-graphics svg{
  display: block;
  width: 100%;
  height: 100%;
}


/** Slide content **/

.banner-slider__slide-content{
  width: 100%;
  position: relative;
  z-index: 1;
}
@media(min-width: 48rem){ /* 768px */
  .banner-slider__slide-content{
    max-width: 30rem;
    margin-left: auto;
  }
}
@media(min-width: 64rem){ /* 1024px */
  .banner-slider__slide-content{
    max-width: 42rem;
  }
}

.banner-slider__slide-content-title{
  letter-spacing: -2.56px;
}

.banner-slider__slide-content-summary,
.banner-slider__slide-content-summary p{
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  line-height: clamp(1.563rem, 2.5vw, 2.375rem);
  font-weight: 300;
}

/* Slider Navigation Styling */
.banner-slider__swiper-controls-button{
  background: #fff;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.banner-slider__swiper-controls-button::after{
  font-size: 18px;
  font-weight: 800;
  color: #122A3D;
  position: relative;
}

.banner-slider__swiper-controls--next{
  right: 10%;
}

.banner-slider__swiper-controls--next::after{
  left: 2px;
}

.banner-slider__swiper-controls--prev{
  left: 10%;
}

.banner-slider__swiper-controls--prev::after{
  right 2px;
}