/**
 * Trillium Salon - hero / banner.
 *
 * Rebuilds the old Gantry #g-header section on the Cassiopeia banner position:
 *
 *   .container-banner              -> the full-bleed hero section
 *     .moduletable.heroCard        -> centred text card, capped at 800px
 *       h1                         -> module title, flanked by two rules
 *       .mod-custom
 *         picture.heroImage        -> the background, as a real responsive image
 *         .heroContent             -> body copy
 *         .heroDecor > .newClients -> bottom-right call to action
 *     ::after                      -> the wave, masked from images/elements/waves.svg
 *
 * Gantry painted the background with `background-image`, which cannot carry a
 * srcset. It is an <img> here so the browser can pick a width and prefer WebP.
 */

.container-banner {
    position: relative;
    z-index: 1;
    display: grid;
    place-content: center;
    min-height: 75vh;
    /* the h1's flanking rules and the cover image both overhang deliberately */
    overflow: hidden;
    color: #fff;
}

/**
 * Both the module wrapper and the mod_custom body are positioned by default,
 * and either one would capture the absolutely positioned image and decor
 * strip below. They need .container-banner to stay their containing block.
 */
.container-banner :is(.moduletable, .mod-custom) {
    position: static;
}

/* ----------------------------------------------------------- background */

/**
 * Negative z-index rather than a stacking context on the card: .heroCard is
 * the .moduletable, which has to stay unpositioned so the image resolves
 * against .container-banner. The banner's own z-index keeps this contained.
 */
.heroImage {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
}

.heroImage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------- the card */

.heroCard {
    max-width: 800px;
}

.container-banner .heroCard h1 {
    position: relative;
    width: fit-content;
    margin: 0 auto 1em;
    /* Cassiopeia's h1 is 2.5rem; the old hero ran a step smaller */
    font-size: 2.25rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-align: center;
}

.container-banner .heroCard h1::before,
.container-banner .heroCard h1::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 230px;
    height: 2px;
    background-color: #fff;
    transform: translateY(-50%);
}

.container-banner .heroCard h1::before {
    left: -270px;
}

.container-banner .heroCard h1::after {
    right: -270px;
}

.heroCard p {
    font-size: 1.3rem;
    line-height: 1.5;
    text-align: center;
    text-shadow: 1px 0 6px rgb(0 0 0 / 90%);
}

/* the card is a grid item, so a trailing margin can't collapse out of it */
.heroContent > :last-child {
    margin-bottom: 0;
}

.container-banner .heroCard a {
    color: #fff;
}

.container-banner .heroCard a:hover,
.container-banner .heroCard a:focus {
    text-decoration-color: var(--trillium-accent);
}

/* --------------------------------------------------------- decor strip */

.heroDecor {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 90px;
    left: 0;
}

.container-banner .newClients {
    float: right;
    display: block;
    width: fit-content;
    margin-right: 2vw;
    margin-bottom: 2rem;
    padding: 3px 10px;
    color: #fff;
    line-height: 2;
    border: 1px solid #fff;
    text-decoration: none;
    transition: all .3s;
}

.container-banner .newClients:hover,
.container-banner .newClients:focus {
    color: var(--trillium-dark);
    background: var(--trillium-accent);
    border-color: var(--trillium-dark);
}

/* ------------------------------------------------------------- the wave */

/**
 * waves.svg carries no fill of its own, so it is used as a mask and painted
 * white here. Rotated to sit crest-up against the photo, as it did in Gantry.
 */
.container-banner::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 90px;
    background-color: #fff;
    -webkit-mask: url("../../../../../images/elements/waves.svg") no-repeat center / 100% 100%;
    mask: url("../../../../../images/elements/waves.svg") no-repeat center / 100% 100%;
    transform: rotate(180deg);
    pointer-events: none;
}

/* ---------------------------------------------------------- breakpoints */

@media (max-width: 800px) {
    .heroContent {
        padding-inline: 4vw;
    }

    .container-banner .newClients {
        float: none;
        margin-inline: auto;
    }
}

@media (max-width: 767.98px) {
    .container-banner {
        min-height: 80vh;
    }

    /* lifts the copy clear of the wave, as the old layout did */
    .heroCard {
        margin-top: -3rem;
    }

    .container-banner .newClients {
        display: none;
    }
}

@media (max-width: 500px) {
    .container-banner {
        min-height: 60vh;
    }

    .container-banner .heroCard h1 {
        font-size: 1.5rem;
    }

    .heroCard p {
        font-size: 1rem;
    }
}