/**
 * Text-image: an image and text side by side, one row per block. Several rows
 * inside a text-image-list alternate sides automatically; the image grows
 * with the text and never stacks next to another image on mobile.
 *
 * globalClass: text-image        (the row)
 *              text-image-list   (optional wrapper for several rows, usually a
 *                                 color-section; even rows are mirrored)
 *
 * Variants (on the row):
 *   text-image--reverse   text left, image right (overrides the list order)
 *   text-image--wide      the row is alignfull and the image runs to the
 *                         viewport edge; the text keeps the site's content
 *                         edge on its side
 *
 * Structure:
 *   .text-image-list.gb-container.alignfull.color-section          (optional)
 *     .text-image.gb-container [.alignfull with --wide]
 *        GB: display flex, flexWrap wrap, alignItems stretch,
 *            flexDirectionMobile column, justifyContent space-between
 *       .text-image-media.gb-container   (GB width 48%, mobile 100%) > figure > img
 *       .text-image-content.gb-container (GB width 48%, mobile 100%) > headline, paragraphs, buttons
 *
 * Tuning: --text-image-min-height (image column minimum on desktop, 360px),
 *         --text-image-row-gap (space between rows, 60px)
 *
 * Mobile: always image first, then text (DOM order); the mirroring only
 * applies from 768px, so two images or two texts never meet.
 *
 * Chain animations: the image fades in (fadeIn, no movement) and the text
 * column animates as one block (chainAnimation on .text-image-content,
 * fadeInFromUp), because core paragraphs cannot carry a chain animation and
 * the texts should appear together.
 *
 * Editor: GB lays the row out on .block-editor-block-list__layout, so the
 * mirroring rules target that element too.
 */

:root {
    --text-image-min-height: 360px;
    --text-image-row-gap: 60px;
}

/* Rows in a list */
.text-image-list > .text-image + .text-image {
    margin-top: var(--text-image-row-gap);
}

/* Image column: the figure fills the column and the image is absolutely
   positioned inside it, so the image's own size (or its width/height
   attributes before a lazy load) never drives the row height. The row is as
   tall as the text or --text-image-min-height, whichever is larger. */
.text-image-media {
    display: flex;
}

.text-image-media [data-type="generateblocks/image"] {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}

.text-image-media figure {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.text-image-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text column */
.text-image-content {
    align-self: center;
    padding: 20px 0;
}

/* Wide: the row spans the viewport, no side padding on the row itself */
.text-image--wide.gb-container.alignfull {
    padding-left: 0;
    padding-right: 0;
}

.text-image--wide .text-image-content {
    padding: 20px var(--mobile-side-padding);
}

@media only screen and (min-width: 768px) {
    .text-image-media figure {
        aspect-ratio: auto;
        min-height: var(--text-image-min-height);
    }

    .text-image-content {
        padding: 40px 0;
    }

    /* Mirrored rows: --reverse, and every even row in a list */
    .text-image--reverse,
    .text-image--reverse > .block-editor-inner-blocks > .block-editor-block-list__layout,
    .text-image-list > .text-image:nth-child(even),
    .text-image-list > .text-image:nth-child(even) > .block-editor-inner-blocks > .block-editor-block-list__layout {
        flex-direction: row-reverse;
    }

    /* Wide: 50/50, the text keeps the content edge on its outer side */
    .text-image--wide > .text-image-media,
    .text-image--wide > .text-image-content,
    .text-image--wide > .block-editor-inner-blocks > .block-editor-block-list__layout > .text-image-media,
    .text-image--wide > .block-editor-inner-blocks > .block-editor-block-list__layout > .text-image-content {
        width: 50%;
    }

    .text-image--wide .text-image-content {
        --text-image-edge: max(var(--mobile-side-padding), calc((100vw - var(--container-width)) / 2));
        padding: 40px var(--text-image-edge) 40px 4%;
    }

    .text-image--wide.text-image--reverse .text-image-content,
    .text-image-list > .text-image--wide:nth-child(even):not(.text-image--reverse) .text-image-content {
        padding: 40px 4% 40px var(--text-image-edge);
    }
}