/**
 * @file
 * HEADER paragraph
 */

$paragraph-header-height: 600px;
$paragraph-header-overlay-bg: rgba(123, 123, 123, 0.4); // @todo move to variables (e.g. $parade-lightblue)
.paragraph--type--header.paragraph--view-mode--default {
  // Background overlay
  .bg-wrapper::before {
    background-color: $paragraph-header-overlay-bg;
  }
  // Diagonal edge for the next paragraph.
  // + .paragraph {
  //   @include slope(before, 3.5deg, false);
  //   ~ .paragraph {
  //     position: relative;
  //     z-index: 1;
  //   }
  // }
  // Title, Secondary title.
  .paragraph__title {
    font-size: 1.8em;
    margin-bottom: .5rem;
    display: inline-block;
    font-weight: 800;
    letter-spacing: -2px;
    color: white;
    @include breakpoint(md) {
      font-size: 2.8em;
    }
    @include breakpoint(lg) {
      font-size: 4em;
    }
  }
  .field--name-parade-secondary-title,
  .field--name-parade-lead-text {
    font-size: 1em;
    margin-bottom: .5em;
    @include breakpoint(md) {
      font-size: 1.2em;
    }
    @include breakpoint(lg) {
      font-size: 1.5em;
    }
  }
  .paragraph__title,
  .field--name-parade-secondary-title {
    line-height: normal;
  }
  // Call to action buttons.
  .field--name-parade-call-to-action {
    margin: 0;
    @include breakpoint(lg) {
      text-align: left;
    }
    .field__item {
      display: inline-block;
    }
  }
  // Content wrapper.
  .paragraph-inner {
    color: white;
    @include breakpoint-max(lg) {
      transform: translateY(-50%);
      text-align: center;
    }
  }
}