///////////////////////////////////////
// ********************************* //
//     Special Coverage Landing      //
// ********************************* //
///////////////////////////////////////


@import "../mixins/flex-grid";
@import "../mixins/flexbox";
@import "../mixins/ease";
@import "../mixins/figures";
@import "../variables/breakpoints";


$light-shade: #f4f4f4;

.sc-hero {
  @include flexbox;
  @include flex-direction(column);
  background: rgb(33, 33, 33);
  color: white;
  margin: auto;
  max-width: 1425px;
  position: relative;
  width: 100%;
  .hero-img {
    width: 100%;
    .image {
      @include crop-16x9;
    }
  }

  .sc-label {
    background: rgba(33, 33, 33, .8);
    color: white;
    display: none;
    font-size: 1.15em;
    left: 0;
    padding: 10px 30px;
    position: absolute;
    text-transform: uppercase;
    top: 60px;
  }
  .billboard {
    @include flexbox;
    @include flex-direction(column);
    @include align-items(center);
    @include justify-content(center);
    padding: 1em;
    text-align: center;
  }
  .sponsor {
    @include flexbox;
    text-transform: uppercase;
    figure {
      margin: auto;
      max-width: 100px;
      padding-top: 20px;
      width: 100%;
      img {
        display: block;
        position: relative;
        width: 100%;
      }
    }
  }
  &.full-bleed {
    .billboard {
      width: 100%;
    }
  }
}

.sc-hero-campaign {
  a {
    @include flexbox;
    @include flex-direction(column);
  }
  .campaign-display-logo {
    max-width: 100px;
    margin-top: 1em;
    img {
      max-width: 100%;
    }
  }
}

%sc-campaign {
  font-size: .8em;
  text-transform: uppercase;

  .campaign-display-preamble {
    color: rgb(120, 120, 120);
    // need whitespace between preamble and sponsor name
    &:after {
      content: " ";
    }
  }

  .campaign-display-sponsor-name {
    color: rgb(0, 87, 159);
  }
}

.sc-player-campaign {
  @extend %sc-campaign;
}

.sc-carousel-campaign {
  @extend %sc-campaign;
}

.sc-video-carousel {
  background: $light-shade;
  padding: 1em;
  .dfp {
    margin: 0;
  }
}

bulbs-video-carousel-track {
  @include overflow-flexgrid(
    $columns: 2,
    $gutter: 20
  );
  @include transition(.5s all);
}

bulb-video-meta-title {
  font-size: 2.5rem;
  line-height: 1.3;
}

.sc-video-carousel-header {
  @include flexbox;
  @include flex-direction(row);
  width: 100%;
  padding: 1em 0;
}

.sc-video-carousel-header-title {
  font-size: 1.5em;
  margin-right: .5em;
  font-family: serif;
}

bulbs-video-carousel-previous {
  margin-left: auto; // flex push right
  margin-right: .5em;
}

.bulbs-video-poster {
  max-width: 100%;
}

bulbs-video-summary {
  position: relative;

  .bulbs-video-summary-playing {
    padding: 0 .5em;
    text-transform: uppercase;
  }

  .bulbs-video-summary-title {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 30px;
  }
}

bulbs-video-meta {
  .share-button-label {
    display: none;
  }
}

.bulbs-video-play-button {
  width: 3em;
}

.sc-divider {
  border-size: 2px;
  padding: 0 1em;
  background-color: $light-shade;

  > hr {
    border-width: 2px;
  }
}

.sc-video-player {
  padding: 1em;
  background-color: $light-shade;

  .dfp {
    margin: 0;
  }
}

.sc-video-meta {
  background-color: white;
  padding: 1em;
  padding-top: 2em;
}

.sc-grid {
  display: none;
  @include flexbox;
  @include flex-flow(row wrap);
  @include justify-content(space-between);
  margin: 3em auto;
  max-width: 970px;
  padding: 0;
  width: 95%;
  &.two-up {
    .sc-item {
      width: 100%;
    }
    .sc-item.large {
      width: 100%;
    }
  }
  .dfp {
    -webkit-transition: width 0.5s, height 0.5s, transform 0.5s;
    -moz-transition: width 0.5s, height 0.5s, transform 0.5s;
    -ms-transition: width 0.5s, height 0.5s, transform 0.5s;
    -o-transition: width 0.5s, height 0.5s, transform 0.5s;
    display: table;
    margin: auto;
    min-width: 50px;
    padding-bottom: 3em;
    position: relative;
    z-index: 1;
  }
}

.sc-item {
  @include flexbox;
  @include flex-direction(column);
  @include align-items(center);
  background: $light-shade;
  margin-bottom: 3em;
  text-align: center;
  .thumb {
    width: 100%;
    .image {
      @include crop-16x9;
    }
  }
  .meta {
    padding: 10%;
    h2 {
      font-size: 1.3em;
    }
    .feature-type {
      color: black;
      text-transform: uppercase;
    }
    .pub {
      color: rgb(122, 135, 129);
      font-size: .75em;
    }
  }
  a {
    color: black;
    width: 100%;
    &:hover {
      color: black;
    }
  }
  &.large {
    @include flex-direction(row);
    background: transparent;
    position: relative;
    a {
      @include flexbox;
      @include flex-direction(column);
    }
    .thumb {
      width: 100%;
    }
    .meta {
      @include flexbox;
      @include flex-direction(column);
      @include align-items(center);
      @include justify-content(center);
      background: #eaeaea;
      color: black;
      position: relative;
      width: 100%;
    }
  }
}

@media all and (min-width: $screen-md) {
  bulbs-video-carousel-track {
    @include overflow-flexgrid(
      $columns: 4,
      $gutter: 20
    );
  }

  .sc-video-player {
    @include flexbox;
    @include flex-flow(row wrap);
    @include align-items(center);
    background: $light-shade;
    padding-top: 2em;
    height: 36%;

    bulbs-video {
      @include flex-grow(1);
    }
  }

  .sc-video-meta {
    @include align-self(stretch);
    width: 36%;
    padding-top: 3em;
  }

  .sc-grid {
    &.two-up {
      .sc-item {
        width: 48%;
      }
      .sc-item.large {
        width: 100%;
      }
    }
  }
  .sc-item {
    &.large {
      @include flex-direction(row);
      background: transparent;
      position: relative;
      a {
        @include flexbox;
      }
      .thumb {
        width: 70%;
      }
      .meta {
        @include flexbox;
        @include flex-direction(column);
        @include align-items(center);
        @include justify-content(center);
        background: rgba(0,0,0,.8);
        bottom: 15%;
        color: white;
        max-width: 400px;
        padding: 5%;
        position: absolute;
        right: 0;
        top: 15%;
      }
    }
  }
  .sc-hero {
    .sc-label {
      display: inline-block;
    }
  }
}

@media all and (min-width: $screen-xlg) {
  .sc-hero {
    @include flex-direction(row);
    .hero-img {
      width: 65%;
    }
    .billboard {
      padding: 1.5em;
      width: 35%;
    }
  }
  .sc-video-player {
    padding: 2em calc((100% - 970px) / 2);
  }

  .sc-video-carousel {
    padding: 0 calc((100% - 970px) / 2);
  }

  .sc-divider {
    padding: 0  calc((100% - 970px) / 2);
  }
}
