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

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

@media only screen and (min-width: 540px) {

    /* header */
    .header__logo       { --logo-width: 16rem; margin: 0; }
    .header__nav        { margin: 0; }

    /* gallery */
    .gallery__ul.count-5 .gallery__li,
    .gallery__ul.count-6 .gallery__li { --itemsPerRow: 3; }

    /* layout */
    .layout__inner      { column-gap: var(--space-4); }
    .layout__col.span-3 { grid-column: span 6; }
    
    /* footer */
    .footer__inner { grid-template-columns: repeat(2, 1fr); }
    .footer__alpha,
    .footer__contact { grid-column: 1 / -1; }
    .copyright  { display: flex; justify-content: space-between; }

    /* dev portal */
    .portal {     grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));    }


    /* image blocks */
    .image-block:not([data-crop=""])[data-orientation="portrait"] {
        grid-template-columns: 1fr 2fr;
    }
    .image-block:not([data-crop=""])[data-orientation="landscape"] {
        grid-template-columns: 2fr 1fr;
    }
    .image-block:not([data-crop=""])[data-orientation="square"] {
        grid-template-columns: 1fr 1fr;
    }

    /* page title */
    .page-title--stacked .page-title__lede {
        max-width: 54ch;
        margin-left: auto;
        margin-right: auto;
        text-wrap: balance;
    }
    .bullets {
        grid-template-columns: repeat(2, 1fr);
    }


}

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

@media only screen and (min-width: 800px) {


    /* posts / articles */
    .post__inner { grid-template-columns: 2fr 1fr; }
    /* gallery */
    .gallery__ul.count-4 .gallery__li { --itemsPerRow: 4; }
    /* layout */
    .layout__inner      { column-gap: var(--space-6); }
    .layout__col        { grid-column: span var(--colSpan); }
    
    .footer-cta__inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* page titles */
    .page-title--default .page-title__inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

   
    .page-title--default .page-title__copy {
        align-self: flex-end;
        padding-top: var(--space-10);
    }
    .page-title--default .page-title__img {
        aspect-ratio: 4/3;
        height: auto;
    }

    /* hero variant */
    .page-title--hero.has-image {
        background: transparent;
    }
    .page-title--hero .page-title__inner {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "stack";
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: calc(var(--space-10) * 3);
    }
    .page-title--hero .page-title__inner > * {
        grid-area: stack;
    }
    .page-title--hero .page-title__copy {
        background-color: var(--primary-light);
        border-radius: var(--radius-xs);
        align-self: center;
        padding: var(--space-8) var(--space-6);
        max-width: 60%;
    }
    .page-title--hero .page-title__img {
        position: absolute;
        left: var(--space-4); right: 0; top: 0; bottom: var(--space-4);
        width: calc(100% - (var(--space-4) * 2));
        height: calc(100% - (var(--space-8)));
        object-fit: cover;
    }
    .bullets {
        grid-template-columns: repeat(1, 1fr);
    }

    /* features */
    .feature.has-img {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature > .img-col {
        aspect-ratio: 1;
    }
    .feature.has-img .text-col {
        padding-block: var(--space-6);
        max-width: 30rem;
    }

    .feature.has-img.is-flipped .img-col {
        grid-row: 1;
        grid-column: 2 / -1;
    }
    .feature.has-img.is-flipped .text-col {
        justify-self: start;
    }

    /* cta */
    .cta--full .text-col {
        width: 50%;
        justify-self: end;
        align-self: end;
    }

    /* footer */
    .footer__inner                      { grid-template-columns: repeat(4, 1fr); }
    .footer__alpha, .footer__contact    { grid-column: 1 / 3; max-width: 24rem; }
    .footer__hr:first-of-type           { display: none; }

    /* HEADER NAVIGATION - hide mobile, show desktop navbar */
    /* IMPORTANT: the min-width media query needs to match the plugins.js file */
    .header__pad {
        /* box-shadow: 0 0 var(--space-8) rgba(0,0,0,0.07); */
    }
    
    .header__inner {
        align-items: center;
        position: relative;
    }
    .header__logo {
        grid-row: 1;
    }
    .header__btn    {
        grid-row: 1;
    }
    .header-menu {
        grid-row: 2;
        grid-column: span 4;
    }


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

    /* show the previously-hidden header navigation */
    #header-menu                        { display: block !important; }

    /* style the header navigation menu */
    #header-menu a                      { display: block; font-size: var(--text-nav); font-weight: 450; padding: var(--space-2); text-align: center; text-decoration: none; transition: all 0.3s ease-in-out; }
    #header-menu a:hover                { background-color: var(--primary-light); }
    #header-menu .has-child:hover > a   { background-color: var(--primary-light); }
    #header-menu .header-menu__ul       { align-items: center; border-top: 1px solid var(--primary-light); display: flex; gap: 0; justify-content: space-between; line-height: 1; list-style: none; margin: 0; padding: var(--space-3) 0 0 0; width: 100%; }

    /* child / drop-down menus */
    
    #header-menu .header-menu__child-ul                 {
        align-items: start;
        background-color: #fff;
        /* outline: var(--space-2) solid var(--primary-light); */
        border-radius: 0;
        box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.3);
        display: none;
        gap: 0;
        left: 0;
        list-style: none;
        margin: 0 auto;
        max-width: var(--max-wide);
        padding: var(--space-2);
        position: absolute;
        top: 100%;
        width: 100%;
        z-index: 999;
    }
    
    
    #header-menu .header-menu__child-ul a               { display: block; line-height: 1.4; padding: var(--space-2); text-align: left; }
    #header-menu .header-menu__child-li                 { height: 100%; }
    #header-menu .header-menu__child-li:last-of-type    { background-color: var(--secondary-light); }
    #header-menu .header-menu__grandchild-ul            { display: block; font-size: var(--text-sm); line-height: 1.2; list-style: none; margin: 0; padding: 0; }


}

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


@media only screen and (min-width: 1100px) {


    /* header navigation */
    #header-menu .has-child                 { position: relative; }
    #header-menu .header-menu__child-ul     { width: 22rem; }

    /* gallery */
    .gallery__ul.count-5 .gallery__li { --itemsPerRow: 5; }
    .gallery__ul.count-6 .gallery__li { --itemsPerRow: 6; }

    /* layout */
    .layout__col.span-3 { grid-column: span 3; }

    /* blocks switch from flex to grid for more options on wider screens */
    .blocks {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }
    .blocks > * {
        grid-column: 1 / -1; /* all blocks are full-width by default */
    }
    .blocks > .narrow-max {
        max-width: var(--max-narrow);
        margin-inline: auto;
    }

    /* related/random faqs */
    .related-faqs .faqs,
    .random-faqs .faqs {
        grid-template-columns: repeat(2, 1fr);
    }
    .bullets {
        grid-template-columns: repeat(2, 1fr);
    }

}

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


@media only screen and (min-width: 1440px) {


    /* features */
    .feature > .img-col {
        aspect-ratio: 5/4;
    }

    .header__inner {
        grid-template-columns: 16rem auto 16rem;
    }

    .header__logo {
        grid-column: span 1;
    }
    .header__btn    {
        grid-row: 1;
        grid-column: span 1;
    }
    .header-menu {
        grid-row: 1;
        grid-column: span 1;
    }
    #header-menu .header-menu__ul {
        border: 0;
        justify-content: center;
        padding: 0;
        gap: var(--space-2);
    }
}

/* -----------------------------------------------------------------------------
* MARK: xx-large (1820px)
*/


@media only screen and (min-width: 1820px) {

    .header__inner {
        grid-template-columns: 18rem auto 18rem;
    }
    .header__logo {
        --logo-width: 18rem;
    }

}