/* =================================================
   AIVELLE MEMBER PROFILE
   PLATFORM v2.0 — ITERATION 2A
================================================= */


/* =================================================
   01 Hero refinements
================================================= */

.member-profile-v2 .profile-hero {

    align-items:
        end;

}


.member-profile-v2 .profile-hero-actions {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    align-items:
        flex-end;

    justify-content:
        flex-end;

}


.profile-signout {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0;

    border:
        0;

    color:
        var(--member-muted);

    background:
        transparent;

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    font-size:
        10px;

    cursor:
        pointer;

    transition:
        color var(--member-transition-fast);

}


.profile-signout:hover,
.profile-signout:focus-visible {

    color:
        var(--member-gold);

}


/* =================================================
   02 Profile layout
================================================= */

.profile-layout {

    margin-top:
        clamp(74px, 9vw, 124px);

}


.profile-form {

    min-width:
        0;

}


.profile-section {

    display:
        grid;

    grid-template-columns:
        220px minmax(0, 1fr);

    gap:
        var(--member-gap-medium);

    padding-top:
        30px;

    margin-top:
        clamp(68px, 8vw, 106px);

    border-top:
        1px solid var(--member-line);

}


.profile-section:first-child {

    margin-top:
        0;

}


.profile-section-heading {

    display:
        grid;

    grid-template-columns:
        28px minmax(0, 1fr);

    gap:
        16px;

}


.profile-section-number {

    margin:
        3px 0 0;

    color:
        var(--member-gold);

    font-size:
        10px;

    letter-spacing:
        .14em;

}


.profile-section-heading h2 {

    margin:
        14px 0 0;

    color:
        var(--member-white);

    font-size:
        var(--member-heading-sm);

    font-weight:
        400;

    line-height:
        1.08;

    letter-spacing:
        -.035em;

}


/* =================================================
   03 Profile field refinements
================================================= */

.profile-fields {

    gap:
        32px 30px;

}


.profile-preference-copy strong {

    display:
        block;

    color:
        var(--member-white);

    font-size:
        17px;

    font-weight:
        400;

}


.profile-preference-copy small {

    display:
        block;

    max-width:
        620px;

    margin-top:
        9px;

    color:
        var(--member-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* =================================================
   04 Save row
================================================= */

.profile-save-row {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        22px;

    align-items:
        center;

    padding-top:
        36px;

    margin-top:
        58px;

    border-top:
        1px solid var(--member-line);

}


.profile-save-button {

    min-width:
        210px;

}


/* =================================================
   05 Account summary
================================================= */

.profile-account {

    display:
        grid;

    gap:
        58px;

}


.profile-summary-section {

    padding-top:
        28px;

    border-top:
        1px solid var(--member-line);

}


.profile-summary-section h2 {

    margin:
        15px 0 0;

    color:
        var(--member-white);

    font-size:
        var(--member-heading-sm);

    font-weight:
        400;

    line-height:
        1.08;

    letter-spacing:
        -.035em;

}


.profile-summary-copy {

    margin:
        20px 0 0;

    color:
        var(--member-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


.profile-membership-status {

    color:
        var(--member-gold) !important;

    text-transform:
        capitalize;

}


/* =================================================
   06 Responsive
================================================= */

@media (max-width: 1050px) {

    .profile-account {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap:
            28px;

    }

}


@media (max-width: 760px) {

    .member-profile-v2 .profile-hero-actions {

        align-items:
            flex-start;

    }


    .profile-section {

        grid-template-columns:
            1fr;

        gap:
            34px;

    }


    .profile-account {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 600px) {

    .profile-save-button {

        width:
            100%;

    }

}