/* Role and firm photos: the avatar row on a course card, and the
   "who this course is for" block on a course page.
   Kept out of courses.css so the two files can be edited independently. */

/* --- course card: avatar + role line ---------------------------------- */
.co-role {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  min-width: 0;
}
.co-role-av {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #f1f1f1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.co-role-av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-role-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.co-role-r {
  font-size: 13px;
  font-weight: 500;
  color: #1f1f1f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-role-f {
  font-size: 12px;
  color: #70757a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- course page: who this course is for ------------------------------ */
/* An inset strip, not a stage: the role and the firm are context, so each
   photo sits small with its caption beside it and the block stays one row. */
.co-who {
  margin: 0 0 28px;
}
.co-who h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 0 0 12px;
}
.co-who-g {
  display: grid;
  gap: 12px 28px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #e8eaed;
  border-radius: 14px;
  background: #f8f9fa;
}
.co-who figure {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-width: 0;
}
.co-who-im {
  display: block;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f3f4;
}
.co-who-p .co-who-im {
  width: 72px;
}
.co-who-f .co-who-im {
  width: 164px;
}
.co-who-im img {
  display: block;
  width: 100%;
  height: auto;
}
.co-who figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0;
}
.co-who-k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #80868b;
}
.co-who-v {
  font-size: 15px;
  font-weight: 500;
  color: #1f1f1f;
}
.co-who-t {
  font-size: 13.5px;
  color: #5f6368;
}
.co-who-n {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #80868b;
}

/* Wide enough for both figures side by side: the firm frame grows, but stays
   well under the portrait-plus-caption column so neither dominates the page. */
@media (min-width: 760px) {
  .co-who-g {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  .co-who-p .co-who-im {
    width: 104px;
  }
  .co-who-f .co-who-im {
    width: 240px;
  }
}

/* 390 px and below: the card role line stays on one line by shrinking the
   avatar rather than wrapping the text under it. */
@media (max-width: 559px) {
  .co-role-av {
    width: 32px;
    height: 32px;
  }
  .co-role-r {
    font-size: 12.5px;
  }
  .co-role-f {
    font-size: 11.5px;
  }
  .co-who h2 {
    font-size: 18px;
  }
  .co-who-g {
    padding: 12px;
    gap: 10px;
  }
  .co-who-f .co-who-im {
    width: 140px;
  }
}

/* RTL: the avatar leads on the right; logical properties keep the rest. */
[dir="rtl"] .co-who figcaption,
[dir="rtl"] .co-role-tx {
  text-align: right;
}

/* --- course page: working-moment photo above the task list ------------ */
/* One per character, 3:2, full content width -- not a second portrait
   (that's .co-who) and not a product screenshot (that's .co-shots). */
/* Capped like the screenshot gallery below it: a working moment, not a hero. */
.co-scene {
  margin: 0 0 20px;
  max-width: 560px;
}
.co-scene-im {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f4f4;
}
.co-scene-im img {
  display: block;
  width: 100%;
  height: auto;
}
.co-scene figcaption {
  margin: 10px 2px 0;
  font-size: 12.5px;
  color: #80868b;
}

[dir="rtl"] .co-scene figcaption {
  text-align: right;
}