/* ========================================================================
   FEATURE SLIDER MODULE
   ======================================================================== */


/* ========= Base Container ========= */

.hs-feature-slider {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* ========= Content Wrapper ========= */

.hs-feature-slider__content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 28px; /* Space for dot navigation */
}

/* No dots: remove dot space */
.hs-feature-slider--no-dots .hs-feature-slider__content {
  padding-bottom: 0;
}

/* No animation: stop autoplay on inactive slides */
.hs-feature-slide:not(.is-active) svg * {
  animation: none !important;
}

/* ========= Slides Container ========= */

.hs-feature-slider__slides {
  position: relative;
  width: 100%;
  display: grid;
}

/* ========= Individual Slide ========= */

.hs-feature-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-time, 800ms) ease;
}

.hs-feature-slide:not(.is-active) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

.hs-feature-slide.is-active {
  opacity: 1;
  visibility: visible;
}


/* ========= Slide Inner (2-Column Layout) ========= */

.hs-feature-slider .hs-feature-slide__inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  width: 100%;
}

.hs-feature-slider--icon-left .hs-feature-slide__inner {
  grid-template-columns: 2fr 3fr;
}

.hs-feature-slider--icon-left .hs-feature-slide__icon {
  order: 1;
  justify-content: flex-start;
  align-items: flex-start;
}

.hs-feature-slider--icon-left .hs-feature-slide__icon-wrap {
  margin-right: auto;
  margin-left: 0;
}

.hs-feature-slider--icon-left .hs-feature-slide__text {
  order: 2;
}

.hs-feature-slider--icon-left .hs-feature-slider__buttons {
  justify-content: flex-start;
  padding-left: 40%;
}

/* ========= Left Column - Text Content ========= */

.hs-feature-slider .hs-feature-slide__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.hs-feature-slider .hs-feature-slide__topline {
  color: var(--topline-color);
  margin: 0;
}

.hs-feature-slider .hs-feature-slide__headline {
  color: var(--headline-color);
  margin: 0;
}

.hs-feature-slider .hs-feature-slide__copyline,
.hs-feature-slider .hs-feature-slide__copyline p,
.hs-feature-slider .hs-feature-slide__copyline ul,
.hs-feature-slider .hs-feature-slide__copyline ol,
.hs-feature-slider .hs-feature-slide__copyline li,
.hs-feature-slider .hs-feature-slide__copyline strong,
.hs-feature-slider .hs-feature-slide__copyline em,
.hs-feature-slider .hs-feature-slide__copyline a,
.hs-feature-slider .hs-feature-slide__copyline span,
.hs-feature-slider .hs-feature-slide__copyline h1,
.hs-feature-slider .hs-feature-slide__copyline h2,
.hs-feature-slider .hs-feature-slide__copyline h3,
.hs-feature-slider .hs-feature-slide__copyline h4,
.hs-feature-slider .hs-feature-slide__copyline h5,
.hs-feature-slider .hs-feature-slide__copyline h6 {
  color: var(--copyline-color);
}

.hs-feature-slider .hs-feature-slide__copyline p,
.hs-feature-slider .hs-feature-slide__copyline ul,
.hs-feature-slider .hs-feature-slide__copyline ol,
.hs-feature-slider .hs-feature-slide__copyline h1,
.hs-feature-slider .hs-feature-slide__copyline h2,
.hs-feature-slider .hs-feature-slide__copyline h3,
.hs-feature-slider .hs-feature-slide__copyline h4,
.hs-feature-slider .hs-feature-slide__copyline h5,
.hs-feature-slider .hs-feature-slide__copyline h6 {
  margin: 0 0 12px;
}

.hs-feature-slider .hs-feature-slide__copyline p:last-child,
.hs-feature-slider .hs-feature-slide__copyline ul:last-child,
.hs-feature-slider .hs-feature-slide__copyline ol:last-child,
.hs-feature-slider .hs-feature-slide__copyline h1:last-child,
.hs-feature-slider .hs-feature-slide__copyline h2:last-child,
.hs-feature-slider .hs-feature-slide__copyline h3:last-child,
.hs-feature-slider .hs-feature-slide__copyline h4:last-child,
.hs-feature-slider .hs-feature-slide__copyline h5:last-child,
.hs-feature-slider .hs-feature-slide__copyline h6:last-child {
  margin-bottom: 0;
}

.hs-feature-slider .hs-feature-slide__copyline a:hover {
  color: var(--copyline-color);
  opacity: 0.8;
}

/* ========= Right Column - SVG Icon ========= */

.hs-feature-slider .hs-feature-slide__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-feature-slider .hs-feature-slide__icon-wrap {
  width: 100%;
  max-width: var(--icon-size, 280px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hs-feature-slider .hs-feature-slide__icon-wrap svg {
  width: 100%;
  height: 100%;
  max-width: var(--icon-size, 280px);
  max-height: var(--icon-size, 280px);
}

/* ========= Buttons Container ========= */

.hs-feature-slider__buttons {
  display: flex;
  justify-content: var(--btn-align, center);
  gap: 16px;
  margin-top: var(--content-gap, 40px);
  transform: translateZ(0);
}

/* No buttons: hide buttons */
.hs-feature-slider--no-buttons .hs-feature-slider__buttons {
  display: none;
}

/* ========= Button Base Styles ========= */

.hs-feature-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px 14px 32px;
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  z-index: 1;
  transition: color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}

.hs-feature-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  z-index: -1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hs-feature-btn:hover,
.hs-feature-btn:focus,
.hs-feature-btn:active {
  text-decoration: none;
}

/* ========= Primary Button ========= */
/* Default: Accent bg, contrast-inv text */
/* Hover: Transparent bg, accent text */

.hs-feature-btn--primary {
  background: transparent;
  color: var(--btn-contrast-inv);
  border-color: var(--btn-accent);
}

.hs-feature-btn--primary::before {
  background: var(--btn-accent);
  opacity: 1;
}

.hs-feature-btn--primary:hover {
  color: var(--btn-accent);
}

.hs-feature-btn--primary:hover::before {
  opacity: 0;
}

/* ========= Secondary Button ========= */
/* Default: Transparent bg, contrast text/border */
/* Hover: Contrast bg, contrast-inv text */

.hs-feature-btn--secondary {
  background: transparent;
  color: var(--btn-contrast);
  border-color: var(--btn-contrast);
}

.hs-feature-btn--secondary::before {
  background: var(--btn-contrast);
  opacity: 0;
}

.hs-feature-btn--secondary:hover {
  color: var(--btn-contrast-inv);
}

.hs-feature-btn--secondary:hover::before {
  opacity: 1;
}

/* ========= Outline Button ========= */
/* Default: Transparent bg, accent border/text */
/* Hover: Stays transparent, dims to signal interaction */

.hs-feature-btn--outline {
  background: transparent;
  color: var(--btn-accent);
  border: 2px solid var(--btn-accent);
}

.hs-feature-btn--outline::before {
  display: none;
}

.hs-feature-btn--outline:hover {
  opacity: 0.35;
  color: var(--btn-accent);
}

/* ========= Chevron Buttons ========= */

.hs-feature-slider__prev,
.hs-feature-slider__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--nav-color, #fff);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hs-feature-slider__prev {
  left: 40px;
}

.hs-feature-slider__prev:hover {
  opacity: 0.8;
  transform: translateY(-50%) translateX(-4px);
}

.hs-feature-slider__prev:active {
  opacity: 0.6;
  transform: translateY(-50%) translateX(0);
  transition: opacity 0.1s ease, transform 0.1s ease;
}

.hs-feature-slider__next {
  right: 40px;
}

.hs-feature-slider__next:hover {
  opacity: 0.8;
  transform: translateY(-50%) translateX(4px);
}

.hs-feature-slider__next:active {
  opacity: 0.6;
  transform: translateY(-50%) translateX(0);
  transition: opacity 0.1s ease, transform 0.1s ease;
}

.hs-feature-slider .hs-chevron {
  width: 20px;
  height: 20px;
}

.hs-feature-slider__prev .hs-chevron {
  transform: none;
}

.hs-feature-slider__next .hs-chevron {
  transform: scaleX(-1);
}

/* ========= Dot Navigation ========= */

.hs-feature-slider__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 6;
}

.hs-feature-slider__dots button {
  width: 8px;
  height: 8px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  background: var(--nav-color, #fff);
  opacity: 0.4;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hs-feature-slider__dots button:hover {
  opacity: 0.8;
}

.hs-feature-slider__dots button.is-active {
  opacity: 0.8;
  transform: scale(1.2);
}

/* ========= Tablet Responsive ========= */

@media (max-width: 968px) {
  .hs-feature-slider .hs-feature-slide__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hs-feature-slider .hs-feature-slide__text {
    text-align: center;
    order: 2;
  }

  .hs-feature-slider .hs-feature-slide__icon {
    order: 1;
  }

  .hs-feature-slider .hs-feature-slide__icon-wrap {
    max-width: 200px;
    aspect-ratio: unset;
  }

  /* Layout collapses to single centered column — always center buttons */
  .hs-feature-slider .hs-feature-slider__buttons,
  .hs-feature-slider--icon-left .hs-feature-slider__buttons {
    justify-content: center;
    padding-left: 0;
  }

  .hs-feature-slider--icon-left .hs-feature-slide__icon {
    justify-content: center;
    align-items: center;
  }

  .hs-feature-slider--icon-left .hs-feature-slide__icon-wrap {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========= Mobile Responsive ========= */

@media (max-width: 768px) {
  .hs-feature-slider .hs-feature-slider__prev,
  .hs-feature-slider .hs-feature-slider__next {
    display: none !important;
  }

  .hs-feature-slider .hs-feature-slider__dots {
    gap: 12px;
  }

  .hs-feature-slider .hs-feature-slider__dots button {
    width: 12px;
    height: 12px;
  }

  .hs-feature-slider .hs-feature-slider__buttons {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .hs-feature-slider .hs-feature-btn {
    width: 100%;
    max-width: 280px;
  }

  .hs-feature-slider .hs-feature-slide__icon-wrap {
    max-width: 160px;
    aspect-ratio: unset;
  }
}

/* ========= Slide Animation Enhancements ========= */

.hs-feature-slider .hs-feature-slide__topline,
.hs-feature-slider .hs-feature-slide__headline,
.hs-feature-slider .hs-feature-slide__copyline,
.hs-feature-slider .hs-feature-slide__icon-wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hs-feature-slider .hs-feature-slide.is-active .hs-feature-slide__topline {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.hs-feature-slider .hs-feature-slide.is-active .hs-feature-slide__headline {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.24s;
}

.hs-feature-slider .hs-feature-slide.is-active .hs-feature-slide__copyline {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.32s;
}

.hs-feature-slider .hs-feature-slide.is-active .hs-feature-slide__icon-wrap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.16s;
}

/* ========================================================================
   FULL-BLEED VIDEO SLIDES
   ======================================================================== */

/* Content sits above the background layers */
.hs-feature-slider .hs-feature-slider__content {
  position: relative;
  z-index: 1;
}

/* Background layer stack — covers the entire slider section */
.hs-feature-slider__bgs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;          /* clip the oversized cover iframe */
  border-radius: inherit;
  pointer-events: none;      /* clicks fall through to the play link */
  container-type: size;      /* stable size container for the cover math */
}

/* Solid colour layer — always visible, fills the whole box, lowest in the
   __bgs stack so video layers cover it when a video slide is active. */
.hs-feature-slider__bg-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--module-bg, #0e2735);
}

/* When JS hoists the layer for full-section bleed it is placed INSIDE the
   theme's .section-bg element (which carries z-index:-1, below content). As a
   child of that -1 element, z-index:0 paints the video above the accent fill
   while staying inside the below-content layer, so text/buttons stay on top. */
.hs-feature-slider__bgs.is-section-bleed {
  z-index: -2;
}

/* Each video slide's background — cross-fades with the active slide */
.hs-feature-slider__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-time, 800ms) ease;
  overflow: hidden;
}

.hs-feature-slider__bg.is-active {
  opacity: 1;
  visibility: visible;
}

/* The injected iframe — scaled to cover the layer at 16:9, centered, no bars.
   cqw/cqh resolve against the __bgs wrapper (the size container below), which
   is locked to the section's box, so the math can't drift. */
.hs-feature-slider__bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  border: 0;
  pointer-events: none;
}

@supports not (width: 1cqw) {
  .hs-feature-slider__bg iframe {
    width: 100%;
    height: 100%;
    transform: none;
    top: 0;
    left: 0;
  }
}

/* Color/opacity tint drawn over the video */
.hs-feature-slider__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;                /* above the iframe, within the bg layer */
  pointer-events: none;
}

/* Play-icon lightbox trigger — sized to match the normal icon */
.hs-feature-slider .hs-feature-slide__play {
  display: inline-flex;
  width: 100%;
  max-width: var(--icon-size, 280px);
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.hs-feature-slider .hs-feature-slide__play:hover {
  transform: scale(1.05);
  opacity: 0.9;
}