/* ============================
   Photo Spotlight Component
   ============================ */

.photo-spotlight-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.photo-spotlight {
  display: flex;
  gap: 60px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 960px;
}

/* ============================
   Shape Variants
   ============================ */

/* Circle */
.photo-spotlight-container.circle .spotlight-mask,
.photo-spotlight-container.circle .spotlight-img,
.photo-spotlight-container.circle .spotlight-img-mobile {
  border-radius: 50%;
}

/* Square */
.photo-spotlight-container.square .spotlight-mask,
.photo-spotlight-container.square .spotlight-img,
.photo-spotlight-container.square .spotlight-img-mobile {
  border-radius: 8px;
}

/* ============================
   Mask & Images
   ============================ */

.spotlight-mask {
  width: 250px;
  height: 250px;
  overflow: hidden;
  border: 2px solid var(--bs-primary-light, #ccc);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.spotlight-img,
.spotlight-img-mobile {
  /* ✅ Instead of fixed 100%, allow transform scale to work */
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;

  transition: opacity 0.6s ease, transform 0.3s ease;
  opacity: 1;

  will-change: transform, object-position;
}

/* ============================
   Mobile
   ============================ */

.photo-spotlight-mobile {
  display: none;
}

@media (max-width: 768px) {
  .photo-spotlight-desktop {
    display: none;
  }

  .photo-spotlight-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .photo-spotlight {
    gap: 20px;
  }

  .spotlight-mask {
    width: 220px;
    height: 220px;
  }
}