/*
 * EdGEL Hero panels
 * --------------------------------------------------
 */

.panel-hero {
  .panel-variant(@panel-default-border; @panel-default-text; @panel-bg; @brand-color);
}

.panel-hero .panel-title {
  margin-bottom: 1em;
}

.panel-hero-bg {
  background-image: none;
  background-size: cover;
  background-position: center;
}
/* Clearfix since only contents could be floated left or right */
.panel-hero-bg:after {
  content: "";
  display: table;
  clear: both;
}

.panel-hero-content {
  padding: @panel-hero-padding;
  font-size: floor((@font-size-base * 1.15));
  line-height: 1.4;

  @media (min-width: @screen-sm-min) {
    font-size: (@font-size-base * 1.5);
  }
}

.panel-hero-content-left {
  width: 50%;
  float: left;
}

.panel-hero-content-right {
  width: 50%;
  float: right;
}

.panel-hero-content-dark,
.panel-hero-content-dark-opaque {
  color: #fff;
  a:not(.btn) {
    &,
    &:visited {
      color:         #ccc;
    }
    &:hover,
    &:focus {
      color:         #fff;
    }
  }
}

.panel-hero-content-dark-opaque {
  background-color: @gray-dark;
}

.panel-hero-content-dark {
  background-color: fade(@gray-dark, 75%);
}

.panel-hero-content-light-opaque {
  background-color: #fff;
}

.panel-hero-content-light {
  background-color: fade(#fff, 75%);
}

.panel-hero-content-uoe,
.panel-hero-content-uoe-opaque {
  color: @brand-bg-text;
  a:not(.btn) {
    &,
    &:visited {
      color:         @brand-link-color;
    }
    &:hover,
    &:focus {
      color:         darken(@brand-link-color, 5%);
    }
  }
}

.panel-hero-content-uoe-opaque {
  background-color: @brand-color;
}

.panel-hero-content-uoe {
  background-color: fade(@brand-color, 75%);
}
