.org-vacancy-homepage-hero {
    @apply relative;

    .hero-band {
        @apply relative overflow-hidden;
        @apply rounded-b-2xl;
        @apply pt-32 md:pt-40;

        &.no-media {
            @apply bg-lilac-100;

            .hero-path-line {
                stroke: var(--color-lilac);
            }
        }

        > .atm-image,
        > .atm-video {
            @apply absolute inset-0 z-0 h-full w-full p-0;

            img,
            video {
                @apply absolute inset-0 h-full w-full object-cover;
            }
        }
    }

    .hero-wrapper {
        @apply absolute top-0 left-0 z-10 h-full w-full overflow-hidden pointer-events-none;

        .hero-path-mask {
            @apply h-full absolute top-1/2 -translate-y-1/2 w-[201%] -left-full md:-left-1/2 md:w-[151%] lg:left-0 lg:w-[101%] lg:h-[90%] lg:top-0 lg:translate-y-0;
        }

        .hero-path-line {
            fill: none;
            stroke: var(--color-white);
            stroke-width: 3px;
            stroke-miterlimit: 10;
        }
    }

    .vacancy-hero-content {
        @apply relative z-20;

        padding-bottom: calc(50% + 2.5rem);

        @variant md {
            padding-bottom: calc(15.8% + 2.5rem);
        }

        /* The page title is centred above the search bar and needs more air under it than the heading atom gives on its own. */
        > .atm-heading {
            @apply mb-8 text-center text-secondary-col-1 md:mb-11;
        }
    }

    .vacancy-hero-form {
        @apply relative flex items-center bg-white;
        @apply rounded-2xl md:rounded-full;
        box-shadow: 0 2px 16px -6px rgba(0, 0, 0, 0.35);

        .input-wrapper {
            @apply flex w-full flex-col gap-2 p-2;
            @apply md:flex-row md:items-center md:gap-3 md:p-2.5;
        }

        .input-container {
            @apply relative flex w-full flex-wrap items-center gap-y-2;
            @apply md:flex-nowrap md:gap-3;

            .atm-form-input {
                @apply w-full;

                @variant md {
                    @apply flex-1;
                }

                .form-input {
                    @apply h-12 w-full rounded-full border-0 bg-gray-50 px-6;
                }

                .form-label {
                    @apply left-6;
                }
            }

            /* The name field and the "en/of" label share the first row on mobile. */
            .atm-form-input:first-of-type {
                @apply w-[calc(100%-4rem)];
            }

            .input-separator {
                @apply flex-none px-2 text-sm text-black;
            }

            .location-btn {
                @apply absolute right-2 bottom-1 h-10 w-10;

                @variant md {
                    @apply top-1/2 right-3 bottom-auto -translate-y-1/2;
                }

                .atm-button-primary {
                    @apply h-10 w-10 bg-transparent text-md text-black;

                    .button-content-wrapper {
                        @apply h-10;
                    }
                }
            }
        }

        .search-btn {
            @apply w-full shrink-0 justify-center px-6 text-center md:w-auto;

            .button-content-wrapper {
                @apply h-11 md:h-12;
            }
        }
    }

    .hero-tags {
        @apply relative mt-6 flex flex-col gap-3;
        @apply md:mt-10 md:flex-row md:items-start md:gap-8;

        @apply p-4 md:p-6;

        .hero-tags-heading {
            @apply md:w-1/4 md:shrink-0;

            .atm-heading {
                @apply text-secondary-col-1;
            }
        }
    }

    .hero-band:not(.no-media) .hero-tags::before {
        content: '';
        @apply absolute inset-0 -z-10 rounded-2xl bg-white;
    }

    /* Over a photo or video the magenta title gets the same white footing as the tag row, shrunk to the text so it still reads as a title. */
    .hero-band:not(.no-media) .vacancy-hero-content > .atm-heading {
        @apply mx-auto w-fit rounded-2xl bg-white px-6 py-3;
    }

    .trailing-media {
        @apply relative z-20;

        .trailing-media-inner {
            @apply -mt-[50%] md:-mt-[15.8%];
            @apply overflow-hidden rounded-2xl;
            @apply aspect-square md:aspect-[1216/384];

            /* A video keeps its own 16/9 padding trick, so drop it and let the media fill (and crop to) the box. */
            .atm-image,
            .atm-video {
                @apply relative h-full w-full p-0;

                img,
                video {
                    @apply h-full w-full object-cover;
                }
            }
        }

        .trailing-media-desktop {
            @apply hidden h-full w-full md:block;
        }

        .trailing-media-mobile {
            @apply block h-full w-full md:hidden;
        }
    }
}