@layer components {
    :where(section).wp-block-falconmedia-hero {
        position: relative;
        display: grid;
        grid-template-columns: var(--hero-grid);
        align-items: var(--hero-align);
        padding-block: 0;
    }

    .hero__media {
        position: relative;
        grid-column: var(--hero-photo-col);
        grid-row: var(--hero-photo-row);
        block-size: var(--hero-photo-h);
        margin: 0;
        overflow: hidden;
    }

    .hero__picture {
        display: block;
        block-size: 100%;
    }

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

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

    .hero__card {
        z-index: 3;
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        grid-column: var(--hero-card-col);
        grid-row: var(--hero-card-row);
        align-self: var(--hero-card-self);
        justify-self: var(--hero-card-justify);
        inline-size: 100%;
        max-inline-size: var(--hero-card-max);
        margin: var(--hero-card-margin);
        padding: var(--card-pad);
        border: var(--border-card);
        border-block-start: var(--accent-w) solid var(--color-accent);
        background: var(--color-surface);
        box-shadow: var(--shadow-card);
    }

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

    .hero__name {
        margin: 0;
        font-family: var(--font-heading);
        font-size: var(--text-name);
        font-weight: var(--font-weight-heading);
        line-height: var(--leading-display);
        letter-spacing: var(--tracking-name);
        text-transform: uppercase;
        text-wrap: balance;
    }

    .hero__text {
        margin: 0;
        color: var(--color-text-muted);
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-6);

        &:not(:has(.hero__link)) {
            display: var(--hero-actions-solo-display);
        }
    }

    .hero__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);

        display: var(--hero-button-display);
        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);
        }
    }

    .hero__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);
        }
    }

    .hero__strip {
        display: flex;
        block-size: var(--strip-h);
        max-inline-size: var(--strip-max);
        margin-block-start: var(--space-2);
        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 (width <= 600px) {
        .hero__card {
            inline-size: auto;
        }

        .is-mobile-layout-b {
            --hero-photo-h: var(--hero-photo-h-compact);
        }

        .is-mobile-layout-c {
            --hero-photo-row: 2;
            --hero-card-row: 1;
            --hero-card-margin: var(--space-5) var(--pad-x);
        }

        .is-mobile-layout-d {
            --hero-photo-row: 2;
            --hero-card-row: 3;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        :where(section).wp-block-falconmedia-hero:not(.is-editor-preview) {
            & .hero__card {
                animation: hero-card-in var(--motion-duration-reveal) var(--motion-ease) both;
            }

            & .hero__strip > span {
                transform-origin: bottom;
                animation: hero-drape var(--motion-duration-drape) var(--motion-ease-drape) both;
                animation-delay: calc(var(--motion-delay-drape) + var(--drape-step) * var(--motion-stagger));
            }
        }
    }

    @keyframes hero-card-in {
        from {
            opacity: 0;
            translate: 0 var(--space-6);
        }
    }

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