/* ============================================
   MOBILE PUZZLE COMPOSITION FIXES
   ============================================ */

/* Fix puzzle composition on tablets */
@media (max-width: 991px) {
  .puzzle-composition {
    max-width: 100% !important;
    margin: 2rem auto !important;
    height: 350px !important;
  }

  .puzzle-composition.layout-6 {
    height: 300px !important;
  }

  .puzzle-composition .puzzle-piece {
    transform: scale(0.85) !important;
  }

  /* Adjust individual piece positions for mobile */
  .puzzle-composition.layout-6 .piece-1 {
    top: 10% !important;
    left: 5% !important;
  }

  .puzzle-composition.layout-6 .piece-2 {
    top: 10% !important;
    right: 5% !important;
  }

  .puzzle-composition.layout-6 .piece-3 {
    top: 35% !important;
    left: 25% !important;
  }

  .puzzle-composition.layout-6 .piece-4 {
    bottom: 25% !important;
    left: 5% !important;
  }

  .puzzle-composition.layout-6 .piece-5 {
    bottom: 25% !important;
    right: 5% !important;
  }

  .puzzle-composition.layout-6 .piece-6 {
    bottom: 5% !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.85) !important;
  }
}

/* Fix puzzle composition on mobile phones */
@media (max-width: 767px) {
  .puzzle-composition {
    max-width: 280px !important;
    height: 280px !important;
    margin: 1.5rem auto !important;
  }

  .puzzle-composition.layout-6,
  .puzzle-composition.layout-products {
    height: 250px !important;
  }

  .puzzle-composition .puzzle-piece {
    width: 100px !important;
    height: 100px !important;
    transform: scale(0.8) !important;
  }

  .puzzle-composition .single-piece {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  /* Simplify layout for small screens */
  .puzzle-composition.layout-6 .puzzle-piece {
    position: absolute !important;
    border-radius: 15px !important;
  }

  .puzzle-composition.layout-6 .piece-1 {
    top: 5% !important;
    left: 5% !important;
  }

  .puzzle-composition.layout-6 .piece-2 {
    top: 5% !important;
    right: 5% !important;
  }

  .puzzle-composition.layout-6 .piece-3 {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
  }

  .puzzle-composition.layout-6 .piece-4 {
    bottom: 5% !important;
    left: 5% !important;
  }

  .puzzle-composition.layout-6 .piece-5 {
    bottom: 5% !important;
    right: 5% !important;
  }

  .puzzle-composition.layout-6 .piece-6 {
    display: none !important; /* Hide 6th piece on very small screens */
  }

  /* Floating dots */
  .floating-dots {
    display: none !important; /* Hide decorative dots on mobile */
  }
}

/* Very small devices */
@media (max-width: 575px) {
  .puzzle-composition {
    max-width: 240px !important;
    height: 240px !important;
  }

  .puzzle-composition .puzzle-piece {
    width: 80px !important;
    height: 80px !important;
  }

  /* Show only 4 pieces max on very small screens */
  .puzzle-composition.layout-6 .piece-5,
  .puzzle-composition.layout-6 .piece-6 {
    display: none !important;
  }
}

/* Fix sector content spacing on mobile */
@media (max-width: 767px) {
  .sector-section {
    padding: 40px 0 !important;
  }

  .sector-content {
    margin-top: 2rem !important;
  }

  .sector-content .display-5 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  .sector-content .lead {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .sector-content .feature-card {
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .sector-content .feature-card h6 {
    font-size: 0.9rem !important;
  }

  .sector-content .feature-card p {
    font-size: 0.8rem !important;
  }

  .sector-icon > div {
    width: 50px !important;
    height: 50px !important;
  }

  .sector-icon i {
    font-size: 1.5rem !important;
  }
}

/* Ensure images don't overflow on mobile */
@media (max-width: 767px) {
  .puzzle-composition img,
  .puzzle-piece {
    max-width: 100% !important;
    object-fit: cover !important;
  }
}

/* RTL support for puzzle on mobile */
@media (max-width: 767px) {
  [dir="rtl"] .puzzle-composition.layout-6 .piece-1 {
    left: auto !important;
    right: 5% !important;
  }

  [dir="rtl"] .puzzle-composition.layout-6 .piece-2 {
    right: auto !important;
    left: 5% !important;
  }

  [dir="rtl"] .puzzle-composition.layout-6 .piece-4 {
    left: auto !important;
    right: 5% !important;
  }

  [dir="rtl"] .puzzle-composition.layout-6 .piece-5 {
    right: auto !important;
    left: 5% !important;
  }
}

/* Disable complex animations on mobile for better performance */
@media (max-width: 767px) {
  .puzzle-composition .puzzle-piece {
    animation: none !important;
  }

  .puzzle-composition:hover .puzzle-piece {
    transform: scale(0.8) !important; /* Keep the same scale on hover */
  }
}

/* Landscape mobile specific fixes */
@media (max-height: 500px) and (orientation: landscape) {
  .puzzle-composition {
    height: 200px !important;
    margin: 1rem auto !important;
  }

  .puzzle-composition .puzzle-piece {
    width: 70px !important;
    height: 70px !important;
  }
}