/************************************************
*                      HERO                     *
************************************************/

#hero {
    max-width: none;
    width: 100vw;
    padding: 4rem 0;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-beige);
    color: var(--color-white)
}

#hero {
    background:
        url('../img/illustrations/jared-evans-Wwg1TzCuV9E-unsplash.webp') center/cover no-repeat;
}

#hero-left,
#hero-right {
    margin: 1em;
}

#hero-right {
    text-align: center;
    max-width: 1200px;
}

/* Desktop: pin logo to the left edge and allow hero-right to take the rest of the space.
   This keeps the logo visible while giving the right column full width of the section. */
@media screen and (min-width: 1145px) {
    #hero {
        position: relative;
        padding-left: 0;
        /* hero-right is centered independently of the pinned logo */
    }

    #hero-left {
        position: absolute;
        left: 1rem;
        /* small gap from the viewport edge */
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        /* remove margin that was added earlier */
        z-index: 2;
    }

    #hero #hero-image {
        max-height: 20em;
        /* slightly smaller on large screens to fit vertically */
    }

    #hero-right {
        max-width: 1200px;
        /* constrain content to site max width */
        width: 100%;
        margin: 0 auto;
        /* center the block within the hero */
        text-align: center;
        /* keep text centered as requested */
        position: relative;
        /* keep it in flow so absolute logo doesn't affect it */
        box-sizing: border-box;
        /* ensure internal padding doesn't change outer width */
        padding: 0 8rem;
        /* reserve space so long lines wrap before the pinned logo */
        /* Force wrapping of long words/URLs so they won't overflow beneath the pinned logo */
        overflow-wrap: break-word;
        word-break: break-word;
        /* Ensure inline content doesn't try to be wider than available space */
        min-inline-size: 0;
    }
}

#hero-image {
    width: auto;
    height: auto;
    max-height: 25em;
    margin: 0;
}

#hero h1,
#hero h2 {
    margin: 0.2em 0;
}

#hero-right .separateur {
    margin: 0 auto 1em;
    /* Center the separator */
}

/* Responsive hero */

@media screen and (max-width: 1241px) {
    #hero {
        flex-direction: column;
        text-align: center;
        min-width: 0%;
        /* Fix overflow on small screens */
    }

    #hero-right {
        flex: 1 1 100%;
        max-width: none;
    }
}

/************************************************
*                    SECTIONS                   *
************************************************/