/* =========================================== */
/* background.css - VETËM PËR BACKGROUND      */
/* MERRNI KËTË FILE VEÇAN PËR BACKGROUND      */
/* =========================================== */

/* 1. RESET I PLOTË - Fshini çdo background ekzistues */
.hero-section {
    /* Hiqni të gjitha background property ekzistuese */
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    
    /* Dimensionet dhe layout-i bazë */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
    width: 100% !important;
    min-height: 100svh !important;
    padding: 80px 20px 40px !important;
    overflow: hidden !important;
    
    /* Fallback background nëse foto nuk ngarkohet */
    background-color: #F7EFE5 !important;
}

/* 2. DESKTOP - Mbi 768px */
@media (min-width: 769px) {
    .hero-section {
        background-image: 
            linear-gradient(
                rgba(44, 85, 48, 0.12),    /* Hije e gjelbër e lehtë */
                rgba(255, 255, 255, 0.08)   /* Transparente e bardhë */
            ),
            url('foto_homepage_website.jpg') !important;
        
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important; /* Parallax effect */
        min-height: 100vh !important;
        padding: 100px 20px 50px !important;
    }
}

/* 3. MOBILE PORTRAIT - Telefon vertikal */
@media (max-width: 768px) and (orientation: portrait) {
    .hero-section {
        background-image: 
            linear-gradient(
                rgba(44, 85, 48, 0.18),    /* Më e errët për kontrast më të mirë */
                rgba(255, 255, 255, 0.12)   /* Transparente */
            ),
            url('backgroundmobile.jpg') !important;
        
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important; /* MOS përdorni fixed në mobile */
        min-height: 100svh !important;
        height: 100svh !important;
        padding: 70px 15px 30px !important;
    }
}

/* 4. MOBILE LANDSCAPE - Telefon horizontal */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        background-image: 
            linear-gradient(
                rgba(44, 85, 48, 0.15),
                rgba(255, 255, 255, 0.1)
            ),
            url('landscapemobilebg.jpg') !important;
        
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        min-height: 100svh !important;
        padding: 60px 20px 30px !important;
    }
}

/* 5. FALLBACK - Nëse versionet mobile nuk ekzistojnë */
/* Kjo do të mbivendoset nga query-t e mësipërme */
.hero-section {
    background-image: 
        linear-gradient(
            rgba(44, 85, 48, 0.15),
            rgba(255, 255, 255, 0.1)
        ),
        url('foto_homepage_website.jpg') !important;
}

/* 6. FIX SPECIAL PËR DISA BROWSER */
@supports (-webkit-touch-callout: none) {
    /* iPhone, iPad, Safari */
    .hero-section {
        min-height: -webkit-fill-available !important;
        height: -webkit-fill-available !important;
        background-attachment: scroll !important;
    }
}

@supports not (-webkit-touch-callout: none) {
    /* Android, Chrome, Firefox */
    .hero-section {
        min-height: 100dvh !important;
        height: 100dvh !important;
    }
}

/* 7. FSHI OVERLAY-IN QË NDËRHYN */
.hero-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 8. SIGUROHUNI QË PËRMBAJTJA ËSHTË MBIVENDOSUR */
.hero-content {
    position: relative !important;
    z-index: 100 !important;
}

/* 9. ANIMACION PËR LOADING (opsionale) */
@keyframes fadeInBg {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.hero-section {
    animation: fadeInBg 0.6s ease-out !important;
}

/* 10. DEBUG MODE - Hiqeni këtë pasi funksionon */
/* .hero-section::after {
    content: "Background CSS Loaded";
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 9999;
    border-radius: 3px;
} */