@use "00-base/configure" as *;

$colors: (
  "c-primary": $c-primary,
  "c-primary-lightest":  $c-primary-lightest,
  "c-primary-alt": $c-primary-alt,
  "c-primary-alt-lightest": $c-primary-alt-lightest,
  "c-primary-alt-dark": $c-primary-alt-dark,
  "c-white": $c-white,
  "c-gray-lightest": $c-gray-lightest,
);

.ma__key-message {
  text-align: center;

  &__wrapper {
    z-index: 10;
    padding: 40px 20px;
    position: relative;

    @media ($bp-small-min) {
      padding-block: $standard-spacing--small;
    }

    &--top {
      padding: 40px 20px;

      @media ($bp-small-min) {
        padding-block: 64px;
      }

      .ma__key-message__cta {
        margin-top: 20px;

        @media ($bp-medium-min) {
          margin-bottom: 10px;
        }
      }
    }
  }

  .ma__key-message__sub-title {
    margin-top: 25px;
    font-size: $fonts-xlarge;
    font-weight: $fonts-bold;

    @each $class, $c in $colors {
      &--#{$class} {
        background: $c;
      }
    }
  }

  .ma__key-message__eyebrow {
    font-size: $fonts-medium;
    font-weight: $fonts-bold;
  }

  .ma__key-message__wrapper header + .ma__key-message__cta {
    margin-top: 40px;
  }

  &--top {

    &.ma__key-message--half-image {

      .ma__key-message__inline-image {
        height: 107.5px;

        @media ($bp-small-min) {
          height: 212.5px;
        }

        @media ($bp-medium-min) {
          height: 300px;
        }
      }
    }

    .ma__key-message__inline-image {
      position: relative;
      z-index: 0;
      width: 100%;
      height: 215px;
      order: 2;

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

      @media ($bp-small-min) {
        height: 425px;
      }

      @media ($bp-medium-min) {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        object-fit: cover;
      }

      @media ($bp-large-min) {
        order: -1;
      }
    }
  }

  &:not(&--top ) {

    .ma__key-message__inline-image {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

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


  &__content {
    margin-top: 25px;

    .ma__rich-text {
      font-size: $fonts-large;
    }
  }

  &__content + &__cta {
    margin-top: 25px;

    .ma__button {
      box-shadow: none;
    }

  }

  &__block {
    max-width: 840px;

    @media ($bp-medium-min) {
      margin-left: auto;
      margin-right: auto;
    }

    &--c-gray-lightest {

      .ma__key-message__content+.ma__key-message__cta .ma__button {
        box-shadow: $box-shadow;
      }
    }
  }

  &--image {

    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: fit-content;
    z-index: 0;

    &.ma__key-message--half-image {

      @media ($bp-medium-min) {
        height: 300px;
      }
    }

    &:after {
      content:'';
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      opacity: 0.8;
    }

    &-overlay {
      margin-bottom: 60px;

      @media ($bp-medium-min) {
        height: 600px;

        &.ma__key-message--top {
          margin-bottom: 150px;
        }
      }

      @media ($bp-medium-max) {

        &.ma__key-message--top {
          background-image: none !important;
        }
      }

      &:after {
        opacity: 0;
      }
    }

    .ma__key-message__wrapper {

      &--overlay {
        display: block;
        height: fit-content;
        padding: 0px;

        @media ($bp-medium-min) {
          top: 50%;
        }

        .ma__key-message__block {
          padding: 32px $standard-spacing--xsmall;
          transform: translateY(0%);

          @media ($bp-medium-min) {
            padding: $standard-spacing--small;
          }

          @media ($bp-large-min) {
            padding: $standard-spacing--medium;
          }

          @each $class, $c in $colors {
            &--#{$class} {
              background: $c;
            }
          }
        }

        &:has(.ma__key-message__columns--two) {

          @media ($bp-medium-min) {
            top: 60%;
          }
        }

        @media ($bp-medium-min) {

          @include ma-container();
          display: flex;
          flex-flow: column;
          justify-content: flex-end;
          height: 50%;
          position: relative;

          .ma__key-message__block {
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            transform: translateY(33%);
            box-shadow: $box-shadow;

            &--half-image {
              transform: translateY(0%);
            }
          }
        }
      }

      &--half-image {

        @media ($bp-medium-min) {
          display: flex;
          justify-content: flex-start;
          top: 100px;
        }

        .ma__key-message__block {
          padding: 32px $standard-spacing--xsmall;

          @media ($bp-medium-min) {
            padding: $standard-spacing--small;
          }

          @media ($bp-large-min) {
            padding: $standard-spacing--medium;
          }
        }
      }

    }
  }

  &__title {
    margin-bottom: 0;
  }

  @each $class, $c in $colors {
    &--#{$class} {
      background-color: $c;

      .ma__button {
        width: 100%;

        @media ($bp-small-min) {
          width: auto;
        }

        @if ($c == $c-primary or $c == $c-primary-alt or $c == $c-primary-alt-dark) {
          color: $c;
        }
      }

      &.ma__key-message--image:after {
        background: $c;
      }
    }

  }

  &__title, &__sub-title, &__description {

    @each $class, $c in $colors {
      &--#{$class} {

        @if ($c == $c-primary or $c == $c-primary-alt or $c == $c-primary-alt-dark) {
          color: var(--mf-c-font-inverse);
        } @else {
          color: var(--mf-c-font-base);
        }
      }
    }
  }

  // Two column layout

  .ma__key-message__block:has(.ma__key-message__columns--two) {
    padding: 32px $standard-spacing--xsmall;
    transform: translateY(0%);

    @media ($bp-medium-min) {
      padding: $standard-spacing--small;
    }
  }

  &__columns--two {
    display: flex;
    flex-flow: column;
    gap: 24px;
    text-align: left;

    @media ($bp-medium-min) {
      flex-flow: row;
      gap: 48px;
      align-items: flex-start;
    }

    > * {

      @media ($bp-medium-min) {
        inline-size: 50%;
      }
    }

    .ma__key-message__sub-title {
      margin-block-start: 0;
    }

    .ma__key-message--message-text:not(:has(.ma__key-message__sub-title)) .ma__key-message__content {
      margin-block-start: 0;
    }
  }
}


// Override the message block max width in the content area only.

.page-content .ma__key-message__block {
  max-width: 1240px;
}