/******************************************************************
Site Name:
Author:

Stylesheet: Grid Stylesheet


******************************************************************/

//grids
$row-gutter: $base-line-height;
$col-gutter: $base-font-size;

*, *:before, *:after {
  box-sizing: inherit;
}

html{
  box-sizing: border-box;
}

.border-box{
  box-sizing: border-box;
}

.content-box{
  box-sizing: content-box;
}

.grid {
  text-align: justify !important;
  text-justify: distribute-all-lines;
  font-size: 0 !important;
  margin-bottom: -1rem;

  & > * {
    text-align: left;
    font-size: $base-font-size;
    
    vertical-align: top;
    display: inline-block;
    width: 100%;
  }

  &:after {
    content: '';
    display: inline-block;
    width: 100%;
  }
}

.panel{
/******** Layout *********/
  padding: 1rem 1rem .5rem;
  margin: 0 0 $row-gutter; 
  display: inline-block;
  width:100%;
  text-decoration: initial;
  position: relative;
  background-color: #FFF;
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.05);
  // border-bottom: 2px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;

  & > .panel{
    background-color: rgba(0, 0, 0, 0.015);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .grid{
    margin-bottom: -1.5rem;
  }

  & > img:last-child{
    margin-bottom:.5rem;
  }

  header, footer{
    // width: calc(100% + 2rem); 
    margin:-1rem -1rem .5rem;
    padding: 0 1rem;
    overflow: hidden;

    & + .grid, & + .aligncenter{
      padding-top: $row-gutter - .5rem;
    }



    & > img:last-child{
      margin-bottom:0;
    }
  }

  footer{
    margin:.5rem -1rem -.5rem;
  }

  &.no-padding{
    padding:0;

    header, footer{ 
      width: 100%;
      margin:0; 
      & + .grid, & + .aligncenter{padding-top:0;}
    }

    & > {
      h1, h2, h3, h4, h5, h6,
        p, ul, ol, pre, table, blockquote{
          padding-left:1rem;
          padding-right:1rem;
        }
      }

      & > img:last-child{
        margin-bottom:0;
      }
  }

/******** colors *********/



  & footer{
    background-color: #fff; 
    border-top:#F0F0F0; 
    &:not(:last-child){
      border-bottom:1px solid hueno($L: 95, $S: 100, $grad: $cool); 
    }
  }


   & header, &.grad, & .grad{

      color: #222;

      background-color: hueno($L: 85, $S: 100, $grad: $green);
      background-image: -webkit-linear-gradient(-90deg, rgba(255,255,255,0), rgba(255,255,255,0.15) );
      background-image: -moz-linear-gradient(-90deg, rgba(255,255,255,0), rgba(255,255,255,0.15) );
      background-image: -o-linear-gradient(-90deg, rgba(255,255,255,0), rgba(255,255,255,0.15) );
      background-image: linear-gradient(-90deg, rgba(255,255,255,0), rgba(255,255,255,0.15) );  
    }

}

a.panel{
  transition: opacity 200ms;
}

a.panel:hover{
  opacity:0.8;
}


img{

  margin-bottom:$row-gutter;
  max-width: 100%;
  display: block; 

  &:not(:first-child){
    padding-top: 0.5rem;
  }

  &.aligncenter{
    margin-left: auto; 
    margin-right: auto; 
  }

  
}


//mobile grid

 @for $denom from 1 through 12 {
    @for $nom from 1 through $denom {

      $w: 100% * $nom / $denom;
      $gutter: ($denom - $nom) / $denom * $col-gutter;

      .m-#{$nom}of#{$denom}{ width: calc( #{$w} - #{$gutter}); }
      .m-#{push}-#{$nom}of#{$denom} { margin-left: $w; }
      .m-#{pull}-#{$nom}of#{$denom} { margin-left: -$w; }
      
    }
  }


//tablet grid

@media (min-width: 481px) {
  @for $denom from 1 through 12 {
    @for $nom from 1 through $denom {

      $w: 100% * $nom / $denom;
      $gutter: ($denom - $nom) / $denom * $col-gutter;

      .t-#{$nom}of#{$denom}{ width: calc( #{$w} - #{$gutter}); }
      .t-#{push}-#{$nom}of#{$denom} { margin-left: $w; }
      .t-#{pull}-#{$nom}of#{$denom} { margin-left: -$w; }
      
    }
  }
}

//desktop grid

@media (min-width: 769px) {
  @for $denom from 1 through 12 {
    @for $nom from 1 through $denom {

      $w: 100% * $nom / $denom;
      $gutter: ($denom - $nom) / $denom * $col-gutter;

      .d-#{$nom}of#{$denom}{ width: calc( #{$w} - #{$gutter}); }
      .d-#{push}-#{$nom}of#{$denom} { margin-left: $w; }
      .d-#{pull}-#{$nom}of#{$denom} { margin-left: -$w; }
      
    }
  }
}