/* ============================================================================
   SCREENSHOT COLLAGE COMPONENT

   Decorative background collage of app screenshots, used in hero section
   and potentially other sections.

   Purpose: Add visual interest and product context without distracting
   from main content. Screenshots are semi-transparent and blurred.

   Required HTML Structure:

   <div class="screenshot-collage">
     <div class="screenshot-item screen-1">
       <img src="path/to/screenshot-1.png" alt="">
     </div>
     <div class="screenshot-item screen-2">
       <img src="path/to/screenshot-2.png" alt="">
     </div>
     <div class="screenshot-item screen-3">
       <img src="path/to/screenshot-3.png" alt="">
     </div>
     <div class="screenshot-item screen-4">
       <img src="path/to/screenshot-4.png" alt="">
     </div>
   </div>

   Usage Context:
   - Typically placed inside .hero section
   - Must be positioned before content (lower z-index)
   - Parent container should have position: relative

   Accessibility:
   - Images are decorative (empty alt attribute)
   - pointer-events: none prevents interaction
   - Does not interfere with screen readers

   Notes:
   - Automatically hides on mobile (<600px) for performance
   - 4-screenshot layout with rotations for organic feel
   - Low opacity (0.05) to stay subtle
   - Blur effect for depth of field
   - Responsive scaling on different screen sizes
   ============================================================================ */

/* ===== Base Collage Container ===== */

.screenshot-collage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: var(--z-index-background);
  pointer-events: none;
}


/* ===== Individual Screenshot Items ===== */

.screenshot-item {
  position: absolute;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-slow);
}

.screenshot-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.05;
  filter: blur(1px);
}


/* ===== Screenshot Positioning (4-screenshot layout) ===== */

/* Top left */
.screen-1 {
  width: 800px;
  height: 540px;
  top: -5%;
  left: -10%;
  transform: rotate(4deg);
  z-index: 1;
}

/* Top right */
.screen-2 {
  width: 750px;
  height: 500px;
  top: -3%;
  right: -12%;
  transform: rotate(-6deg);
  z-index: 2;
}

/* Bottom left */
.screen-3 {
  width: 800px;
  height: 520px;
  bottom: -5%;
  left: -8%;
  transform: rotate(2deg);
  z-index: 1;
}

/* Bottom right */
.screen-4 {
  width: 620px;
  height: 410px;
  bottom: 3%;
  right: -6%;
  transform: rotate(3deg);
  z-index: 2;
}


/* ===== Responsive Adjustments ===== */

/* Large screens (1400px-1920px) */
@media (max-width: 1600px) {
  .screen-1 {
    width: 700px;
    height: 470px;
    left: -8%;
  }

  .screen-2 {
    width: 650px;
    height: 430px;
    right: -10%;
  }

  .screen-3 {
    width: 700px;
    height: 460px;
    left: -6%;
  }

  .screen-4 {
    width: 540px;
    height: 360px;
    right: -4%;
  }
}

/* Medium-large screens (1200px-1400px) */
@media (max-width: 1400px) {
  .screen-1 {
    width: 600px;
    height: 400px;
  }

  .screen-2 {
    width: 550px;
    height: 370px;
  }

  .screen-3 {
    width: 600px;
    height: 400px;
  }

  .screen-4 {
    width: 480px;
    height: 320px;
  }

  .screenshot-item img {
    opacity: 0.04;
  }
}

/* Laptop screens (1024px-1200px) */
@media (max-width: 1200px) {
  .screen-1 {
    width: 500px;
    height: 340px;
    left: -5%;
  }

  .screen-2 {
    width: 450px;
    height: 300px;
    right: -8%;
  }

  .screen-3 {
    width: 500px;
    height: 340px;
    left: -4%;
  }

  .screen-4 {
    width: 400px;
    height: 270px;
    right: -3%;
  }

  .screenshot-item img {
    opacity: 0.035;
    filter: blur(1.5px);
  }
}

/* Tablet screens (768px-1024px) */
@media (max-width: 1024px) {
  .screen-1 {
    width: 400px;
    height: 270px;
  }

  .screen-2 {
    width: 350px;
    height: 240px;
  }

  .screen-3 {
    width: 400px;
    height: 270px;
  }

  .screen-4 {
    width: 320px;
    height: 210px;
  }

  .screenshot-item img {
    opacity: 0.03;
    filter: blur(2px);
  }
}

/* Small tablets (600px-768px) */
@media (max-width: 768px) {
  .screen-1 {
    width: 320px;
    height: 210px;
    left: -8%;
  }

  .screen-2 {
    width: 280px;
    height: 190px;
    right: -10%;
  }

  .screen-3 {
    width: 320px;
    height: 210px;
    left: -6%;
  }

  .screen-4 {
    width: 260px;
    height: 170px;
    right: -5%;
  }

  .screenshot-item img {
    opacity: 0.025;
    filter: blur(2.5px);
  }
}

/* Mobile screens (hide collage for performance) */
@media (max-width: 600px) {
  .screenshot-collage {
    display: none;
  }
}