@charset "UTF-8";

// Local variable not for changing.
$_su-hero-height: (
  'xs': 208px,
  'sm': 208px,
  'md': 320px,
  'lg': 409px,
  'xl': 520px,
  '2xl': 520px
) !default;

//
// Hero
//
// A hero block that can be either an image or a video with some overlay text.
//
// Experimental: The YouTube player has not been finished.
//
// .su-hero--caption - An under banner caption option.
// .su-hero--youtube - A YouTube video in the background.
//
// Markup: templates/components/hero/hero.twig
//
// Style guide: Composite.Hero
//
.su-hero {
  position: relative;

  @include grid-media('md') {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: map-get($_su-hero-height, 'md');
  }

  @include grid-media('lg') {
    min-height: map-get($_su-hero-height, 'lg');
  }

  @include grid-media('xl') {
    min-height: map-get($_su-hero-height, 'xl');
  }

  // The content
  .su-hero__card {
    background: $su-color-white;
    position: relative;
    z-index: 10;

    @include grid-media('md') {
      @include margin(45px null);
      left: 45px;
      max-width: 400px;
    }

    @include grid-media('lg') {
      max-width: 450px;
    }

    @include grid-media('xl') {
      @include margin(96px null 0 null);
      bottom: 48px;
      left: 48px;
      max-width: 450px;
      top: auto;
    }
  }
}

// The media element.
// Big tall wide and in a little bid of a shade.
.su-hero__media {
  background: $su-color-black;
  height: 100%;
  width: 100%;
  overflow: hidden;

  @include grid-media('md') {
    min-height: map-get($_su-hero-height, 'md');
    position: absolute;
  }

  @include grid-media('lg') {
    min-height: map-get($_su-hero-height, 'lg');
    position: absolute;
  }

  @include grid-media('xl') {
    min-height: map-get($_su-hero-height, 'xl');
    position: absolute;
  }

  img,
  picture {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
  }
}

// Mostly for the demo. You really shouldn't put content in both the card and the content variables.
.su-hero__content {
  display: none;
}
