@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

.card {
  &-inner {
    display: block;
    max-width: 350px;
    background: var(--color-button-primary-background);
    background: linear-gradient(162deg, var(--theme-color-gradient-01) 50%, var(--theme-color-gradient-02) 98%, var(--theme-color-gradient-03) 100%);
    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;
    clip-path: path("M 0 0 L 350 0 L 350 233 C 237.157 213.1 112.718 213.17 0 233 Z");
    clip-path: path("M 0 0 L 350 0 L 350 215 C 237.157 195.1 112.718 195.17 0 215 Z");
    @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(--color-button-primary-text);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    //background: linear-gradient(132deg, var(--gradient-b) 26.51%, var(--gradient-a) 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(--color-button-primary-background);
    }

    .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;
        }
      }
    }
  }
}