/* ###################################

GRID AND STRUCTURE CSS

//Table of Contents//

    Debug code for testing elements

    Main document Styles
        Background Image
    Flexbox style for browsers that don't support grid 
    Grid styles
        core components
            global
            about page
            projects page
        sub components
            about image
            projects page image grids
    
    Mobile styles
        mobile layout

 //Website by Ziggy Lever for Monique Redmond, 2021// 
 
 //co-text.info//

###################################### */


/* ###################################

//Debug code for testing elements//

* {
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;
} 

###################################### */


/*  ############
    main document styles
    ############  */


/* background image */

.background {
    min-height: 110vh;
    min-width: 110vw;
    justify-content: center;
    object-fit: cover;
    margin: -30px;
    padding: -30px;
    overflow: hidden;
    position: fixed;
    z-index: 1;
}

#home {
    content: url(https://payload.cargocollective.com/1/23/739584/13942312/IMG_1276_1000.jpg);
}


/*  ############
    Flexbox style for 
    browsers that 
    don't support grid 
    ############  */

.menu {
    flex: 0 0 auto;
}

.p-title {
    flex: 0 0 auto;
}

.project-links {
    margin-left: 20%;
}


/*  ############
    Grid Styles 
    ############  */


/*  ############
    core components 
    ############  */


/* global */

@supports (display:grid) {
    .grid {
        display: grid;
        grid-template-columns: 190px auto 1fr 1fr;
        grid-gap: 1rem 3rem;
        padding: 1%;
    }
    .menu {
        grid-column: 1 / 2;
        grid-row: 1 / 6;
        z-index: 99;
        flex: 0;
        position: fixed;
    }
    .content {
        grid-column: 2 / 4;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .projects {
        grid-column: 2 / 5;
    }
    /* about page */
    .about {
        grid-column: 2 / 4;
    }
    /* projects page */
    .p-title {
        grid-column: 2 / 3;
        grid-row: span 2;
        justify-self: end;
        align-self: start;
        flex: 0;
    }
    .worklist {
        grid-row: span 2;
    }
    .project-links {
        grid-column: 3 / 4;
        justify-self: start;
        align-self: start;
        margin-left: 0;
        flex: 0;
    }
    .row-h {
        grid-column: 3 / 5;
        display: flex;
        padding: 0;
        min-height: 75vh;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .text {
        min-width: 40vw;
    }
    .col {
        display: block;
        padding: 0 4% 0 0;
        flex: 0 1 auto;
        height: 65vh;
        position: relative;
        width: auto;
    }
    .col img {
        max-height: 68vh;
    }
    /*  ############
    sub components 
    ############  */
    /* about image */
    .about-image {
        grid-column: 2/ 4;
    }
    .about-image img {
        max-width: 600px;
    }
    /* projects page image grids */
    /* note: H-scroll project grid IDs (all grids are 2 rows high) */
    .row-grid {
        display: grid;
        grid-gap: 1em;
    }
    .row-grid img {
        max-height: 33vh;
        align-self: stretch;
        justify-self: stretch;
    }
    #grid-2-2 {
        grid-template-columns: 1fr 1fr;
    }
    #grid-3-2 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    /*  ############
    MOBILE Styles 
    ############  */
    @media screen and (max-width: 786px) {
        /*  ############
    mobile layout
    ############  */
        .grid {
            display: grid;
            grid-template-columns: 3rem 3rem 1fr;
            grid-template-rows: 3rem repeat(auto);
            grid-gap: 1rem;
            padding: 10px;
        }
        .menu {
            position: fixed;
        }
        .content {
            grid-column: 2 / 4;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .p-title {
            grid-column: 2 / 4;
            justify-self: start;
        }
        .description {
            grid-column: 2 / 4;
        }
        .worklist {
            grid-row: span 1;
            grid-column: 2 / 4;
        }
        .projects {
            grid-column: 2/ 4;
        }
        .project-links {
            grid-column: 2 / 4;
            margin-bottom: 7em;
        }
        .text {
            padding-left: 3rem;
            height: auto;
        }
        .row-h {
            flex-wrap: wrap;
            overflow-x: hidden;
            overflow-y: auto;
            /* align-items: unset; */
            /* height: fit-content; */
            grid-column: 2 / 4;
        }
        .col {
            height: auto;
            padding: 1rem 0;
        }
        .col img {
            max-width: 100%;
            max-height: 100%;
        }
        .about-image img {
            max-width: 100%;
        }
        /*  ############
        mobile typography
        ############  */
        h2 {
            writing-mode: horizontal-tb;
            transform: rotate(0deg);
            text-align: left;
        }
    }
}