// Standard Hero
//
// A prominent header section, usually the main focus of a page.
//
// Markup:
// <header class="hero {$modifiers}">
//   <div class="container">
//     <div class="row">
//       <h1 class="hero-heading">Build Hybrid Apps from the Future</h1>
//     </div>
//     <div class="row hero-row">
//       <p>Crosswalk is a powerful <code>WebView</code> for building hybrid mobile applications on multiple versions of Android.</p>
//       <a href="#" class="button">Get started</a>
//     </div>
//   </div>
// </header>
//
// .knockout           - Inverted hero section
// .hero--bg1.knockout - Coffee and game background
// .hero--bg2          - Example of adding additional, new headers
//
// Styleguide 3.4.1.
.hero {
  background-repeat: no-repeat;
  background-position: center top;
  line-height: 1.2;
  margin-bottom: modular-scale($base-font-size, 2, $base-ratio);
  @include media($wide) {
    margin-bottom: modular-scale($base-font-size, 6, $base-ratio);
    .button-group {
      margin-top: modular-scale($base-font-size, 4, $base-ratio);
      margin-bottom: modular-scale($base-font-size, 6, $base-ratio);

    }
  }
}

.hero--bg1,
.hero.hero--bg1 {
  background: #000 url("/assets/illustrations/crosswalk-landing-banner.jpg") center top no-repeat;
  background-size: cover;
  @include media($massive) {
    background-position: 75% top;
    background-size: contain;
  }
}

// An example, add more custom
// hero images like this.
.hero.hero--bg2 {
  background-color: lighten(tomato, 20%);
  @include media($mid) {
    // Changes at mid-sizes
  }
  @include media($wide) {
    // Changes at wide-sizes
  }
  @include media($huge) {
    // Changes at huge-size
  }
  @include media($massive) {
    // Changes at massive sizes
  }
}

// Container
//
// The inner wrapper for a hero section.
// Allows the content to be moved in relation to the
// background image.
//
// No styleguide reference.
.hero-row {
  margin-top: 0;
  margin-bottom: 0;
  @include media($mid) {
    @include shift(0);
    @include span-columns(4 of 6);
  }
  @include media($wide) {
    @include shift(1 of 8);
    @include span-columns(5 of 8);
  }
  @include media($huge) {
    @include shift(1);
    @include span-columns(4 of 8);
    p {
      max-width: 75%;
    }
  }
}

// Heading
//
// The primary title of a hero section.
//
// No styleguide reference.
.hero-heading {
  text-transform: lowercase;
  margin-top: -2em;
  display: block;
  width: 100%;
  font-size: modular-scale($base-font-size, 2, $base-ratio);
  @include span-columns(3);
  @include media($narrow) {
    @include span-columns(3);
  }
  @include media($mid) {
    @include span-columns(6 of 6);
    margin-top: 0;
    font-size: modular-scale($base-font-size, 7, $base-ratio);
  }
  @include media($wide) {
    @include span-columns(6 of 6);
  }
}

// Hero seperator
//
// A seperator inbetween, or a prefix or suffix to hero sections.
//
// Markup:
// <div class="hero-seperator">
//   <div class="container">
//     <div class="row">
//       <aside class="media">
//         <ul class="media-list">
//           <li class="media-item">
//             <a class="media-link" href="#">
//               <img class="media-image" src="/assets/icons/logo-cordova.svg" alt="Apache Cordova logo" />
//               <p class="media-description">
//                 <strong class="media-heading">Apache Cordova compatible</strong>
//                 Crosswalk includes Cordova / PhoneGap APIs
//               </p>
//             </a>
//           </li>
//           <li class="media-item">
//             <a class="media-link" href="#">
//               <img class="media-image" src="/assets/icons/logo-cordova.svg" alt="Apache Cordova logo" />
//               <p class="media-description">
//                 <strong class="media-heading">Apache Cordova compatible</strong>
//                 Crosswalk includes Cordova / PhoneGap APIs
//               </p>
//             </a>
//           </li>
//         </ul>
//       </aside>
//     </div>
//   </div>
// </div>
//
// Styleguide 3.4.3.
.hero-seperator {
  // background: $color-secondary-lighter;
  // text-shadow: 0 1px 0 rgba($color-background, 0.5);
  @include background-image(linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%));
  display: block;
  width: 100%;
  ul, ol, li {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  color: $color-gray-light;
  a,
  a:visited,
  .a-faux {
    color: $color-gray-light;
  }
  .media-list {
    z-index: 1;
    position: relative;
  }
  .media-item {
    @include span-columns(1 of 4);
    @include omega(4n);
    opacity: 0.75;
    .media-description {
      display: none;
    }
    @include transition(opacity 0.125s ease-in-out);
    .media-image {
      display: block;
      padding: 0 $gutter / 2;
      width: 100%;
    }
    &:hover {
      opacity: 1.0;
    }
  }
  .media-link {
    display: block;
    position: realtive;
  }
  @include media($narrow) {
    .media-item {
      .media-image {
        padding-left: $gutter;
        padding-right: $gutter;
      }
    }
  }
  @include media($mid) {
    .media-list {
      font-size: modular-scale($base-font-size, -1, $base-ratio);
      @include span-columns(6 of 6);
      @include shift(0);
    }
    .media-item {
      @include span-columns(1.5 of 6);
      @include omega(4n);
      .media-image,
      .media-description {
        display: block;
        width: 100%;
      }
      .media-image {
        padding: 0 $gutter * 2;
        margin-bottom: modular-scale($base-font-size, -2, $base-ratio);
      }
    }
  }
  @include media($wide) {
    .media-list {
      @include span-columns(6 of 6);
      @include shift(0);
    }
    .media-item {
      .media-image,
      .media-description {
        display: block;
        width: 100%;
      }
      .media-image {
        padding: 0 $gutter * 2;
        margin-bottom: modular-scale($base-font-size, -2, $base-ratio);
      }
    }
  }
  @include media($huge) {
    .media-list {
      // @include span-columns(8 of 6);
      // @include shift(-1 of 6);
    }
    .media-item {
      font-size: 0.75em;
      overflow: visible;
      .media-image {
        padding: 0;
        @include span-columns(1 of 3);
      }
      .media-description {
        @include span-columns(2 of 3);
      }
    }
  }
}
