/**
 * Banner Background Customization Styles
 *
 * Ensures proper display of custom background images on page banners with aspect ratio control
 */

.inner-heros-warp {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Default aspect ratio is set via inline styles from PHP (21/9) */
    aspect-ratio: 21 / 9;
    /* Remove fixed padding to allow aspect ratio to control height */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Remove negative margin to prevent header overlap */
    margin-top: 0 !important;
}

/* Ensure the banner content remains readable over background images */
.inner-heros-warp .inner-hero-content {
    position: relative;
    z-index: 10;
    padding: 2rem 0;
}

/* Container fluid should be full height */
.inner-heros-warp .container-fluid {

}

/* Optional: Add a subtle overlay to improve text readability when using background images */
.inner-heros-warp.has-background-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.inner-heros-warp.has-background-image .inner-hero-content {
    z-index: 10;
}

/* Hide the decorative shape when custom background is used */
.inner-heros-warp.has-background-image .all-shapes {
    display: none;
}