/**
 * Trillium Salon - full-bleed content bands.
 *
 * bottom-b is the old Gantry #g-below-1: an accent-coloured band with a wave
 * running along its top edge. This applies to any module in bottom-b, on any
 * page, so the band is a property of the position rather than of one module.
 */

/**
 * bottom-a runs its modules in two balanced columns, the way the old layout
 * split them across a pair of half-width blocks. CSS columns rather than a
 * grid so the browser balances the heights - the service lists vary from
 * three rows to twenty-two.
 */
.container-bottom-a {
    display: block;
    column-count: 2;
    column-gap: 3rem;
}

.container-bottom-a > * {
    break-inside: avoid;
}

/* module titles in this band; the module itself carries the scroll offset */
.container-bottom-a h3 {
    margin: 0 0 20px;
    font-size: 1.5rem;
}

.container-bottom-a .moduletable + .moduletable {
    margin-top: 2.5rem;
}

@media (max-width: 767.98px) {
    .container-bottom-a {
        column-count: 1;
    }
}
.container-bottom-a {
    position: relative;
    padding-block: 3rem;
}
.container-bottom-b {
    position: relative;
    margin-top: 180px;
    padding-block: 3rem;
    background-color: var(--trillium-accent);
}

/**
 * .grid-child is a flex container by default; these bands stack normally.
 * Cassiopeia's `.container-bottom-b > * { margin: .5em 0 }` was written for
 * module cards sitting directly in the position, and would otherwise cancel
 * the wrapper's auto-centring.
 */
.container-bottom-b > .grid-child {
    display: block;
    margin-block: 0;
    margin-inline: auto;
    /* padding is inside the cap, so content still measures the full content
       width at desktop while narrow viewports keep a gutter instead of
       running edge to edge */
    max-width: calc(var(--trillium-content-width) + 2rem);
    padding-inline: 1rem;
}

/**
 * The wave overhangs upward into whatever sits above the band.
 *
 * Gantry stretched this element to 200% width and pulled it left by 50% so the
 * crests came out long and shallow, which left the page 2x wider than the
 * viewport and relied on an ancestor clipping the overflow. Scaling the mask to
 * 200% instead gives the identical visible crop with no overflow to clip.
 */
.container-bottom-b::before {
    content: "";
    position: absolute;
    top: -88px;
    right: 0;
    left: 0;
    height: 90px;
    background-color: var(--trillium-accent);
    -webkit-mask: url("../../../../../images/elements/waves.svg") no-repeat center / 200% 100%;
    mask: url("../../../../../images/elements/waves.svg") no-repeat center / 200% 100%;
    transform: rotate(180deg);
    pointer-events: none;
}

.container-bottom-b h3 {
    margin-block: 0 1em;
    font-size: 1.9rem;
    color: #000;
}

/* article/product tiles sit as white cards on the band */
.container-bottom-b .mod-articles-items > li {
    display: grid;
    place-content: center;
    background-color: #fff;
}

/* breathing room around a logo sitting on its white card */
.container-bottom-b .mod-articles-image {
    margin: 1rem 2.5rem .5rem;
}

/* the band's own padding sets the bottom gap, not the module's trailing margin */
.container-bottom-b .moduletable > :last-child {
    margin-bottom: 0;
}