/* Modern Listing Hero Image Styles */
/* Created: 2025-01-23 */

/* Main hero image container with higher specificity */
.header_media .listing_main_image,
.header_media.with_search_oldtype .listing_main_image,
#listing_main_image_photo.listing_main_image {
    height: 515px !important;
    position: relative;
    margin: 0 55px !important; /* 55px horizontal spacing on left and right */
    border-radius: 35px !important; /* All edges rounded */
    overflow: hidden !important;
    /* Enhanced multi-layer shadow for depth */
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 20px 40px rgba(0, 0, 0, 0.2),
        0 40px 80px rgba(0, 0, 0, 0.25) !important;
    width: calc(100% - 110px) !important; /* Account for margins: 55px * 2 */
    max-width: calc(100% - 110px) !important;
}

/* Inner element for background image (no animation) */
.listing_main_image .listing_main_image_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 0;
}

/* Add inner shadow for depth */
.listing_main_image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    z-index: 1;
    pointer-events: none;
}


/* Title styling with load-in animation */
.listing_main_image .entry-title.entry-tax,
.header_media .listing_main_image h1.entry-title.entry-tax {
    font-size: 5.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5) !important;
    position: absolute !important;
    bottom: 60px !important;
    left: 40px !important;
    right: 40px !important;
    z-index: 3 !important; /* Above the animated background */
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    text-align: center !important; /* Center the text horizontally */
    width: calc(100% - 80px) !important; /* Ensure proper width calculation */
    margin: 0 auto !important; /* Additional centering support */
    /* Animation properties */
    animation: titleLoadIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both !important;
    -webkit-animation: titleLoadIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both !important;
    -moz-animation: titleLoadIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both !important;
}

/* Title load-in animation */
@keyframes titleLoadIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Webkit browsers */
@-webkit-keyframes titleLoadIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px) scale(0.95);
        transform: translateY(40px) scale(0.95);
    }
    50% {
        opacity: 0.8;
        -webkit-transform: translateY(-10px) scale(1.02);
        transform: translateY(-10px) scale(1.02);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}

/* Mozilla browsers */
@-moz-keyframes titleLoadIn {
    0% {
        opacity: 0;
        -moz-transform: translateY(40px) scale(0.95);
        transform: translateY(40px) scale(0.95);
    }
    50% {
        opacity: 0.8;
        -moz-transform: translateY(-10px) scale(1.02);
        transform: translateY(-10px) scale(1.02);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}

/* Enhanced overlay for better text readability */
.listing_main_image .img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.6) 100%
    );
    z-index: 2; /* Above the animated background but below the title */
}

/* Tablet responsive (768px - 991px) */
@media (max-width: 991px) {
    .header_media .listing_main_image,
    .header_media.with_search_oldtype .listing_main_image,
    #listing_main_image_photo.listing_main_image {
        height: 400px !important;
        margin: 0 20px !important;
        border-radius: 20px !important; /* All edges rounded */
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
    }
    
    .listing_main_image .entry-title.entry-tax {
        font-size: 2.5rem;
        bottom: 40px;
        left: 30px;
        right: 30px;
    }
}

/* Tablet responsive (max-width: 991px) */
@media (max-width: 991px) {
    .header_media .listing_main_image,
    .header_media.with_search_oldtype .listing_main_image,
    #listing_main_image_photo.listing_main_image {
        height: 400px !important;
        margin: 0 20px !important;
        border-radius: 25px !important;
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
    }
    
    .listing_main_image .entry-title.entry-tax {
        font-size: 3rem;
        bottom: 40px;
        left: 30px;
        right: 30px;
        text-align: center !important;
        line-height: 1.2;
        width: calc(100% - 60px) !important;
        margin: 0 auto !important;
    }
}

/* Mobile responsive (max-width: 767px) */
@media (max-width: 767px) {
    .header_media .listing_main_image,
    .header_media.with_search_oldtype .listing_main_image,
    #listing_main_image_photo.listing_main_image {
        height: 350px !important;
        margin: 0 !important; /* Full width on mobile */
        border-radius: 0 !important; /* No rounded corners for full width */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    
    .listing_main_image .entry-title.entry-tax {
        font-size: 2rem;
        bottom: 30px;
        left: 20px;
        right: 20px;
        font-weight: 600;
        text-align: center !important;
        width: calc(100% - 40px) !important;
        margin: 0 auto !important;
    }
}

/* Small mobile responsive (max-width: 575px) */
@media (max-width: 575px) {
    .header_media .listing_main_image,
    .header_media.with_search_oldtype .listing_main_image,
    #listing_main_image_photo.listing_main_image {
        height: 280px !important;
        margin: 0 !important; /* Full width on mobile */
        border-radius: 0 !important; /* No rounded corners for full width */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .listing_main_image .entry-title.entry-tax {
        font-size: 1.8rem;
        bottom: 20px;
        left: 15px;
        right: 15px;
        text-align: center !important;
        line-height: 1.3;
        width: calc(100% - 30px) !important;
        margin: 0 auto !important;
    }
}

/* Extra small mobile (max-width: 375px) */
@media (max-width: 375px) {
    .header_media .listing_main_image,
    .header_media.with_search_oldtype .listing_main_image,
    #listing_main_image_photo.listing_main_image {
        height: 250px !important;
        border-radius: 0 !important; /* No rounded corners for full width */
        margin: 0 !important; /* Full width on mobile */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .listing_main_image .entry-title.entry-tax {
        font-size: 1.4rem;
        bottom: 15px;
        left: 10px;
        right: 10px;
        text-align: center !important;
        line-height: 1.4;
        font-weight: 600;
        width: calc(100% - 20px) !important;
        margin: 0 auto !important;
    }
}

/* Disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .listing_main_image {
        animation: none;
    }
    
    .listing_main_image .entry-title.entry-tax {
        animation: titleLoadInReduced 0.5s ease-out forwards;
    }
    
    @keyframes titleLoadInReduced {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .listing_main_image .entry-title.entry-tax {
        text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    
    .listing_main_image .img-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.2) 40%,
            rgba(0, 0, 0, 0.8) 100%
        );
    }
}

/* Ensure image quality on retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .listing_main_image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Fix for any potential overflow issues and ensure spacing */
.header_media.with_search_oldtype {
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Override any conflicting styles from other CSS files */
.header_media .listing_main_image {
    margin-left: 55px !important;
    margin-right: 55px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure proper stacking context */
.header_media .listing_main_image,
#listing_main_image_photo.listing_main_image {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    display: block !important;
    box-sizing: border-box !important;
}

/* Override custom-style.css that sets height to 315px on mobile */
@media only screen and (max-width: 767px) {
    .header_media .listing_main_image,
    #listing_main_image_photo.listing_main_image {
        height: 350px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}