/*
 * Cardcomponent
 */
@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/breakpoints' as *;
@use '../abstracts/' as *;

pkt-card {
  display: block;
  width: 100%;
}

.pkt-card {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 12.5rem;
  padding: map.get(variables.$spacing, 'size-24');

  .pkt-card__wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 53%;
    width: 100%;
    overflow: hidden;
  }

  // PADDING AND MARGINS

  &.pkt-card--padding-none {
    padding: 0;
  }

  // HEADINGS, TEXT, SUBTEXT

  .pkt-card__heading {
    h1,
    h2,
    h3,
    h4,
    h5 {
      padding: 0;
      margin: 0;
      font-size: map.get(variables.$font-size, 'size-30');
      font-weight: map.get(variables.$font-weight, 'regular');
      margin-bottom: map.get(variables.$spacing, 'size-8');
      hyphens: auto;
      overflow-wrap: break-word;
    }
  }

  .pkt-card__link {
    text-decoration-thickness: 0.12rem;
    text-underline-offset: 0.15em;
  }

  p.pkt-card__subheading {
    padding: 0;
    margin: 0;
    line-height: unset;
    margin-bottom: map.get(variables.$spacing, 'size-16');
    font-size: map.get(variables.$font-size, 'size-20');
    font-weight: map.get(variables.$font-weight, 'light');
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .pkt-card__metadata {
    margin-top: map.get(variables.$spacing, 'size-16');
    margin-bottom: 0;
    line-height: unset;
    gap: map.get(variables.$spacing, 'size-8');
  }

  .pkt-card__metadata-lead {
    font-weight: map.get(variables.$font-weight, 'medium');
  }

  .pkt-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: map.get(variables.$spacing, 'size-8');
    margin-top: 0;
    &-bottom {
      margin-top: map.get(variables.$spacing, 'size-8');
      margin-bottom: 0;
    }
  }

  // DIRECTION

  &.pkt-card--horizontal {
    flex-direction: row;

    @media screen and (max-width: map.get(variables.$breakpoints, 'phablet')) {
      flex-direction: column;
    }
  }

  &.pkt-card--vertical {
    flex-direction: column;
    min-width: 12.5rem;
  }

  // IMAGE

  .pkt-card__image {
    aspect-ratio: 1;
    flex: 1 1 47%;
    width: 100%;
    overflow: hidden;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    &.pkt-card__image-round {
      border-radius: 50%;
      align-self: unset;
      max-height: 400px;
      max-width: 400px;
    }
  }

  //horizontal image styles
  &.pkt-card--horizontal {
    .pkt-card__image {
      max-width: 400px;
      margin-right: 2rem;
      &-square {
        align-self: stretch;
      }

      @media screen and (max-width: map.get(variables.$breakpoints, 'phablet')) {
        margin-right: 0;
        margin-bottom: 2rem;
        max-height: 400px;
        &-square {
          max-width: unset;
        }
      }
    }
  }

  // portait image styles
  &.pkt-card--vertical {
    .pkt-card__image {
      margin-bottom: 2rem;
      max-height: 400px;
    }
  }

  // Padding none variants
  &.pkt-card--padding-none {
    &.pkt-card--vertical {
      .pkt-card__image-square {
        aspect-ratio: 19 / 10;
      }
    }

    &.pkt-card--horizontal {
      .pkt-card__image-square {
        @media screen and (max-width: map.get(variables.$breakpoints, 'phablet')) {
          aspect-ratio: 19 / 10;
        }
      }
    }
  }

  // LINK

  .pkt-card__wrapper .pkt-card__link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    box-shadow: 0px 0px 0px 0px transparent;
    outline: 2px solid var(--pkt-color-brand-warm-blue-1000);
    outline-offset: -2px;
    outline-color: transparent;
    transition: all 0.3s ease-in-out;
  }

  .pkt-card__link-heading {
    transition:
      color 0.2s ease-in-out,
      text-decoration-color 0.2s ease-in-out;
  }

  // HOVER STATE

  &:hover,
  &:focus-visible,
  &:focus-within {
    &.pkt-card--border-on-hover .pkt-card__link::before {
      cursor: pointer;
      outline-color: var(--pkt-color-brand-warm-blue-1000);
    }
    .pkt-card__link-heading {
      color: var(--pkt-color-brand-warm-blue-1000);
      text-decoration-color: var(--pkt-color-brand-warm-blue-1000);
    }
  }

  // FOCUS STATES

  .pkt-card__link:focus {
    outline: none;
    box-shadow: none;
  }

  .pkt-card__link-heading:focus-within {
    color: var(--pkt-color-brand-warm-blue-1000);
    text-decoration-color: var(--pkt-color-brand-warm-blue-1000);
  }

  .pkt-card__wrapper .pkt-card__link:focus-visible::before {
    box-shadow: 0px 0px 0px 4px var(--pkt-color-brand-purple-1000);
    outline-color: var(--pkt-color-brand-warm-blue-1000);
  }

  // SKIN VARIANTS FOR NO PADDING

  &.pkt-card--padding-none {
    outline: none;
    background-color: transparent;

    &.pkt-card--horizontal {
      &.pkt-card--gray {
        background-color: var(--pkt-color-brand-neutrals-100);
      }

      &.pkt-card--blue {
        background-color: var(--pkt-color-brand-blue-200);
      }

      &.pkt-card--green {
        background-color: var(--pkt-color-brand-light-green-400);
      }

      &.pkt-card--beige {
        background-color: var(--pkt-color-brand-light-beige-1000);
      }
    }
  }

  // SKINS

  &--outlined,
  &--outlined-beige {
    background-color: var(--pkt-color-background-default);
    outline-offset: -4px;
  }

  &--outlined {
    outline: 4px solid var(--pkt-color-grays-gray-100);
  }

  &--outlined-beige {
    outline: 4px solid var(--pkt-color-brand-light-beige-1000);
  }

  &--gray {
    background-color: var(--pkt-color-brand-neutrals-100);
  }

  &--blue {
    background-color: var(--pkt-color-brand-blue-200);
  }

  &--green {
    background-color: var(--pkt-color-brand-light-green-400);
  }

  &--beige {
    background-color: var(--pkt-color-brand-light-beige-1000);
  }
}