@import "global";

$text-shadow-cover-title: 0 0 6px rgba(0, 0, 0, 0.8);

.cover {
  width: 100%;
  background-size: cover;
  padding: $spacing-vertical $spacing-vertical * 2 / 3;
}

.cover-full {
  min-height: 100vh;
  font-size: 1.2em;
  background-position: center;
}

.cover-title {
  line-height: 1.4;
  font-size: 2.6em;
  margin-bottom: $spacing-vertical;
}
.cover-subtitle {
  font-size: 1.2em;
  margin: $spacing-vertical 0 $spacing-vertical;
}

.cover-title, .cover-subtitle
{
  &:not(.cover-title-flat):not(.cover-item--outline)
  {
    text-shadow: $text-shadow-cover-title;
  }
}
.cover-item--outline {
  text-shadow:
          -1px -1px 0 #000,
          1px -1px 0 #000,
          -1px  1px 0 #000,
          1px  1px 0 #000,
          $text-shadow-cover-title;
}

@media (min-width:$width-laptop-min) and (max-width: $width-laptop-max) {
  .cover { padding: $spacing-vertical $spacing-vertical * 1.5; }
  .cover-title { font-size: 3.2em; &.cover-title-tile { font-size: 2.4em; max-width: 660px; margin-left: auto; margin-right: auto; } }
  .cover-subtitle { font-size: 1.2em; }
}
@media (min-width: $width-desktop-min) {
  .cover { padding: $spacing-vertical $spacing-vertical * 2; }
  .cover-title { font-size: 4.0em; &.cover-title-tile { font-size: 2.8em; max-width: 660px; margin-left: auto; margin-right: auto; } }
  .cover-subtitle { font-size: 1.4em; }
}

.cover-stretch-wrap
{
  @include display-flex();
  @include flex-direction(column);
  > .cover
  {
    @include flex(1);
  }
}
.cover-center
{
  @include flex-direction(column);
  @include absolute-center();
}
.cover-dark
{
  color: #ddd;
  .cover-title { color: white; }
}
.cover-light
{
  color: #444;
  .cover-title { color: #111; }
}
.cover-light-alt
{
  color: #333;
  .cover-title { color: #000; }
}
.cover-dark-grad
{
  //@include linear-gradient(darken($color-primary, 5), lighten($color-primary, 5));
  background-color: $color-primary;
}
.cover-light-alt-grad
{
  //@include linear-gradient(darken($color-light-alt, 5), lighten($color-light-alt, 5));
  background-color: $color-light-alt;
}

.cover-special-message
{
  font-style: italic;
  line-height: 1.8;
}