/**
 * Hero split: the page's first section with the heading column on the left
 * and a tall picture on the right; an optional sticker graphic overlaps the
 * picture's lower corner. On phones the text comes first and the picture
 * follows (text-image shows the image first, which pushes the H1 down).
 *
 * globalClass: hero-split   (the row inside the section)
 *
 * Structure:
 *   .color-section.gb-container.alignfull [palette class]
 *     .hero-split.gb-container                    GB: useGlobalMaxWidth, margin auto
 *       .hero-split-content.gb-container          > p (label), h1, figure (ornament),
 *                                                   p (lead), buttons row
 *       .hero-split-media.gb-container
 *         .hero-split-picture.gb-container > figure > img    the picture, cropped to the ratio
 *         .hero-split-sticker.gb-container > figure > img    optional overlapping graphic
 *
 * Tuning: --hero-split-gap (56px), --hero-split-ratio (3 / 4),
 *         --hero-split-sticker-width (clamp 140–200px)
 *
 * Chain animations: the content column animates as one block (fadeInFromUp),
 * the media column fades in after it.
 *
 * Hers Klub, 11/2026. Candidate for the base theme.
 */

:root {
    --hero-split-gap: 56px;
    --hero-split-ratio: 3 / 4;
    --hero-split-sticker-width: clamp(140px, 16vw, 200px);
}

.hero-split,
.hero-split > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hero-split-gap);
}

.hero-split > .block-editor-inner-blocks {
    width: 100%;
}

.hero-split-content,
.hero-split-media {
    flex: 1 1 100%;
    min-width: 0;
}

.hero-split-content,
.hero-split-content > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}

.hero-split-content > *,
.hero-split-content figure {
    margin: 0;
}

.hero-split-media {
    position: relative;
}

/* The figure owns the box; the image fills it, so its own size never sets
   the row height. */
.hero-split-picture {
    position: relative;
    aspect-ratio: var(--hero-split-ratio);
    overflow: clip;
}

.hero-split-picture figure {
    position: absolute;
    inset: 0;
    margin: 0;
}

.hero-split-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-split-sticker {
    position: absolute;
    right: -12px;
    bottom: -28px;
    z-index: 1;
    width: var(--hero-split-sticker-width);
}

.hero-split-sticker figure {
    margin: 0;
}

.hero-split-sticker img {
    display: block;
    width: 100%;
    height: auto;
}

@media only screen and (min-width: 768px) {
    .hero-split-media {
        flex-basis: 60%;
        max-width: 480px;
    }
}

@media only screen and (min-width: 990px) {
    .hero-split-content {
        flex: 1 1 52%;
    }

    .hero-split-media {
        flex: 1 1 36%;
        max-width: none;
    }
}