@use 'pix-design-tokens/typography';

.training-card {
  position: relative;
  min-width: 240px;
  padding: 0;
}

.training-card__content {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.training-card-content__title {
  @extend %pix-body-l;

  display: -webkit-box;
  height: 54px;
  margin: 16px 16px 8px;
  overflow: hidden;
  color: var(--pix-neutral-900);
  font-weight: var(--pix-font-medium);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.training-card-content__infos {
  padding: 0 var(--pix-spacing-4x);
}

.training-card-content-infos__tag {
  max-width: 100%;
}

.training-card-content-infos-tag__list {
  display: flex;
  padding-left: 0;

  & > * + *::before {
    margin: 0 1ch;
    content: '•';
  }
}

.training-card-content-infos-tag-list__duration {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-transform: lowercase;
  text-overflow: ellipsis;
}

.training-card-content__illustration {
  position: relative;
  height: 155px;
  margin-top: var(--pix-spacing-6x);

  .training-card-content-illustration {
    &__logo {
      position: absolute;
      left: var(--pix-spacing-4x);
      z-index: 1;
      width: 64px;
      padding: var(--pix-spacing-1x);
      background-color: var(--pix-neutral-0);
      border-radius: 0 0 4px 4px;
    }

    &__image {
      position: absolute;
      z-index: 0;
      width: 100%;
      height: 155px;
      object-fit: cover;
    }
  }
}
