/* =========================================
   Profile Hero Avatar Overlap (Mobile)
   ========================================= */

/* Wrapper for hero + profile */
.profile-hero-wrap {
  position: relative;
}

/* Mobile avatar positioning */
.profile-avatar {
  position: absolute;
  left: 50%;
  top: calc(1% - 140px); /* half of 144px avatar */
  transform: translateX(-50%);
  z-index: 10;
}

/* Reset avatar positioning on large screens */
@media (min-width: 1024px) {
  .profile-avatar {
    position: static;
    transform: none;
  }
}

/* Push content down on mobile so it clears avatar */
.profile-content {
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .profile-content {
    margin-top: 0;
  }
}
.profile-avatar img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}