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

.ma__card {
  background-color: var(--mf-c-gray-lightest);
  max-width: 1240px;
  display: flex;
  flex-flow: column;

  @media ($bp-medium-min) {
    flex-flow: row;
    max-inline-size: fit-content;
  }

  &__wrapper {
    color: var(--mf-c-font-base);
    font-weight: normal;
    width: 100%;
    display: flex;
    flex-flow: column;
    text-decoration: none;
    inline-size: 100%;
    margin-block-end: 20px;

    &:hover,
    &:focus,
    &:focus-visible,
    &:focus-within {

      .ma__card__title span {
        border-block-end-color: var(--mf-c-link);
      }
    }

    @media ($bp-medium-min) {
      flex-flow: row;
      max-inline-size: fit-content;
      margin-block-end: 0;
    }
  }

  &--secondary {

    @media ($bp-small-min) {
      flex-flow: column;
      flex: 1 1 auto;
    }
  }

  &__content {
    flex: 1 1 auto;
    padding: 20px;

    @media ($bp-medium-min) {
      flex-basis: 40%;
    }

    &--secondary {
      flex-flow: row;
      flex: 1 1 auto;
    }
  }

  &__details {

    &--secondary {
      flex-flow: row;
      display: flex;

       @media ($bp-small-min) {
         flex-flow: column;
       }

       @media ($bp-large-min) {
         flex-flow: row;
       }

      .ma__card__thumbnail {
        flex-basis: 40%;
        padding-right: 20px;

        @media ($bp-small-max) {
          display: none;
          flex-basis: 0%;
        }
      }

      .ma__card__text {
        flex-basis: 60%;

        @media ($bp-small-max) {
          flex: 1 1 auto;
        }
      }
    }

    &--vertical {

      .ma__card__thumbnail {
        display: none;
      }
    }
  }

  &__title {
    text-decoration: none;
    font-weight: $fonts-bold;
    color: var(--mf-c-font-link);

    span {
      border: 3px solid transparent;
      transition: border 0.4s ease;
      display: inline;

      svg {
        display: inline-block;
        height: .6em;
        margin-right: -.8em;
        width: .6em;
        fill: var(--mf-c-font-link);
      }
    }
  }

  &__img {
    flex: 1 1 auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    @media ($bp-medium-min) {
      flex-basis: 60%;

      @include ma-aspect-ratio(4,3);

      img {
        display: none;
      }
    }

    @media ($bp-medium-max) {

      img {
        display: block;
        width: 100%;
      }
    }

    &--secondary {

      @media ($bp-small-min) {
        display: none
      }
    }
  }

  &__eyebrow {
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    font-size: $fonts-2xsmall;
    line-height: 12px;
    letter-spacing: $letter-spacing-large;
    padding: 5px 7px;
    text-transform: uppercase;
    background-color: var(--mf-c-white);
    font-weight: $fonts-bold;

    svg {
      max-height: 18px;
      max-width: 18px;
      margin-right: 5px;
    }
  }

  // White Card variant

  &--c-white {
    background-color: var(--mf-c-white);
    border: 2px solid var(--mf-c-gray-light);

    .ma__card__eyebrow {
      background-color: var(--mf-c-gray-lightest);
    }
  }

  // Vertical Card variant

  &--vertical {
    display: block;
    max-width: 600px;
    block-size: 100%;
    border-block-end: 0;

      .ma__card__title {

        &:after {
          display: none;
        }
      }

    .ma__card__wrapper {
      flex-flow: column;
    }

    .ma__card__img {

      img {
        inline-size: 100%;
        block-size: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        display: block;
      }

      &:before {
        padding-block-start: 0;
      }
    }

    .ma__card__title {

      span {
        border-inline-start: 0;
      }

      a {
        text-decoration: none;
      }
    }

    .ma__card__text {
      font-size: $fonts-medium;
    }
  }

}