/* ==========================================================================
   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%;
}

.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;
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding: var(--cc-space-1) var(--cc-space-2);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--cc-radius-full);
  opacity: 0.82;
  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__pause,
.cc-hero-carousel__nav,
.cc-hero-carousel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  appearance: none;
  border: 0;
  padding: 0;
}

.cc-hero-carousel__pause,
.cc-hero-carousel__nav {
  width: 32px;
  height: 32px;
  border-radius: var(--cc-radius-circle);
  background: rgba(255, 255, 255, 0.15);
  color: var(--cc-text-hero);
  cursor: pointer;
  transition:
    background 200ms ease,
    opacity 200ms ease;
}

.cc-hero-carousel__pause:hover,
.cc-hero-carousel__nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.cc-hero-carousel__nav:disabled,
.cc-hero-carousel__nav[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.cc-hero-carousel__pause [data-state="playing"] {
  display: block;
}

.cc-hero-carousel__pause [data-state="paused"] {
  display: none;
}

.cc-hero-carousel__pause[aria-pressed="true"] [data-state="playing"] {
  display: none;
}

.cc-hero-carousel__pause[aria-pressed="true"] [data-state="paused"] {
  display: block;
}

.cc-hero-carousel__nav-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.cc-hero-carousel__pagination {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  width: auto;
  margin: 0 var(--cc-space-1);
}

.cc-hero-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cc-white-semi);
  cursor: pointer;
  transition:
    transform var(--cc-duration-base) var(--cc-ease-smooth),
    background-color var(--cc-duration-base) var(--cc-ease-smooth),
    opacity var(--cc-duration-base) var(--cc-ease-smooth);
}

.cc-hero-carousel__dot.is-active,
.cc-hero-carousel__dot[aria-current="true"] {
  background: var(--cc-text-hero);
  transform: scale(1.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;
    min-height: 60vh;
  }

  .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%);
    gap: 10px;
    padding: 8px 12px;
    background: rgba(9, 16, 24, 0.32);
    border-color: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .cc-hero-carousel__nav {
    display: none;
  }

  .cc-hero-carousel__pause {
    width: 30px;
    height: 30px;
  }

  .cc-hero-carousel__pause-icon,
  .cc-hero-carousel__play-icon {
    width: 14px;
    height: 14px;
  }

  .cc-hero-carousel__pagination {
    gap: 8px;
    margin: 0;
  }

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

@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;
  }
}