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

/* -----------------------------------------------------------------------------
* MARK: small (540px)
*/

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


    .masthead {
        grid-template-areas:
        "logo courtesy nav"
        ;
        gap: var(--space-xs);
        grid-template-columns: min-content auto min-content;
    }
    .masthead .logo {
        justify-self: start;
        margin-right: auto;
        width: 14rem;
    }

    .masthead .courtesy {
        border: 0;
        gap: 2px;
        grid-template-columns: 1fr;
        justify-self: end;
        justify-items: end;
        margin: 0;
        padding: 0;
    }
    .courtesy a {
        width: auto;

    }
    .courtesy svg {
        display: block;
    }
    .contact-info > ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-cols {
        grid-template-columns: 3fr 2fr;
        grid-template-areas: 
        "contact nav1"
        "nav2 nav3"
        "meta meta"
        "fine fine"
        ;
    }

    .cta-block img {
        margin-left: -55%;
        margin-top: -55%;
        width: 110%;
    }

    .header-block.split {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .footer-col-meta {
        grid-template-columns: 3fr 2fr;
    }

    .cta-block {
        padding: var(--space-xxl) var(--space-xl);
    }
    .basic-paging-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-col-fineprint {
        grid-template-columns: 1fr 1.5fr;
    }
    .footer-col-fineprint :nth-child(even) {
        text-align: right;
    }
    
}

/* -----------------------------------------------------------------------------
* MARK: medium (800px)
*/

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

    .portal.portal-type-programs {
        --auto-grid-max-columns: 3;
    }

    .page-title .image .img {
        aspect-ratio: 2/1;
    }
    .columns {
        grid-template-columns: repeat(12, 1fr);
    }
    .column {
        grid-column: span var(--span);
    }
    .row.zig-zag .columns > :first-child {
        order: 1;
    }
    .footer-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-col-meta {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-col-social {
        justify-self: flex-end;
    }
    .columns {
        column-gap: var(--space-lg);
    }
    .cta-block {
        text-align: left;
    }
    .cta-block .cta-copy .text {
        margin-inline: 0;
    }
    .cta-block img {
        width: 60%;
        right: -10%; top: 50%; left: auto;
        margin-top: -30%;
        opacity: 0.2;
    }
    .cta-block .btns {
        justify-content: start;
    }
    .cta-block .btns > :first-child {
        display: inline-block;
        margin: 0;
        width: auto;
    }
    .contact-info > ul {
        grid-template-columns: repeat(4, 1fr);
    }
    .mailchimp {
        grid-template-columns: repeat(2, 1fr);
    }
    .mailchimp .intro {
        text-align: left;
    }
    .callout {
        padding: var(--space-md);
    }
    .bio .portrait .image-block .image {
        max-width: none;
        margin-inline: 0;
    }
    .portal.portal-type-blog > .item {
        min-height: 16rem;
    }
    .footer-col-fineprint {
        grid-template-columns: 1.5fr 1fr;
    }
    .footer-col-fineprint :nth-child(2) {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        text-align: left;
    }
    .footer-col-fineprint :nth-child(3) {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        text-align: right;
    }
}

/* -----------------------------------------------------------------------------
* MARK: large (1100px)
*/

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

    
    .page-title .split {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    .page-title .split .image {
        background-color: transparent;
        padding: var(--space-md) var(--gutter) var(--space-md) 0;
    }
    .page-title .split .img {
        aspect-ratio: 3/2;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
    }
    .page-title .split::after {
        left: calc(var(--thickness) * -0.5);
        top: var(--space-xl);
        bottom: var(--space-xl);
        right: auto;
        height: auto;
        width: var(--thickness);
    }
    .page-title .split .video {
        padding: var(--space-md) var(--gutter) var(--space-md) 0;
    }

    .portal.portal-type-blog {
        --auto-grid-max-columns: 4;
    }
    .portal.portal-type-blog > .item {
        min-height: 24rem;
    }
    .portal.portal-type-blog > .item .img {
        aspect-ratio: 3/4;
    }

    .cta-block {
        padding: var(--space-xxl);
    }
    .footer-cols {
        grid-template-columns: 1.5fr auto auto auto;
        grid-template-areas: 
        "contact nav1 nav2 nav3"
        "meta meta meta meta"
        "fine fine fine fine"
        ;
        column-gap: var(--space-xxl);
    }

    .footer-contact > li {
        align-items: center;
        gap: var(--space-xs);
        flex-direction: row;
    }
    .footer-contact-label {
        min-width: 5rem;
        padding-top: 1px;
    }
    .masthead {
        grid-template-columns: auto;
        grid-template-areas:
            "logo courtesy"
            "logo nav"
        ;
        padding: var(--space-sm) var(--gutter);
    }
    .masthead .courtesy {
        display: flex;
        gap: var(--space-xs);
        justify-content: end;
        margin-bottom: var(--space-xs);
    }
    .masthead .courtesy a {
        padding-inline: var(--space-xs);
    }
    .masthead .courtesy .lms-link {
        display: flex;
    }
    .masthead .logo {
        display: flex;
        align-items: center;
        height: 100%;
        width: 15rem;
    }

    /* ensure the cloned menu stays hidden */
    #mm-clone-header-menu   { display: none !important; }
    #mobile-nav-toggle     { display: none !important; }

    /* show the previously-hidden header navigation */
    #header-menu                        {
        align-content: center;
        display: block !important;
        font-size: var(--text-sm); 
        grid-area: nav;
        height: 100%;
    }
    #header-menu .header-menu__ul       { align-items: center; display: flex; justify-content: end; list-style: none; margin: 0; padding: 0; height: 100%; width: 100%; }
    #header-menu .header-menu__li       { height: 100%; }

    /* style the header navigation menu */
    #header-menu a                      { align-content: center; border-radius: var(--radius-xs); color: var(--neutral); display: block; font-weight: 700;  height: 100%; outline: 1px solid transparent; padding: var(--space-xs) var(--space-sm); text-decoration: none; transition: all 0.2s ease-in-out; white-space: nowrap; }
    #header-menu a:hover                { background-color: var(--white); outline-color: var(--accent-light);  }
    
    #header-menu .header-btn            { margin-left: var(--space-sm); }
    #header-menu .header-btn a          { background-color: var(--primary); border-radius: var(--radius-xl); color: white; font-weight: 800; text-align: center; }
    #header-menu .header-btn a:hover    { background-color: var(--primary-dark); }
    
    #header-menu .has-child             { position: relative; }
    /* #header-menu .has-child > a         { padding-right: var(--space-lg); } */
    #header-menu .has-child:hover > a   { background-color: var(--white); outline-color: var(--accent-light); }


    /* #header-menu .header-menu__dropdown-icon {
        display: block !important; 
        position: absolute;
        right: 0.25rem;
        top: 50%;
        margin-top: -1rem;
        width: 2rem;
    } */

    /* child / drop-down menus */
    #header-menu .header-menu__child-ul                 {
        background-color: white;
        outline: 1px solid var(--accent-light);
        border-radius: var(--radius-xs); 
        box-shadow: var(--shadow-md);
        display: none;
        left: 0;
        list-style: none;
        margin: 0 0 0 0;
        overflow: hidden;
        padding: var(--space-xs);
        position: absolute;
        text-align: left;
        top: 100%;
        width: auto;
        width: 100%;
        min-width: 17rem;
        z-index: 999;
    }
    #header-menu .header-menu__child-ul a               { align-items: center; background: white; color: var(--neutral); display: grid; padding: var(--space-xs) var(--space-sm); position: relative; white-space: wrap; }
    #header-menu .header-menu__child-ul a.has-icon      { grid-template-columns: 2rem auto; padding: var(--space-xs);  }
    #header-menu .header-menu__child-ul a .desc         { display: block; font-size: 80%; font-weight: 400; }
    #header-menu .header-menu__child-ul a .icon         { stroke: var(--accent); }
    #header-menu .header-menu__child-ul a:hover         { background-color: var(--primary-light); outline-color: var(--primary-light); z-index: 2; }
    #header-menu .header-menu__child-ul a:hover .icon   { stroke: var(--primary)  }


}

/* -----------------------------------------------------------------------------
* MARK: x-large (1440px)
*/

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

    .columns {
        column-gap: var(--space-xl);
    }

    .masthead .logo {
        width: 16rem;
    }

    #header-menu a { font-weight: 600; }
    .header-menu__a { font-size: var(--text-base); }


}