$primary-color: lightblue !default;
$primary-dark-color: navy !default;
$accent-color: red !default;

$header-background: $primary-dark-color !default;
$hero-background: $primary-dark-color !default;
$superhero-background: $primary-dark-color !default;

$gutter: 30px;
$featured-cols: 3;
$grid-cols: 4;

$widescreen-breakpoint: 1140px + $gutter * 2;
$bigscreen-breakpoint: 900px + $gutter * 2;


@import "open-project-base";
@import "open-project-header-footer";


/* Generic */

body {

  &.layout-home > main {
    > .featured-posts {
      @extend .main-section;

      .items {
        justify-content: center;
      }

      .item {
        @extend .item-card;
        @extend .post-card;
        @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));

        padding: 32px 30px;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);

        .header {
          font-size: 22px;
        }

        .body, .meta {
          font-size: 15px;
        }

        @media screen and (min-width: $bigscreen-breakpoint) {
          box-sizing: border-box;
          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
        }
      }
    }
  }

  &.layout-spec-index > main,
  &.layout-software-index > main {
    > .items {
      @extend .item-grid;
      @extend .index-item-grid;

      .items.one-row {
        justify-content: center;
      }

      .item {
        @extend .item-card;
        @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));

        padding: 32px 30px;

        .header {
          font-size: 18px;
        }
        .body {
          font-size: 15px;
        }

        @media screen and (min-width: $bigscreen-breakpoint) {
          box-sizing: border-box;
          flex-basis: calc( 100%/#{$grid-cols} - #{$gutter} );
          margin-bottom: $gutter;
        }
      }
    }
  }

  &.layout-blog-index > main {
    > .items {
      @extend .item-grid;
      @extend .index-item-grid;

      .items.one-row {
        justify-content: center;
      }

      .item {
        @extend .item-card;
        @extend .post-card;
        @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));

        padding: 32px 30px;

        .header {
          font-size: 22px;
        }
        .body {
          font-size: 15px;
        }

        @media screen and (min-width: $bigscreen-breakpoint) {
          box-sizing: border-box;
          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
          margin-bottom: $gutter;
        }
      }
    }
  }

  &.layout-post > main > article {
    @extend .main-article;

    > header > .meta {
      color: grey;
    }
  }
}


/* Hub */

body.hub {

  &.layout-home > main {
    > .featured-projects {
      @extend .main-section;

      .items {
        justify-content: center;
      }

      .item {
        @extend .item-card;
        @include hoverable-card(4px, 16px, rgba(0, 0, 0, 0.12));

        padding: 40px 32px;
        text-align: center;

        .logo {
          display: inline-block;
          height: 80px;
          width: 80px;
        }
        .header {
          font-size: 24px;
        }
        .body {
          font-size: 16px;
          height: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        @media screen and (min-width: $bigscreen-breakpoint) {
          box-sizing: border-box;
          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
        }
      }
    }

    > .other-projects {
      @extend .main-section;

      .items.one-row {
        justify-content: center;
      }

      .item {
        @extend .item-card;
        @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08));

        padding: 32px 30px;

        .header {
          font-size: 18px;
        }
        .body {
          font-size: 15px;
        }

        @media screen and (min-width: $bigscreen-breakpoint) {
          box-sizing: border-box;
          flex-basis: calc( 100%/#{$grid-cols} - #{$gutter} );
          margin-bottom: $gutter;
        }
      }
    }
  }
}


/* Project */

body.project {

  &.layout-home > main {
    > .software,
    > .specs {
      @extend .main-section;

      .items {
        justify-content: center;
      }

      .item {
        @extend .item-card;
        @include hoverable-card(4px, 16px, rgba(0, 0, 0, 0.12));

        padding: 40px 32px;
        text-align: center;

        .logo {
          display: inline-block;
          height: 80px;
          width: 80px;
        }
        .header {
          font-size: 24px;
        }
        .body {
          font-size: 16px;
        }

        @media screen and (min-width: $bigscreen-breakpoint) {
          box-sizing: border-box;
          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
        }
      }
    }
  }

  &.layout-spec > main > article {
    @extend .main-article;
  }
  &.layout-product > main > article {
    @extend .main-article;
  }
}