.oomi-image-banner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    border-radius: var(--wp--preset--spacing--spacing-lg);
    border: 1px solid var(--wp--preset--color--border-light);
}

.oomi-image-banner img {
    height: 100%;
    width: 100%;
}

.oomi-image-banner.has-background {
    border-color: transparent;
}

.oomi-image-banner.has-white-background-color {
    border-color: var(--wp--preset--color--border-light);
}

/* ----------------------------------------------------------
   Image / Media Area
---------------------------------------------------------- */
.oomi-image-banner__image-wrapper {
    margin: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 260px;
    overflow: hidden;
    flex-shrink: 0;
}

.oomi-image-banner__image-wrapper:not(.oomi-image-banner__icon-wrapper) picture {
    display: block;
    width: 100%;
    height: 100%;
}

.oomi-image-banner__image,
.oomi-image-banner__image-wrapper:not(.oomi-image-banner__icon-wrapper) picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.oomi-image-banner__image-wrapper:not(.oomi-image-banner__icon-wrapper) picture img {
    object-position: inherit;
}

.oomi-image-banner__image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    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-md);
}

/* ----------------------------------------------------------
   Icon Support
---------------------------------------------------------- */
.oomi-image-banner__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wp--preset--spacing--spacing-big);
    box-sizing: border-box;
}

.oomi-image-banner__icon-wrapper picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.oomi-image-banner__icon,
.oomi-image-banner__icon-wrapper picture img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
}

.oomi-image-banner__icon-wrapper picture img {
    object-position: inherit;
}

/* ----------------------------------------------------------
   Content Area (InnerBlocks)
---------------------------------------------------------- */
.oomi-image-banner__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--wp--preset--spacing--spacing-xbig);
}

.oomi-image-banner__content > .acf-innerblocks-container {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--spacing-md);
    height: 100%;
}

.oomi-image-banner__content :is(p, h1, h2, h3, h4, h5, h6) {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ----------------------------------------------------------
   Heading Ingress CTA override inside Image Banner
---------------------------------------------------------- */
.oomi-image-banner__content > .acf-innerblocks-container,
.oomi-image-banner__content .wp-block-oomi-heading-ingress-cta {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}

.oomi-image-banner__content .oomi-heading-ingress-cta,
.oomi-image-banner__content .oomi-heading-ingress-cta > .acf-innerblocks-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}

.oomi-image-banner__content .oomi-heading-ingress-cta .wp-block-buttons {
    margin-top: auto;
}

.oomi-image-banner__footer-link {
    margin-top: auto !important;
    padding-top: var(--wp--preset--spacing--spacing-md);
}

/* ----------------------------------------------------------
   Contextual Layout: Inside Highlighted Grid (Secondary Items)
---------------------------------------------------------- */
@media (min-width: 960px) {
    /* Handle Frontend (Direct child) AND Editor (Nested inside wrapper) */
    .oomi-grid--highlight-first > .acf-innerblocks-container > .oomi-image-banner:nth-child(n + 2),
    .oomi-grid--highlight-first > .acf-innerblocks-container > :nth-child(n + 2) > .oomi-image-banner {
        flex-direction: row;
    }

    .oomi-grid--highlight-first > .acf-innerblocks-container > .oomi-image-banner:nth-child(n + 2) .oomi-image-banner__image-wrapper,
    .oomi-grid--highlight-first > .acf-innerblocks-container > :nth-child(n + 2) > .oomi-image-banner .oomi-image-banner__image-wrapper {
        flex: 0 0 30%;
        max-height: none;
        aspect-ratio: auto;
        height: 100%;
    }

    .oomi-grid--highlight-first > .acf-innerblocks-container > .oomi-image-banner:nth-child(n + 2) .oomi-image-banner__icon-wrapper .oomi-image-banner__icon,
    .oomi-grid--highlight-first > .acf-innerblocks-container > :nth-child(n + 2) > .oomi-image-banner .oomi-image-banner__icon-wrapper .oomi-image-banner__icon,
    .oomi-grid--highlight-first > .acf-innerblocks-container > .oomi-image-banner:nth-child(n + 2) .oomi-image-banner__icon-wrapper picture img,
    .oomi-grid--highlight-first > .acf-innerblocks-container > :nth-child(n + 2) > .oomi-image-banner .oomi-image-banner__icon-wrapper picture img {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
    }

    .oomi-grid--highlight-first > .acf-innerblocks-container > .oomi-image-banner:nth-child(n + 2) .oomi-image-banner__content,
    .oomi-grid--highlight-first > .acf-innerblocks-container > :nth-child(n + 2) > .oomi-image-banner .oomi-image-banner__content {
        padding: var(--wp--preset--spacing--spacing-big);
        justify-content: center;
    }
}
