/**
 * @file
 * Member voice card component.
 */

.xp-voice-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--xp-voice-card-padding);
  border: 1px solid var(--xp-rule);
  border-radius: var(--xp-voice-card-radius);
  background-color: var(--bs-body-bg);
}

.xp-voice-card > * {
  margin: 0;
}

.xp-voice-card--white {
  background-color: var(--xp-bg-white);
}

.xp-voice-card--light {
  background-color: var(--xp-bg-light);
}

.xp-voice-card--tint {
  background-color: var(--xp-bg-tint);
}

.xp-voice-card--primary,
.xp-voice-card--secondary,
.xp-voice-card--dark {
  border-color: transparent;
}

.xp-voice-card--primary {
  background-color: var(--xp-bg-primary);
}

.xp-voice-card--secondary {
  background-color: var(--xp-bg-secondary);
}

.xp-voice-card--dark {
  background-color: var(--xp-bg-dark);
}

.xp-voice-card__label,
.xp-voice-card__tags {
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.xp-voice-card__label a {
  color: inherit;
  text-decoration: none;
}

.xp-voice-card__line {
  font-size: var(--xp-voice-size);
  font-weight: 700;
  line-height: 1.25;
}

.xp-voice-card__line a {
  color: inherit;
  text-decoration: none;
}

.xp-voice-card__text {
  color: var(--bs-secondary-color);
}

/* Tags sit at the bottom, however long the line above. */
.xp-voice-card__tags {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--bs-secondary-color);
}

/* Linked cards: the focus ring goes round the whole card. */
.xp-voice-card .stretched-link:focus-visible {
  outline: none;
}

.xp-voice-card:has(.stretched-link:focus-visible) {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
}