@import url('assets/styles/reset.css');
@import url('assets/styles/vars.css');
@import url('assets/styles/type.css');
@import url('assets/styles/img.css');

/* Components */
@import url('assets/styles/header.css');
@import url('assets/styles/heading.css');
@import url('assets/styles/nav.css');
@import url('assets/styles/footer.css');
@import url('assets/styles/branded.css');

body {
    font-family: 'Roboto','Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;  
    font-size: 100%;
    
}

@keyframes fadein {
    from {  transform: translateY(144px); opacity: 0;  }    
      to {  transform: translateY(0);     opacity: 1;  }
    
}

@keyframes fadeout {    
    from {   opacity: 1; transform: initial;  }
      to {   opacity: 0; transform: initial; }   
    
}



a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.pb { padding-bottom:calc(var(--base-spacing)*4) ;}
.pt { padding-top: calc(var(--base-spacing)*4);}
.pr { padding-right: calc(var(--base-spacing)*4);}
.pl { padding-left: calc(var(--base-spacing)*4);}

.mb { margin-bottom: var(--base-spacing);}
.mt { margin-top: var(--base-spacing);}
.mr { margin-right: var(--base-spacing);}
.ml { margin-left: var(--base-spacing);}

.order-2 { order: -2;}

.screen-hide {position: absolute; text-indent: -9999px;}

main {
    padding: calc(var(--base-spacing)*1);
    padding-top: calc(var(--base-spacing)*6);
    animation: fadein .7s ease-in-out  1; 
}

main.fade-out {
    
    animation: fadeout .7s ease-in-out  1 forwards; 
}


main section .content { 
    display: flex;
    flex-direction: column;
    justify-content: center;  
}  

section { padding: calc(var(--base-spacing)*1) 0;}

.grid {
    display: grid;
    gap: calc(var(--base-spacing)*1);
}
.grid.random.col-2-3-4 {
    grid-template-columns: repeat(2, 1fr);
}
.grid.random.col-1-2-4 {
    grid-template-columns: repeat(1, 1fr);
}
.grid.random.col-3 {
    grid-template-columns: repeat(1, 1fr);
}




/* Section Layouts wider than mobile screens */

@media screen and (min-width: 960px) {
    
    body {
        display: flex; 
        min-height: 100%;        
    }
    

    main {
        min-height:max-content;
        min-width: 0;
        padding: calc(var(--base-spacing)*4);

    }
    main section  {
        /* display: flex;
        gap: calc(var(--base-spacing)*4); 
        padding: calc(var(--base-spacing)*4) 0;  */
            
    }
    main section:nth-child(odd)     { flex-direction: row-reverse;}
    main section.row:nth-child(odd) { flex-direction: row;}
    

    main section .content { 
         /* max-width: calc(var(--base-spacing)*45); */
         margin-bottom: calc(var(--base-spacing)*2) ;  
    }    

    main section .content.max-100 { max-width:none;}
    main section .content.max-50 { max-width:50%;}

    section .img-container {    min-width: 45%;   }
    section .grid .img-container    {min-width: 45%; max-width: none;   }
    
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--base-spacing)*2);
    }

    

    .grid.random {
        
        max-width: 100%;        
        margin: var(--base-spacing) auto;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        grid-auto-rows: 1fr;
        grid-auto-flow:  row ;
        grid-gap: var(--base-spacing);
        
    }

    .grid.random.col-2{
        grid-template-columns: repeat(2, 1fr);

    }

    .grid.random.col-3,
    .grid.random.col-2-3-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid.random.col-1-2-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid.random .tall {
        grid-column: span 1;
        grid-row: span 2;
      }
      
    .grid.random .wide {
    grid-row: span 1;
    grid-column: span 2;
    }

    .grid.random .square {
        grid-row: span 1;
        grid-column: span 1;
        }
      
    .grid.random .square-2 {
    grid-row: span 2;
    grid-column: span 2;
    }


} 

@media screen and (min-width: 1440px) {
    main section  {
        display: flex;
        gap: calc(var(--base-spacing)*4); 
        padding: calc(var(--base-spacing)*1) 0;
        justify-content:center; 
            
    }

    
}

@media screen and (min-width: 2400px) {
    main section p.col {
        columns: 2;
        column-gap: calc(var(--base-spacing)*2);
    }

    main section p.col-3 {
        columns: 3;
        column-gap: calc(var(--base-spacing)*2);
    }

    main section .content {

        /* max-width => 960px */
        /* max-width: calc(var(--base-spacing)*60);         */
    }

    .grid { grid-template-columns: repeat(4, 1fr);   }

    .grid.random.col-2-3-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid.random.col-1-2-4 {
        grid-template-columns: repeat(4, 1fr);
    }
  
    
}