/***** in this file ***************
  base styling cards
  - specific for S/M & L

  hover & focus effects cards
  - viewport L only

  focus effect CTA
***********************************/

.teaser {
  border-radius: $border-radius--l;
  color: returnColorCSSVar('white');
  height: 500px; // standard height mobile & 2 card version
  overflow: hidden;
  position: relative;
  text-decoration: none;
  width: 100%;

  @include viewport--l('inversed') {
    // added in case JS is disabled:
    margin-right: 5px;
  }

  @include viewport--l {
    // increase hight for 3 card version:
    &--large {
      height: 550px;
    }
  }

  &--small {
    height: 400px;
  }

  .list--checks li::before {
    background-color: returnColorCSSVar('white');
  }
}

.teaser__content {
  padding: 30px 20px;
}

.teaser__gradient,
.teaser__img {
  border-radius: $border-radius--l;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  text-decoration: none; //prevent any hyperlink effect on hover
  top: 0;
  width: 100%;
}

.teaser .teaser__shade {
  background: rgba(15, 25, 65, 0.7);
  opacity: 0;
  transition: opacity .3s ease;
  height:100%;
  width:100%;
 }

.teaser a {
  text-decoration: none;
}

.teaser__gradient {
  background: linear-gradient(
    -180deg,
    rgba(15, 25, 65, 0) 33%,
    rgb(15, 25, 65) 100%
  );
  cursor: pointer;
  transition: all 0.3s ease -1s;
  display: flex;
  padding: 30px 20px;

  @include viewport--l {
    padding: 40px;
    // exception: for 2 cards list on desktop: 50%
    .cards__list--halves & {
      background: linear-gradient(
        -180deg,
        rgba(15, 25, 65, 0) 50%,
        rgb(15, 25, 65) 100%
      );
    }
  }
}

.teaser__wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.teaser__body {
  @include viewport--l {
    margin-top: auto;
    max-height: 338px;
    position: relative;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
}

.teaser--large .teaser__body {
  @include viewport--l {
    max-height: 365px;
  }
}

.teaser--small .teaser__body {
  max-height: 256px;
}

.teaser__header {
  @include viewport--l('inversed') {
    bottom: 70px;
    left: 20px;
    position: absolute;
    right: 20px;
  }

  @include viewport--l {
    height: 100%;
    margin-bottom: -30px; // offset eyebrow space before hover
    transform: translateY(-100%);
  }
}

.teaser__date {
  color: returnColorCSSVar('white');
  margin-bottom: 10px;
}

.teaser__title {
  @include font-style('title--s', 'title--s');
  @include line-clamp(9);
  color: returnColorCSSVar('white');
  margin-bottom: unset;
  max-height: 270px; // keep long titles wihin background gradient scope

}

.teaser__description {
  color: returnColorCSSVar('white');
  opacity: 0;

  @include viewport--l {
    margin-bottom: unset;
    padding-top: 20px;
    transition: opacity 0.3s ease;
  }
}

.cards__list--quarters .teaser__description {
  @include line-clamp(4);
}

.teaser__cta {
  bottom: 0;
  display: inline-flex;
  max-width: 100%;
  @include viewport--l {
    opacity: 0;
    position: absolute;
    transition: transform 0.3s; // first out
  }
}

.teaser__icon {
  @include viewport--l('inversed') {
    bottom: 30px;
    color: returnColorCSSVar('white');
    left: 20px;
    position: absolute;
    top: auto;
  }
}

//////////////////////// HOVER AND FOCUS EFFECTS  //////////////////////////

@include viewport--l {
  .teaser:hover,
  .teaser:focus {
    img {
      filter: blur(5px);
      transition: filter 0.5s;
    }

    .teaser__shade {
      border-radius: $border-radius--l; // to prevent flickering effect
      opacity: 1;
      position: absolute;
      text-decoration: none;
      transition: opacity .3s ease;
    }

    .teaser__body {
      @include line-clamp(6);
      margin-bottom: 90px;
      margin-top: auto;
      transform: translateY(0);
      transition: transform 0.3s; // first in
    }

    &.teaser--small .teaser__body {
      margin-bottom: 70px;
      -webkit-line-clamp: 8;
    }

    .teaser__header {
      transform: translateY(0%);
      margin-bottom: unset;
    }

    .teaser__title {
      max-height: unset;
      overflow: unset;
      -webkit-line-clamp: 10;
    }

    .cards__list--quarters .teaser__title {
      -webkit-line-clamp: 5;
    }

    .teaser__description {
      opacity: 1;
      transition: transform 0.3s ease 0.1s; // second in
    }

    .teaser__cta {
      opacity: 1;
      transition: all 0.2s ease-out 0.1s; // third in (both opacity and transform effect)
    }
  }

  //////////////////////// focus on CTA //////////////////////////

  .teaser__cta:focus {
    opacity: 1;

    + .teaser__body {
      margin-bottom: 90px; // allows for the button and 30px margin
      overflow: hidden;
      transform: translateY(0);

      .teaser__header {
        transform: translateY(0%);
        margin-bottom: unset;
      }

      .teaser__description {
        opacity: 1;
      }
    }
  }
}