/**
 * src/css/components/avatar.css
 *
 * Default state: a CSS-rendered monogram ("AIR") on a brand gradient —
 * never AI-generated, never a real or synthetic photo, per project rule.
 * src/js/modules/avatar.js swaps this for a real <img> when data/site.json
 * has a non-null profilePhoto — same container, same class, same size,
 * zero layout change either way.
 */

.avatar {
  --avatar-size: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-full, 9999px);
  background: linear-gradient(135deg, var(--color-primary, #0F2A4A), var(--color-secondary, #1B4965));
  color: var(--color-text-inverse, #F8FAFC);
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 600;
  font-size: calc(var(--avatar-size) * 0.36);
  letter-spacing: 0.02em;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}

.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.avatar--sm { --avatar-size: 40px; }
.avatar--md { --avatar-size: 96px; }
.avatar--lg { --avatar-size: 160px; }

@media (prefers-reduced-motion: no-preference) {
  .avatar {
    transition: box-shadow var(--transition-fast, 150ms ease-out);
  }
}