/* =============================================================
   Interactive Callouts — pure CSS layout, settings-driven.
   No text-measuring JS. Reveal-on-scroll adds .ipc--in (tiny observer);
   everything else is CSS. Label sits ABOVE the connector line.
   ============================================================= */

.ipc {
  position: relative;
  overflow: hidden;
  padding: var(--ipc-pad-top, 60px) 2rem var(--ipc-pad-bottom, 60px);
  text-align: center;
}
.ipc__inner { max-width: 1200px; margin: 0 auto; }

.ipc__title {
  color: var(--ipc-content-color, #fff);
  font-size: 48px;
  line-height: 1.15;
  max-width: 620px;
  margin: 0 auto 1.25rem;
}
.ipc__subtitle {
  color: var(--ipc-content-color, #fff);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 760px;
  margin: 0 auto;
}

/* Stage shrink-wraps the image so callout %s map to the product box */
.ipc__stage {
  position: relative;
  display: inline-block;
  width: 400px;
  max-width: 100%;
  margin: 2.5rem auto 0;
}
.ipc__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 ---- */
.ipc__callout {
  position: absolute;
  left: var(--ipc-x, 50%);
  top: var(--ipc-y, 50%);
  z-index: 3;
  color: var(--ipc-color, #fff);
}
.ipc__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ipc-color, #fff);
  border-radius: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}
.ipc__line { position: absolute; background: var(--ipc-color, #fff); }
.ipc__label {
  position: absolute;
  font-weight: 700;
  font-size: var(--ipc-size, 24px);
  line-height: 1.15;
  /* Merchant-configurable per callout (defaults to left either way) —
     replaces what used to be a fixed per-direction text-align. */
  text-align: var(--ipc-align, left);
}

/* Horizontal: line centered on the dot; label ABOVE the line, spanning it. */
.ipc__callout--right .ipc__line { left: 10px; top: 0; height: 2px; width: var(--ipc-line, 240px); transform: translateY(-50%); }
.ipc__callout--right .ipc__label { left: 10px; bottom: 6px; width: var(--ipc-line, 240px); }
.ipc__callout--left .ipc__line { right: 10px; top: 0; height: 2px; width: var(--ipc-line, 240px); transform: translateY(-50%); }
.ipc__callout--left .ipc__label { right: 10px; bottom: 6px; width: var(--ipc-line, 240px); }

/* 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: 769px) {
  .ipc__callout--tight-left .ipc__label { padding-left: 10px; }
}

/* Vertical: line above/below the dot; label past the line end. Label box is
   centered on the dot (translateX(-50%)) and spans the connector length so
   the alignment setting above has room to actually shift the text within it
   — it used to be an unconstrained nowrap box, which left no room for
   left/right alignment to do anything. */
.ipc__callout--up .ipc__line { left: 0; bottom: 10px; width: 2px; height: var(--ipc-line, 240px); transform: translateX(-50%); }
.ipc__callout--up .ipc__label { left: 0; bottom: calc(10px + var(--ipc-line, 240px) + 6px); width: var(--ipc-line, 240px); transform: translateX(-50%); }
.ipc__callout--down .ipc__line { left: 0; top: 10px; width: 2px; height: var(--ipc-line, 240px); transform: translateX(-50%); }
.ipc__callout--down .ipc__label { left: 0; top: calc(10px + var(--ipc-line, 240px) + 6px); width: var(--ipc-line, 240px); transform: translateX(-50%); }

/* ---- Footnote: same slot/spacing as the button, sits above it ---- */
.ipc__footnote { margin-top: 0; font-size: 12px; text-align: center; }
.ipc__footnote p { margin: 0; }
.ipc__footnote + .ipc__button { margin-top: 1rem; }

/* ---- Button: content width, centered ---- */
.ipc__button { margin-top: 2.5rem; text-align: center; }
.ipc__button .btn { display: inline-flex; width: auto; max-width: 100%; }

/* ---- Reveal on scroll (staggered). Hidden until .ipc--in is added. ----
   Timing matches the legacy theme's callout reveal: 200ms 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). */
.ipc--reveal .ipc__dot,
.ipc--reveal .ipc__label {
  opacity: 0;
  transition: opacity 0.6s ease-out;
  transition-delay: calc(var(--i, 0) * 0.2s);
}
.ipc--reveal .ipc__label { transition-delay: calc(var(--i, 0) * 0.2s + 0.6s); }
.ipc--reveal .ipc__callout--left .ipc__line,
.ipc--reveal .ipc__callout--right .ipc__line { width: 0; transition: width 0.8s ease-out; transition-delay: calc(var(--i, 0) * 0.2s + 0.3s); }
.ipc--reveal .ipc__callout--up .ipc__line,
.ipc--reveal .ipc__callout--down .ipc__line { height: 0; transition: height 0.8s ease-out; transition-delay: calc(var(--i, 0) * 0.2s + 0.3s); }

.ipc--reveal.ipc--in .ipc__dot,
.ipc--reveal.ipc--in .ipc__label { opacity: 1; }
.ipc--reveal.ipc--in .ipc__callout--left .ipc__line,
.ipc--reveal.ipc--in .ipc__callout--right .ipc__line { width: var(--ipc-line, 240px); }
.ipc--reveal.ipc--in .ipc__callout--up .ipc__line,
.ipc--reveal.ipc--in .ipc__callout--down .ipc__line { height: var(--ipc-line, 240px); }

@media (prefers-reduced-motion: reduce) {
  .ipc--reveal .ipc__dot,
  .ipc--reveal .ipc__label { opacity: 1; transition: none; }
  .ipc--reveal .ipc__callout--left .ipc__line,
  .ipc--reveal .ipc__callout--right .ipc__line { width: var(--ipc-line, 240px); transition: none; }
  .ipc--reveal .ipc__callout--up .ipc__line,
  .ipc--reveal .ipc__callout--down .ipc__line { height: var(--ipc-line, 240px); transition: none; }
}

/* =========================== Mobile =========================== */
@media screen and (max-width: 768px) {
  .ipc { padding: 2.5rem 1rem; --ipc-line: var(--ipc-line-m, 150px); }
  .ipc__title { font-size: 30px; max-width: 100%; }
  .ipc__subtitle { font-size: 18px; max-width: 100%; text-align: left; margin: 0 0 1.5rem; }
  .ipc__stage { width: 100vw; margin-top: 0; }
  .ipc__img { margin-left: var(--ipc-mobile-offset, 0%); }
  .ipc__label { font-size: var(--ipc-size-m, 16px); text-align: var(--ipc-align-m, left); }

  /* mobile position */
  .ipc__callout { left: var(--ipc-mx, 50%); top: var(--ipc-my, 50%); }

  /* mobile direction (.ipc__callout--m-*) overrides desktop; label spans the
     mobile connector length */
  .ipc__callout--m-right .ipc__line { left: 10px; right: auto; top: 0; bottom: auto; height: 2px; width: var(--ipc-line-m, 150px); transform: translateY(-50%); }
  .ipc__callout--m-right .ipc__label { left: 10px; right: auto; bottom: 6px; top: auto; width: 46vw; }
  .ipc__callout--m-left .ipc__line { right: 10px; left: auto; top: 0; bottom: auto; height: 2px; width: var(--ipc-line-m, 150px); transform: translateY(-50%); }
  .ipc__callout--m-left .ipc__label { right: 10px; left: auto; bottom: 6px; top: auto; width: 46vw; }
  .ipc__callout--m-up .ipc__line { left: 0; right: auto; bottom: 10px; top: auto; width: 2px; height: var(--ipc-line-m, 150px); transform: translateX(-50%); }
  .ipc__callout--m-up .ipc__label { left: 0; right: auto; bottom: calc(10px + var(--ipc-line-m, 150px) + 6px); top: auto; width: var(--ipc-line-m, 150px); transform: translateX(-50%); }
  .ipc__callout--m-down .ipc__line { left: 0; right: auto; top: 10px; bottom: auto; width: 2px; height: var(--ipc-line-m, 150px); transform: translateX(-50%); }
  .ipc__callout--m-down .ipc__label { left: 0; right: auto; top: calc(10px + var(--ipc-line-m, 150px) + 6px); bottom: auto; width: var(--ipc-line-m, 150px); transform: translateX(-50%); }

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

  /* reveal line lengths follow the mobile connector length */
  .ipc--reveal.ipc--in .ipc__callout--m-left .ipc__line,
  .ipc--reveal.ipc--in .ipc__callout--m-right .ipc__line { width: var(--ipc-line-m, 150px); }
  .ipc--reveal.ipc--in .ipc__callout--m-up .ipc__line,
  .ipc--reveal.ipc--in .ipc__callout--m-down .ipc__line { height: var(--ipc-line-m, 150px); }
}