/* =========================================================
   Split Panels Scroll (multi-instance safe)
   - Trigger: .impaakt-sps-wrapper
   - Pin: .impaakt-sps__pin (100vh, 100vw full-bleed)
   - Animation: ONLY center width (vw)
   - Side widths: fixed (vw)
   - IMPORTANT FIX: row is centered via left:50% + translateX(-50%)
     so the center expansion is symmetric (not only pushing right)
   ========================================================= */

.elementor-widget-impaakt_split_panels_scroll .impaakt-sps-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;

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

  /* Width vars driven by JS (vw) */
  --sps-left-vw: 25;
  --sps-center-vw: 50;
  --sps-right-vw: 25;
}

/* Keep spacer consistent (avoid flashes) */
.elementor-widget-impaakt_split_panels_scroll .pin-spacer {
  background: inherit;
}

/**
 * Full-bleed pin (100vw), centered inside any container
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__pin {
  width: 100vw;
  height: 100vh;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

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

  /* IMPORTANT: avoid grid centering side-effects */
  position: relative;
  display: block;
}

/**
 * Must be 100vw to give row a stable reference in Elementor containers.
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps {
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

/**
 * Row is centered "mathematically" (not via layout flow)
 * Width is the sum of 3 panel widths (vw)
 */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__row {
  display: flex;
  flex-direction: row;
  gap: 0;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

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

  justify-content: flex-start;
  align-items: center;
}

/* Panels */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__panel {
  min-width: 0;
  display: flex;
  flex-direction: column;

  /* Width lock */
  flex: 0 0 auto;

  transform: translateZ(0);
}

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

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

/* Center width is animated (vw) + content clipped */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__panel--center {
  width: calc(var(--sps-center-vw) * 1vw);
  height: var(--sps-h-center);
  overflow: hidden;
}

/* Body fills */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps__panel-body {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
}

/* Images: cover */
.elementor-widget-impaakt_split_panels_scroll .impaakt-sps img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prevent horizontal scroll caused by 100vw + scrollbar width */
.elementor-widget-impaakt_split_panels_scroll {
  overflow-x: clip;
}

/* Fallback if clip not supported */
@supports not (overflow: clip) {
  .elementor-widget-impaakt_split_panels_scroll {
    overflow-x: hidden;
  }
}

/**
 * Mobile / Tablet: keep the pinned horizontal layout so the vw animation still works.
 * - Use 100svh to avoid iOS address-bar jumps
 * - Slightly smaller side height
 * - Optionally tweak default vw ratios for smaller screens
 */
@media (max-width: 1024px) {
  .elementor-widget-impaakt_split_panels_scroll .impaakt-sps-wrapper {
    /* Optional: tweak defaults on mobile if config doesn't override */
    --sps-left-vw: 15;
    --sps-right-vw: 15;
    --sps-center-vw: 70;

    --sps-h-center: 100svh; /* modern */
    --sps-h-side: 70svh;
  }

  .elementor-widget-impaakt_split_panels_scroll .impaakt-sps__pin {
    width: 100vw;
    height: 100svh; /* key: keep a stable pin height */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    position: relative;
    display: block;
  }

  .elementor-widget-impaakt_split_panels_scroll .impaakt-sps {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    position: relative;
  }

  .elementor-widget-impaakt_split_panels_scroll .impaakt-sps__row {
    /* keep same geometry as desktop */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: row;

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

  .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);
    overflow: hidden;
  }

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

/* Fallback for browsers not supporting svh */
@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;
    }
  }
}