/* ==========================================================================
   Treat Your Teacher -- Avatar System (avatars.css)
   SVG Bitmoji-style character avatars for the marketing site.
   Sizes: sm (40px), md (56px), lg (72px), xl (96px), hero (120px)
   ========================================================================== */

.mkt-avatar {
  --avatar-size: 56px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.mkt-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Size variants ---- */
.mkt-avatar-sm  { --avatar-size: 40px; }
.mkt-avatar-md  { --avatar-size: 56px; }
.mkt-avatar-lg  { --avatar-size: 72px; }
.mkt-avatar-xl  { --avatar-size: 96px; }
.mkt-avatar-hero { --avatar-size: 120px; }

/* ---- Avatar inside phone mockup (smaller) ---- */
.phone-frame .mkt-avatar {
  --avatar-size: 28px;
  border-width: 1px;
}

/* ---- Avatar inside dashboard rows ---- */
.dashboard-teacher-row .mkt-avatar {
  --avatar-size: 36px;
  border-width: 1.5px;
}

/* ---- Avatar in thermometer teacher row ---- */
.teacher-avatars .mkt-avatar {
  --avatar-size: 36px;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
}

/* ---- Testimonial avatar wrapper ---- */
.quote-avatar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.quote-avatar-wrapper .mkt-avatar {
  --avatar-size: 48px;
}