/* Opening panel: the club's name at architectural scale, the training-hall
   photograph bleeding off the right edge of the viewport. */

.hero {
    border-bottom: var(--hairline) solid var(--seam);
}

/* The text column lines up with the page shell; the photograph runs past it
   to the right edge of the viewport. Padding is measured off the section's own
   width, so a scrollbar never pushes the image into horizontal overflow. */
.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(2rem, 4vw, 4rem);
    padding-left: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
}

.hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding-block: clamp(3rem, 7vw, 6rem);
    /* The masthead is sized off this column rather than the viewport, so the
       longest line fits at every width instead of breaking on a hyphen. */
    container-type: inline-size;
}

.hero__title {
    font-size: var(--size-masthead);
    font-size: clamp(2.125rem, 12cqi, 6.5rem);
    font-weight: 800;
    line-height: 0.84;
    letter-spacing: 0.002em;
}

.hero__title span {
    display: block;
    /* The masthead is set as three deliberate lines; balancing would break
       them again at arbitrary points. */
    text-wrap: wrap;
}

.hero__title .is-place {
    color: var(--olive);
}

.hero__lead {
    max-width: 44ch;
    font-size: var(--size-lead);
    line-height: 1.72;
    color: var(--bone-dim);
}

.hero__media {
    position: relative;
    min-height: 22rem;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    filter: grayscale(1) contrast(1.05);
}

/* One orchestrated entrance, on load only. */
@media (prefers-reduced-motion: no-preference) {
    .hero__title span,
    .hero .belt,
    .hero__lead {
        animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    }

    .hero__title span:nth-child(1) { animation-delay: 0.05s; }
    .hero__title span:nth-child(2) { animation-delay: 0.13s; }
    .hero__title span:nth-child(3) { animation-delay: 0.21s; }
    .hero .belt { animation-delay: 0.32s; }
    .hero__lead { animation-delay: 0.4s; }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0.7em);
    }
}

@media (max-width: 900px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-right: var(--gutter);
    }

    .hero__text {
        padding-block: clamp(2.5rem, 9vw, 4rem) clamp(2rem, 6vw, 3rem);
    }

    .hero__media {
        min-height: 0;
        margin-inline: calc(var(--gutter) * -1);
        aspect-ratio: 4 / 3;
    }
}