// --------------------------------------------------------------------------
// News Card (.c-news-card)
// --------------------------------------------------------------------------

.c-news-card {
  --hks-card-padding-y: 0;
  --hks-card-padding-x: 0;
  --hks-card-spacer-y: 2rem;
  --hks-card-spacer-x: 1.5rem;
  --hks-card-title-spacer-y: 0.5rem;
  --hks-card-title-color: ;
  --hks-card-subtitle-color: ;
  --hks-card-border-width: var(--hks-border-width);
  --hks-card-border-color: var(--hks-border-color-translucent);
  --hks-card-border-radius: var(--hks-border-radius);
  --hks-card-box-shadow: ;
  --hks-card-inner-border-radius: calc(
    var(--hks-border-radius) - (var(--hks-border-width))
  );
  --hks-card-cap-padding-y: 0.5rem;
  --hks-card-cap-padding-x: 1rem;
  --hks-card-cap-bg: rgba(var(--hks-body-color-rgb), 0.03);
  --hks-card-cap-color: ;
  --hks-card-height: ;
  --hks-card-color: #000;
  --hks-card-bg: var(--hks-body-bg);
  --hks-card-img-overlay-padding: 1rem;
  --hks-card-group-margin: 0.75rem;

  position: relative;
  border: none;
  background: transparent;
  overflow: visible;

  @include media-breakpoint-up(1600) {
    --hks-card-spacer-x: 2rem;
  }

  &:hover {
    // box-shadow: 0 6px 24px rgba($black, 0.12);
    a {
      text-decoration: underline;
    }
  }

  &__media {
    position: relative;
    overflow: visible;
  }

  &__media-inner {
    overflow: hidden;
  }

  &__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.35s ease;

    .c-news-card:hover & {
      transform: scale(1.03);
    }
  }

  &__meta-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(33%);
    width: clamp(8rem, 40%, 14rem);
    background: $primary;
    color: $white;
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
    @include media-breakpoint-up(sm) {
      padding: 0.75rem 1rem;
    }
    @include media-breakpoint-up(lg) {
      padding: 1rem 1.25rem;
    }
  }

  &__meta-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  &__meta-item--date .c-news-card__meta-text {
    font-weight: $font-weight-semibold;
  }

  &__meta-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    @include media-breakpoint-up(lg) {
      font-size: 1.125rem;
    }
  }

  &__meta-text {
    margin: 0;
    font-size: 0.8125rem;
    @include media-breakpoint-up(lg) {
      font-size: 0.875rem;
    }
    line-height: 1.2;
    color: inherit;
  }

  &__body {
    background: $bg-light;
    padding-top: clamp(2.5rem, 8vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 2rem);
    min-height: clamp(12rem, 14vw, 13.5rem);
    @media (max-width: 400px) {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .c-copyright--below {
      position: static;
      margin-top: auto;
      padding-right: 0;
      text-align: right;
    }
  }

  &__title {
    margin: 0;
    color: $primary;
    font-size: $news-card-title-font-size-sm;
    @media (max-width: 350px) {
      font-size: 1rem;
    }
    @include media-breakpoint-up(lg) {
      font-size: $news-card-title-font-size;
    }
    // font-weight: $font-weight-regular;
    line-height: 1.3;
    // letter-spacing: 0;

    a {
      color: inherit;
      font-weight: inherit;
      font-size: inherit;
    }
  }

  &__text {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-size: $font-size-sm;
  }

  // @include media-breakpoint-down(sm) {
  //   &__meta-panel {
  //     left: 1rem;
  //     width: calc(100% - 2rem);
  //     transform: translateY(38%);
  //   }
  // }
}