/* Experts page — layout override */
body.experts-page #main-content {
  justify-content: start;
}

#main-content > .experts-page {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  padding: calc(var(--navbar-height) + var(--block-space)) var(--inline-space) var(--block-space-double);
}

@media (min-width: 100ch) {
  #main-content > .experts-page {
    padding-block-start: var(--block-space);
  }
}

.experts-grid {
  max-inline-size: 80ch;
  margin-inline: auto;
  inline-size: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18ch, 1fr));
  grid-auto-rows: 1fr; /* every card the same height, across rows too */
  gap: var(--block-space);
}

/* House card language: white fill, hairline border, hover lift.
   Type does the hierarchy — name, role, then a quiet middot meta line. */
.expert-card {
  --border-radius: 0.75em;
  --border-color: var(--color-border-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--block-space) * 1.5) var(--inline-space) var(--block-space);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.expert-card:hover {
  --border-color: var(--color-border-darker);
  box-shadow: 0 2px 8px oklch(var(--lch-black) / 0.08);
}

.expert-card__avatar {
  --avatar-size: 10ch;
  margin-block-end: 0.75em;
}

.expert-card__avatar img {
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
}

.expert-card__name {
  font-size: 1.05rem;
  line-height: 1.3;
}

.expert-card__title {
  font-size: 0.85rem;
  margin-block-start: 0.1em;
}

/* One line, ellipsized — keeps every card's interior on the same rhythm;
   the profile page shows the full list */
.expert-card__specialties {
  margin-block-start: 0.5em;
  line-height: 1.4;
  max-inline-size: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quiet cue that the profile leads to LinkedIn — the card itself is the link.
   Pinned to the card bottom so the cues line up across a row. */
.expert-card__linkedin {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-block-start: auto;
  padding-block-start: 0.9em;
  font-weight: 600;
  opacity: 0.55;
  transition: opacity 150ms ease;
}

.expert-card:hover .expert-card__linkedin {
  opacity: 1;
}

/* Expert profile detail — identity header over a two-column body:
   the bio reads in the main column, activity cards sit in a rail */
.expert-profile {
  max-inline-size: 84ch;
  margin-inline: auto;
  padding: calc(var(--navbar-height) + var(--block-space)) var(--inline-space) var(--block-space-double);
}

@media (min-width: 100ch) {
  .expert-profile {
    padding-block-start: var(--block-space);
  }
}

.expert-profile__header {
  padding-block-end: var(--block-space);
  border-block-end: 1px solid var(--color-border);
  margin-block-end: var(--block-space);
}

.expert-profile__avatar {
  --avatar-size: 12ch;
}

.expert-profile__avatar img {
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
}

.expert-profile__actions {
  margin-block-start: 0.75em;
}

/* Same label idiom as the sidebar's section headings */
.expert-profile__heading {
  margin: 0 0 0.6em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.expert-profile__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32ch;
  gap: calc(var(--inline-space) * 2.5);
  align-items: start;
}

.expert-profile__columns--single {
  grid-template-columns: minmax(0, 1fr);
}

.expert-profile__section + .expert-profile__section {
  margin-block-start: var(--block-space);
}

.expert-profile__rail {
  display: flex;
  flex-direction: column;
}

.expert-profile__bio {
  line-height: 1.6;
}

/* Narrow screens: one column, with the timely rail cards leading */
@media (max-width: 100ch) {
  .expert-profile__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .expert-profile__rail {
    order: -1;
    margin-block-end: var(--block-space);
  }
}