Standard Header

$standard-header-intro-offset-xxl: $spacer-xxl;

.standard-header {
  @extend %page-header;

  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  &__title {
    position: relative;
    margin-bottom: $spacer-sm;
    padding: 0 $spacer-md;
    max-width: $default-page-layout-content-width-md;
    text-align: center;
    line-height: $heading-line-height-sm;
    color: $standard-header-title-color;
    font-size: $font-size-xxl;

    &--separated {
      margin-top: $spacer-xxl;
    }
  }

  &__subtitle {
    position: relative;
    margin-bottom: $spacer-xs;
    max-width: $default-page-layout-content-width-md;
    text-align: center;
    color: $standard-header-subtitle-color;
    font-size: $font-size-sm;
  }

  &__type {
    @extend %heading-font-bold;

    position: relative;
    margin-bottom: $spacer-md;
    max-width: $default-page-layout-content-width-md;
    text-align: center;
    text-transform: uppercase;
    color: $standard-header-type-color;
    font-size: $font-size-base;

    &--underlined {
      border-bottom: $standard-header-type-underline-color solid 3px;
    }
  }
}

//Variations
.standard-header--inverted {
  .standard-header__title {
    color: $standard-header-inverted-title-color;
  }

  .standard-header__type {
    color: $standard-header-inverted-type-color;
  }

  .standard-header__subtitle {
    color: $standard-header-inverted-subtitle-color;
  }
}

.podcast-header--avatar--overlay {
  background-color: $standard-header-podcast-overlay-color;
  background-repeat: no-repeat;
  background-position: top right, top left;
  background-size: 0%;
  background-blend-mode: multiply;

  .standard-header__subtitle {
    color: $standard-header-podcast-subtitle-color;
  }

  .standard-header__title,
  .standard-header__subtitle {
    padding: 0 $spacer-xl;
  }

  .standard-header__intro__label {
    background-color: $standard-header-podcast-intro-label-bg-color;
    color: $standard-header-podcast-intro-label-color;
    font-size: $font-size-xs;
  }
}

.standard-header__intro {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin-top: $spacer-lg;
  background-color: $standard-header-intro-bg;
  padding: $spacer-sm;
  box-sizing: content-box;
}

.standard-header__intro-headline {
  text-align: center;
  color: $standard-header-intro-text-color;
}

.standard-header__intro__text {
  @extend %body-font-italic;

  line-height: $paragraph-line-height;
  color: $standard-header-intro-text-color;
  font-size: $font-size-sm;
}

.standard-header__intro__label {
  @extend %heading-font-bold;

  display: block;
  position: relative;
  top: -2rem; // FIXME
  background-color: $standard-header-intro-label-bg;
  padding: $spacer-xxs $spacer-xs;
  color: $standard-header-intro-label-color;
  font-size: $font-size-xs;
}

//Breakpoints
@media screen and (min-width: $grid-breakpoint-sm) {
  .standard-header__title {
    font-size: $font-size-xxxl;
  }

  .podcast-header--avatar--overlay {
    background-size: 70%;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .standard-header {
    margin-bottom: ms(25); //magic number
  }

  .podcast-header--avatar--overlay {
    background-size: contain;
  }

  .standard-header__title {
    font-size: $font-size-xxxxl;
  }

  .standard-header__subtitle {
    font-size: $font-size-lg;
  }

  .standard-header__intro {
    margin-top: $spacer-xl;
    padding: $spacer-lg;
    width: $grid-page-layout-content-width-md;
    max-width: $grid-page-layout-content-width-xl;
  }

  .standard-header__intro__text {
    font-size: $font-size-lg;
  }

  .standard-header__intro__label {
    top: -4.1rem; // FIXME
    padding: $spacer-xs $spacer-sm;
  }

  // offset
  .standard-header__type,
  .standard-header__title,
  .standard-header__subtitle,
  .standard-header__intro {
    top: $standard-header-intro-offset-xxl;
  }
}

@media screen and (min-width: $grid-breakpoint-lg) {
  .standard-header__intro {
    width: $grid-page-layout-content-width-lg;
  }
}

@media screen and (min-width: $grid-breakpoint-xl) {
  .standard-header__intro {
    width: $grid-page-layout-content-width-xl;
  }
}