/* -------------------------------------------------------------------------- */
/* RTB-RESP.CSS (c) richardthebrave.com ------------------------------------- */

/* -----------------------------------------------------------------------------
* MARK: XS (576px)
*/

@media only screen and (min-width: 36rem) {

    .site-cta > .inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .site-footer > .inner {
        grid-template-areas: 
            "blurb blurb"
            "navLeft navRight"
            "contact contact"
        ;
    }

    .page-title .image {
        aspect-ratio: 5/4;
    }

}

/* -----------------------------------------------------------------------------
* MARK: SM (768px)
*/

@media only screen and (min-width: 48rem) {


    .site-footer > .inner {
        grid-template-columns: 1fr 2fr 1fr;
    }
    .site-footer > .inner {
        grid-template-areas: 
            "blurb blurb blurb"
            "navLeft navRight contact"
        ;
    }
    .site-footer .blurb .about {
        max-width: 21rem;
    }


}

/* -----------------------------------------------------------------------------
* MARK: MD (960px)
*/

@media only screen and (min-width: 60rem) {



    .page-title.has-image {
        --overlap: 7rem;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .page-title.no-image {
        text-align: center;
    }
    .page-title .illustration {
        margin-inline: auto;
    }
    .page-title.no-image .copy {
        margin-inline: auto;
        max-width: var(--max-content);
    }
    .page-title.no-image .btns {
        justify-content: center;
    }

    .page-title.has-image .copy {
        align-content: center;
        grid-column: 1 / 4;
        grid-row: 1 / -1;
        min-height: calc( 100svh - var(--overlap) );
    }
    .page-title.has-image .image {
        width: 75%;
        height: calc(100% + var(--overlap));
        position: absolute;
        top: calc(-1 * var(--overlap));
        bottom: 0;
        right: 0;
    }
    .page-title.has-image::after {
        --solid-percentage: 50%;
        content: '';
        background: linear-gradient(100deg, var(--site-bg) var(--solid-percentage), rgba(255,255,255,0) 100%);
        position: absolute;
        left: 0; right: 0; bottom: 0;
        top: calc(-1 * var(--overlap));
    }

}

/* -----------------------------------------------------------------------------
* MARK: LG (1152px)
*/

@media only screen and (min-width: 72rem) {

    .columns {
        grid-template-columns: repeat(12, 1fr);
    }
    .columns .column {
        grid-column: span var(--span);
    }
    .row.flipped .columns > :first-child {
        order: unset;
    }

    .site-header .logo {
        max-width: 16rem;
    }
    .rtbform .two-fields {
        grid-template-columns: repeat(2, 1fr);
    }


}

/* -----------------------------------------------------------------------------
* MARK: XL (1344px)
*/

@media only screen and (min-width: 84rem) {

    .page-title.has-image .copy {
        grid-column: 1 / 3;
    }
    .page-title.has-image::after {
        --solid-percentage: 33%;
    }
    .site-nav > .menu {
        column-gap: var(--space-lg);
    }
    .site-footer {
        font-size: var(--text-xs);
    }
    .site-footer > .inner {
        grid-template-columns: 2fr 1fr 2fr 1fr;
    }
    .site-footer > .inner {
        grid-template-areas: 
            "blurb navLeft navRight contact"
        ;
    }
}

/* -----------------------------------------------------------------------------
* MARK: 2XL (1536px)
*/

@media only screen and (min-width: 96rem) {

    .site-cta .copy {
        grid-column: span 1;
    }
    .site-nav > .menu {
        column-gap: var(--space-xl);
    }


}