/* Акварельное пятно всегда самый нижний слой: под фото, текстом и иконками.
   Пятно рамки аватара — часть файла рамки, поэтому весь блок рамки изолирован
   и не перекрывает контакты под ним. */

[class*="__stain"] {
  position: absolute;
  z-index: 0 !important;
  pointer-events: none;
}

/* Контейнеры коллажей — выше пятен (кадры внутри сохраняют свои z раскладки).
   position не трогаем: у сетов он absolute/relative в локальных стилях. */
.hhc__collage,
.hkids-collage,
.hsport-collage,
.phc__collage-set,
.moh__collage-set,
.vhc__collage-set,
.eorg-hero__scene {
  z-index: 2;
}

/* Пятно заметки, которое раньше лежало поверх hero-коллажа:
   отдельный слой под медиа, текст заметки — выше. */
.hn-note__stain--under-media {
  position: absolute;
  z-index: 1 !important;
  width: min(9.5em, 42vw);
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: rotate(var(--hn-rot, -6deg));
  transform-origin: center center;
  opacity: var(--hn-opacity, 0.9);
}

.hhc {
  isolation: isolate;
}

.hhc__collage {
  z-index: 3;
}

.hhc .hn-note,
.hhc .hn-note-wrap {
  z-index: 5;
}

/* Шаблон: аватар, рамка поверх кружка, контакты ниже по левому краю кружка. */
.akv-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  max-width: 100%;
}

.akv-person > .akv-avatar,
.akv-person > .phc__avatar-frame {
  position: relative;
  isolation: isolate;
  z-index: 0;
}

.akv-person .akv-avatar__ring,
.akv-person .phc__avatar-ring {
  z-index: 1;
}

.akv-person > .phc__avatar-contacts,
.akv-person > .akv-person__contacts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  margin: 0;
}

.akv-person .profile-banner-contacts {
  justify-content: flex-start;
  width: 100%;
  margin-top: 0;
}