/* Hero Section Background Fix for Mobile */

/* Ensure hero sections have minimum height on mobile */
@media (max-width: 768px) {
    section.relative.bg-gradient-to-br {
        min-height: 500px;
        position: relative;
    }
}

/* Fix for background image visibility on mobile */
.hero-bg-fix {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 0.2 !important;
    z-index: 1 !important;
    /* Force hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

/* Ensure content is above background */
.hero-content {
    position: relative;
    z-index: 2;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
    .hero-bg-fix {
        /* Use fixed positioning on mobile for better rendering */
        position: fixed !important;
        /* Adjust for viewport */
        width: 100vw !important;
        height: 100vh !important;
        /* Reset position */
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Ensure parent section contains the fixed background */
    section.relative.bg-gradient-to-br {
        position: relative;
        overflow: visible !important;
        /* Create stacking context */
        z-index: 0;
    }
    
    /* Adjust content positioning */
    .hero-content {
        position: relative;
        z-index: 3;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .hero-bg-fix {
        /* iOS needs special handling */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-perspective: 1000;
        perspective: 1000;
    }
}

/* Alternative implementation using pseudo-element for maximum compatibility */
@media (max-width: 768px) {
    section.relative.bg-gradient-to-br {
        position: relative;
    }
    
    section.relative.bg-gradient-to-br::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-image: url('../images/bg.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: 0.2;
        z-index: 0;
        pointer-events: none;
    }
}

/* Ensure gradients work properly with backgrounds */
section.relative.bg-gradient-to-br {
    /* Create proper stacking context */
    position: relative;
    z-index: 0;
    /* Ensure gradient is visible */
    background-image: linear-gradient(to bottom right, 
        rgba(15, 23, 42, 0.9), 
        rgba(30, 41, 59, 0.9), 
        rgba(127, 29, 29, 0.9));
}