/**
 * Contextual related-post callout inside long-form articles.
 */
.cogi-contextual-related {
  margin-block: clamp(2.5rem, 6vw, 3.5rem);
  padding-inline-start: var(--cogi-space-4);
  border-inline-start: 2px solid
    color-mix(in srgb, var(--cogi-color-border) 82%, transparent);
  transition: border-color var(--cogi-transition);
}

.article-body .cogi-contextual-related__link {
  display: grid;
  gap: 0.3rem;
  color: var(--cogi-color-text);
  text-decoration: none;
}

.cogi-contextual-related__label {
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.6;
  color: var(--cogi-color-text-muted);
}

.cogi-contextual-related__title {
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  font-weight: 750;
  line-height: 1.75;
  text-wrap: balance;
  transition: color var(--cogi-transition);
}

.cogi-contextual-related:hover {
  border-inline-start-color: color-mix(
    in srgb,
    var(--cogi-color-accent-oxford) 48%,
    var(--cogi-color-border)
  );
}

.article-body .cogi-contextual-related__link:hover {
  color: color-mix(
    in srgb,
    var(--cogi-color-text) 82%,
    var(--cogi-color-accent-oxford)
  );
  text-decoration: none;
}