// ==========================================================================
// Image Card Component
// Card with image, title, optional text and link
// ==========================================================================

.c-image-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease;

  &:has(.c-image-card__link:hover),
  &:has(.c-image-card__link:focus-visible) {
    transform: translateY(-2px);
  }
}

.c-image-card__media {
  position: relative;
  background-color: $gray-200;
}

.c-image-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;

  .c-image-card:has(.c-image-card__link:hover) &,
  .c-image-card:has(.c-image-card__link:focus-visible) & {
    transform: scale(1.01);
  }
}

.c-image-card__content {
  padding: 2rem 1rem;
  @include media-breakpoint-up(sm) {
    padding: 2rem 1rem 1.5rem 0;
  }
  @include media-breakpoint-up(md) {
    padding: 1.5rem 0.5rem 1.5rem 0;
  }
  @include media-breakpoint-up(lg) {
    padding: 1.5rem 1.5rem 1.5rem 0;
  }
  @include media-breakpoint-up(xl) {
    padding: 2rem 1rem 1rem 0;
  }
}

.c-image-card__title {
  color: $primary;
  font-weight: $font-weight-bold;
  line-height: 1.3;
  margin-bottom: 0;
  margin-top: 0;
  font-size: $card-title-font-size;

  @include media-breakpoint-up(lg) {
    font-size: $card-title-font-size;
  }
  a {
    color: inherit;
    font-weight: $font-weight-bold;
  }
}

.c-image-card__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: $spacer;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;

  // Stretched link — covers the entire card
  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  &:hover,
  &:focus-visible {
    color: $color-accent;
  }
  &:focus-visible {
    @include focus-visible($color: $secondary-rosenrot);
  }
}

.c-image-card__arrow {
  flex-shrink: 0;
  font-size: 2.25rem;
  transition: transform 0.2s ease;
  @include media-breakpoint-up(md) {
    font-size: 2rem;
  }
  @include media-breakpoint-up(lg) {
    font-size: 2rem;
  }
  @include media-breakpoint-up(xxl) {
    font-size: 2.25rem;
  }
  .c-image-card__link:hover &,
  .c-image-card__link:focus-visible & {
    transform: translateX(2px);
  }
}

.c-image-card__overline {
}

.c-image-card__text {
  font-size: $font-size-base;
  line-height: 1.6;
  margin: 0;
  margin-top: 1rem;
  @include media-breakpoint-up(md) {
    font-size: $font-size-sm;
    margin-top: 0.5rem;
    padding-right: 2rem;
  }
  @include media-breakpoint-up(lg) {
    padding-right: 3rem;
    font-size: $font-size-base;
  }
  @include media-breakpoint-up(xl) {
    padding-right: 4rem;
  }
}

// ==========================================================================
// Variants
// ==========================================================================

// Large variant - for featured cards with text
.c-image-card--large {
  .c-image-card__media {
    aspect-ratio: 16 / 10;
  }
}

// Small variant - compact card without text
.c-image-card--small {
  .c-image-card__media {
    aspect-ratio: 1 / 1;

    @include media-breakpoint-up(md) {
      aspect-ratio: 4 / 5;
    }
  }
}

// Aspect ratio overrides (per-card)
@each $ratio,
  $value
    in (
      "16x10": "16 / 10",
      "16x9": "16 / 9",
      "4x3": "4 / 3",
      "3x2": "3 / 2",
      "1x1": "1 / 1",
      "4x5": "4 / 5",
      "3x4": "3 / 4",
      "2x3": "2 / 3"
    )
{
  .c-image-card--ar-#{$ratio} {
    .c-image-card__image {
      aspect-ratio: #{$value};
      object-fit: cover;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-image-card,
  .c-image-card__image,
  .c-image-card__arrow {
    transition: none;
  }
}

.c-image-card--teaser {
  .c-image-card {
    &__content {
      @include media-breakpoint-up(xl) {
        padding: 2rem 2rem 2rem 0;
      }
    }
    &__title {
      @include media-breakpoint-up(md) {
        font-size: $h4-font-size;
      }
    }
    &__text {
      font-size: $font-size-sm;
      margin-top: 1rem;
      @include media-breakpoint-up(lg) {
        padding-right: 2rem;
      }
      display: none;
    }

    &__arrow {
      flex-shrink: 0;
      font-size: 2rem;
      transition: transform 0.2s ease;
      @include media-breakpoint-up(md) {
        font-size: 2rem;
      }
      @include media-breakpoint-up(lg) {
        font-size: 2rem;
      }
      @include media-breakpoint-up(xxl) {
        font-size: 2rem;
      }
    }
  }
}