@import url('../../styles/carousel.css');


main > .section.overlap {
  position: relative;
}

main > .section.overlap > .hero-carousel-wrapper {
  position: relative;
  z-index: 0;
}

.hero-carousel.block {
  --hero-carousel-control-color: var(--color-neutral-light-cream);
  --hero-carousel-min-height-mobile: 46.375rem;
  --hero-carousel-min-height-desktop: 43.75rem;
  --hero-carousel-indicator-size: var(--spacing-2);
  --hero-carousel-indicator-active-width: 1.75rem;
  --hero-carousel-indicator-radius: var(--spacing-1);
  --hero-carousel-overlay-offset-mobile: var(--spacing-3);
  --hero-carousel-overlay-inline-mobile: var(--spacing-3);
  --hero-carousel-nav-width-mobile: var(--spacing-6);
  --hero-carousel-nav-height-mobile: var(--spacing-10);
  --hero-carousel-outline-width: 0.125rem;
  --hero-carousel-chevron-size: 0.625rem;
  --hero-carousel-chevron-stroke-width: 0.0938rem;
  --hero-carousel-chevron-offset: 0.125rem;
  --hero-carousel-foreground-offset-mobile: 9.25rem;
  --hero-carousel-image-max-height-mobile: 14.125rem;
  --hero-carousel-overlay-offset-desktop: var(--spacing-10);
  --hero-carousel-overlay-inline-desktop: var(--spacing-15);
  --hero-carousel-indicator-margin-bottom-desktop: 2.875rem;
  --hero-carousel-nav-width-desktop: 1.25rem;
  --hero-carousel-nav-height-desktop: 3rem;
  --hero-carousel-foreground-offset-desktop: 5.625rem;
  --hero-carousel-offset-150: 9.375rem;
  --hero-carousel-promotion-description-lines: 2;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.hero-carousel.block:has(
    .carousel-slide:not([aria-hidden]) .teaser.teaser-50-50,
    .carousel-slide:not([aria-hidden]) .teaser.teaser-40-60
  ) {
  --hero-carousel-control-color: var(--color-spinach);
}

.hero-carousel .carousel-slide,
.hero-carousel .teasers-slide-inner,
.hero-carousel.block .teasers-slide-inner {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
}

.hero-carousel .teaser.block {
  height: var(--hero-carousel-min-height-mobile);
}

.hero-carousel .teaser.block .teaser-background img {
  height: var(--hero-carousel-min-height-mobile);
}

.hero-carousel .teasers-slide-inner > .teaser-wrapper,
.hero-carousel .teasers-slide-inner > .teaser.block {
  width: 100%;
}

.hero-carousel .teasers-slide-inner .teaser.block .teaser-foreground {
  height: 100%;
}

.hero-carousel .teasers-slide-inner > .teaser.block {
  margin: 0;
}

.hero-carousel .carousel-slides-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hero-carousel .carousel-slides-area {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hero-carousel .carousel-slides {
  display: flex;
  overflow: auto hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hero-carousel .carousel-slides::-webkit-scrollbar {
  display: none;
}

.hero-carousel .carousel-slides-dragging {
  scroll-behavior: auto;
}

.hero-carousel .carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.hero-carousel .carousel-slide-indicators {
  display: flex;
  gap: var(--spacing-2);
  list-style: none;
  margin: var(--spacing-0) var(--spacing-0) var(--spacing-4);
  padding: 0;
}

.hero-carousel .carousel-slide-indicator button {
  width: var(--hero-carousel-indicator-size);
  height: var(--hero-carousel-indicator-size);
  border-radius: 50%;
  border: none;
  background: var(--hero-carousel-control-color);
  opacity: 0.5;
  cursor: pointer;
  padding: 0;
  transition:
    opacity 0.2s,
    width 0.2s,
    border-radius 0.2s;
}

.hero-carousel .carousel-navigation-buttons button {
  pointer-events: auto;
  width: var(--hero-carousel-nav-width-mobile);
  height: var(--hero-carousel-nav-height-mobile);
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--hero-carousel-control-color);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s;
  outline: none;
}

.hero-carousel .carousel-slide-indicator button[aria-current='true'],
.hero-carousel .carousel-slide-indicator button:disabled {
  width: var(--hero-carousel-indicator-active-width);
  height: var(--hero-carousel-indicator-size);
  border-radius: var(--hero-carousel-indicator-radius);
  background: var(--hero-carousel-control-color);
  opacity: 1;
  cursor: default;
}

.hero-carousel .carousel-navigation-buttons button:focus-visible {
  outline: var(--hero-carousel-outline-width) solid var(--hero-carousel-control-color);
  outline-offset: var(--hero-carousel-outline-width);
}

.hero-carousel .carousel-slide-indicator button:hover:not(:disabled) {
  opacity: 0.7;
}

.hero-carousel > .hero-carousel-overlap-overlay {
  position: absolute;
  left: 0;
  z-index: 2;
  bottom: var(--hero-carousel-overlay-offset-mobile);
  width: calc(100% - 2 * var(--hero-carousel-overlay-inline-mobile));
  margin: var(--spacing-0) var(--hero-carousel-overlay-inline-mobile);
}

.hero-carousel > .hero-carousel-overlap-overlay .promotion-wrapper .promotion {
  box-sizing: border-box;
  width: 100%;
}

.hero-carousel > .hero-carousel-overlap-overlay .promotion-wrapper .promotion-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--hero-carousel-promotion-description-lines);
  -webkit-box-orient: vertical;
}

.hero-carousel .teaser.block p {
  margin: var(--spacing-0);
}

.hero-carousel .carousel-navigation-buttons {
  display: none;
}

.hero-carousel .carousel-nav-group {
  display: flex;
  align-items: center;
  gap: 0;
}

.hero-carousel .carousel-navigation-buttons .slide-prev::before {
  content: '';
  width: var(--hero-carousel-chevron-size);
  height: var(--hero-carousel-chevron-size);
  border-left: var(--hero-carousel-chevron-stroke-width) solid currentcolor;
  border-bottom: var(--hero-carousel-chevron-stroke-width) solid currentcolor;
  transform: rotate(45deg);
  margin-left: var(--hero-carousel-chevron-offset);
}

.hero-carousel .carousel-navigation-buttons .slide-next::before {
  content: '';
  width: var(--hero-carousel-chevron-size);
  height: var(--hero-carousel-chevron-size);
  border-right: var(--hero-carousel-chevron-stroke-width) solid currentcolor;
  border-bottom: var(--hero-carousel-chevron-stroke-width) solid currentcolor;
  transform: rotate(-45deg);
  margin-right: var(--hero-carousel-chevron-offset);
}

@media (width < 1024px) {
  .hero-carousel .teasers-slide-inner .teaser:not(.teaser-40-60) .teaser-foreground {
    padding-top: var(--spacing-40);
  }
}

.hero-carousel .carousel-slider {
  position: static;
  left: 0;
}

.hero-carousel .teaser.block:is(.teaser-40-60, .teaser-50-50) .teaser-background img {
  height: var(--hero-carousel-image-max-height-mobile);
}

@media (width >= 1024px) {
  .hero-carousel > .hero-carousel-overlap-overlay,
  .hero-carousel:has(.carousel-slide:not([aria-hidden]) .teaser-40-60)
    .hero-carousel-overlap-overlay {
    position: absolute;
    bottom: var(--hero-carousel-overlay-offset-desktop);
    width: calc(100% - 2 * var(--hero-carousel-overlay-inline-desktop));
    margin: var(--spacing-0) var(--hero-carousel-overlay-inline-desktop);
  }

  .hero-carousel > .hero-carousel-overlap-overlay .promotion-wrapper {
    padding: 0;
    margin-top: 0;
  }

  .hero-carousel .carousel-slide-indicators {
    margin-bottom: var(--hero-carousel-indicator-margin-bottom-desktop);
  }

  .hero-carousel .carousel-navigation-buttons button {
    width: var(--hero-carousel-nav-width-desktop);
    height: var(--hero-carousel-nav-height-desktop);
  }

  .hero-carousel .teasers-slide-inner .teaser.block .teaser-foreground {
    padding-top: var(--hero-carousel-offset-150);
  }

  .hero-carousel:has(.carousel-slide:not([aria-hidden]) .teaser.block.teaser-40-60)
    .hero-carousel-overlap-overlay {
    height: unset;
  }

  .hero-carousel .teasers-slide-inner > .teaser.block.teaser-40-60 .teaser-background {
    height: 100%;
  }

  .hero-carousel .teaser.block:is(.teaser-40-60, .teaser-50-50) .teaser-background img {
    height: var(--hero-carousel-min-height-desktop);
  }

  .hero-carousel .teaser.block {
    height: var(--hero-carousel-min-height-desktop);
  }
}