/* public/assets/css/hero-avatar.css */

/* Core: circular hero image (like Facebook) */
.jl-hero-avatar {
  /* sizing via CSS vars */
  --size: clamp(64px, 12vw, 144px);
  --ring: 2px;
  --ring-color: rgba(0, 0, 0, 0.08);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.12);

  width: var(--size);
  height: var(--size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: inline-block;

  /* ring + shadow */
  box-shadow: 0 0 0 var(--ring) var(--ring-color), var(--shadow);
  background-color: #f3f4f6; /* fallback bg */
}

/* Size modifiers */
.jl-hero-avatar--sm { --size: 64px; }
.jl-hero-avatar--md { --size: 96px; }
.jl-hero-avatar--lg { --size: 128px; }

/* Optional: circular container if you need background circle with padding */
.jl-hero-wrap {
  --pad: 6px;
  --bg: #ffffff;
  --ring: 2px;
  --ring-color: rgba(0, 0, 0, 0.08);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.12);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  border-radius: 9999px;
  background: var(--bg);
  box-shadow: 0 0 0 var(--ring) var(--ring-color), var(--shadow);
}
.jl-hero-wrap .jl-hero-avatar {
  box-shadow: none; /* avoid double shadow when wrapped */
}

/* Accessibility helpers */
.jl-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}