/*
 * KoloPlus — widgets/profile/profile_header · v1.1.3.848
 *
 * User profile page hero: avatar + name/handle + bio + counts.
 * Compact mobile-first sizing у стилі global user_strip (reference: 44px avatar,
 * 0.95rem name, 0.7rem chips, 8-10px gaps). Hero трохи більший за strip (56px
 * avatar) щоб відрізнятись як "profile-y" блок, але dramatically менший за
 * попередній 96px+24px-padding варіант.
 *
 * Hierarchy:
 *   name 1rem/800        ← найвиразніший
 *   handle 0.78rem mute
 *   bio 0.8rem soft
 *   vip/level pill 0.62rem upper
 *   location 0.72rem mute
 *   count strong 0.92rem / em 0.66rem upper
 */

.w-profile-profile-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, var(--n-accent-soft), transparent 60%),
    var(--n-bg-2);
  border: 1px solid var(--n-line);
  border-radius: 14px;
  margin-bottom: 8px;
}

.w-profile-profile-header.is-vip {
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, color-mix(in oklab, var(--n-accent-plum) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 70% at 100% 100%, var(--n-accent-soft), transparent 60%),
    var(--n-bg-2);
  border-color: color-mix(in oklab, var(--n-accent-plum) 25%, var(--n-line));
}

/* ── Avatar ─────────────────────────────────────────────── */
.w-profile-profile-header__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.w-profile-profile-header__online-dot {
  position: absolute;
  inset-inline-end: 2px;
  bottom: 2px;
}

.w-profile-profile-header__level-pill {
  position: absolute;
  top: -6px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 1px 7px;
  background: var(--n-accent);
  color: var(--n-text-on-accent, #fff);
  font-family: var(--n-font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Body ───────────────────────────────────────────────── */
.w-profile-profile-header__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.w-profile-profile-header__name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.w-profile-profile-header__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--n-text);
  line-height: 1.2;
  word-break: break-word;
  letter-spacing: -0.01em;
}

.w-profile-profile-header__vip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-family: var(--n-font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--n-gold, #c9881e) 14%, transparent);
  color: var(--n-gold, #c9881e);
  border: 1px solid color-mix(in srgb, var(--n-gold, #c9881e) 45%, transparent);
  border-radius: 6px;
  flex-shrink: 0;
}

.w-profile-profile-header__handle {
  font-family: var(--n-font-mono);
  font-size: 0.78rem;
  color: var(--n-text-mute);
  line-height: 1.3;
}

.w-profile-profile-header__bio {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--n-text-soft);
  line-height: 1.45;
  overflow-wrap: break-word;
}

.w-profile-profile-header__location {
  font-size: 0.72rem;
  color: var(--n-text-mute);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.w-profile-profile-header__exp { margin-top: 6px; }

/* ── Counts row ─────────────────────────────────────────── */
.w-profile-profile-header__counts {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid var(--n-line-soft, var(--n-line));
}

.w-profile-profile-header__count {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.w-profile-profile-header__count strong {
  font-family: var(--n-font);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--n-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.w-profile-profile-header__count em {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--n-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Mobile (default — already compact; only minor adjust below 380px) ── */
@media (max-width: 380px) {
  .w-profile-profile-header {
    padding: 10px 12px;
    gap: 10px;
  }
  .w-profile-profile-header__counts {
    gap: 10px;
  }
}