/*
 * Contact Banner
 * Layout: template-parts/flex/contact_banner.php
 * Auto-enqueued by functions.php after css/theme.css.
 */

.contact-banner {
    --section-pad: var(--space-3xl);
    --motif-size: 50rem;
    padding-block: calc(var(--section-pad) + var(--section-offset, 0px)) var(--section-pad);
    position: relative;
    color: var(--color-background);
    background-color: var(--color-primary);
    /* The motif bleeds past the right edge; clip it so it never causes horizontal scroll. */
    overflow: clip;
}

/* Background motif: hugs the right edge, vertically centred, so its lower petals run off the bottom of the band. */
.contact-banner::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: var(--motif-size);
    height: var(--motif-size);
    translate: 0 -50%;
    background: url('../../assets/graphics/motif-lg-dark.svg') center / contain no-repeat;
    pointer-events: none;
}

.contact-banner > .container {
    position: relative;
}

.contact-banner__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3xl);
}

.contact-banner__content {
    max-width: 36rem;
}

.contact-banner__heading {
    margin: 0 0 var(--space-sm);
    color: inherit;
}

.contact-banner__text {
    font-size: var(--text-1);
    font-weight: var(--font-light);
    line-height: 1.5;
}

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

.contact-banner__action {
    flex-shrink: 0;
}

/* Secondary-green fill on the primary band; lifts to the contrast tint on hover. */
.contact-banner__button {
    color: var(--color-background);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.contact-banner__button:hover,
.contact-banner__button:focus-visible {
    color: var(--color-primary);
    background-color: var(--color-contrast);
    border-color: var(--color-contrast);
}

.contact-banner__arrow {
    display: inline-block;
    margin-left: var(--space-3xs);
    transition: translate 0.3s ease-in-out;
}

.contact-banner__button:hover .contact-banner__arrow {
    translate: var(--space-3xs) 0;
}

@media screen and (max-width: 768px) {

    .contact-banner {
        --motif-size: 30rem;
    }

    .contact-banner::before {
        right: -25%;
    }

    .contact-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-lg);
    }

}