/* =========================================================
   Split Panels Scroll
   - Multi-instance safe
   - Trigger: .impaakt-sps-wrapper
   - Pin: .impaakt-sps__pin
   - Animation: center panel width
   - Side panel widths remain fixed
   - Responsive containers without negative viewport margins
   ========================================================= */

/**
 * Main widget container.
 */
.elementor-widget-impaakt_split_panels_scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  box-sizing: border-box;
}

/**
 * Main animation wrapper.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps-wrapper {
  position: relative;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow: visible;
  box-sizing: border-box;

  /**
   * Heights controlled by Elementor.
   */
  --sps-h-center: 100vh;
  --sps-h-side: 80vh;

  /**
   * Width variables controlled by JavaScript.
   */
  --sps-left-vw: 25;
  --sps-center-vw: 50;
  --sps-right-vw: 25;
}

/**
 * Keep the ScrollTrigger spacer visually consistent.
 */
.elementor-widget-impaakt_split_panels_scroll .pin-spacer {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  background: inherit;
  box-sizing: border-box;
}

/**
 * Responsive pinned container.
 *
 * Do not use:
 * - width: 100vw
 * - margin-left: calc(50% - 50vw)
 * - margin-right: calc(50% - 50vw)
 *
 * These declarations can shift the widget inside Elementor containers.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__pin {
  position: relative;
  display: block;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  height: 100vh;
  min-height: 100vh;

  margin-left: 0;
  margin-right: 0;

  overflow: hidden;
  box-sizing: border-box;
}

/**
 * Main animation viewport.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps {
  position: relative;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  height: 100%;

  overflow: hidden;
  box-sizing: border-box;
}

/**
 * Animated horizontal row.
 *
 * The row remains centered using left: 50% and translateX(-50%).
 * Its width is calculated from the three panel widths.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__row {
  position: absolute;
  top: 50%;
  left: 50%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  width: calc(
    (var(--sps-left-vw) * 1vw) +
    (var(--sps-center-vw) * 1vw) +
    (var(--sps-right-vw) * 1vw)
  );

  min-width: 0;

  gap: 0;

  transform: translate(-50%, -50%);
  transform-origin: center center;

  box-sizing: border-box;
  will-change: width, transform;
}

/**
 * Common panel styles.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__panel {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;
  box-sizing: border-box;

  transform: translateZ(0);
  backface-visibility: hidden;
}

/**
 * Fixed left panel width.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__panel--left {
  width: calc(var(--sps-left-vw) * 1vw);
  height: var(--sps-h-side);
}

/**
 * Animated center panel width.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__panel--center {
  width: calc(var(--sps-center-vw) * 1vw);
  height: var(--sps-h-center);

  will-change: width;
}

/**
 * Fixed right panel width.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__panel--right {
  width: calc(var(--sps-right-vw) * 1vw);
  height: var(--sps-h-side);
}

/**
 * Panel content container.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__panel-body {
  position: relative;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  height: 100%;
  min-height: 0;

  flex: 1 1 auto;

  overflow: hidden;
  box-sizing: border-box;
}

/**
 * Images fill their respective panels.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps img {
  display: block;

  width: 100%;
  max-width: 100%;

  height: 100%;

  object-fit: cover;
  object-position: center;

  user-select: none;
  -webkit-user-drag: none;
}

/**
 * Prevent animation containers from creating page-level horizontal overflow.
 */
.js-impaakt-feature-stack,
.js-impaakt-feature-stack__item,
.impaakt-sps-wrapper,
.impaakt-sps__pin,
.impaakt-sps {
  max-width: 100%;
  min-width: 0;

  box-sizing: border-box;
}

.js-impaakt-feature-stack {
  overflow-x: clip;
}

/**
 * Reduced-motion static layout.
 */
.js-impaakt-feature-stack.is-reduced-motion {
  height: auto;
  min-height: 0;

  overflow: visible;
}

.js-impaakt-feature-stack.is-reduced-motion
  .js-impaakt-feature-stack__item {
  position: relative;

  width: 100%;
  height: auto;

  transform: none;
  visibility: visible;
}

/**
 * Tablet and mobile layout.
 *
 * The horizontal panel structure is preserved so the width animation
 * continues to work. The pin no longer uses viewport-width breakout margins.
 */
@media (max-width: 1024px) {
  .elementor-widget-impaakt_split_panels_scroll .impaakt-sps-wrapper {
    /**
     * Default mobile ratios.
     * JavaScript or Elementor inline values may override these variables.
     */
    --sps-left-vw: 15;
    --sps-center-vw: 70;
    --sps-right-vw: 15;

    --sps-h-center: 100svh;
    --sps-h-side: 70svh;
  }

  .elementor-widget-impaakt_split_panels_scroll .impaakt-sps__pin {
    position: relative;
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 100svh;
    min-height: 100svh;

    margin-left: 0;
    margin-right: 0;

    overflow: hidden;
    box-sizing: border-box;
  }

  .elementor-widget-impaakt_split_panels_scroll .impaakt-sps {
    position: relative;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 100%;

    overflow: hidden;
    box-sizing: border-box;
  }

  .elementor-widget-impaakt_split_panels_scroll .impaakt-sps__row {
    position: absolute;
    top: 50%;
    left: 50%;

    display: flex;
    flex-direction: row;

    width: calc(
      (var(--sps-left-vw) * 1vw) +
      (var(--sps-center-vw) * 1vw) +
      (var(--sps-right-vw) * 1vw)
    );

    transform: translate(-50%, -50%);
    transform-origin: center center;
  }

  .elementor-widget-impaakt_split_panels_scroll
    .impaakt-sps__panel--left,
  .elementor-widget-impaakt_split_panels_scroll
    .impaakt-sps__panel--right {
    height: var(--sps-h-side);
  }

  .elementor-widget-impaakt_split_panels_scroll
    .impaakt-sps__panel--center {
    height: var(--sps-h-center);
  }
}

/**
 * Small mobile adjustments.
 */
@media (max-width: 767px) {
  .elementor-widget-impaakt_split_panels_scroll .impaakt-sps-wrapper {
    --sps-left-vw: 12;
    --sps-center-vw: 76;
    --sps-right-vw: 12;

    --sps-h-side: 65svh;
  }
}

/**
 * Fallback for browsers without small viewport height units.
 */
@supports not (height: 100svh) {
  @media (max-width: 1024px) {
    .elementor-widget-impaakt_split_panels_scroll .impaakt-sps-wrapper {
      --sps-h-center: 100vh;
      --sps-h-side: 70vh;
    }

    .elementor-widget-impaakt_split_panels_scroll .impaakt-sps__pin {
      height: 100vh;
      min-height: 100vh;
    }
  }

  @media (max-width: 767px) {
    .elementor-widget-impaakt_split_panels_scroll .impaakt-sps-wrapper {
      --sps-h-side: 65vh;
    }
  }
}

/**
 * Fallback for browsers without overflow: clip.
 */
@supports not (overflow: clip) {
  .elementor-widget-impaakt_split_panels_scroll,
  .js-impaakt-feature-stack {
    overflow-x: hidden;
  }
}

/**
 * Disable expensive motion hints when reduced motion is requested.
 */
@media (prefers-reduced-motion: reduce) {
  .elementor-widget-impaakt_split_panels_scroll .impaakt-sps__row,
  .elementor-widget-impaakt_split_panels_scroll
    .impaakt-sps__panel--center {
    will-change: auto;
  }
}