@use "system/breakpoints";
@use "system/colors";
@use "system/icon-map";
@use "system/spacing";
@use "system/typography";
@use "system/states";
@use "sass:map";

$ods-landscape-card-height-breakpoint-medium: 286px;
$ods-landscape-card-height-breakpoint-large: 300px;
$ods-landscape-card-height-large-breakpoint-medium: 421px;
$ods-landscape-card-height-large-breakpoint-large: 421px;

.ods-landscape-card {
  &__media {
    @include breakpoints.medium {
      grid-column: 1/-5;
    }

    img {
      height: 184px;
      object-fit: cover;
      width: 100%;
      display: block;
      line-height: 0;

      @include breakpoints.medium {
        height: $ods-landscape-card-height-breakpoint-medium;
      }

      @include breakpoints.large {
        height: $ods-landscape-card-height-breakpoint-large;
      }
    }
  }

  &__content {
    @extend %ods-padding-5;
    @extend %ods-color-bg-gray-light;
    @extend %ods-padding-6-breakpoint-medium, %ods-padding-vertical-8-breakpoint-large;

    display: grid;
    align-content: center;

    @include breakpoints.medium {
      width: 100%;
      grid-column: -5/-1;
    }

    @include breakpoints.large {
      max-height: $ods-landscape-card-height-breakpoint-large;
      overflow: hidden;
    }

    & > *:not(:has(span)) {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }

  &__link {
    text-decoration: none;

    @include breakpoints.medium {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
    }

    &:hover {
      .ods-landscape-card__content {
        color: states.$hover;
      }

      .ods-landscape-card__heading {
        text-decoration: underline;
      }
    }

    &:focus-visible {
      box-shadow: 0 0 0 0.125rem colors.$blue-state;
      outline-offset: 0.125rem;
      outline: 0.25rem solid colors.$purple-light;
    }
  }

  &--no-image {
    & .ods-landscape-card__content {
      @include breakpoints.medium {
        grid-column: 10/1;
      }
    }
  }

  &__label {
    @extend %ods-text--size-lima;
    @extend %ods-margin-bottom-3, %ods-margin-bottom-4-breakpoint-medium;
    @extend %ods-text--weight-medium;

    line-clamp: 1;
    -webkit-line-clamp: 1;
  }

  &__heading {
    @extend %ods-margin-bottom-1;
    @extend %ods-text--size-india, %ods-text--size-golf-breakpoint-medium;
    @extend %ods-text--weight-medium;

    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

  &__text {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-text--weight-light;

    line-clamp: 3;
    -webkit-line-clamp: 3;
  }

  &__published {
    @extend %ods-margin-top-3, %ods-margin-top-4-breakpoint-medium;
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;

    line-clamp: 2;
    -webkit-line-clamp: 2;

    @include breakpoints.large {
      line-clamp: 1;
      -webkit-line-clamp: 1;
    }
  }

  &--white {
    & .ods-landscape-card__content,
    & .ods-landscape-card__actions {
      @extend %ods-color-bg-white;
    }
  }

  &--blue-light {
    & .ods-landscape-card__content {
      @extend %ods-color-bg-blue-light;
    }

    & .ods-landscape-card__content img {
      @include breakpoints.medium {
        background-position: center;
        background-size: cover;
        object-fit: cover;
      }
    }
  }

  &--image-breakpoint-medium {
    & .ods-landscape-card__media {
      img {
        display: none;
        @include breakpoints.medium {
          display: block;
        }
      }
    }
  }

  &--zoom {
    & .ods-landscape-card__link {
      & .ods-landscape-card__media {
        overflow: hidden;

        img {
          transform: scale(1);
          transition: all 0.5s;
        }
      }

      &:hover {
        & .ods-landscape-card__media {
          img {
            transform: scale(1.1);
          }
        }
      }
    }
  }

  &--external {
    & .ods-landscape-card__link .ods-landscape-card__heading {
      &::after,
      &:hover::after {
        font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
        font-size: 0.6em;
        content: map.get(icon-map.$icons, "new-window") !important;
        display: inline-block;
        margin-left: 0.4em;
      }
    }
  }
}