@layer components {
    .has-block-options {
        padding-block: var(--block-spacing, var(--section-gap));
        background: var(--block-background, transparent);
        color: var(--block-color, inherit);
        text-align: var(--block-align, start);
    }

    .is-bg-bg { --block-background: var(--color-bg); --block-color: var(--color-text); }
    .is-bg-surface { --block-background: var(--color-surface); --block-color: var(--color-text); }
    .is-bg-surface-2 { --block-background: var(--color-surface-2); --block-color: var(--color-text); }
    .is-bg-warm { --block-background: var(--color-warm); --block-color: var(--color-text); }
    .is-bg-primary { --block-background: var(--color-primary); --block-color: var(--color-on-primary); }
    .is-bg-secondary { --block-background: var(--color-secondary); --block-color: var(--color-on-secondary); }

    .is-bg-primary :where(a),
    .is-bg-secondary :where(a) {
        color: inherit;
    }

    /* A coloured block after an open block keeps the section spacing outside its colour, so the open content does not touch it. Only blocks without bottom padding of their own need it. */
    :is(.wp-block-falconmedia-color-axes, .wp-block-falconmedia-cta-band, .wp-block-falconmedia-form, .wp-block-falconmedia-gallery, .wp-block-falconmedia-intro-band, .wp-block-falconmedia-quote-feature, .wp-block-falconmedia-service-cards, .wp-block-falconmedia-split-media, .wp-block-falconmedia-testimonials).has-block-options:not(.is-bg-surface, .is-bg-surface-2, .is-bg-warm, .is-bg-primary, .is-bg-secondary) + :is(.is-bg-surface, .is-bg-surface-2, .is-bg-warm, .is-bg-primary, .is-bg-secondary) {
        margin-block-start: var(--block-spacing, var(--section-gap));
    }

    .is-spacing-s { --block-spacing: var(--space-11); }
    .is-spacing-m { --block-spacing: var(--section-gap); }
    .is-spacing-l { --block-spacing: var(--section-gap-lg); }

    .is-align-start { --block-align: start; }
    .is-align-center { --block-align: center; }
    .is-align-end { --block-align: end; }

    @media (width < 600px) {
        .is-spacing-mobile-none { --block-spacing: 0; }
        .is-spacing-mobile-s { --block-spacing: var(--space-11); }
        .is-spacing-mobile-m { --block-spacing: var(--section-gap); }
        .is-spacing-mobile-l { --block-spacing: var(--section-gap-lg); }
        .is-hidden-mobile:not(.is-editor-preview) { display: none; }
        .is-hidden-mobile.is-editor-preview { opacity: 0.5; outline: var(--border-w) dashed var(--color-line-strong); }
    }

    @media (600px <= width < 1024px) {
        .is-spacing-tablet-none { --block-spacing: 0; }
        .is-spacing-tablet-s { --block-spacing: var(--space-11); }
        .is-spacing-tablet-m { --block-spacing: var(--section-gap); }
        .is-spacing-tablet-l { --block-spacing: var(--section-gap-lg); }
        .is-hidden-tablet:not(.is-editor-preview) { display: none; }
        .is-hidden-tablet.is-editor-preview { opacity: 0.5; outline: var(--border-w) dashed var(--color-line-strong); }
    }

    @media (1024px <= width < 1440px) {
        .is-spacing-laptop-none { --block-spacing: 0; }
        .is-spacing-laptop-s { --block-spacing: var(--space-11); }
        .is-spacing-laptop-m { --block-spacing: var(--section-gap); }
        .is-spacing-laptop-l { --block-spacing: var(--section-gap-lg); }
        .is-hidden-laptop:not(.is-editor-preview) { display: none; }
        .is-hidden-laptop.is-editor-preview { opacity: 0.5; outline: var(--border-w) dashed var(--color-line-strong); }
    }

    @media (1440px <= width < 2560px) {
        .is-spacing-desktop-none { --block-spacing: 0; }
        .is-spacing-desktop-s { --block-spacing: var(--space-11); }
        .is-spacing-desktop-m { --block-spacing: var(--section-gap); }
        .is-spacing-desktop-l { --block-spacing: var(--section-gap-lg); }
        .is-hidden-desktop:not(.is-editor-preview) { display: none; }
        .is-hidden-desktop.is-editor-preview { opacity: 0.5; outline: var(--border-w) dashed var(--color-line-strong); }
    }

    @media (width >= 2560px) {
        .is-spacing-4k-none { --block-spacing: 0; }
        .is-spacing-4k-s { --block-spacing: var(--space-11); }
        .is-spacing-4k-m { --block-spacing: var(--section-gap); }
        .is-spacing-4k-l { --block-spacing: var(--section-gap-lg); }
        .is-hidden-4k:not(.is-editor-preview) { display: none; }
        .is-hidden-4k.is-editor-preview { opacity: 0.5; outline: var(--border-w) dashed var(--color-line-strong); }
    }

    @media (prefers-reduced-motion: no-preference) {
        .has-reveal {
            transition:
                opacity var(--motion-duration-reveal) var(--motion-ease),
                translate var(--motion-duration-reveal) var(--motion-ease);
        }

        .has-reveal-ready .has-reveal:not(.is-revealed) {
            opacity: 0;
            translate: 0 var(--space-6);
        }
    }
}

/* Space above a block sits in the utilities layer, so it overrides the margins blocks declare themselves. */
@layer utilities {
    .is-margin-none { margin-block-start: 0; }
    .is-margin-s { margin-block-start: var(--space-11); }
    .is-margin-m { margin-block-start: var(--section-gap); }
    .is-margin-l { margin-block-start: var(--section-gap-lg); }

    @media (width < 600px) {
        .is-margin-mobile-none { margin-block-start: 0; }
        .is-margin-mobile-s { margin-block-start: var(--space-11); }
        .is-margin-mobile-m { margin-block-start: var(--section-gap); }
        .is-margin-mobile-l { margin-block-start: var(--section-gap-lg); }
    }

    @media (600px <= width < 1024px) {
        .is-margin-tablet-none { margin-block-start: 0; }
        .is-margin-tablet-s { margin-block-start: var(--space-11); }
        .is-margin-tablet-m { margin-block-start: var(--section-gap); }
        .is-margin-tablet-l { margin-block-start: var(--section-gap-lg); }
    }

    @media (1024px <= width < 1440px) {
        .is-margin-laptop-none { margin-block-start: 0; }
        .is-margin-laptop-s { margin-block-start: var(--space-11); }
        .is-margin-laptop-m { margin-block-start: var(--section-gap); }
        .is-margin-laptop-l { margin-block-start: var(--section-gap-lg); }
    }

    @media (1440px <= width < 2560px) {
        .is-margin-desktop-none { margin-block-start: 0; }
        .is-margin-desktop-s { margin-block-start: var(--space-11); }
        .is-margin-desktop-m { margin-block-start: var(--section-gap); }
        .is-margin-desktop-l { margin-block-start: var(--section-gap-lg); }
    }

    @media (width >= 2560px) {
        .is-margin-4k-none { margin-block-start: 0; }
        .is-margin-4k-s { margin-block-start: var(--space-11); }
        .is-margin-4k-m { margin-block-start: var(--section-gap); }
        .is-margin-4k-l { margin-block-start: var(--section-gap-lg); }
    }
}