/* Profile Layout Styles */
.profile-layout {
    position: relative;
  }
  
  .cover-image {
    height: 12rem;
    width: 100%;
    overflow: hidden;
  }
  
  .cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .profile-container {
    position: relative;
  }
  
  /* Standard Profile Header */
  .profile-header {
    display: flex;
    flex-direction: column;
    margin-top: -3rem;
  }
  
  .avatar-container {
    flex-shrink: 0;
    margin-right: var(--size-4);
  }
  
  .profile-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: var(--radius-full);
    border: 4px solid var(--layer-surface);
    background-color: var(--layer-surface-variant);
    box-shadow: var(--shadow-2);
  }
  
  .profile-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--size-2);
    flex-wrap: wrap;
  }
  
  .profile-name {
    margin-block: var(--size-2);
    color: var(--on-surface);
  }
  
  .profile-details {
    padding-top: var(--size-2);
  }
  
  .border-top {
    border-top: 1px solid var(--outline-variant);
  }
  
  .profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--size-7);
  }
  
  .profile-field.full-width {
    grid-column: 1 / -1;
  }
  
  /* Centered Profile Header */
  .profile-layout.centered .profile-header-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .avatar-container-centered {
    margin-top: -4rem;
    margin-bottom: var(--size-2);
  }
  
  .profile-layout.centered .profile-avatar {
    width: 8rem;
    height: 8rem;
  }
  
  .profile-info-centered {
    width: 100%;
  }
  
  .profile-layout.centered .profile-title {
    margin-top: calc(-1 * var(--size-2));
  }
  
  /* Responsive adjustments */
  @media (min-width: 640px) {
    .cover-image {
      height: 16rem;
    }
    
    .profile-header {
      flex-direction: row;
      align-items: flex-end;
      margin-top: -4rem;
    }
    
    .profile-avatar {
      width: 8rem;
      height: 8rem;
    }
    
    .profile-info {
      flex: 1;
      margin-top: 0;
      padding-bottom: var(--size-2);
    }
    
    .profile-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .profile-layout.centered .avatar-container-centered {
      margin-top: -5rem;
    }
    
    .profile-layout.centered .profile-avatar {
      width: 10rem;
      height: 10rem;
    }
  }