/* ==========================================================================
   ANIMATIONS & DECORATIVE — dashed connector lines, hover transitions
   Everything here is purely visual enhancement, safe to defer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   How-it-works icon connectors (.ps-icon-how)
   -------------------------------------------------------------------------- */

.ps-icon-how {
  position: relative;
  flex: 1;
}

.ps-icon-how .wp-block-kadence-image .kb-image-ratio-square {
  height: 32px;
  width: 32px;
}

.ps-icon-how figure {
  flex: 1;
}
  /* .ps-icon-how-wrapper::before { */
  /*   content:""; */
  /*   background: #fff; */
  /*   width: 100%; */
  /*   height: 30px; */
  /*   display: block; */
  /* } */
  /**/
  .ps-icon-how-wrapper:after  {
    content: "";
    position: absolute;
    top: 42px;
    left: 37px;
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
      to bottom,
      #000 0 8px,
      transparent 8px 16px
    );
  }

@media (min-width: 376px) {
  .ps-icon-how-wrapper:after {
    left: 44px;;
  }
}

@media (min-width: 769px) {
  .ps-icon-how-wrapper:after  {
    content: "";
    position: absolute;
    top: 42px;
    left: 20px;
    width: 91%;
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      #000 0 8px,
      transparent 8px 16px
    );
  }
}


/* Horizontal dashed line between steps (desktop) */
/* .ps-icon-how:not(:last-child)::after { */
/*   content: ""; */
/*   position: absolute; */
/*   top: 32px; */
/*   left: calc(100% - 70px); */
/*   width: 140%; */
/*   height: 2px; */
/*   z-index: -1; */
/*   background: repeating-linear-gradient( */
/*     to right, */
/*     #000 0 8px, */
/*     transparent 8px 16px */
/*   ); */
/* } */

/* Vertical dashed line between steps (tablet/mobile) */
/* @media (max-width: 1024px) { */
/*   .ps-icon-how:not(:last-child)::after { */
/*     top: calc(100% - 40px); */
/*     left: 32px; */
/*     width: 2px; */
/*     height: 100%; */
/*     z-index: -1; */
/*     background: repeating-linear-gradient( */
/*       to bottom, */
/*       #000 0 8px, */
/*       transparent 8px 16px */
/*     ); */
/*   } */
/* } */

/* Narrower offset at 376px */
/* @media (max-width: 376px) { */
/*   .ps-icon-how:not(:last-child)::after { */
/*     top: 28px; */
/*     left: 23px; */
/*     width: 2px; */
/*     height: 100%; */
/*     z-index: -1; */
/*     background: repeating-linear-gradient( */
/*       to bottom, */
/*       #000 0 8px, */
/*       transparent 8px 16px */
/*     ); */
/*   } */
/* } */

/* Smaller icon on mobile */
@media (max-width: 765px) {
  .ps-icon-how .wp-block-kadence-image .kb-image-ratio-square {
    height: 24px;
    width: 24px;
  }
}

/* --------------------------------------------------------------------------
   How-it-works icon connectors (.ps-icon-work) — alternative variant
   -------------------------------------------------------------------------- */

.ps-icon-work {
  --ps-line-size: 2px;
  --ps-dash-size: 8px;
  --ps-gap-size: 8px;
}

.ps-icon-work .kt-blocks-info-box-media {
  position: relative;
  overflow: visible;
  z-index: 0;
}

/* Horizontal line (desktop) */
.wp-block-kadence-column:not(:last-child) .ps-icon-work .kt-blocks-info-box-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  background: repeating-linear-gradient(
    to right,
    #000 0 var(--ps-dash-size),
    transparent var(--ps-dash-size) calc(var(--ps-dash-size) + var(--ps-gap-size))
  );
  top: 32px;
  left: calc(100% - 50px);
  width: 100%;
  height: var(--ps-line-size);
}

/* Vertical line (tablet/mobile) */
@media (max-width: 1024px) {
  .wp-block-kadence-column:not(:last-child) .ps-icon-work .kt-blocks-info-box-media::after {
    top: 28px;
    left: 30px;
    width: var(--ps-line-size);
    height: 100%;
    z-index: -1;
    background: repeating-linear-gradient(
      to bottom,
      #000 0 var(--ps-dash-size),
      transparent var(--ps-dash-size) calc(var(--ps-dash-size) + var(--ps-gap-size))
    );
  }
}

/* Narrower offset at 376px */
@media (max-width: 376px) {
  .wp-block-kadence-column:not(:last-child) .ps-icon-work .kt-blocks-info-box-media::after {
    left: 23px;
  }
}