/* =========================================================
   WLUSV CONVERSION FLOW — REAL PEXELS PHOTO CARDS
   Load this file after styles.css.
   ========================================================= */

.conversion-stage {
  overflow: hidden;
}

.conversion-stage .stage-visual {
  width: 100%;
  height: 158px;
  margin: 18px 0 24px;
  border: 1px solid rgba(168, 206, 232, 0.24);
  border-radius: 13px;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 18px 42px rgba(0, 0, 0, 0.22);
  transition: transform 220ms ease, filter 220ms ease, border-color 220ms ease;
}

.conversion-stage:hover .stage-visual {
  transform: translateY(-3px);
  filter: brightness(1.08) saturate(1.04);
  border-color: rgba(168, 206, 232, 0.48);
}

/* Remove the original CSS-drawn illustrations. */
.conversion-stage .stage-visual::before,
.conversion-stage .stage-visual::after {
  content: none !important;
  display: none !important;
}

.conversion-stage .stack-mini i {
  display: none !important;
}

/* 01 — Existing vessel hardware */
.conversion-stage .vessel-mini {
  background-image:
    linear-gradient(180deg, rgba(3, 17, 28, 0.05), rgba(3, 17, 28, 0.48)),
    url("/assets/images/conversion-existing-vessel.webp");
  background-position: center 58%;
}

/* 02 — WhiteLabelUSV integration layer */
.conversion-stage .stack-mini {
  display: block !important;
  background-image:
    linear-gradient(180deg, rgba(3, 17, 28, 0.08), rgba(3, 17, 28, 0.52)),
    url("/assets/images/conversion-software-integration.webp");
  background-position: center 52%;
}

/* 03 — Extended remote / unmanned capability */
.conversion-stage .remote-mini {
  background-image:
    linear-gradient(180deg, rgba(3, 17, 28, 0.02), rgba(3, 17, 28, 0.42)),
    url("/assets/images/conversion-extended-capability.webp");
  background-position: center 50%;
}

@media (max-width: 780px) {
  .conversion-stage .stage-visual {
    height: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conversion-stage .stage-visual {
    transition: none;
  }
}