/* ----------------------------------------
    Block
   ---------------------------------------- */
.hero {
    display: flex;
    flex-direction: column;
    width: calc(100% + var(--block-list-padding) * 2);
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

/* ----------------------------------------
    Text Container Element
   ---------------------------------------- */
/* The header is fixed, so the text starts below it plus some breathing room */
.hero {
    --hero-header-offset: var(--header-height);
    --hero-top-space: 10rem;
}

body:has(.member-header) .hero {
    --hero-header-offset: calc(var(--header-height) + var(--member-header-height));
}

.hero__text-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 4rem;
    align-items: start;
    width: 100%;
    max-width: var(--block-max-width);
    margin: 0 auto;
    padding: calc(var(--hero-header-offset) + var(--hero-top-space)) var(--block-list-padding) 3rem;
}

.hero__heading {
    grid-column: 1;
    margin: 0;
    font-size: var(--font-size-jumbo);
    line-height: 1.1;
    font-weight: normal;
}

.hero__text {
    grid-column: 2;
    max-width: var(--text-column-max-width);
    line-height: var(--line-height-body);
}

.hero__text > :first-child {
    margin-top: 0;
}

.hero__text > :last-child {
    margin-bottom: 0;
}

/* Buttons sit under the text in the right column, the heading spans both rows */
.hero__text-container:has(.hero__button-wrap) .hero__heading {
    grid-row: span 2;
}

.hero__button-wrap {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* The wrap's gap spaces the buttons and the column edge lines them up with the text */
.hero__button-wrap .button {
    margin: 0;
}

/* ----------------------------------------
    Media Element
   ---------------------------------------- */
.hero__media-container {
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 80vh;
    overflow: hidden;
}

.hero__figure-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------------------
    Mobile: heading, text, then image
   ---------------------------------------- */
@media screen and (max-width: 1300px) {
    .hero {
        --hero-header-offset: 70px;
        --hero-top-space: 6rem;
    }

    body:has(.member-header) .hero {
        --hero-header-offset: calc(70px + var(--member-header-height));
    }

    .hero__text-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .hero__heading {
        font-size: var(--font-size-mobile-jumbo);
    }

    .hero__text-container:has(.hero__button-wrap) .hero__heading {
        grid-row: auto;
    }

    .hero__heading,
    .hero__text,
    .hero__button-wrap {
        grid-column: 1;
    }

    .hero__media-container {
        aspect-ratio: 3 / 2;
    }
}