/* *** Featured Area *** */

// *** Variables ***
$featured-item-font-xxs : 18px;
$featured-item-font-xs : 22px;
$featured-item-font-sm : 27px;
$featured-item-font-md : 30px;
$featured-item-font-lg : 40px;

$featured-item-h-xxs : 248px;
$featured-item-h-xs : 320px;
$featured-item-h-sm : 400px;
$featured-item-h-md : 448px;
$featured-item-h-lg : 500px;

$featured-screen-xl: 1681px;
$featured-screen-xl-max: ($featured-screen-xl - 1);

.bb-featured-area {
  // *** General ***
  .featured-area-wrapper {
    @include clearfix();
    height: $featured-item-h-xxs;
  }
  .featured-item {
    width: 100%;
    height: 100%;
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .featured-item, .featured-item.empty-item,
  &.item-1-newsletter .col2 .featured-item.empty-item {
    background-color: $sec-bg-clr;
  }
  .featured-item, .featured-media {
    border-radius: 5px;
  }
  .featured-header {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .featured-media {
    img {
      display: none;
    }
  }
  .featured-media, .featured-link:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .featured-link:before {
    content:'';
    z-index: 10;
  }

  // *** Cols ***
  .f-col,.f-col-row {
    float: left;
    width: 100%;
    height: 100%;
    padding: 2px 0;
    &:first-child {
      padding-top: 0;
    }
    &:last-child {
      padding-bottom: 0;
    }
  }
  .f-col {
    &.rowspan-2 {
      height: 200%;
    }
  }
  .rowspan-2 .f-col-row {
    height: 50%;
  }

  // *** Featured Badge List ***
  .featured-badge-list {
    position: absolute;
    top: -11px;
    z-index: 20;
  }

  // *** Featured Header ***
  .entry-title, .post-meta, .auth-name .auth-url {
    color: $overlay-txt-clr;
  }
  .bb-author-vcard-mini .auth-byline, .bb-author-vcard-mini .auth-posted-on {
    color: $overlay-sec-txt-clr-dark;
  }
  .featured-header {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    padding: 5%;
    left: 0;
    bottom: 0;
    min-height: 50%;
    text-shadow: $overlay-txt-shadow;
    @extend .bg-gradient-btm;
    a {
      position: relative;
      pointer-events: auto;
    }
  }
  .featured-caption {
    margin-top: auto;
    @include transition(all 0.2s ease-out);
  }
  .featured-item:hover {
    .featured-caption {
      @include transform(translate(0, -10px));
    }
  }
  .entry-title {
    margin: 0 0 3px;
    font-size: $featured-item-font-xxs;
    line-height: 1.2;
  }
  .post-share-count {
    background-color: transparent;
    padding: 3px 0;
  }
  .post-meta {
    margin-bottom: 7px;
    .post-meta-wrapper, .post-share-count, .post-share-count .bb-icon {
      vertical-align: middle;
    }
    .post-meta-wrapper {
      background-color: transparent;
      margin: 0;
      padding: 0;
    }
    .post-share-count + .post-meta-wrapper {
      margin: 0 7px;
      padding: 0 10px;
    }
  }

  // *** Featured Types ****
  // Item 1-newsletter
  &.item-1-newsletter {
    .newsletter-box {
      margin: 0;
    }
    .widget_mc4wp_form_widget.horizontal {
      margin: 0;
    }
    .col2 {
      height: auto;
      .featured-item {
        background-color: transparent;
      }
    }
  }
  // Stretched items
  &.stretched {
    @extend .bb-stretched-desktop;
    @extend .bb-stretched-desktop.no-gutters;
  }

  // *** Options ***
  // No Gap Option
  &.no-gap {
    .featured-item, .featured-media, .featured-header, .widget_mc4wp_form_widget:after {
      border-radius: 0;
    }
    .f-col.col1, .f-col.col2, .f-col.col3, .f-col.col4, .f-col.col5,
    .f-col-row.row1, .f-col-row.row2 {
      padding: 0;
    }
  }

  // >= 480
  @media screen and (min-width: $screen-xs-min) {
    // *** Featured Content ***
    .entry-title {
      font-size: $featured-item-font-xs;
    }
  }

  // [0,767]
  @media screen and (max-width: $screen-xs-max) {
    // Stretched items
    &.stretched {
      .featured-item, .featured-media, .featured-header {
        border-radius: 0;
      }
    }
  }

  // [480,767]
  @media screen and (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
    .featured-area-wrapper {
      height: $featured-item-h-xs;
    }
  }

  // >= 768
  @media screen and (min-width: $screen-sm-min) {
    // *** General ***
    &.boxed .featured-area-wrapper {
      margin-left: -2px;
      margin-right: -2px;
    }
    &.item-1, &.item-1-2-1, &.item-1-2-1-stretched, &.item-1-3, &.item-1-4, &.item-1-4-stretched, &.item-1-2 {
      .featured-area-wrapper {
        height: $featured-item-h-sm;
      }
    }

    // *** Cols ***
    .f-col {
      padding: 0 2px;
      &.rowspan-2 {
        height: 100%;
      }
    }
    &.rowspan-2 .f-col-row {
      height: 50%;
    }

    // *** Featured Types ****
    // Item 1
    &.item-1 {
      .col1 {
        width: 100%;
      }
    }

    // Item 1-1
    &.item-1-1, &.item-1-1-landscape {
      .col1, .col2 {
        width: 50%;
      }
    }

    // Item 1-small
    &.item-1-s {
      .col1 {
        width: 60%;
      }
      .col2 {
        width: 40%;
      }
    }

    // Item 1-newsletter
    &.item-1-newsletter {
      .col1, .col2 {
        width: 50%;
      }
      .col1 {
        padding: 0 10px 0 0;
      }
      .col2 {
        padding: 0 0 0 10px;
      }
      .featured-area-wrapper, .featured-item {
        display: table;
        width: 100%;
        margin: 0;
      }
      .f-col {
        display: table-cell;
        float: none;
        vertical-align: middle;
      }
      .widget_mc4wp_form_widget.horizontal {
        margin: -25px 0 0 0;
        p {
          width: 100%;
        }
      }
    }

    // Item 1-1-1, Item 1-1-1-stretched
    &.item-1-1-1, &.item-1-1-1-stretched {
      .col1, .col2, .col3 {
        width: 33.33333%;
      }
    }
    &.item-1-1-1-stretched {
      .col1 {
        .featured-item, .featured-media, .featured-header {
          @include clear-left-border-radius();
        }
      }
      .col3 {
        .featured-item, .featured-media, .featured-header {
          @include clear-right-border-radius();
        }
      }
    }

    // Item 1-2
    &.item-1-2 {
      .col1 {
        width: 60%;
      }
      .col2, .col3 {
        width: 40%;
        height: 50%;
      }
      .col2 {
        padding-bottom: 2px;
      }
      .col3 {
        padding-top: 2px;
      }
    }

  }

  // [768, 1119]
  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max){
    // *** Featured Types ****
    // Item 1-2-1, Item 1-2-1-stretched
    &.item-1-2-1, &.item-1-2-1-stretched {
      .col1 {
        padding-bottom: 2px;
      }
      .col2, .col3 {
        width: 50%;
        padding-top: 2px;
      }
    }
    &.item-1-2-1-stretched {
      .col1 {
        .featured-item, .featured-media, .featured-header {
          border-radius: 0;
        }
      }
      .col2 {
        .featured-item, .featured-media, .featured-header {
          @include clear-left-border-radius();
        }
      }
      .col3 {
        .featured-item, .featured-media, .featured-header {
          @include clear-right-border-radius();
        }
      }
    }

    // Item 1-3
    &.item-1-3 {
      .col2 {
        width: 50%;
      }
      .col3, .col4 {
        width: 50%;
        height: 50%;
      }
      .col1, .col3 {
        padding-bottom: 2px;
      }
      .col1, .col2, .col3, .col4 {
        padding-top: 2px;
      }
    }

    // Item 1-4, Item 1-4-stretched
    &.item-1-4, &.item-1-4-stretched {
      .f-col  {
        width: 50%;
      }
      .col2, .col3, .col4, .col5 {
        height: 50%;
      }
      .col1, .col2, .col3 {
        padding-bottom: 2px;
      }
      .col3, .col4, .col5 {
        padding-top: 2px;
      }
    }
    &.item-1-4-stretched {
      .col1, .col4 {
        .featured-item, .featured-media, .featured-header {
          @include clear-left-border-radius();
        }
      }
      .col2, .col3, .col5 {
        .featured-item, .featured-media, .featured-header {
          @include clear-right-border-radius();
        }
      }
    }

  }

  // >=992
  @media screen and (min-width: $screen-md-min) {
    // *** Featured Content ***
    &.item-1 .f-col,
    &.item-1-1 .f-col,
    &.item-1-s .f-col,
    &.item-1-newsletter .col1,
    &.item-1-2 .col1,
    &.item-1-3 .col1,
    &.item-1-4 .col1, &.item-1-4-stretched .col1,
    &.item-1-2-1 .col1, &.item-1-2-1 .col3,
    &.item-1-2-1-stretched .col1, &.item-1-2-1-stretched .col3 {
      .entry-title {
        font-size: $featured-item-font-md;
      }
    }

    // *** Featured Types ****
    // Newsletter style Item-2
    &.item-1-newsletter {
      .col1 {
        width: 65%;
      }
      .col2 {
        width: 35%;
        padding-left: 20px;
      }
    }
  }

  // >=1200
  @media screen and (min-width: $screen-lg-min) {
    // *** General ***
    &.item-1, &.item-1-2-1, &.item-1-2-1-stretched, &.item-1-3, &.item-1-4, &.item-1-4-stretched, &.item-1-2 {
      .featured-area-wrapper {
        height: $featured-item-h-md;
      }
    }
    &.item-1-1, &.item-1-s {
      .featured-area-wrapper {
        height: $featured-item-h-sm;
      }
    }
    &.item-1-1-1-stretched, &.item-1-newsletter {
      .featured-area-wrapper {
        height: $featured-item-h-xs;
      }
    }

    // *** Featured Content ***
    &.item-1-1-1-stretched .f-col {
      .entry-title {
        font-size: $featured-item-font-md;
      }
    }

    // *** Featured Types ****
    // Item 1-3
    &.item-1-3 {
      .col1, .col2 {
        width: 50%;
      }
      .col2 {
        height: 50%;
        padding-bottom: 2px;
      }
      .col3, .col4 {
        width: 25%;
        height: 50%;
        padding-top: 2px;
      }
    }

    // Item 1-2-1, Item 1-2-1-stretched
    &.item-1-2-1, &.item-1-2-1-stretched {
      .col1, .col3 {
        width: 35%;
      }
      .col2 {
        width: 30%;
      }
    }
    &.item-1-2-1-stretched {
      .col1 {
        .featured-item, .featured-media, .featured-header {
          @include clear-left-border-radius();
        }
      }
      .col3 {
        .featured-item, .featured-media, .featured-header {
          @include clear-right-border-radius();
        }
      }
    }

    // Item 1-4, Item 1-4-stretched
    &.item-1-4, &.item-1-4-stretched {
      .col1 {
        width: 40%;
      }
      .col2, .col3 {
        padding-bottom: 2px;
      }
      .col4, .col5 {
        padding-top: 2px;
      }
      .col2, .col3, .col4, .col5 {
        width: 30%;
        height: 50%;
      }
    }
    &.item-1-4-stretched {
      .col1 {
        .featured-item, .featured-media, .featured-header {
          @include clear-left-border-radius();
        }
      }
      .col3, .col5 {
        .featured-item, .featured-media, .featured-header {
          @include clear-right-border-radius();
        }
      }
    }
  }


  // >= 1681
  @media screen and (min-width: $featured-screen-xl) {
    // *** General ***
    &.item-1-1-1-stretched {
      .featured-area-wrapper {
        min-height: 40vh;
      }
    }
    &.item-1-2-1-stretched, &.item-1-4-stretched {
      .featured-area-wrapper {
        min-height: 50vh;
      }
    }

    // *** Featured Content ***
    &.item-1-4-stretched .col2, &.item-1-4-stretched .col3, &.item-1-4-stretched .col4, &.item-1-4-stretched .col5,
    &.item-1-2-1-stretched .col2, &.item-1-2-1-stretched .col3 {
      .entry-title {
        font-size: $featured-item-font-sm;
      }
    }

    &.item-1-2-1-stretched .col1, &.item-1-2-1-stretched .col3,
    &.item-1-4-stretched .col1 {
      .entry-title {
        font-size: $featured-item-font-lg;
      }
    }

  }

}
