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

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

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

    /* header */
    .header__logo       { 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(24rem, 1fr));    }

    /* page titles */
    .page-title__inner {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 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;
    }


}

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

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

    /* header */
    .header__inner      { align-items: center; display: flex; justify-content: space-between; }
    .header__logo-nav   { justify-content: start; margin-bottom: 0; }

    /* gallery */
    .gallery__ul.count-4 .gallery__li { --itemsPerRow: 4; }
    
    /* layout */
    .layout__inner      { column-gap: var(--space-6); }
    .layout__col        { grid-column: span var(--colSpan); }
    
    /* page titles */
    .page-title--hero .page-title__inner {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "stack";
        padding-bottom: calc(var(--space-8) * 2);
        padding-top: calc(var(--space-8) * 2);
    }
    .page-title--hero .page-title__inner > * {
        grid-area: stack;
    }
    .page-title--hero .page-title__copy {
        background-color: var(--white);
        /* border-radius: var(--radius-lg); */
        align-self: center;
        padding: var(--space-9) var(--space-7);
        max-width: 50%;
    }
    .page-title--hero .page-title__img {
        aspect-ratio: auto;
        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-4)));
        object-fit: cover;
        /* border-radius: var(--radius-lg); */
    }

    /* post pages */
    .post-sidebar   {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--space-4)
    }
    .post-sidebar--nav {
        grid-column: 1 / 7;
    }
    .post-sidebar--staff {
        grid-column: 7 / -1;
    }
    /* 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; }

    /* footer cta */
    .footer-cta__inner { flex-wrap: nowrap;  }
    .footer-cta__copy  { width: 75%;  }
    .footer-cta__btn   { width: 25%; }
    .footer-cta__btn .btn { display: block; text-align: center; }

    /* HEADER NAVIGATION - hide mobile, show desktop navbar */
    /* IMPORTANT: the min-width media query needs to match the plugins.js file */

    .header__inner { position: relative; }

    /* 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; padding: var(--space-2) var(--space-3); 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; display: flex; gap: 0; justify-content: start; line-height: 1; list-style: none; margin: 0; padding: 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: var(--space-3); grid-template-columns: repeat(3, 1fr); left: 0; list-style: none; margin: 0 auto; max-width: var(--max-wide); padding: var(--space-3); position: absolute; right: 0; top: 100%; width: 100%; z-index: 999; }
    #header-menu .header-menu__child-ul a               { display: block; padding: var(--space-1); text-align: left; }

    #header-menu .header-menu__child-li                 { height: 100%; }
    #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 */
    .header__logo-nav   { gap: var(--space-6); }
    .header__logo       { --logo-width: 16rem; }

    /* 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; }

    
    /* page title */
    .page-title--default .page-title__img {
        aspect-ratio: 1/1.1;
        max-height: 75vh;
    }

    /* 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 */
    .faqs-col.omega .faqs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }


    /* sidebar */
    .post-sidebar--cta {
        text-align: center;
    }

    .post-sidebar--nav {
        grid-column: 1 / 5;
    }
    .post-sidebar--staff {
        grid-column: 5 / -1;
    }
    .post-sidebar--staff img {
        aspect-ratio: 5/6;
        object-position: center top;
    }

}

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


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


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


}

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


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

}