/**
 * Minoár Extra Product Gallery - Clean & Lightweight
 * Focused on pristine image quality and proper sticky behavior
 * 
 * @version 1.2.0
 */

/* ==========================================================================
   Base Gallery Container - Clean & Simple
   ========================================================================== */

.mnr-extra-gallery {
  margin: 0;
  position: relative;
  clear: both;
}

.mnr-gallery-container {
  display: block;
  width: 100%;
  position: relative;
}

/* ==========================================================================
   Mobile-First Layout - Clean & Simple
   ========================================================================== */

.mnr-gallery-column {
  width: 100%;
  display: block;
}

.mnr-gallery-item {
  position: relative;
  width: 100%;
  margin-bottom: 0;
}

.mnr-gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Clean image rendering - no effects */
}

/* ==========================================================================
   Mobile Layout - JavaScript Controlled (Remove conflicting CSS)
   ========================================================================== */

@media (max-width: 840px) {
  /* 
   * IMPORTANT: Mobile layout is now handled entirely by JavaScript
   * We remove all the problematic CSS that was causing layout conflicts
   */
  
  /* Ensure gallery has relative positioning for progress indicator */
  .mnr-extra-gallery {
    position: relative;
    /* Prevent body scroll when gallery is touched on iOS */
    overscroll-behavior: contain;
    /* iOS scroll optimization - use auto to prevent momentum issues */
    -webkit-overflow-scrolling: auto;
  }
  
  /* Hide desktop structure immediately on mobile - don't wait for JavaScript */
  .mnr-gallery-container {
    display: none !important; /* Hide desktop structure on mobile */
  }
  
  .mnr-gallery-column {
    width: 100%;
    display: block;
  }
  
  .mnr-gallery-item {
    position: relative;
    width: 100%;
    margin-bottom: 0;
  }
  
  .mnr-gallery-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  
  /* JavaScript-created mobile container styles */
  .mnr-mobile-container {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* Prevent overscroll bounce on iOS */
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
    /* iOS-specific fixes for smooth performance */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    /* Use auto for better iOS control - prevents momentum scrolling issues */
    -webkit-overflow-scrolling: auto !important;
    /* Ensure perfect alignment and eliminate gaps */
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .mnr-mobile-container::-webkit-scrollbar {
    display: none !important;
  }
  
  .mnr-mobile-item {
    flex: 0 0 100.2vw !important;
    width: 100.2vw !important;
    min-width: 100.2vw !important;
    max-width: 100.2vw !important;
    scroll-snap-align: start !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    /* Slight overlap to eliminate white gaps during iOS transitions */
    margin-right: -0.2vw !important;
    /* Critical: Each subsequent image must be behind the previous one */
    z-index: var(--mobile-item-z-index, 100);
    /* iOS-specific fixes */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
  
  .mnr-mobile-image {
    width: 100% !important;
    height: auto !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    /* Smooth image transitions to prevent loading flashes */
    opacity: 1 !important;
    transition: opacity 0.15s ease-out !important;
    /* Hardware acceleration for smooth rendering */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
  
  /* Ensure smooth loading states */
  .mnr-mobile-image:not([complete="true"]) {
    opacity: 0.95 !important;
  }
  
  .mnr-mobile-image[loading="eager"] {
    /* Prioritize eager images for immediate rendering */
    will-change: auto !important;
  }
  
  /* Progress indicator styles - positioned relative to gallery */
  .mnr-mobile-progress {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    color: white !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateZ(0) !important;
    transition: opacity 0.3s ease !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    letter-spacing: 0.5px !important;
  }
  
  /* Hide desktop progress indicators on mobile */
  .mnr-gallery-progress {
    display: none !important;
  }
}

/* ==========================================================================
   Tablet Layout - Two Column Grid
   ========================================================================== */

@media (min-width: 841px) {
  /* Hide mobile structures */
  .mnr-mobile-container,
  .mnr-mobile-progress {
    display: none !important;
  }
  
  /* The main container is a simple two-column grid */
  .mnr-gallery-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  
  /* Each column is its own grid */
  .mnr-gallery-column {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
  }
  
  /* This ensures each item stacks in its parent column's grid */
  .mnr-gallery-item {
    grid-column: 1; 
  }

  /* Sticky pattern for tablet and above - matching desktop */
  /* Left column: even local indexes sticky (0, 2, 4...) = nth-child(1, 3, 5...) */
  .mnr-gallery-left .mnr-gallery-item:nth-child(2n+1) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  /* Right column: odd local indexes sticky (1, 3, 5...) = nth-child(2, 4, 6...) */
  .mnr-gallery-right .mnr-gallery-item:nth-child(2n) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  /* Standard image styles */
  .mnr-gallery-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
}

/* ==========================================================================
   Desktop Layout - Enhanced Sticky Behavior
   ========================================================================== */

@media (min-width: 1281px) {
  .mnr-gallery-container {
    gap: 0;
    min-height: 100vh;
  }
  
  /* Fixed alternating sticky pattern */
  /* Left column: even local indexes sticky (0, 2, 4...) = nth-child(1, 3, 5...) */
  .mnr-gallery-left .mnr-gallery-item:nth-child(2n+1) {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  /* Right column: odd local indexes sticky (1, 3, 5...) = nth-child(2, 4, 6...) */
  .mnr-gallery-right .mnr-gallery-item:nth-child(2n) {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}



/* ==========================================================================
   Touch Device Optimizations
   ========================================================================== */

@media (pointer: coarse) {
  /* Disable sticky on touch devices for better scrolling */
  .mnr-gallery-left .mnr-gallery-item:nth-child(2n),
  .mnr-gallery-right .mnr-gallery-item:nth-child(2n+1) {
    position: static !important;
  }
}

/* ==========================================================================
   Accessibility - Clean (No Focus Outline)
   ========================================================================== */

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .mnr-extra-gallery {
    width: 100% !important;
    margin: 0 !important;
  }
  
  .mnr-gallery-container {
    display: block !important;
  }
  
  .mnr-gallery-column {
    width: 100% !important;
  }
  
  .mnr-gallery-item {
    position: static !important;
    margin-bottom: 1cm;
    page-break-inside: avoid;
  }
  
  .mnr-gallery-image {
    max-height: 15cm;
    object-fit: contain;
  }
  
  .mnr-mobile-progress {
    display: none !important;
  }
}

/* ==========================================================================
   Admin Interface Styles (Clean)
   ========================================================================== */

.mnr-gallery-admin {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mnr-gallery-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  background: #fafafa;
}

.mnr-gallery-image-item {
  position: relative;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
  background: #fff;
  cursor: move;
}

.mnr-gallery-image-item:hover {
  border-color: #0073aa;
}

.mnr-gallery-image-item img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

.mnr-remove-image {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: #dc3232;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mnr-remove-image:hover {
  background: #a00;
}

.mnr-remove-image .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
}

.mnr-gallery-placeholder {
  border: 2px dashed #0073aa !important;
  background: #f0f8ff !important;
  opacity: 0.7;
}

.mnr-gallery-admin .description {
  font-style: italic;
  color: #666;
  margin-top: 10px;
  padding: 8px 12px;
  background: #f9f9f9;
  border-left: 4px solid #0073aa;
  border-radius: 0 4px 4px 0;
}

.mnr-gallery-admin .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  vertical-align: text-top;
  margin-right: 4px;
}

#mnr-gallery-add-images {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

#mnr-gallery-add-images:hover {
  background: #005a87;
}

#mnr-gallery-add-images .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Debug Styles (Clean - WP_DEBUG only)
   ========================================================================== */

[data-mnr-debug]::after {
  content: attr(data-mnr-debug);
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255, 0, 0, 0.9);
  color: white;
  padding: 4px 8px;
  font-size: 10px;
  font-family: monospace;
  border-radius: 4px;
  z-index: 1000;
  pointer-events: none;
}