.oomi-hero-fw {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0 !important;
}

@media (min-width: 1024px) {
    .oomi-hero-fw {
        min-height: 600px;
        max-height: min(800px, 85vh);
    }
}

.oomi-hero-fw__picture,
.oomi-hero-fw__image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px) !important;
    z-index: 1;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Art Direction Wrappers (Toggles visibility based on screen size)
----------------------------------------------------------------------------- */
.oomi-hero-fw__bg-wrapper {
    width: 100%;
    height: 100%;
}

.oomi-hero-fw__bg-wrapper--desktop {
    display: none;
}
.oomi-hero-fw__bg-wrapper--mobile {
    display: block;
}

@media (min-width: 480px) {
    .oomi-hero-fw__bg-wrapper--desktop {
        display: block;
    }
    .oomi-hero-fw__bg-wrapper--mobile {
        display: none;
    }
}

/* Ensure Imagify's injected <picture> tags take up the full wrapper */
.oomi-hero-fw__bg-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* The actual image tags */
.oomi-hero-fw__bg,
.oomi-hero-fw__bg-wrapper picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Apply CSS variables directly to the respective wrappers */
.oomi-hero-fw__bg-wrapper--mobile .oomi-hero-fw__bg,
.oomi-hero-fw__bg-wrapper--mobile picture img {
    object-position: var(--hero-focal-mobile, center center) !important;
}

.oomi-hero-fw__bg-wrapper--desktop .oomi-hero-fw__bg,
.oomi-hero-fw__bg-wrapper--desktop picture img {
    object-position: var(--hero-focal-desktop, center center) !important;
}

.oomi-hero-fw__image-placeholder {
    background-color: var(--wp--preset--color--neutral-grey-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--text-secondary);
    text-align: center;
    padding: var(--wp--preset--spacing--spacing-xbig);
}

.oomi-hero-fw__inner {
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   Contextual Override: Heading Ingress CTA layout inside this specific Hero 
----------------------------------------------------------------------------- */

/* Enforce the requested mobile gap specifically when placed inside the Hero */
.oomi-hero-fw .oomi-heading-ingress-cta > .acf-innerblocks-container {
    gap: var(--wp--preset--spacing--spacing-sm);
}

@media (min-width: 768px) {
    /* Override the default flex column */
    .oomi-hero-fw:not(.oomi-hero-fw--pos-left):not(.oomi-hero-fw--pos-right) .oomi-heading-ingress-cta > .acf-innerblocks-container {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--wp--preset--spacing--spacing-md) var(--wp--preset--spacing--spacing-xbig);
        align-items: end;
    }

    .oomi-hero-fw:not(.oomi-hero-fw--pos-left):not(.oomi-hero-fw--pos-right) .oomi-heading-ingress-cta > .acf-innerblocks-container > :nth-child(1) {
        grid-column: 1 / -1;
    }

    .oomi-hero-fw:not(.oomi-hero-fw--pos-left):not(.oomi-hero-fw--pos-right) .oomi-heading-ingress-cta > .acf-innerblocks-container > :nth-child(2) {
        grid-column: 1 / 2;
    }

    .oomi-hero-fw:not(.oomi-hero-fw--pos-left):not(.oomi-hero-fw--pos-right) .oomi-heading-ingress-cta > .acf-innerblocks-container > :nth-child(3) {
        grid-column: 2 / 3;
        display: flex;
        justify-content: flex-end;
    }
}

/* Hide ingress on mobile logic */
@media (max-width: 479px) {
    .oomi-hero-fw--hide-ingress-mobile .oomi-heading-ingress-cta > .acf-innerblocks-container > p {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Layout Variations (Bottom Stack vs Left/Right Floating)
----------------------------------------------------------------------------- */

/* 1. Default Bottom Behavior */
.oomi-hero-fw--pos-bottom .oomi-hero-fw__inner {
    max-width: 1000px !important; /* Original max-width constraint scoped only to bottom position */
}

/* Remove the overlapping visual effect for full background */
.oomi-hero-fw--pos-left .oomi-hero-fw__picture,
.oomi-hero-fw--pos-right .oomi-hero-fw__picture {
    height: 100% !important;
}

/* Floating Left / Right Base Overrides (Mobile) */
.oomi-hero-fw--pos-left,
.oomi-hero-fw--pos-right {
    justify-content: center; /* Vertically center content */
}

@media (min-width: 768px) {
    /* Make the inner wrapper a flex container so we can align the text box inside it */
    .oomi-hero-fw--pos-left .oomi-hero-fw__inner,
    .oomi-hero-fw--pos-right .oomi-hero-fw__inner {
        display: flex;
        flex-direction: column;
        /* Force it to respect the site's default grid width instead of 1000px */
        max-width: calc(var(--wp--style--global--content-size) + (var(--site-padding) * 2)) !important;
    }

    .oomi-hero-fw--pos-left .oomi-hero-fw__inner {
        align-items: flex-start; /* Push text box to the left edge of the grid */
    }

    .oomi-hero-fw--pos-right .oomi-hero-fw__inner {
        align-items: flex-end; /* Push text box to the right edge of the grid */
    }

    /* Restrict the width of the actual content box so it floats */
    .oomi-hero-fw--pos-left .oomi-hero-fw__inner > *,
    .oomi-hero-fw--pos-right .oomi-hero-fw__inner > * {
        max-width: 650px;
        width: 100%;
    }

    /* Override the complex overlapping grid so the floating boxes stack text normally */
    .oomi-hero-fw--pos-left .oomi-heading-ingress-cta > .acf-innerblocks-container,
    .oomi-hero-fw--pos-right .oomi-heading-ingress-cta > .acf-innerblocks-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--wp--preset--spacing--spacing-md);
    }
}