/* Yuva Portfolio - Collection Page Hover Preview Styles */

/* ===== Preview Container ===== */
/* Fixed container centered in viewport for stacking image previews */
.preview-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10; /* Below nav (1000) but above content */
  overflow: visible;
}

/* ===== Preview Images ===== */
/* Individual preview images positioned in center with offset variations */
.preview-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--preview-width);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: translate(-50%, -50%); /* Base centering */
  will-change: opacity, z-index;
}

/* ===== Size Classes ===== */
/* Three size variations for visual variety in the collage */
.preview-image--small {
  --preview-width: 18vw;
}

.preview-image--medium {
  --preview-width: 22vw;
}

.preview-image--large {
  --preview-width: 28vw;
}

/* ===== Visible State ===== */
/* Applied when image should be shown */
.preview-image.visible {
  opacity: 1;
}

/* ===== Mobile Click Interaction ===== */
/* Enable click interaction on mobile/tablet devices */
.preview-image--mobile {
  pointer-events: auto; /* Make mobile images clickable for dismissal */
  cursor: pointer;
}

/* ===== Responsive Adjustments ===== */
/* Adjust image sizes for smaller screens */
@media (max-width: 1024px) {
  .preview-image--small {
    --preview-width: 22vw;
  }

  .preview-image--medium {
    --preview-width: 28vw;
  }

  .preview-image--large {
    --preview-width: 35vw;
  }
}

@media (max-width: 810px) {
  /* Mobile/tablet: Larger sizes with more centered positioning for better viewing */
  .preview-image--small {
    --preview-width: 40vw;
  }

  .preview-image--medium {
    --preview-width: 50vw;
  }

  .preview-image--large {
    --preview-width: 60vw;
  }
}