.cg-category-card {
  --cg-category-card-text: var(--cg-color-surface);
  --cg-category-card-text-muted: rgb(255 255 255 / 0.86);
  --cg-category-card-cta-decoration: rgb(255 255 255 / 0.68);
  --cg-category-card-overlay:
    linear-gradient(180deg, rgb(31 33 31 / 0.04) 0%, rgb(31 33 31 / 0.26) 46%, rgb(31 33 31 / 0.78) 100%),
    linear-gradient(90deg, rgb(31 33 31 / 0.34), transparent 62%);
  --cg-category-card-overlay-hover:
    linear-gradient(180deg, rgb(31 33 31 / 0.06) 0%, rgb(31 33 31 / 0.32) 46%, rgb(31 33 31 / 0.84) 100%),
    linear-gradient(90deg, rgb(31 33 31 / 0.38), transparent 62%);
  position: relative;
  background: var(--cg-color-ink-900);
  border-radius: var(--cg-radius-md);
  overflow: clip;
  display: grid;
  min-height: clamp(13.5rem, 24vw, 25rem);
}

.cg-category-card--text-light {
  --cg-category-card-text: var(--cg-color-surface);
  --cg-category-card-text-muted: rgb(255 255 255 / 0.86);
  --cg-category-card-cta-decoration: rgb(255 255 255 / 0.68);
}

.cg-category-card--text-dark {
  --cg-category-card-text: var(--cg-color-ink-900);
  --cg-category-card-text-muted: var(--cg-color-ink-700);
  --cg-category-card-cta-decoration: rgb(31 33 31 / 0.56);
  --cg-category-card-overlay:
    linear-gradient(180deg, rgb(255 255 255 / 0.04) 0%, rgb(255 255 255 / 0.28) 44%, rgb(255 255 255 / 0.86) 100%),
    linear-gradient(90deg, rgb(255 255 255 / 0.58), transparent 64%);
  --cg-category-card-overlay-hover:
    linear-gradient(180deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0.34) 44%, rgb(255 255 255 / 0.92) 100%),
    linear-gradient(90deg, rgb(255 255 255 / 0.64), transparent 64%);
  background: var(--cg-color-surface);
}

.cg-category-card__link,
.cg-category-card__link:visited,
.cg-category-card__link:hover,
.cg-category-card__link:focus,
.cg-category-card__link:active {
  position: relative;
  color: var(--cg-category-card-text);
  text-decoration: none;
  display: grid;
  height: 100%;
  min-height: inherit;
}

.cg-category-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cg-color-brand-50);
}

.cg-category-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cg-category-card-overlay);
  transition: background var(--cg-motion-base) var(--cg-ease-standard);
}

.cg-category-card__media img,
.cg-media-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cg-category-object-position-x, center) var(--cg-category-object-position-y, center);
  transition: transform var(--cg-motion-base) var(--cg-ease-standard);
}

.cg-media-placeholder {
  background:
    linear-gradient(135deg, var(--cg-color-overlay-brand-strong), transparent),
    linear-gradient(45deg, var(--cg-color-overlay-sand-strong), transparent),
    var(--cg-color-brand-100);
}

.cg-category-card__body {
  position: relative;
  align-self: end;
  display: grid;
  gap: var(--cg-space-2);
  padding: clamp(1rem, 2vw, 1.5rem);
  z-index: 1;
}

.cg-category-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--cg-category-card-text);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--cg-font-weight-bold);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
  text-decoration: none;
  transition: color var(--cg-motion-fast) var(--cg-ease-standard);
}

.cg-category-card .cg-type-body-sm {
  margin: 0;
  color: var(--cg-category-card-text-muted);
}

.cg-category-card__cta,
.cg-category-card__cta:visited,
.cg-category-card__cta:hover,
.cg-category-card__cta:focus,
.cg-category-card__cta:active,
.cg-design-system .cg-category-card__cta:hover,
.cg-design-system .cg-category-card__cta:focus-visible {
  display: inline-flex;
  align-items: center;
  gap: var(--cg-space-2);
  width: fit-content;
  color: var(--cg-category-card-text);
  font-weight: var(--cg-font-weight-semibold);
  text-decoration-line: underline;
  text-decoration-color: var(--cg-category-card-cta-decoration);
  text-decoration-thickness: var(--cg-text-decoration-thickness);
  text-underline-offset: 0.22em;
  transition:
    color var(--cg-motion-fast) var(--cg-ease-standard),
    text-decoration-color var(--cg-motion-fast) var(--cg-ease-standard);
}

.cg-category-card__cta svg {
  width: var(--cg-icon-sm);
  height: var(--cg-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--cg-motion-fast) var(--cg-ease-standard);
}

.cg-category-card__link:hover .cg-category-card__media::after,
.cg-category-card__link:focus-visible .cg-category-card__media::after {
  background: var(--cg-category-card-overlay-hover);
}

.cg-category-card__link:hover .cg-category-card__media img,
.cg-category-card__link:hover .cg-media-placeholder,
.cg-category-card__link:focus-visible .cg-category-card__media img,
.cg-category-card__link:focus-visible .cg-media-placeholder {
  transform: scale(1.025);
}

.cg-category-card__link:hover .cg-category-card__cta,
.cg-category-card__link:focus-visible .cg-category-card__cta {
  color: var(--cg-category-card-text);
  text-decoration-color: currentColor;
}

.cg-category-card__link:hover .cg-category-card__cta svg,
.cg-category-card__link:focus-visible .cg-category-card__cta svg {
  transform: translateX(0.25rem);
}

.cg-category-card__link:active .cg-category-card__cta svg {
  transform: translateX(0.125rem);
}

.cg-category-card__link:focus-visible {
  outline: 2px solid var(--cg-color-info);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--cg-color-surface);
}

@media (prefers-reduced-motion: reduce) {
  .cg-category-card__media::after,
  .cg-category-card__media img,
  .cg-media-placeholder,
  .cg-category-card__cta,
  .cg-category-card__cta svg,
  .cg-category-card__title {
    transition: none;
  }

  .cg-category-card__link:hover .cg-category-card__media img,
  .cg-category-card__link:hover .cg-media-placeholder,
  .cg-category-card__link:focus-visible .cg-category-card__media img,
  .cg-category-card__link:focus-visible .cg-media-placeholder,
  .cg-category-card__link:hover .cg-category-card__cta svg,
  .cg-category-card__link:focus-visible .cg-category-card__cta svg,
  .cg-category-card__link:active .cg-category-card__cta svg {
    transform: none;
  }
}