/**
 * Photo Mask Widget Styles
 * BEM-based component classes for the photo mask widget
 * Version: 1.0.0
 */

/* ============================================
   PHOTO MASK COMPONENT (BEM)
   Usage: <div class="photo-mask">...</div>
   ============================================ */

.photo-mask {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.photo-mask__container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: visible;
}

/* Background fill layer (behind the image) */
.photo-mask__container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(191, 219, 254, 0.5);
  -webkit-mask-image: url('svg/photo_mask.svg');
  mask-image: url('svg/photo_mask.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 0;
}

/* Border accent layer (stroke only) */
.photo-mask__container::before {
  content: '';
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: var(--border-color, #3b4a8c);
  -webkit-mask-image: url('svg/photo_mask_stroke.svg');
  mask-image: url('svg/photo_mask_stroke.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 2;
  pointer-events: none;
}

.photo-mask__container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  -webkit-mask-image: url('svg/photo_mask.svg');
  mask-image: url('svg/photo_mask.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 1;
}

/* Modifier: with shadow */
.photo-mask--shadow .photo-mask__container {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

/* Modifier: animated hover effect */
.photo-mask--hover .photo-mask__image {
  transition: transform 300ms ease;
}

.photo-mask--hover:hover .photo-mask__image {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Size modifiers */
.photo-mask--sm {
  max-width: 200px;
}

.photo-mask--md {
  max-width: 300px;
}

.photo-mask--lg {
  max-width: 500px;
}

.photo-mask--xl {
  max-width: 600px;
}

/* Elementor editor compatibility */
.elementor-widget-photo_mask {
  display: flex;
  justify-content: center;
  align-items: center;
}