/* ==========================================
   ANTOLOGA HERO HOME STYLES
   Inverted Split Layout: Text Left / Image Right
   ========================================== */

/* Main Container */
.hero-container {
    position: relative !important; /* Added for anchor point */
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
    background-color: var(--antologa-dark);
}

/* Grid System */
.hero-grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 0 !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-navbar-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100; /* Higher than text (2) and image */
    background-color: var(--antologa-dark);
}

/* -----------------------------
   LEFT COLUMN: Text Content (Approx 40%)
   ----------------------------- */
.hero-text-column {
    padding: 0 !important;
    height: 100vh !important;
    /* Spans columns 1 to 5 (Left Side) */
    grid-column: 1 / 6;
    background-color: var(--antologa-dark) !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto;
    z-index: 2; /* Ensure text sits above if overlap occurs */
}

.hero-text-wrapper {
    width: 70% !important; /* Slightly wider for better readability on left */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
}


.home-desktop-search-bar {
    position: absolute !important;
    bottom: 35%; /* Adjusts vertical height - moved up from bottom */
    left: 72% !important;
    transform: translateX(-50%) !important; /* Perfectly centers the element */
    z-index: 1000 !important; /* Ensures it sits ON TOP of the image and text */
    width: auto !important;
    display: flex;
    justify-content: center;
    /* Optional: Limit width on large screens so it doesn't stretch too far */
    max-width: 90vw;
}

.home-mobile-search-bar {
    display: none !important;
}

/* Logo */
.hero-logo {
    width: 14rem !important;
    height: auto !important;
    padding: 1rem 0;
}

/* Text Block */
.hero-text-block {
    width: 100%;
    margin: 0 !important;
    padding: 0;
}

.hero-title {
    font-family: Inter, sans-serif;
    font-size: 2.625rem;
    font-weight: 800 !important;
    line-height: 1.2;
    letter-spacing: 0.05rem;
    color: var(--antologa-white);
}

.hero-body {
    font-family: Nunito, sans-serif;
    font-size: .9rem;
    line-height: 1.6;
    letter-spacing: 0.050rem;
    color: var(--antologa-white);
    padding: 2rem 0;
}


/* -----------------------------
   RIGHT COLUMN: Image (Approx 60%)
   ----------------------------- */
.hero-image-column {
    padding: 0 !important;
    /* Spans columns 6 to 13 (Right Side) */
    grid-column: 6 / 13;
    height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero-image-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

    .hero-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        /* Animation */
        animation: heroZoom 20s ease-in-out infinite alternate;
        backface-visibility: hidden;
        will-change: transform;
    }

@keyframes heroZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

/* -----------------------------
   FOOTER SECTION
   ----------------------------- */
.hero-footer {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
}



@media (max-width: 1279px) {

    /* HIDE Desktop Search Bar */
    .home-desktop-search-bar {
        display: none !important;
    }

    .hero-footer {
        margin-bottom: 4rem;
    }

    /* 1. CONTAINER */
    .hero-container {
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block !important;
        position: relative !important;
        background-color: transparent !important;
    }

    /* 2. GRID RESET */
    .hero-grid {
        display: block !important;
        height: auto !important;
        width: 100%;
        margin: 0 !important;
    }

    /* 3. BACKGROUND IMAGE (Fixed) */
    .hero-image-column {
        display: block !important;
        position: fixed !important; /* Stays in back */
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 0 !important;
        margin: 0 !important;
    }

    .hero-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        filter: brightness(0.4);
    }

    /* 4. CONTENT STACK (Text -> Search -> Footer) */
    .hero-text-column {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh;
        background-color: transparent !important;
        /* Padding: Top for Navbar, Bottom for scroll space */
        padding: 8rem 1.5rem 4rem 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .hero-text-wrapper {
        width: 100% !important;
        max-width: 600px;
        margin: 0 auto !important;
        text-align: center;
    }

    /* 5. MOBILE SEARCH BAR (The Fix) */
    .home-mobile-search-bar {
        display: flex !important; /* Make it visible */
        position: relative !important;
        width: 100% !important;
        justify-content: center !important;
        /* Spacing: Pushes Text up and Footer down */
        margin-bottom: 3rem !important;
        z-index: 20 !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

        /* Ensure the inner MudPaper (the white box) doesn't overflow */
        .home-mobile-search-bar .mud-paper {
            width: 100% !important;
            max-width: 100% !important;
        }

    /* 6. NAVBAR & TEXT */
    .hero-navbar-overlay {
        background-color: transparent !important;
    }

    .hero-title {
        font-size: 2.25rem !important;
        text-align: center;
    }

    .hero-body {
        font-size: 1rem !important;
        text-align: center;
    }

}