/* Styles for Hero component */
@layer components {
    .hero {
        position: relative;
        /* Full screen, but never taller than the phone it is read on. */
        min-block-size: 100svh;
        /* A sticky header still takes up space in the flow. Pull the hero back
           under it so the bar really does float over the photo, the way the
           design asks - the hero's own top padding already clears the bar. */
        margin-block-start: calc(var(--header-height-top) * -1);
        display: flex;
        align-items: stretch;
        /* The hero is always the dark end of the brand, in both themes: it sits
           under a transparent header and behind a photo. */
        background-color: var(--color-surface);
        color: var(--color-text);
        overflow: hidden;
        isolation: isolate;

        & .hero__media {
            position: absolute;
            inset: 0;
            z-index: -1;
        }

        & .hero__plate {
            position: absolute;
            inset: 0;
            /* Shown while the photo decodes, and behind its transparent edges. */
            background:
                radial-gradient(120% 90% at 75% 15%, color-mix(in srgb, var(--color-surface-raised) 70%, var(--color-text)), transparent 65%),
                linear-gradient(160deg, var(--color-surface-raised), var(--color-surface));
        }

        /* The scrim is what makes any photo work: the copy stays readable no
           matter how bright the shot the club sends us turns out to be. */
        & .hero__scrim {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(to top, var(--color-surface) 0%, transparent 55%),
                linear-gradient(to right, var(--color-surface) 10%, color-mix(in srgb, var(--color-surface) 55%, transparent) 60%, transparent 100%);
        }

        & .hero__inner {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: var(--space-l);
            /* `position: relative` above also makes this the positioning
               context of the scroll cue. The top padding clears the header the
               hero has pulled itself up under. */
            padding-block: calc(var(--header-height-top) + var(--space-l)) var(--space-l);
        }

        & .hero__content {
            --flow-space: var(--space-s);
            max-inline-size: 34rem;
        }

        & .hero__title {
            font-size: var(--size-step-3);
            /* Anton's caps overshoot their line box, so the line is set with real
               leading rather than a crushed 0.9. */
            line-height: 1;
        }

        /* The poster's second line: the disciplines, named. Body face and not
           the display one, so it reads as a list under the title rather than a
           second title competing with the first. */
        & .hero__tagline {
            --flow-space: var(--space-2xs);
            font-family: var(--font-body);
            font-size: var(--size-step-1);
            font-weight: 600;
            line-height: 1.2;
        }

        & .hero__subtitle {
            --flow-space: var(--space-s);
            max-inline-size: 42ch;
            font-size: var(--size-step-0);
            font-weight: 300;
            line-height: 1.5;
            color: color-mix(in srgb, var(--color-text) 88%, var(--color-surface));
        }

        & .hero__actions {
            --flow-space: var(--space-m);
        }

        /* On a phone the two actions cannot sit side by side, so they stack full
           width instead of ending up ragged. */
        @media (width < 30rem) {
            & .hero__actions {
                --cluster-gap: var(--space-2xs);
            }

            & .hero__actions .button {
                inline-size: 100%;
            }
        }

        & .hero__scroll {
            display: none;
        }
    }

    @media (width >= 48rem) {
        .hero {
            & .hero__title {
                font-size: var(--size-step-4);
            }

            & .hero__inner {
                padding-block: calc(var(--header-height-top) + var(--space-xl)) var(--space-2xl);
            }

            /* The scroll cue only makes sense where the fold is real. It is
               pinned to the bottom edge, not floated after the copy. */
            & .hero__scroll {
                display: inline-flex;
                align-items: center;
                gap: var(--space-2xs);
                position: absolute;
                inset-block-end: var(--space-l);
                inset-inline-start: 0;
                color: var(--color-text-muted);
                font-size: var(--size-step--1);
                letter-spacing: 0.22em;
                text-transform: uppercase;
                text-decoration: none;
                transition: color var(--duration-fast) var(--ease-jab);

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

            & .hero__scroll-icon {
                font-size: 1.2em;
                animation: hero-nudge 2.4s var(--ease-punch) infinite;
            }
        }
    }

    @media (width >= 64rem) {
        .hero {
            & .hero__plate--main {
                inset-inline-start: 34%;
            }

            & .hero__scrim {
                background:
                    linear-gradient(to top, var(--color-surface) 0%, transparent 40%),
                    linear-gradient(to right, var(--color-surface) 32%, transparent 62%);
            }

            & .hero__content {
                max-inline-size: min(100%, 46rem);
            }
        }
    }

    @keyframes hero-nudge {
        0%, 70%, 100% { translate: 0 0; }
        80% { translate: 0 4px; }
    }
}

/*
 * Deliberately outside every layer.
 *
 * progressive-image-bundle sizes its container from the file itself, in
 * `@layer vendor` - which base.html.twig declares last, so it beats
 * `@layer components`. That is the right default nearly everywhere and the
 * wrong one here: the plate and the frame are boxes our layout has already
 * decided the size of, and the photo only has to fill them. Unlayered CSS is
 * the one thing that outranks `@layer vendor`.
 */
.hero__plate > .progressive-image-container {
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100%;
    aspect-ratio: auto;
}