/* ===========================================================
   OsunTutors — tutor verification badge (reusable component)

   ONE definition of the Gold/Silver badge, used everywhere a
   tutor's profile picture appears. Do not copy these styles into
   page-specific CSS — include this file and use the markup that
   OsunTutorBadge.avatar() / .badge() produce (js/tutor-badge.js).

   Two shapes, same visual language:
     .osun-avatar        — profile picture with a medallion overlaid
                           on the bottom-right corner + name of tier
     .osun-badge         — standalone inline pill, for rows/lists
                           that show no picture

   Sizes: add .is-sm / .is-lg to .osun-avatar (default is medium).
   =========================================================== */

:root {
  /* Metallics are defined once here. They intentionally do NOT reuse
     --color-gold (the brand action colour used by .btn-gold) — a
     button and an earned credential should not be the same swatch. */
  --osun-gold-1: #f6d879;
  --osun-gold-2: #d4a017;
  --osun-gold-3: #8a6508;
  --osun-silver-1: #eef1f4;
  --osun-silver-2: #b6bfc9;
  --osun-silver-3: #77828e;
  --osun-badge-ring: #fff;
}

/* ---- Avatar + medallion ------------------------------------ */

.osun-avatar {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0; /* kills the descender gap under the img */
  --osun-avatar-size: 64px;
  --osun-medal-size: 26px;
}

.osun-avatar.is-sm { --osun-avatar-size: 44px; --osun-medal-size: 20px; }
.osun-avatar.is-lg { --osun-avatar-size: 112px; --osun-medal-size: 38px; }

.osun-avatar__img {
  display: block;
  width: var(--osun-avatar-size);
  height: var(--osun-avatar-size);
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-alt, #eceff3);
}

/* Fallback disc shown when a tutor has no photo. */
.osun-avatar__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--osun-avatar-size);
  height: var(--osun-avatar-size);
  border-radius: 50%;
  background: var(--color-surface-alt, #eceff3);
  color: var(--color-text-muted, #5b6672);
  font-weight: 600;
  font-size: calc(var(--osun-avatar-size) * 0.36);
  line-height: 1;
  letter-spacing: 0.01em;
  user-select: none;
}

/* The medallion sits ON the rim, not over the face: it is pinned to
   the bottom-right and pulled outward so only the picture's very
   edge is covered, at any avatar size. */
.osun-avatar__medal {
  position: absolute;
  right: calc(var(--osun-medal-size) * -0.12);
  bottom: calc(var(--osun-medal-size) * -0.06);
  width: var(--osun-medal-size);
  height: var(--osun-medal-size);
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 2px var(--osun-badge-ring), 0 1px 3px rgba(16, 24, 32, 0.28);
}

/* The tier name. Sits under the avatar, centred, so it reads as a
   caption for the picture rather than floating text in the card. */
.osun-avatar__tier {
  display: block;
  margin-top: 0.45rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--osun-tier-ink, inherit);
}

.osun-avatar.is-gold   { --osun-tier-ink: var(--osun-gold-3); }
.osun-avatar.is-silver { --osun-tier-ink: var(--osun-silver-3); }

/* When the caption would crowd a tight layout, pages can opt out of
   it with .osun-avatar--nolabel and keep just the medallion. */
.osun-avatar--nolabel .osun-avatar__tier { display: none; }

/* ---- Standalone pill --------------------------------------- */

.osun-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem 0.2rem 0.3rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

.osun-badge__medal { width: 18px; height: 18px; display: block; flex: none; }

.osun-badge.is-gold {
  background: #fdf6e3;
  border-color: #eed9a3;
  color: var(--osun-gold-3);
}

.osun-badge.is-silver {
  background: #f4f6f8;
  border-color: #dbe1e7;
  color: var(--osun-silver-3);
}

/* ---- Sibling overlay for fixed-size photo boxes -------------- */
/* Used via OsunTutorBadge.overlay() on pages whose own photo box
   (e.g. .photo-preview) is a fixed size and may crop its own
   contents. The wrapper must be position:relative and NOT clip
   overflow, so the medallion and caption sit outside that box's own
   circular mask rather than risk being cut off by it. */

.osun-photo-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.osun-photo-medal {
  position: absolute;
  right: -8px;
  bottom: -6px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 2px var(--osun-badge-ring), 0 1px 3px rgba(16, 24, 32, 0.28);
}

.osun-photo-medal__icon { width: 100%; height: 100%; display: block; }

.osun-photo-tier {
  display: block;
  margin-top: 0.4rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.osun-photo-tier.is-gold   { color: var(--osun-gold-3); }
.osun-photo-tier.is-silver { color: var(--osun-silver-3); }

/* ---- Gold/Silver/All listing filter -------------------------- */
/* Shared by any tutor-listing page (parent dashboard, browse tutors)
   that offers the badge filter from Change 5 of the badge brief. */

.tutor-filter-bar {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.tutor-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--color-border, #dde2e8);
  background: var(--color-surface, #fff);
  color: var(--color-text-muted, #5b6672);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tutor-filter-btn:hover { border-color: var(--osun-silver-3); }

.tutor-filter-btn.is-active {
  background: var(--color-ink, #1c2430);
  border-color: var(--color-ink, #1c2430);
  color: #fff;
}

/* ---- Mobile ------------------------------------------------- */
/* Large avatars (profile header) step down so the medallion never
   crowds a narrow column. */
@media (max-width: 480px) {
  .osun-avatar.is-lg { --osun-avatar-size: 88px; --osun-medal-size: 32px; }
}

/* ---- Accessibility ------------------------------------------ */
/* The medallion is decorative; the tier name carries the meaning.
   In forced-colours mode the gradients collapse, so give the pill a
   real border to keep it legible. */
@media (forced-colors: active) {
  .osun-badge { border-color: currentColor; }
  .osun-avatar__medal { box-shadow: 0 0 0 2px canvas; }
}