/* ─────────────────────────────────────────────── 
Table of Contents
1. Global Layout Settings
    1.A. Custom Width Measurements & Alignments
    1.B. Auto Layouts
2. Global Page Settings
    2.A. Main Page
    2.B. Navidation
    2.C. Footer
    2.D. Global Section Container
3. Section Settings
    3.A. Project Section
    3.B. Testimonial Section
    3.C. Blog Section
    3.D. Galley Section
    3.E. Newsletter CTA Banner
    3.F. Employment | Info Section
    3.G. Other Client Work Section
4. Custom Component Container
    4.A. Selection Container
5. Responsive Settings
───────────────────────────────────────────────*/


/* ───────────────────────────────────────────────
Global Layout Settings
───────────────────────────────────────────────*/
    /* ───────────────────────────────────────────────
    Custom Width Measurements & Alignments
    ───────────────────────────────────────────────*/
    .page-header-gradient {
        position:   absolute;
        right:      0;
        top:        0;
        width:      50%;
        z-index:    0;
        margin-top: -40px;
    }

    /* ───────────────────────────────────────────────
    Auto Layouts
    ───────────────────────────────────────────────*/
    .h-stack { /*equivalent of Auto Layout*/
        display:     flex;
        align-items: flex-start;
    }

    .v-stack { /*equivalent of Auto Layout*/
        display:        flex;
        flex-direction: column;
    }


/* ───────────────────────────────────────────────
Global Layout Settings
───────────────────────────────────────────────*/    
    /* ───────────────────────────────────────────────
    Main Page: the grid background
    ───────────────────────────────────────────────*/
    .main-page, .grid-bg {
        background-image:  url(../imgs/line\ bg.svg);
        background-repeat: repeat;
    }

    /* ───────────────────────────────────────────────
    Navidation
    ───────────────────────────────────────────────*/
    .nav-container {
        width:           90px;
        display:         inline-flex;
        position:        fixed;
        height:          100vh;
        padding:         var(--space-8) var(--space-4);
        flex-direction:  column;
        justify-content: space-between;
    }

    /* ───────────────────────────────────────────────
    Footer
    ───────────────────────────────────────────────*/
    footer {margin-left: 90px;}

    .end { /*2nd section within footer*/
        background-color: #F8F9FC;
        padding:          10px 5%;
        width:            100%;
        display:          flex;
        justify-content:  space-between;
    }


    /* ───────────────────────────────────────────────
    Global Section Container
    ───────────────────────────────────────────────*/
    .section-container,
    .section-container-mt-0,
    .projects-section,
    .testimonials-container {margin-left: 90px;}

    .section-container {padding: 40px 5% 60px 5%;}

    .section-container-mt-0 {padding: 0px 5% 60px 5%;}


/* ───────────────────────────────────────────────
Section Settings
───────────────────────────────────────────────*/
    /* ───────────────────────────────────────────────
    Project Section
    ───────────────────────────────────────────────*/
    .projects-section {padding-top: 120px;}

    .projects-row { 
        display:    flex;
        width:      100%;
        margin-top: var(--space-5);
    }

    /* ───────────────────────────────────────────────
    Testimonial Section, Container and Wrapper
    ───────────────────────────────────────────────*/
    .testimonials-container {padding: 40px 5% 170px 5%;}

    .testimonials-row {
        display:     flex;
        align-items: stretch;
        gap:         var(--space-5);
        margin-top:  var(--space-5);
    }

    .testimonial-card {
        flex:             1 1 0;
        display:          flex;
        position:         relative;
        z-index:          0;
        background-color: white;
    }

    /* ───────────────────────────────────────────────
    Blog Section
    ───────────────────────────────────────────────*/


    /* ───────────────────────────────────────────────
    Galley Section
    ───────────────────────────────────────────────*/
    .gallery-container {
        display:  flex;
        gap:      var(--space-5);
        position: relative;
        z-index:  1;
    }

    .gallery-wrapper-col-left, 
    .gallery-wrapper-col-right {
        display:        flex;
        flex-direction: column;
        gap:            var(--space-5);
    }

    .gallery-wrapper-col-left {width: 67%;}

    .gallery-wrapper-col-right {width: 33%;}


    /* ───────────────────────────────────────────────
    Newsletter CTA Banner
    ───────────────────────────────────────────────*/
    .newsletter {
        background-color: white;
        border-top:       1px solid #FFA1B7;
    }

    .newsletter-inner {
        display: flex;
        gap:     var(--space-4);
    }

    .newsletter-copy {width: 25%;} /*the left col of the section*/

    .newsletter-form-col {width: 75%;} /*the right col of the section*/

        /* ----- Kit Embed Form ----- */
        .formkit-form[data-uid="2cce5a189f"], 
        .formkit-form[data-uid="e53b34d164"] {
            max-width: none !important; 
            width:     100%;
        }

        .formkit-form[data-uid="2cce5a189f"] [data-style="clean"],
        .formkit-form[data-uid="e53b34d164"] [data-style="clean"] {padding-top: 0 !important;}

        .formkit-form[data-uid="e53b34d164"] .formkit-field {
            flex:  1 1 100% !important;
            width: 100%;
        }

        .formkit-input::placeholder, .form-select:required:invalid {color: #717680 !important;}

    /* ───────────────────────────────────────────────
    Employment | Info Section
    ───────────────────────────────────────────────*/
    .employment-info-section {padding: 160px 5% 160px 5%;}


    /* ───────────────────────────────────────────────
    Other Client Work Section
    ───────────────────────────────────────────────*/
    /*Top padding matches the mockup's 80px. The bottom is dropped because the
    Opening Statement that now closes this section carries its own trailing
    space*/
    .other-client-work-container {
        padding-top: 120px;
        border-top:  1px solid var(--razzmatazz-400);
    }

    .other-client-work-main {
        position:    relative;
        flex:        1 1 0;
        min-width:   0;
        padding-top: 79px;
    }

    /*The heading is pulled out of flow so the card always starts at the same
    offset no matter how tall "Hello Radio" renders -- the script letters are
    meant to cross the card's top-left corner, the way they do in the mockup*/
    .other-client-work-heading {
        position:      absolute;
        top:          -17px;
        left:          0;
        margin-bottom: 0;
    }

    .extended-demo {
        flex:      0 0 376px;
        max-width: 376px;
    }


/* ───────────────────────────────────────────────
Custom Component Container
───────────────────────────────────────────────*/
    /* ───────────────────────────────────────────────
    Selection Container
    ───────────────────────────────────────────────*/
    .selection-container {
    margin:   10px;
    position: relative;
    }

    .selection-content {
        border:   0.5px #8722A9 solid;
        overflow: hidden;
        padding:  24px 32px;
    }

    .selection-content .row {--bs-gutter-x: 0;}

    .selection-content .d-flex {min-width: 0;}

    .selection-content p {
        min-width:     0;
        overflow-wrap: break-word;
    }

    .selector-box-top-left, 
    .selector-box-top-right, 
    .selector-box-bottom-left, 
    .selector-box-bottom-right {position: absolute;}

    .selector-box-top-left, .selector-box-top-right {top: -8px;}

    .selector-box-bottom-left, .selector-box-bottom-right {bottom: -8px;}

    .selector-box-top-left, .selector-box-bottom-left {left: -8px;}

    .selector-box-top-right, .selector-box-bottom-right {right: -8px;}


/* ───────────────────────────────────────────────
Responsive Settings
───────────────────────────────────────────────*/
@media screen and (min-width: 1920px) {
    /* ───────────────────────────────────────────────
    Global Section Container
    ───────────────────────────────────────────────*/
    .section-container {
        padding-left:  15%;
        padding-right: 15%;
    }
}

/*Widescreen*/ /*xxl*/ 
@media screen and (min-width: 1440px) {
    /*insert code*/
}

/*Tablet LG START*/ /*lg*/
@media screen and (max-width: 992px) {
    /* ───────────────────────────────────────────────
    Navidation
    ───────────────────────────────────────────────*/
    .nav-container {
        width:           100vw;
        height:          80px;
        /*relative, not static -- z-index only applies to positioned elements, and
        static here silently disabled nav's z-index:10, letting the absolutely
        positioned .page-header-gradient paint over the nav*/
        position:        relative;
        padding:         16px 4%;
        flex-direction:  row;
        justify-content: space-between;
        align-items:     center;
    }

    .employment-info-section {padding: 40px 5% 160px 5%;}


    /* ───────────────────────────────────────────────
    Footer
    ───────────────────────────────────────────────*/
    footer {margin-left: 0px;}


   /* ───────────────────────────────────────────────
    Global Section Container
    ───────────────────────────────────────────────*/

    .section-container {
        margin-left:   0px;
        padding-left:  4%;
        padding-right: 4%;
    }

    .section-container-mt-0 {
        margin-left: 0px;
        padding:     0px 4% 60px 4%;
    }


    /* ───────────────────────────────────────────────
    Project Section
    ───────────────────────────────────────────────*/
    .projects-section {margin-left: 0px;}

    .projects-row {flex-direction: column;}


    /* ───────────────────────────────────────────────
    Other Client Work Section
    ───────────────────────────────────────────────*/
    /*Card and demo stack from here down -- the same breakpoint the rest of the
    page's two-up rows collapse at*/
    .other-client-work-row {
        flex-direction: column;
        gap:            52px;
    }

    .other-client-work-main {
        flex:        0 0 auto;
        width:       100%;
        padding-top: 68px;
    }

    .other-client-work-heading {top: -19px;}

    .extended-demo {
        flex:      0 0 auto;
        width:     100%;
        max-width: none;
    }


    /* ───────────────────────────────────────────────
    Testimonial Section, Container and Wrapper
    ───────────────────────────────────────────────*/
    .testimonials-container {
        margin-left:   0px;
        width:         auto;
        padding-left:  4%;
        padding-right: 4%;
    }

    .testimonials-row {flex-direction: column;}

    /* ───────────────────────────────────────────────
    Galley Section
    ───────────────────────────────────────────────*/
    .gallery-container {gap: 12px;}


    /* ───────────────────────────────────────────────
    Newsletter CTA Banner
    ───────────────────────────────────────────────*/
    .newsletter-copy {width: 40%;}

    .newsletter-form-col {width: 60%;}
}

/*Tablet*/ /*md*/
@media screen and (max-width: 768px) {
    /* ───────────────────────────────────────────────
    Custom Width Measurements
    ───────────────────────────────────────────────*/


    /* ───────────────────────────────────────────────
    Galley Section
    ───────────────────────────────────────────────*/
    /*Bootstrap's gap-lg-4 / gap-md-3 on the pair rows are min-width rules, so the
    gap between paired images collapses to 0 from 568px down. Restore it to match
    the column gap. Inert at <=567px, where the row becomes display:contents*/
    .gallery-wrapper-col-left > .d-flex {gap: var(--space-3);}


    /* ───────────────────────────────────────────────
    Newsletter CTA Banner
    ───────────────────────────────────────────────*/
    /* ----- Kit Embed Form ----- */
    .formkit-form[data-uid="2cce5a189f"] .formkit-field {
        flex:  1 1 100% !important;
        width: 100%;
    }
}

/*Mobile*/ /*sm*/
@media screen and (max-width: 567px) {
    /* ───────────────────────────────────────────────
    Navidation
    ───────────────────────────────────────────────*/
    .nav-container {
        padding:  16px 8%;
        position: relative;
        z-index:  4;
    }


    /* ───────────────────────────────────────────────
    Footer
    ───────────────────────────────────────────────*/
    .end {
        flex-direction: column;
        align-items:    center;
    }

    
    /* ───────────────────────────────────────────────
    Global Section Container
    ───────────────────────────────────────────────*/
    .section-container {
        margin-left:   0px;
        padding-left:  8%;
        padding-right: 8%;
    }

    /* ───────────────────────────────────────────────
    Galley Section
    ───────────────────────────────────────────────*/
    /*Both columns collapse into one 2-up grid -- the column and row wrappers
    dissolve with display:contents so every image cell becomes a direct grid item*/
    .gallery-container {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        gap:                   var(--space-3);
        width:                 100%;
    }

    .gallery-wrapper-col-left, 
    .gallery-wrapper-col-right {display: contents;}

    /*!important beats Bootstrap's own .d-flex {display:flex !important}*/
    .gallery-wrapper-col-left > .d-flex {display: contents !important;}

    /*!important beats Bootstrap's own .w-50 {width:50% !important}*/
    .gallery-wrapper-col-left .w-50 {width: 100% !important;}

    /*!important is needed to beat the per-image inline aspect-ratio in the markup*/
    .gallery-container .gallery-img {aspect-ratio: 1 / 1 !important;}

    /*A lone image in the left column spans both columns and keeps its own shape*/
    .gallery-wrapper-col-left > div:not([class]) {grid-column: 1 / -1;}

    .gallery-wrapper-col-left > div:not([class]) .gallery-img {aspect-ratio: auto !important;}


    /* ───────────────────────────────────────────────
    Newsletter CTA Banner
    ───────────────────────────────────────────────*/
    .newsletter-inner {
        display:        flex;
        flex-direction: column;
    }

    .newsletter-copy, .newsletter-form-col {width: 100%;}

        /* ----- Kit Embed Form ----- */
        .formkit-form[data-uid="2cce5a189f"] [data-style="clean"] {padding: 0 !important;}
}