@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.card {
  &-inner {
    display: block;
    max-width: 350px;
    background: var(--theme-color-primary);
    border-radius: 16px;
    @media(max-width: 645px) {
      max-width: 230px;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .image-box {
    overflow: hidden;
    height: 233px;
    position: relative;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    @media(max-width: 645px) {
      height: 153px;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      transition: all 0.3s ease-in-out;
    }

    .copyright {
      @include copyright;
      margin-bottom: 8px;
    }
  }

  .text-box {
    position: relative;
    height: 197px;
    padding: 0 25px;
    color: var(--theme-color-white);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    background: var(--theme-color-gradient-01);
    background: linear-gradient(162deg, var(--theme-color-gradient-01) 50%, var(--theme-color-gradient-02) 98%, var(--theme-color-gradient-03) 100%);
    @media(max-width: 645px) {
      height: 130px;
    }

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: -34px;
      width: 100%;
      height: 34px;
      clip-path: path('M 0 15.88 C 112.843 -4.02 237.282 -3.95 350 15.88 L 350 234 L 0 234 Z');
      background: var(--theme-color-gradient-01);
    }

    .kicker {

    }

    .like-h4 {
      text-decoration: underline;
      margin: 0;
    }
  }

  &:hover {
    .card-inner {
      .image-box {
        img {
          scale: 1.1;
        }
      }
    }
  }


  &.extern,
  &.download,
  &.intranet,
  &.gallery,
  &.interaction,
  &.video {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-small-stern;
          font-family: 'Icons', sans-serif;
          position: relative;
          font-size: var(--icon-size-small);
          line-height: 1;
          text-decoration: none;
          display: inline-block;
          vertical-align: top;
          margin-left: 0.2em;
          @media(min-width: 983px) {
            margin-top: 0.1rem;
          }
          @media(min-width: 1340px) {
            margin-top: 0.27rem;
          }
        }
      }
    }
  }
  &.extern {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-small-link-external;
        }
      }
    }
  }
  &.download {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-small-download;
        }
      }
    }
  }
  &.intranet {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-small-schloss;
        }
      }
    }
  }
  &.gallery {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-galerie-small;
        }
      }
    }
  }
  &.interaction {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-interaction-small;
        }
      }
    }
  }
  &.video {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-video-small;
        }
      }
    }
  }
}