/* === Custom Block Styling === */
.heroSlider {
  padding-top: var(--CB-padding-top);
  padding-right: var(--CB-padding-right);
  padding-bottom: var(--CB-padding-bottom);
  padding-left: var(--CB-padding-left);
  margin-top: var(--CB-margin-top);
  margin-bottom: var(--CB-margin-bottom);
}

/* === Main Container === */
.heroSlider__container {
  /* DVH GOAT */
  min-height: 90dvh;
  padding-top: 20%;
  padding-bottom: 10%;
}
.heroSlider__container::after{
  content: '';
  background-image: linear-gradient(to bottom, transparent, var(--FC-black)) ;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
}
@media screen and (max-width: 767px){
  .heroSlider__bgSliderContainer::after{
    height: 50px;
  }
}

.heroSlider__slideTitle {
  font-size: var(--FC-font-size-72);
  color: var(--FC-white);
  font-weight: 700;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, .6);
}

/* == Pagination == */
.heroSlider__paginationWrapper {
  display: flex;
  align-items: center;
  gap: var(--FC-standard-multiplier);
}

.heroSlider__paginationFraction {
  text-wrap: nowrap;
  font-size: var(--FC-font-size-20);
  color: var(--FC-white);
  font-weight: 700;
}

.heroSlider .swiper-pagination {
  width: auto;
  position: relative;
  max-width: 66%;
}

.heroSlider .swiper-pagination-progressbar-fill {
  background-color: var(--FC-primary-color) !important;
}

/* === Bg Slider === */
.heroSlider__bgSliderContainer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: aliceblue;
  z-index: 0;
  pointer-events: none;
}
.heroSlider__bgSliderContainer::after{
  content: '';
  background-color: var(--FC-black);
  opacity: 35%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.heroBgSwiper {
  height: 100%;
}
.heroSlide__bgImage {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* === Buttons === */
.heroSlider__buttonRow {
  margin-top: 32px;
}

.heroSlider__button {
  background-color: rgba(1, 1, 0, 0.75);
  padding: calc(var(--FC-standard-multiplier) * 2);
  width: 100%;
  display: inline-block;
  text-align: center;
  color: var(--FC-white) !important;
  font-size: var(--FC-font-size-20);
  transition: var(--FC-default-transition);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.heroSlider__button:hover,
.heroSlider__button:focus-visible {
  background-color: var(--FC-black);
}

@media screen and (max-width: 767.98px){
  .heroSlider__container{
    padding-top: 160px;
  }
}