/* ======================================================
PROFILE HERO LAYOUT
Controls avatar + info positioning
====================================================== */

.profile-hero{
display:flex;
align-items:center;
gap:32px;
flex-wrap:wrap;
}

.profile-avatar img{
border-radius:50%;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.profile-hero-info{
display:flex;
flex-direction:column;
gap:8px;
}


/* ======================================================
PROFILE NAME
====================================================== */

.profile-name{
font-size:32px;
font-weight:700;
margin-bottom:2px;
}


/* ======================================================
BASIC INFO LINE (Age / Gender / etc)
====================================================== */

.hero-basic{
font-size:18px;
font-weight:500;
color:#444;
letter-spacing:.2px;
}


/* ======================================================
LOCATION LINE
====================================================== */

.hero-location{
font-size:15px;
color:#666;
}


/* ======================================================
RELOCATION LINE
====================================================== */

.hero-relocate{
font-size:14px;
color:#666;
}


/* ======================================================
META LINE (Joined date)
====================================================== */

.profile-meta{
font-size:14px;
opacity:.7;
}


/* ======================================================
EDIT BUTTON
====================================================== */

.profile-edit-button{
margin-top:10px;
padding:10px 18px;
border-radius:8px;
font-weight:600;
}

.profile-edit-button:hover{
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(0,0,0,.15);
}


/* ======================================================
PROFILE CARD STYLING
====================================================== */

.profile-card{
padding:22px;
border-radius:14px;
box-shadow:0 6px 20px rgba(0,0,0,.06);
}


/* ======================================================
PROFILE FIELD SPACING
====================================================== */

.profile-field{
margin-bottom:16px;
}

.profile-field strong{
display:block;
font-size:13px;
color:#777;
margin-bottom:2px;
}


/* ======================================================
GRID SPACING
====================================================== */

.profile-grid{
margin-top:30px;
gap:24px;
}


/* ======================================================
PAGE WIDTH
Improves layout inside Kadence
====================================================== */

.profile-page{
max-width:1100px;
margin:auto;
}


/* ======================================================
MOBILE OPTIMIZATION
====================================================== */

@media (max-width:800px){

.profile-hero{
flex-direction:column;
text-align:center;
}

.profile-avatar{
margin-bottom:10px;
}

.hero-basic{
justify-content:center;
}

}