/* Cross-Browser Compatibility Fixes
   ============================================
   This file contains fixes for browser compatibility issues
   Add this file after style.css in your HTML
*/

/* Ensure smooth scrolling works in all browsers */
html {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Fix for older browsers that don't support CSS Grid */
@supports not (display: grid) {
  .blog-posts-list {
    display: block;
  }
}

/* Fix for IE11 and older browsers */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .blog-post-list-content {
    display: -ms-flexbox;
    display: flex;
  }
  
  .blog-post-list-header {
    display: -ms-flexbox;
    display: flex;
  }
  
  .blog-hover-preview {
    display: none !important; /* Disable hover preview on IE */
  }
  
  /* Fix gap property for IE11 */
  .blog-post-list-header {
    margin-right: -120px;
  }
  
  .blog-post-list-header > * {
    margin-right: 120px;
  }
  
  .blog-post-link {
    margin-right: 8px;
  }
}

/* Fix for Safari < 10.1 */
@supports not (-webkit-appearance: none) {
  .blog-hover-preview img {
    width: auto;
    height: auto;
    max-width: 500px;
    max-height: 500px;
  }
}

/* Fix for Firefox - ensure transforms work */
@-moz-document url-prefix() {
  .blog-hover-preview {
    -moz-transform: translate(-50%, -50%);
  }
  
  .blog-post-link span {
    -moz-transition: -moz-transform 0.3s ease;
  }
  
  .custom-cursor {
    -moz-transform: translate(-50%, -50%);
  }
}

/* Fix for Edge Legacy */
@supports (-ms-ime-align: auto) {
  .blog-post-list-content {
    display: -ms-flexbox;
    display: flex;
  }
  
  .blog-post-list-header {
    display: -ms-flexbox;
    display: flex;
  }
}

/* Fix for Safari - ensure object-fit works */
@supports not (object-fit: contain) {
  .blog-hover-preview img {
    width: 100%;
    height: auto;
    max-width: 500px;
    max-height: 500px;
  }
}

/* Fix for browsers that don't support gap property */
@supports not (gap: 0) {
  .blog-posts-list > * + * {
    margin-top: 0;
  }
  
  .blog-post-list-header {
    margin-right: -120px;
  }
  
  .blog-post-list-header > * {
    margin-right: 120px;
  }
  
  .blog-post-link {
    margin-right: 8px;
  }
}

/* Ensure pointer-events works in all browsers */
.blog-hover-preview {
  pointer-events: none;
  -ms-touch-action: none;
  touch-action: none;
}

/* Fix for Opera Mini */
@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .blog-hover-preview {
    display: none; /* Disable on Opera Mini */
  }
}