/**
 * Samtrygg Design System — Avatar Component
 * Version: 1.2 · April 2026
 *
 * Depends on: _tokens.css
 *
 * Usage:
 *   <div class="avatar">KL</div>                       default (44px), initials
 *   <div class="avatar avatar--sm">KL</div>            small (32px)
 *   <div class="avatar avatar--lg">KL</div>            large (60px)
 *   <img class="avatar" src="…photo…" alt="Name"/>   photo variant
 *
 * Rules:
 *   - Always provide alt text or aria-label for screen readers
 *   - Initials: max 2 characters, uppercase
 *   - Photo: object-fit cover, same border-radius as base
 *   - Never nest interactive elements inside avatar
 *   - Use .avatar--verified to show a green check badge
 */

.avatar {
  --avatar-size:   44px;
  --avatar-fs:     var(--text-base);

  width:           var(--avatar-size);
  height:          var(--avatar-size);
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--sam-brown-light), #c9a382);
  color:           var(--text-primary);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--avatar-fs);
  font-weight:     800;
  letter-spacing:  -0.01em;
  flex-shrink:     0;
  object-fit:      cover;   /* when used as <img> */
  user-select:     none;
}

/* ── Size modifiers ── */

.avatar--sm {
  --avatar-size:  32px;
  --avatar-fs:    var(--text-xs);
}

.avatar--lg {
  --avatar-size:  60px;
  --avatar-fs:    var(--text-lg);
}

.avatar--xl {
  --avatar-size:  80px;
  --avatar-fs:    var(--text-xl);
}

/* ── Colour variants (when no photo) ── */

.avatar--warm   { background: linear-gradient(135deg, var(--ph-warm-start),   var(--ph-warm-end)); }
.avatar--green  { background: linear-gradient(135deg, var(--ph-green-start),  var(--ph-green-end)); }
.avatar--blue   { background: linear-gradient(135deg, var(--ph-blue-start),   var(--ph-blue-end)); }
.avatar--rose   { background: linear-gradient(135deg, var(--ph-rose-start),   var(--ph-rose-end)); }
.avatar--dark   { background: var(--surface-inverse); color: var(--text-inverse); }

/* ── Verified badge overlay ── */

.avatar-wrap {
  position:  relative;
  display:   inline-flex;
  flex-shrink: 0;
}

.avatar-wrap .avatar--badge {
  position:    absolute;
  bottom:      0;
  right:       0;
  width:       16px;
  height:      16px;
  border-radius: 50%;
  background:  var(--color-success);
  border:      2px solid var(--surface-raised);
  display:     flex;
  align-items: center;
  justify-content: center;
}

.avatar-wrap .avatar--badge svg {
  width:        8px;
  height:       8px;
  stroke:       #fff;
  fill:         none;
  stroke-width: 3;
}

/* ── Avatar group (stacked) ── */

.avatar-group {
  display:    flex;
  flex-direction: row-reverse;
}

.avatar-group .avatar {
  border:      2px solid var(--surface-raised);
  margin-left: -10px;
}

.avatar-group .avatar:last-child {
  margin-left: 0;
}