/* ==========================================================================
   HERO CAROUSEL
   Hero-static aligned hero with native 1-3 slide carousel controls
   ========================================================================== */

.cc-hero-carousel {
  position: relative;
  width: 100%;
  margin-top: 0;
  background-color: var(--cc-bg-page);
  transition: background-color var(--cc-duration-base) var(--cc-ease-smooth);
}

.cc-hero-carousel__card {
  --cc-hero-finish-size: 4px;
  position: relative;
  width: 100%;
  min-height: clamp(460px, 68vh, 620px);
  overflow: hidden;
  background-color: var(--cc-bg-page);
  border-radius: 0;
  isolation: isolate;
}

.cc-hero-height--small .cc-hero-carousel__card {
  min-height: clamp(420px, 60vh, 560px);
}

.cc-hero-height--medium .cc-hero-carousel__card {
  min-height: clamp(500px, 72vh, 680px);
}

.cc-hero-height--large .cc-hero-carousel__card {
  min-height: clamp(560px, 84vh, 780px);
}

.cc-hero-height--full .cc-hero-carousel__card {
  min-height: 100svh;
}

.cc-hero-carousel--finish-thin-line .cc-hero-carousel__card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--cc-hero-finish-size);
  background: var(--cc-hero-finish-color, var(--brand-primary));
  z-index: 4;
  pointer-events: none;
}

.cc-hero-carousel__viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.cc-hero-carousel__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.cc-hero-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--cc-hero-transition-duration, 460ms) var(--cc-ease-smooth),
    visibility 0s linear var(--cc-hero-transition-duration, 460ms);
}

.cc-hero-carousel__slide:first-child {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cc-hero-carousel.is-ready .cc-hero-carousel__slide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cc-hero-carousel.is-ready .cc-hero-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition-delay: 0s;
}

.cc-hero-carousel__slide--no-media {
  background-color: var(--cc-bg-page);
}

.cc-hero-carousel__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: var(--cc-hero-overlay-gradient);
  opacity: var(--cc-hero-overlay-opacity, 0.9);
  pointer-events: none;
}

.cc-hero-carousel__content {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: var(--cc-hero-content-justify, center);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--cc-container-default);
  padding-inline: var(--cc-container-pad);
  padding-block: var(--cc-space-12);
}

.cc-hero-carousel__content-inner {
  width: 100%;
  max-width: min(var(--cc-container-default), 64ch);
  margin-left: 0;
  margin-right: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.cc-hero-carousel__eyebrow {
  margin-bottom: var(--cc-spacing-eyebrow-heading);
  color: var(--cc-hero-eyebrow-color, var(--cc-eyebrow-color, var(--cc-color-accent)));
}

.cc-hero-carousel__heading {
  margin-bottom: 0;
  color: var(--cc-hero-heading-color, var(--cc-text-hero));
}

.cc-hero-carousel__subheading {
  margin-top: var(--cc-spacing-heading-subheading);
  margin-bottom: 0;
  font-weight: var(--cc-weight-medium, 500);
  color: var(--cc-hero-subheading-color, var(--cc-text-hero));
  opacity: 0.9;
}

.cc-hero-carousel__body {
  margin-top: var(--cc-spacing-subheading-body);
  color: var(--cc-hero-body-color, var(--cc-text-hero));
  opacity: 0.92;
}

.cc-hero-carousel__body :is(p, ul, ol) {
  margin-top: 0;
  margin-bottom: 0;
}

.cc-hero-carousel__actions {
  display: flex;
  gap: var(--cc-grid-gap-tight);
  flex-wrap: wrap;
  margin-top: var(--cc-space-6);
}

.cc-hero-carousel__heading + .cc-hero-carousel__actions {
  margin-top: var(--cc-spacing-heading-subheading);
}

.cc-hero-carousel__body + .cc-hero-carousel__actions {
  margin-top: var(--cc-space-6);
}

.cc-hero-carousel .cc-btn-group,
.cc-hero-carousel .cc-hero-carousel__actions {
  flex-wrap: wrap;
}

.cc-hero-carousel__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.cc-hero-carousel__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

.cc-hero-carousel__video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  --cc-hero-video-opacity: 0;
}

.cc-hero-carousel__video-wrap iframe,
.cc-hero-carousel__video-wrap video,
.cc-hero-carousel__video-wrap .hs_cos_wrapper_type_videoplayer,
.cc-hero-carousel__video-wrap .hs-video-widget,
.cc-hero-carousel__video-wrap .hs-video-container {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 177.77vh !important;
  min-height: 56.25vw !important;
  border: 0;
  background: transparent !important;
  pointer-events: none;
  opacity: var(--cc-hero-video-opacity);
  transition: opacity 360ms var(--cc-ease-smooth);
  will-change: opacity;
}

.cc-hero-carousel__video-wrap[data-cc-video-state="ready"] {
  --cc-hero-video-opacity: 1;
}

.cc-hero-carousel__video-wrap[data-cc-video-state="blocked"] {
  --cc-hero-video-opacity: 0;
}

.cc-hero-carousel__video-wrap .vjs-big-play-button,
.cc-hero-carousel__video-wrap .vjs-control-bar,
.cc-hero-carousel__video-wrap .hs-video-play-button,
.cc-hero-carousel__video-wrap .vjs-poster,
.cc-hero-carousel__video-wrap .vjs-big-play-centered {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cc-hero-carousel__controls {
  position: absolute;
  right: var(--cc-space-8);
  bottom: var(--cc-space-8);
  z-index: 5;
  width: min(280px, calc(100% - (2 * var(--cc-space-8))));
  opacity: 0.9;
  transition: opacity var(--cc-duration-base) var(--cc-ease-smooth);
}

.cc-hero-carousel__controls:hover {
  opacity: 1;
}

.cc-hero-carousel__controls[hidden] {
  display: none;
}

.cc-hero-carousel__dot {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 44px;
  height: 44px;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.cc-hero-carousel__pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.cc-hero-carousel__progress-track {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.cc-hero-carousel__progress-fill {
  position: absolute;
  inset: 0;
  background: var(--cc-text-hero);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
}

.cc-hero-carousel__dot:is(:hover, :focus-visible) .cc-hero-carousel__progress-track {
  background: rgba(255, 255, 255, 0.62);
}

.cc-hero-carousel[data-autoplay="true"] .cc-hero-carousel__dot.is-active .cc-hero-carousel__progress-fill {
  animation: cc-hero-carousel-progress var(--cc-hero-autoplay-delay, 10s) linear forwards;
}

.cc-hero-carousel.is-progress-paused .cc-hero-carousel__dot.is-active .cc-hero-carousel__progress-fill {
  animation-play-state: paused;
}

.cc-hero-carousel[data-autoplay="false"] .cc-hero-carousel__dot.is-active .cc-hero-carousel__progress-fill,
.cc-hero-carousel.is-reduced-motion .cc-hero-carousel__dot.is-active .cc-hero-carousel__progress-fill {
  animation: none;
  transform: scaleX(1);
}

.cc-hero-carousel.has-active-no-media .cc-hero-carousel__progress-track {
  background: rgba(9, 16, 24, 0.22);
}

.cc-hero-carousel.has-active-no-media .cc-hero-carousel__progress-fill {
  background: var(--cc-heading-color, var(--cc-text-heading));
}

@keyframes cc-hero-carousel-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.cc-hero-carousel :is(a, button, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--cc-focus-outline-color);
  outline-offset: 2px;
}

.cc-hero-carousel__slide--no-media .cc-hero-carousel__eyebrow {
  color: var(--cc-hero-eyebrow-color, var(--cc-eyebrow-color, var(--cc-color-accent))) !important;
}

.cc-hero-carousel__slide--no-media .cc-hero-carousel__heading {
  color: var(--cc-hero-heading-color, var(--cc-heading-color, var(--cc-text-heading))) !important;
}

.cc-hero-carousel__slide--no-media .cc-hero-carousel__subheading {
  color: var(--cc-hero-subheading-color, var(--cc-subheading-color, var(--cc-text-body-color))) !important;
}

.cc-hero-carousel__slide--no-media .cc-hero-carousel__body {
  color: var(--cc-hero-body-color, var(--cc-body-color, var(--cc-text-body-color))) !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cc-hero-carousel__slide,
  .cc-hero-carousel__video-wrap iframe,
  .cc-hero-carousel__video-wrap video,
  .cc-hero-carousel__video-wrap .hs_cos_wrapper_type_videoplayer,
  .cc-hero-carousel__video-wrap .hs-video-widget,
  .cc-hero-carousel__video-wrap .hs-video-container {
    transition: none;
  }
}

@supports (width: 1cqw) {
  @container (min-width: 0px) {
    .cc-hero-carousel__video-wrap iframe,
    .cc-hero-carousel__video-wrap video,
    .cc-hero-carousel__video-wrap .hs_cos_wrapper_type_videoplayer,
    .cc-hero-carousel__video-wrap .hs-video-widget,
    .cc-hero-carousel__video-wrap .hs-video-container {
      min-width: 177.78cqh !important;
      min-height: 56.25cqw !important;
    }
  }
}

@media (max-width: 768px) {
  .cc-hero-carousel__outer {
    padding-inline: var(--cc-hero-carousel-edge-pad, 0px);
  }

  .cc-hero-carousel__card {
    border-radius: 0;
  }

  .cc-hero-height--small .cc-hero-carousel__card {
    min-height: clamp(420px, 65svh, 560px);
  }

  .cc-hero-height--medium .cc-hero-carousel__card {
    min-height: clamp(500px, 75svh, 680px);
  }

  .cc-hero-height--large .cc-hero-carousel__card,
  .cc-hero-height--full .cc-hero-carousel__card {
    min-height: max(100svh, 560px);
  }

  .cc-hero-carousel__content {
    padding-inline: var(--cc-container-pad);
    padding-top: var(--cc-space-12);
    padding-bottom: calc(var(--cc-space-12) + 56px);
    width: 100%;
    left: 0;
    transform: none;
  }

  .cc-hero-carousel__actions {
    flex-direction: column;
    width: 100%;
  }

  .cc-hero-carousel__actions .cc-btn {
    width: 100%;
  }

  .cc-hero-carousel__controls {
    right: 50%;
    bottom: max(var(--cc-space-4), env(safe-area-inset-bottom, 0px));
    transform: translateX(50%);
    width: min(320px, calc(100% - (2 * var(--cc-container-pad))));
  }

  .cc-hero-carousel__pagination {
    gap: 6px;
  }

  .cc-hero-carousel__dot {
    min-width: 48px;
    height: 48px;
  }
}

@media print {
  .cc-hero-carousel__viewport,
  .cc-hero-carousel__slides,
  .cc-hero-carousel__slide {
    position: static;
    height: auto;
  }

  .cc-hero-carousel__slide {
    opacity: 1;
    visibility: visible;
    display: block;
    overflow: visible;
  }

  .cc-hero-carousel__slide:not(:first-child) {
    display: none;
  }
}