@layer components {
    :where(section).wp-block-falconmedia-split-media {
        --split-media-gap: var(--space-6);

        padding-inline: var(--pad-x);
        padding-block: var(--block-spacing, var(--section-gap)) 0;
    }

    :where(section).wp-block-falconmedia-split-media:is(.is-bg-surface-2, .is-bg-warm) {
        margin-block-start: var(--block-spacing, var(--section-gap));
        padding-block: var(--band-pad);
    }

    :where(section).wp-block-falconmedia-split-media.is-variant-card {
        --split-media-gap: var(--space-5);
    }

    .split-media__inner {
        display: grid;
        grid-template-columns: var(--cols-5-7);
        gap: var(--col-gap);
        align-items: center;
        max-inline-size: var(--container);
        margin-inline: auto;
    }

    :where(section).wp-block-falconmedia-split-media.is-media-end .split-media__inner {
        grid-template-columns: var(--cols-7-5);
    }

    :where(section).wp-block-falconmedia-split-media.is-variant-card .split-media__inner {
        grid-template-columns: var(--cols-5-7);
        gap: 0;
    }

    .split-media__media {
        max-block-size: var(--photo-max-h);
        margin: 0;
        overflow: hidden;
        aspect-ratio: 4 / 5;
    }

    :where(section).wp-block-falconmedia-split-media {
        &.is-ratio-3-4 .split-media__media { aspect-ratio: 3 / 4; }
        &.is-ratio-1-1 .split-media__media { aspect-ratio: 1; }
        &.is-ratio-4-3 .split-media__media { aspect-ratio: 4 / 3; }
        &.is-ratio-3-2 .split-media__media { aspect-ratio: 3 / 2; }
    }

    .split-media__picture {
        display: block;
        block-size: 100%;
    }

    .split-media__img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

    .split-media__placeholder {
        display: grid;
        place-items: center;
        padding: var(--space-6);
        background: var(--color-surface-2);
        color: var(--color-text-muted);
    }

    .split-media__body {
        display: flex;
        flex-direction: column;
        gap: var(--split-media-gap);
        min-inline-size: 0;
    }

    :where(section).wp-block-falconmedia-split-media.is-variant-card .split-media__body {
        position: relative;
        z-index: 2;
        margin-inline-end: var(--overlap-about);
        padding: var(--card-pad);
        border: var(--border-card);
        background: var(--color-surface);
        box-shadow: var(--shadow-card);
    }

    .split-media__label {
        font-size: var(--text-label);
        font-weight: var(--font-weight-medium);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--color-action);
    }

    .split-media__heading {
        margin: 0;
        font-family: var(--font-heading);
        font-size: var(--text-h2);
        font-weight: var(--font-weight-heading);
        line-height: var(--leading-heading);
        text-wrap: pretty;
    }

    .split-media__text {
        display: flex;
        flex-direction: column;
        gap: var(--split-media-gap);

        & > * {
            margin: 0;
        }

        & p {
            max-inline-size: 52ch;
            color: var(--color-text-muted);
        }

        & blockquote {
            font-family: var(--font-heading);
            font-size: var(--text-quote);
            font-style: italic;
            line-height: var(--leading-lead);
            color: var(--color-warm-strong);
        }

        & blockquote p {
            margin: 0;
            color: inherit;
        }
    }

    :where(section).wp-block-falconmedia-split-media.is-variant-card .split-media__text p {
        max-inline-size: none;
    }

    .split-media__accent {
        margin: 0;
        font-family: var(--font-heading);
        font-size: var(--text-lead);
        font-style: italic;
        line-height: var(--leading-lead);
        color: var(--color-warm-strong);
    }

    .split-media__fact,
    .split-media__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-6);
    }

    .split-media__fact-text {
        font-weight: var(--font-weight-medium);
    }

    .split-media__button {
        --btn-stroke: transparent;
        --btn-bg: var(--color-action);
        --btn-color: var(--color-on-primary);
        --btn-hover-bg: var(--color-action-hover);
        --btn-hover-color: var(--color-on-primary);
        --btn-active-bg: var(--color-action-hover);
        --btn-active-color: var(--color-on-primary);
        --btn-radius: var(--radius-md);
        --btn-border-width: 0;
        --btn-font-weight: var(--font-weight-medium);
        --btn-py: 0;
        --btn-px: var(--space-7);

        min-block-size: var(--button-h);
        font-size: var(--text-button);
        letter-spacing: var(--tracking-button);
        text-transform: uppercase;
        transition: background-color var(--motion-duration-fast) var(--motion-ease);

        &:focus-visible {
            outline: var(--focus-w) solid var(--color-text);
            outline-offset: var(--focus-offset);
        }
    }

    .split-media__link {
        display: inline-flex;
        align-items: center;
        min-block-size: var(--min-tap);
        padding-block-end: var(--underline-offset);
        border-block-end: var(--underline-w) solid var(--color-action);
        font-size: var(--text-nav);
        font-weight: var(--font-weight-medium);
        color: var(--color-text);
        text-decoration: none;

        &:hover {
            color: var(--color-action);
        }

        &:focus-visible {
            outline: var(--focus-w) solid var(--color-action);
            outline-offset: var(--focus-offset);
        }
    }

    .split-media__strip {
        display: flex;
        block-size: var(--strip-h);
        max-inline-size: var(--strip-max);
        border: var(--border-w) solid var(--color-line);

        & > span {
            flex: 1;
        }

        & > :nth-child(1) { --drape-step: 0; background: var(--swatch-1); }
        & > :nth-child(2) { --drape-step: 1; background: var(--swatch-2); }
        & > :nth-child(3) { --drape-step: 2; background: var(--swatch-3); }
        & > :nth-child(4) { --drape-step: 3; background: var(--swatch-4); }
        & > :nth-child(5) { --drape-step: 4; background: var(--swatch-5); }
        & > :nth-child(6) { --drape-step: 5; background: var(--swatch-6); }
        & > :nth-child(7) { --drape-step: 6; background: var(--swatch-7); }
        & > :nth-child(8) { --drape-step: 7; background: var(--swatch-8); }
        & > :nth-child(9) { --drape-step: 8; background: var(--swatch-9); }
        & > :nth-child(10) { --drape-step: 9; background: var(--swatch-10); }
        & > :nth-child(11) { --drape-step: 10; background: var(--swatch-11); }
        & > :nth-child(12) { --drape-step: 11; background: var(--swatch-12); }
        & > :nth-child(13) { --drape-step: 12; background: var(--swatch-13); }
    }

    @media (prefers-reduced-motion: no-preference) {
        :where(section).wp-block-falconmedia-split-media.has-reveal.is-revealed .split-media__strip > span {
            transform-origin: bottom;
            animation: split-media-drape var(--motion-duration-drape) var(--motion-ease-drape) both;
            animation-delay: calc(var(--motion-delay-drape) + var(--drape-step) * var(--motion-stagger));
        }
    }

    @keyframes split-media-drape {
        from {
            opacity: 0.5;
            filter: grayscale(1);
            transform: scaleY(0.15);
        }
    }
}