/* DS-008: token replacement for speaker rows. */
.speaker-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tkc-space-5);
}

/* AUD-008: the shell is the canonical `.tkc-card.tkc-card-flush` and the
   photo a canonical `.tkc-media` frame at a fixed portrait ratio beside the
   biography, so a long biography no longer stretches the photo into a strip. */
.speaker-card {
  display: flex;
  align-items: flex-start;
}

.speaker-photo {
  --tkc-media-ratio: 4 / 5;

  flex: 0 0 calc(var(--tkc-space-8) * 3);
}

.speaker-photo > img {
  object-position: center top;
}

.speaker-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  padding: var(--tkc-space-5);
}

.speaker-name {
  margin: 0 0 var(--tkc-space-2);
  color: var(--tkc-color-text);
  font-size: var(--tkc-size-300);
  font-weight: var(--tkc-weight-bold);
  line-height: var(--tkc-leading-tight);
}

.speaker-bio {
  margin: 0;
  color: var(--tkc-color-text-muted);
  line-height: var(--tkc-leading-loose);
}

@media (max-width: 38.75rem) {
  .speaker-card {
    flex-direction: column;
  }

  .speaker-photo {
    --tkc-media-ratio: 4 / 3;

    flex-basis: auto;
    align-self: stretch;
  }
}