/* ============================================================
   FEATURE CSS: PROFILE MEDIA
   Home hero (banner + round avatar) and the Settings pickers.
   Deleting this file removes the styling and nothing else.
   ============================================================ */

/* ── Home hero ────────────────────────────────────────────── */
.pm-hero { --pm-av: 76px; position: relative; }

.pm-banner {
  aspect-ratio: 3 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--rim);
}
.pm-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-row {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  padding: 0 var(--s-3);
  /* the avatar sits half over the banner */
  margin-top: calc(var(--pm-av) / -2);
  position: relative;
}
.pm-hero--no-banner .pm-row { margin-top: 0; align-items: center; }

.pm-avatar {
  flex: none;
  width: var(--pm-av);
  height: var(--pm-av);
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent);
}
.pm-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* initials fallback: the shared tile is hex-clipped, here it should be round */
.pm-avatar .initials { clip-path: none; }

.pm-who { min-width: 0; padding-bottom: 2px; }
.pm-name {
  font-size: 1.02rem;
  font-weight: var(--body-weight-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-rank { font-size: 0.72rem; color: var(--support-2); }

/* ── Settings pickers ─────────────────────────────────────── */
.pm-pick-title {
  margin: var(--s-2) 0;
  font-size: 0.78rem;
  font-weight: var(--body-weight-strong);
  color: var(--text-dim);
}
.pm-pick-title:not(:first-child) { margin-top: var(--s-4); }

.pm-grid { display: grid; gap: var(--s-2); padding-bottom: var(--s-2); }
.pm-grid--banner { grid-template-columns: repeat(2, 1fr); }
.pm-grid--avatar { grid-template-columns: repeat(4, 1fr); }

.pm-opt {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--surface-2);
  border: 2px solid var(--rim);
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.pm-opt:hover { border-color: var(--rim-strong); }
.pm-opt:active { transform: scale(0.97); }
.pm-opt.is-active { border-color: var(--accent); }
.pm-opt img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pm-opt--banner { aspect-ratio: 3 / 1; border-radius: var(--r-md); }
.pm-opt--avatar { aspect-ratio: 1; border-radius: 50%; }

@media (max-width: 340px) {
  .pm-grid--avatar { grid-template-columns: repeat(3, 1fr); }
}