/* =========================================================
   Before / After Cards – Bootstrap-safe
   ========================================================= */

.ba-card {
  cursor: pointer;
}

.ba-image-wrapper {
  position: relative;
  overflow: hidden;
  /* height: 220px; */
  aspect-ratio: 3 / 2;
}

.ba-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Initial state */
.ba-before {
  transform: translateX(0);
  opacity: 1;
  z-index: 2;
}

.ba-after {
  transform: translateX(100%);
  opacity: 0;
  z-index: 1;
}

/* After state */
.ba-card.is-after .ba-before {
  transform: translateX(-100%);
  opacity: 0;
}

.ba-card.is-after .ba-after {
  transform: translateX(0);
  opacity: 1;
}

.ba-card { pointer-events: auto; }

/* =========================================
   Before / After Caption
   ========================================= */

.ba-caption {
  position: absolute;
  top: 12px;
  left: 12px;

  background-color: rgba(0, 0, 0, 0.65);
  color: #ffffff;

  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  border-radius: 0.25rem;
  z-index: 3;

  pointer-events: none;
}