/* =============================================================
   Interactive Callout Slider — scroll-snap carousel, settings-driven.
   Callouts reuse the same fixed-connector-length pattern as
   section-interactive-product-callouts.min.css (.ipc__*), scoped here
   under .ipcs__* since each slide needs its own dot/line/label set.
   ============================================================= */

.ipcs {
  position: relative;
}

.ipcs__track-wrapper {
  position: relative;
}

.ipcs__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ipcs__track::-webkit-scrollbar {
  display: none;
}
.ipcs__track:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .ipcs__track {
    scroll-behavior: auto;
  }
}

/* ---- Slide ---- */
.ipcs__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  text-align: center;
  padding-bottom: 3rem;
}

.ipcs__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ipcs__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.ipcs__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ipcs__inner {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  padding: 4rem 2rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
@media screen and (min-width: 1300px) {
  .ipcs__inner {
    max-width: 1200px;
  }
}

.ipcs__text-block {
  width: var(--ipcs-text-width, 800px);
  max-width: 100%;
}

.ipcs__title {
  color: #fff;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 1.75rem;
}
@media screen and (max-width: 767px) {
  .ipcs__title {
    margin-bottom: 1.25rem;
  }
}

.ipcs__subtitle {
  color: #fff;
  line-height: 1.4;
  margin: 0;
}

/* ---- Stage: product image + callouts ---- */
.ipcs__stage {
  position: relative;
  display: inline-block;
  width: 400px;
  max-width: 100%;
}
.ipcs__img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ---- Callout: dot + line + label. left/top come from CSS vars ---- */
.ipcs__callout {
  position: absolute;
  left: var(--ipcs-x, 50%);
  top: var(--ipcs-y, 50%);
  z-index: 3;
  color: var(--ipcs-color, #fff);
}
.ipcs__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ipcs-color, #fff);
  border-radius: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}
.ipcs__line {
  position: absolute;
  background: var(--ipcs-color, #fff);
}
.ipcs__label {
  position: absolute;
  font-weight: 700;
  font-size: var(--ipcs-size, 22px);
  line-height: 1.15;
  white-space: nowrap;
  /* Merchant-configurable per callout (defaults to left either way) —
     replaces what used to be a fixed per-direction text-align. */
  text-align: var(--ipcs-align, left);
}

.ipcs__callout--right .ipcs__line { left: 10px; top: 0; height: 2px; width: var(--ipcs-line, 260px); transform: translateY(-50%); }
.ipcs__callout--right .ipcs__label { left: 10px; bottom: 6px; width: var(--ipcs-line, 260px); white-space: normal; }
.ipcs__callout--left .ipcs__line { right: 10px; top: 0; height: 2px; width: var(--ipcs-line, 260px); transform: translateY(-50%); }
.ipcs__callout--left .ipcs__label { right: 10px; bottom: 6px; width: var(--ipcs-line, 260px); white-space: normal; }

/* Right-direction line + left-aligned text: text would otherwise start
   flush against the line/dot, so nudge it over a bit. */
@media screen and (min-width: 990px) {
  .ipcs__callout--tight-left .ipcs__label { padding-left: 10px; }
}

/* ---- Button ---- */
.ipcs__button {
  margin-top: 0.5rem;
}
.ipcs__button .btn {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

/* ---- Reveal per active slide (staggered). Hidden until .is-active. ----
   Timing matches the legacy theme's callout reveal: 180ms stagger between
   callouts, dot fades in over 0.6s, the line grows over 0.8s starting 0.3s
   later, and the label fades in over 0.4s starting 0.6s later (legacy did
   this with a JS setTimeout stagger + CSS @keyframes; same cadence here via
   plain transition-delay). */
.ipcs--reveal .ipcs__dot,
.ipcs--reveal .ipcs__label {
  opacity: 0;
  transition: opacity 0.6s ease-out;
  transition-delay: calc(var(--i, 0) * 0.18s);
}
.ipcs--reveal .ipcs__label { transition-delay: calc(var(--i, 0) * 0.18s + 0.6s); }
.ipcs--reveal .ipcs__line {
  width: 0 !important;
  transition: width 0.8s ease-out;
  transition-delay: calc(var(--i, 0) * 0.18s + 0.3s);
}

.ipcs--reveal .ipcs__slide.is-active .ipcs__dot,
.ipcs--reveal .ipcs__slide.is-active .ipcs__label { opacity: 1; }
.ipcs--reveal .ipcs__slide.is-active .ipcs__line { width: var(--ipcs-line, 260px) !important; }

@media (prefers-reduced-motion: reduce) {
  .ipcs--reveal .ipcs__dot,
  .ipcs--reveal .ipcs__label { opacity: 1; transition: none; }
  .ipcs--reveal .ipcs__line { width: var(--ipcs-line, 260px) !important; transition: none; }
}

/* ---- Nav ---- */
.ipcs__nav {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  pointer-events: none;
  z-index: 4;
}
@media screen and (max-width: 768px) {
  .ipcs__nav {
    width: 100%;
  }
}
.ipcs__arrow {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.ipcs__arrow img {
  display: block;
  width: 24px;
  height: 24px;
}
.ipcs__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.ipcs__arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 50%;
}

/* =========================== Mobile =========================== */
@media (max-width: 989px) {
  .ipcs__slide {
    min-height: auto;
  }
  .ipcs__inner {
    padding: 2rem 1rem 4rem;
    gap: 1rem;
  }

  /* On mobile the image container is wider to allow the can to bleed right */
  .ipcs__stage {
    width: 100%;
    position: relative;
  }
  .ipcs__img {
    width: 140%;
    margin-left: var(--ipcs-mobile-offset, 25%);
    display: block;
    transform: rotate(-26deg);
  }

  .ipcs__callout {
    left: var(--ipcs-mx, 50%);
    top: var(--ipcs-my, 50%);
  }

  .ipcs__callout--right .ipcs__line,
  .ipcs__callout--left .ipcs__line {
    left: auto;
    right: 10px;
    width: var(--ipcs-line-m, 150px);
  }
  .ipcs__callout--right .ipcs__label,
  .ipcs__callout--left .ipcs__label {
    left: auto;
    right: 10px;
    white-space: normal;
    max-width: 55vw;
    width: auto;
    min-width: calc(var(--ipcs-line-m, 150px) - 5px);
    padding-right: 10px;
  }
  .ipcs__dot {
    left: 100%;
  }
  .ipcs__label {
    font-size: var(--ipcs-size-m, 16px);
    text-align: var(--ipcs-align-m, left);
  }

  /* Right-direction line + left-aligned text, mobile version of the same fix. */
  .ipcs__callout--tight-left-m .ipcs__label {
    padding-left: 4px;
  }

  .ipcs--reveal .ipcs__slide.is-active .ipcs__line { width: var(--ipcs-line-m, 150px) !important; }

  .ipcs__arrow {
    display: none;
  }
}