/*
 * 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
  // Typografien kommer fra pkt-heading. Doblet klasse for å slå
  // pkt-heading sin egen marg-nullstilling, som også er (0,2,0).
  &.pkt-card .pkt-card__heading {
    padding: 0;
    margin: 0;
    margin-block-end: 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 {
    @include get-text('pkt-txt-20-light');

    padding: 0;
    margin: 0;
    margin-block-end: map.get(variables.$spacing, 'size-16');
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .pkt-card__metadata {
    @include get-text('pkt-txt-16-light');

    margin-block-start: map.get(variables.$spacing, 'size-16');
    margin-block-end: 0;
    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-block-end: map.get(variables.$spacing, 'size-8');
    margin-block-start: 0;
    &-bottom {
      margin-block-start: map.get(variables.$spacing, 'size-8');
      margin-block-end: 0;
    }
  }

  // DIRECTION

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

    @media screen and (max-width: 36rem) {
      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;
      flex-grow: 0;
      max-height: 400px;
      max-width: 400px;
    }
  }

  // ZOOM

  &.pkt-card--zoom {
    .pkt-card__image img {
      transform: scale(1);
      transition: transform 0.5s ease-in-out;
    }

    &:hover .pkt-card__image img,
    &:focus-within .pkt-card__image img {
      transform: scale(1.1);
    }

    @media (prefers-reduced-motion: reduce) {
      .pkt-card__image img {
        transition: none;
      }

      &:hover .pkt-card__image img,
      &:focus-within .pkt-card__image img {
        transform: none;
      }
    }
  }

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

      @media screen and (max-width: 36rem) {
        margin-inline-end: 0;
        margin-block-end: 2rem;
        max-height: 400px;
        &-square {
          max-width: unset;
        }
      }
    }
  }

  // portait image styles
  &.pkt-card--vertical {
    .pkt-card__image {
      margin-block-end: 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: 36rem) {
          aspect-ratio: 19 / 10;
        }
      }
    }
  }

  // IMAGE ASPECT RATIO
  // Overstyrer standardforholdet. Uten disse klassene er bildet 1:1, eller
  // 19:10 med padding-none + vertical. Doblet .pkt-card gir samme spesifisitet
  // som padding-none-reglene over, og vinner fordi den kommer sist.
  &.pkt-card .pkt-card__image.pkt-card__image-aspect-auto {
    aspect-ratio: auto;

    img {
      height: auto;
    }
  }

  &.pkt-card .pkt-card__image.pkt-card__image-aspect-1-1 {
    aspect-ratio: 1;
  }

  &.pkt-card .pkt-card__image.pkt-card__image-aspect-4-3 {
    aspect-ratio: 4 / 3;
  }

  &.pkt-card .pkt-card__image.pkt-card__image-aspect-3-2 {
    aspect-ratio: 3 / 2;
  }

  &.pkt-card .pkt-card__image.pkt-card__image-aspect-16-9 {
    aspect-ratio: 16 / 9;
  }

  &.pkt-card .pkt-card__image.pkt-card__image-aspect-19-10 {
    aspect-ratio: 19 / 10;
  }

  // IMAGE HEIGHT
  // Låser bildehøyden i stedet for sideforholdet, og trappes opp med
  // skjermbredden. Bildet beskjæres sentrert, så kortet får forutsigbar høyde
  // uansett kildebilde.
  &.pkt-card .pkt-card__image.pkt-card__image-restricted {
    aspect-ratio: auto;

    img {
      width: 100%;
      height: 12.5rem;
      object-fit: cover;
      object-position: center;
    }

    @include bp('tablet-up') {
      img {
        height: 14.375rem;
      }
    }

    @include bp('tablet-big-up') {
      img {
        height: 18.125rem;
      }
    }
  }

  // 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-50);
      }

      &.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: -2px;
  }

  &--outlined {
    outline: 2px solid var(--pkt-color-brand-neutrals-200);
  }

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

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

  &--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);
  }
}