/* ============================================
   Blog Section Fixes - Visibility & Performance
   Applied to blog.html and all blog articles
   Includes Android-specific fixes
   ============================================ */

/* Force hardware acceleration for better Android/Windows rendering */
* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Ensure blog grid is ALWAYS visible - CRITICAL FIX */
#blog-grid, .blog-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Hardware acceleration for smooth rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto; /* Prevent forced GPU rasterization */
}

/* Blog cards visible by default - NO HIDDEN STATES */
.blog-card {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
    min-height: auto !important;
    
    /* Android font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove any problematic scroll-animate that hides content */
.blog-card.scroll-animate {
    opacity: 1 !important;
    transform: none !important;
}

/* ============================================
   Article Content Visibility Fixes
   Force content to be visible on all platforms
   ============================================ */

/* Override any opacity/visibility from animations */
article .scroll-animate,
article .scroll-reveal {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Ensure article content is always visible */
article p,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
article ul,
article ol,
article li,
article img,
article div {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Ensure images load properly */
.blog-card-image img {
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Grid responsive behavior */
@media (min-width: 768px) {
    #blog-grid, .blog-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }
}

/* Mobile optimization - Single column */
@media (max-width: 768px) {
    #blog-grid, .blog-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .blog-card {
        margin-bottom: 1.5rem;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    #blog-grid, .blog-container {
        gap: 1rem !important;
    }
}

/* Windows High Contrast Mode Support */
@media (forced-colors: active) {
    .blog-card {
        border: 2px solid CanvasText !important;
    }
}