/* ============================================
   BROWSER FALLBACKS & PROGRESSIVE ENHANCEMENT
   ============================================

   This file provides fallbacks for older browsers.

   Target browsers:
   - IE 11 and older
   - Safari < 12
   - Browsers without modern CSS features
   ============================================ */

/* ============================================
   LEGACY BROWSER SUPPORT
   ============================================ */

/* Static layout for browsers without feature support */
.legacy-browser .hero-images {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    position: static !important;
}

.legacy-browser .hero-images .hero-image {
    position: static !important;
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.legacy-browser .hero-images .hero-image img {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    max-width: 100%;
    height: auto;
}

/* Desktop side-by-side layout */
@media (min-width: 1024px) {
    .legacy-browser .hero-images {
        flex-direction: row;
        justify-content: space-between;
    }

    .legacy-browser .hero-images .hero-image {
        flex: 1;
    }
}

/* Disable scroll hijacking on mobile */
@media (max-width: 1023px) {
    .legacy-browser.home-page {
        overflow: auto !important;
        height: auto !important;
    }

    .legacy-browser.home-page .content-section {
        position: static !important;
        overflow: visible !important;
    }

    .legacy-browser.home-page .content-section .container {
        height: auto !important;
    }

    .legacy-browser.home-page .hero-images {
        flex: none !important;
        overflow: visible !important;
    }
}

/* Simple hover effect for legacy browsers */
.legacy-browser .hero-images .hero-image img:hover {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

/* ============================================
   BACKDROP-FILTER FALLBACK
   ============================================ */

@supports not (backdrop-filter: blur(10px)) {
    /* Header fallback */
    header {
        background: rgba(15, 54, 61, 0.98) !important;
    }

    /* Footer fallback */
    footer {
        background: rgba(15, 54, 61, 0.98) !important;
    }

    /* Any other elements using backdrop-filter */
    .content-section {
        background: rgba(15, 54, 61, 0.98) !important;
    }
}

/* ============================================
   BACKGROUND-CLIP TEXT FALLBACK
   ============================================ */

@supports not (background-clip: text) {
    h1, h2, h3 {
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: unset !important;
        color: var(--color-cream) !important;
    }
}

/* ============================================
   MASK-IMAGE FALLBACK
   ============================================ */

@supports not (mask-image: linear-gradient(black, transparent)) {
    .hero-images .hero-image img {
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }
}

/* ============================================
   ANIMATION FALLBACK
   ============================================ */

@supports not (animation: fadeInUp 1s ease) {
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .hero-images .hero-image {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Ensure content is visible immediately */
    .content-section,
    .essay-item {
        opacity: 1 !important;
    }
}

/* ============================================
   TRANSFORM FALLBACK
   ============================================ */

@supports not (transform: translateY(0)) {
    .hero-images .hero-image,
    .hero-images .hero-image img {
        transform: none !important;
    }

    /* Simple static layout */
    .hero-images {
        position: static !important;
    }

    .hero-images .hero-image {
        position: static !important;
    }
}

/* ============================================
   NO-JS FALLBACK
   ============================================ */

.no-js .hero-images {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.no-js .hero-images .hero-image {
    opacity: 1 !important;
    transform: none !important;
}

@media (min-width: 1024px) {
    .no-js .hero-images {
        flex-direction: row;
        justify-content: space-between;
    }

    .no-js .hero-images .hero-image {
        flex: 1;
    }
}

/* ============================================
   FLEXBOX FALLBACK FOR IE 11
   ============================================ */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE 10-11 specific styles */
    .hero-images {
        display: -ms-flexbox;
        display: flex;
    }

    .hero-images .hero-image {
        -ms-flex: 1;
        flex: 1;
    }

    /* Disable complex features in IE */
    .hero-images .hero-image img {
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    body {
        animation: none !important;
    }
}

/* ============================================
   OBJECT-FIT FALLBACK FOR IE 11
   ============================================ */

@supports not (object-fit: contain) {
    .hero-images .hero-image img {
        width: 100%;
        height: auto;
    }
}