/*
 * @file
 * Styles for card full image component.
 */

.card-full-image {
  --card-full-image-padding: var(--spacing-xs);
  --card-full-image-gap: var(--sp2);
  --card-full-image-aspect-ratio: 5 / 7;
  --card-full-image-background-color: var(--theme-surface);
  --card-full-image-border-radius: var(--radius-md);
  --card-full-image-text-color: var(--theme-text-color-loud);
  --card-full-image-title-font-size: var(--h3-size);
  --card-full-image-title-line-height: var(--h3-line-height);
  --card-full-image-title-letter-spacing: var(--h3-letter-spacing);
  --card-full-image-byline-font-size: var(--body-m-size);
  --card-full-image-byline-line-height: var(--body-m-line-height);
  --card-full-image-byline-letter-spacing: var(--body-m-letter-spacing);
  --theme-focus-ring-color: var(--theme-text-color-loud);

  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: var(--card-full-image-aspect-ratio);
  background-color: var(--card-full-image-background-color);
  border-radius: var(--card-full-image-border-radius);
  overflow: clip;
  text-align: start;

  @media (height < 900px) {
    --card-full-image-aspect-ratio: 4 / 3;
  }

  &:focus-visible {
    outline-offset: -6px;
  }

  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    transition: opacity 0.2s;

    .card-full-image:hover & {
      opacity: 0.5;
    }
  }

  &.theme--light {
    .card-full-image__content {
      background-image: linear-gradient(to top, color-mix(in oklch, white 75%, transparent), transparent);
    }

    img {
      opacity: 1;
    }
  }
}

.card-full-image__link {
  display: flex;
  width: 100%;
  height: 100%;
  margin-top: auto;
  text-decoration: none;

  &:focus-visible {
    outline: none; /* Focus indicator is provided within child to ensure it doesn't have opacity. */
  }
}

.card-full-image__content {
  position: relative; /* Create stacking context. */
  display: flex;
  gap: var(--card-full-image-gap);
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: var(--card-full-image-padding);

  .card-full-image__link:focus-visible & {
    outline: var(--focus-ring-style) var(--focus-ring-width) var(--theme-focus-ring-color);
    outline-offset: -8px;
  }
}

.card-full-image__title,
.card-full-image__byline {
  margin: 0;
  color: var(--card-full-image-text-color);
}

.card-full-image__title {
  font-size: var(--card-full-image-title-font-size);
  line-height: var(--card-full-image-title-line-height);
  letter-spacing: var(--card-full-image-title-letter-spacing);

  .card-full-image--align-y-center & {
    margin-block: auto;
  }

  .card-full-image--title-align-center & {
    text-align: center;
  }
}

.card-full-image__byline {
  font-size: var(--card-full-image-byline-font-size);
  line-height: var(--card-full-image-byline-line-height);
  letter-spacing: var(--card-full-image-byline-letter-spacing);

  .card-full-image--byline-align-end & {
    margin-inline-start: auto;
  }
}