.card {
  container-name: card;
  container-type: inline-size;
  position: relative;

  &:has(.card__headline :focus-visible:not(.u-invisible-focus)) {
    @include use-focus-outline();
  }

  &:has(:any-link:hover, :focus-visible:not(.u-invisible-focus)) {
    --image-cover-zoom: 1.05;
  }
}

.card:is([data-card-color='cyan']) {
  --card-image-background-color: var(--color-cyan-light);
  --card-highlight-background-color: var(--color-cyan-light);
}

.card:is([data-card-color='green']) {
  --card-image-background-color: var(--color-green-light);
  --card-highlight-background-color: var(--color-green-light);
}

.card:is([data-card-color='yellow']) {
  --card-image-background-color: var(--color-yellow-light);
  --card-highlight-background-color: var(--color-yellow-light);
}

.card:is([data-card-color='purple']) {
  --card-image-background-color: var(--color-purple-light);
  --card-highlight-background-color: var(--color-purple-light);
}

.card:is([data-card-color='blue']) {
  --card-image-background-color: var(--color-blue-light);
  --card-highlight-background-color: var(--color-blue-light);
}

.card:is([data-card-color='red']) {
  --card-image-background-color: var(--color-red-light);
  --card-highlight-background-color: var(--color-red-light);
}

.card:is([data-card-color='orange']) {
  --card-image-background-color: var(--color-orange-light);
  --card-highlight-background-color: var(--color-orange-light);
}

.card__inner {
  block-size: 100%;
  column-gap: 3rem;
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;

  .card:is([data-card-type='list']) & {
    @container card (inline-size >= 50rem) {
      --card-badge-max-width: clamp(20rem, 33.33%, 30rem);
      --card-image-width: clamp(20rem, 33.33%, 30rem);

      flex-direction: row;
    }
  }

  .card:is([data-card-type='highlight']) & {
    --card-content-padding-inline: min(4cqi, 2rem);
    --card-content-padding-block: 3rem;

    background-color: var(--card-highlight-background-color, var(--color-orange-light));
    row-gap: 0;

    @container card (inline-size >= 60rem) {
      --card-image-height: 100%;
      --card-image-aspect-ratio: auto;
      --card-content-padding-inline: min(5cqi, 4rem);
      --card-content-justify-content: center;
      --card-badge-max-width: 50%;
      --card-image-order: 2;

      aspect-ratio: 16 / 10;
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: 1fr 1fr;

      &:has(.card__badge) {
        --card-content-padding-block: 8rem 3.8rem;
      }
    }

    @container card (inline-size >= 70rem) {
      aspect-ratio: 16 / 6;
    }

    @container card (inline-size >= 100rem) {
      aspect-ratio: 16 / 4;
    }
  }
}

.card__image {
  align-self: flex-start;
  aspect-ratio: var(--card-image-aspect-ratio, 16 / 9);
  background-color: var(--card-highlight-background-color, var(--color-blue-light));
  background-color: var(--card-image-background-color, var(--color-blue-light));
  block-size: var(--card-image-height, auto);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  inline-size: var(--card-image-width, 100%);
  justify-content: center;
  order: var(--card-image-order, auto);
  position: relative;
  z-index: 1;
}

.card__logo {
  align-self: center;
  max-inline-size: min(60%, 30rem);
}

.card__overlay-logo {
  --image-max-height: 5.6rem;

  block-size: min(33.33%, 10rem);
  display: flex;
  inline-size: auto;
  inset-block-end: 0;
  inset-inline-end: 0;
  position: absolute;
  z-index: 3;
}

.card__logo--force-transparent {
  background-color: var(--card-image-background-color);
  background-color: var(--card-highlight-background-color);

  > * {
    mix-blend-mode: multiply;
  }
}

.card__context {
  background-color: var(--card-highlight-background-color, var(--color-white));
  inline-size: fit-content;
  inset-block-end: 0;
  inset-inline-end: 0;
  padding-block: 1.6rem;
  padding-inline: 2.4rem;
  position: absolute;
  text-align: center;
  z-index: 4;
}

.card__context-icon {
  font-size: 2rem;
}

.card__context-text {
  font-size: 1.4rem;
  font-weight: var(--font-weight-bold);
  margin-block-start: 0.8rem;
  white-space: nowrap;
}

.card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--card-content-gap, 1rem);
  justify-content: var(--card-content-justify-content, flex-start);
  padding-block: var(--card-content-padding-block, 0);
  padding-inline: var(--card-content-padding-inline, 0);

  > :first-child {
    margin-block-start: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }
}

.card__badge {
  align-items: center;
  background-color: var(--card-badge-background-color, var(--color-midnight));
  block-size: var(--card-badge-height, 5.6rem);
  color: var(--card-badge-color, var(--color-white));
  display: flex;
  font-size: var(--card-badge-font-size, 1.6rem);
  font-weight: var(--card-badge-font-weight, var(--font-weight-semibold));
  gap: var(--card-badge-gap, 0.5em);
  inline-size: fit-content;
  inset-block-start: 0;
  inset-inline-start: 0;
  line-height: var(--card-badge-line-height, var(--line-height-small));
  margin-block-end: 2rem;
  max-inline-size: var(--card-badge-max-width, 100%);
  padding-inline: var(--card-badge-padding, 1.2em);
  z-index: 2;

  .card:has(.card__image) & {
    margin-block-end: 0;
    position: absolute;
  }
}

.card__badge-icon {
  color: var(--card-badge-icon-color, var(--color-orange));
  font-size: var(--card-badge-icon-size, 1.2em);
  line-height: 0;
}

.card__badge-text {
  --line-clamp: 1;
}

.card__action-bar {
  float: right;
  padding-block-end: 1.5rem;
  padding-inline-start: 1.5rem;
  position: relative;
  z-index: 5;
}

.card__breadcrumbs {
  color: var(--card-breadcrumb-color, var(--color-grey-dark));
  font-size: var(--card-breadcrumb-font-size, 1.4rem);
  line-height: var(--card-breadcrumb-line-height, var(--line-height-default));
  margin-block-end: 1.5rem;
}

.card__breadcrumb {
  display: inline;

  &:not(:last-child)::after {
    content: '/';
    margin-inline: 0.5em;
  }
}

.card__headline {
  --headline-kicker-font-weight: var(--font-weight-regular);
  --headline-kicker-spacing: 1rem;
  --line-clamp: var(--card-headline-line-clamp, 4);
  --focus-outline-width: 0;
  --focus-outline-color: transparent;

  overflow-wrap: break-word;
  padding-block-end: 0.2rem;

  .card__breadcrumbs + & {
    margin-block-start: var(--card-content-gap, 1rem);
  }
}

.card__details {
  display: grid;
  gap: var(--card-details-gap, 1rem);
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.card__detail {
  color: var(--card-details-color, var(--text-color));
  font-size: var(--card-details-font-size, 1.5rem);
  line-height: var(--card-details-line-height, var(--line-height-body));
  position: relative;

  &:has(.card__detail-label-icon) {
    padding-inline-start: calc(var(--card-details-icon-size, 1.1em) + var(--card-details-gap, 0.6em));
  }
}

.card__detail-label {
  display: contents;
}

.card__detail-label-icon {
  color: var(--card-details-icon-color, var(--color-orange));
  font-size: var(--card-details-icon-size, 1.1em);
  inset-block-start: 0.2em;
  inset-inline-start: 0;
  line-height: 0;
  position: absolute;
}

.card__detail-label-text {
  display: inline;
  font-weight: var(--font-weight-semibold);
  margin-inline-end: 0.4em;

  &::after {
    content: ':';
  }
}

.card__detail-text {
  display: inline;
}

.card__description {
  font-size: var(--card-description-font-size, 1.6rem);
  line-height: var(--card-description-line-height, var(--line-height-body));
  margin-block-start: 0.5rem;
}