@use '../core' as *;

.#{$prefix}-hero {
  background-color: $color-black-000;
  padding-top: $spacing-md;
  padding-bottom: $spacing-lg;

  &__body {
    margin-top: $spacing-md;
  }

  &__eyebrow {
    color: $color-crimson-500;
    font-weight: $font-weight-medium;
    font-size: $ts-14;
    display: block;
  }

  &__title {
    font-size: $ts-32;
    line-height: $line-height-tight;
    margin-top: $spacing-xs;
  }

  &__teaser {
    font-size: $ts-18;
    color: $color-black-400;
  }

  &__media {
    margin-top: $spacing-lg;
  }

  &__media img {
    border-radius: $spacing-xs;
  }

  &__media iframe {
    width: 100%;
  }

  @supports (aspect-ratio: 3 / 2) {
    &__media iframe {
      width: 100%;
      height: 100%;
      aspect-ratio: 16 / 9;
    }

    &__media img {
      aspect-ratio: 3 / 2;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__media-caption {
    color: $color-black-400;
    font-size: $ts-14;
    padding-top: $spacing-xs;
    padding-left: $spacing-xs;
  }

  &__actions > * {
    width: 100%;
    justify-content: center;
  }

  &__actions > *:not(:first-child) {
    margin-top: $spacing-md;
  }

  &--bg-dark {
    // Default to crimson background with --dark modifier

    background-color: $color-crimson-500;
  }

  &--bg-dark &__eyebrow,
  &--bg-dark &__title,
  &--bg-dark &__teaser,
  &--bg-dark &__media-caption {
    color: $color-white-base;
  }
}

@include mq($breakpoint-md) {
  .#{$prefix}-hero {
    padding-top: $spacing-xxl;
    padding-bottom: $spacing-xxl;

    &__inner {
      display: flex;
      align-items: center;
    }

    &__body {
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 50%;
      max-width: 80%;
      padding-right: $spacing-xxl;

      // This helps optically center the hero body content vertically.
      margin-top: 0;
    }

    &__title {
      font-size: $ts-41;
    }

    &__teaser {
      margin-top: $spacing-lg;
    }

    &__actions {
      align-items: center;
      gap: $spacing-md;
      margin-top: $spacing-lg;
      display: flex;
      flex-grow: 1;
      flex-wrap: wrap;
    }

    &__actions > * {
      flex-grow: 0;
      flex-shrink: 0;
      width: auto;
    }

    // Undo top margins needed on small screens

    &__actions > *:not(:first-child) {
      margin-top: 0;
    }

    &__media {
      flex-grow: 1;
      flex-basis: 50%;
      margin-top: 0;
    }
  }
}