/* =========================================================
   LyricsGroove - Artist Members
   Premium Responsive Members Section
========================================================= */


/* =========================================================
   Section
========================================================= */

.lg-members {

    padding: 25px 0 55px;

    position: relative;
    margin: -40px auto 0px;

}


/* =========================================================
   Members Grid
========================================================= */

.lg-members-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 38px;
    max-width: 1320px;
    margin: 26px auto 0;
}


/* =========================================================
   Member Card
========================================================= */

.lg-member-card {

    width: 190px;

    flex: 0 0 190px;

    padding: 22px 16px 18px;

    background: #ffffff;

    border: 1px solid rgba(28, 85, 255, .18);

    border-radius: 24px;

    box-shadow:
        0 12px 35px rgba(10, 25, 60, .08);

    text-align: center;

    position: relative;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/* Premium top glow */

.lg-member-card::before {

    content: "";

    position: absolute;

    top: -80px;

    left: 50%;

    width: 150px;

    height: 150px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(182, 75, 255, .14) 0%,
            rgba(28, 85, 255, .05) 45%,
            transparent 72%
        );

    pointer-events: none;

}


/* Hover */

.lg-member-card:hover {

    transform: translateY(-8px);

    border-color: rgba(28, 85, 255, .45);

    box-shadow:
        0 20px 45px rgba(10, 25, 60, .15),
        0 0 30px rgba(182, 75, 255, .10);

}


/* =========================================================
   Fixed Circular Photo
========================================================= */

.lg-member-photo-wrap {

    width: 150px;

    height: 150px;

    margin: 0 auto 18px;

    position: relative;

}


/* Outer premium ring */

.lg-member-photo-wrap::before {

    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0A2348 0%,
            #1C55FF 48%,
            #B64BFF 100%
        );

    z-index: 0;

}


/* Image frame */

.lg-member-image {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    overflow: hidden;

    position: relative;

    z-index: 1;

    background: #F3F6FB;

}


/* Actual image */

.lg-member-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1);

}


/* Image hover */

.lg-member-card:hover .lg-member-image img {

    transform: scale(1.08);

}


/* =========================================================
   Member Body
========================================================= */

.lg-member-body {

    display: flex;

    flex-direction: column;

    align-items: center;

    min-height: 142px;

}


/* =========================================================
   Member Name
========================================================= */

.lg-member-name {

    margin: 0;

    color: #081C3A;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 800;

}


/* =========================================================
   Native Name
========================================================= */

.lg-member-native {

    margin-top: 5px;

    color: #7B8798;

    font-size: 13px;

    line-height: 1.3;

}


/* =========================================================
   Position
========================================================= */

.lg-member-position {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 28px;

    margin-top: 13px;

    padding: 5px 13px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #F24E92 0%,
            #B64BFF 100%
        );

    color: #ffffff;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

    box-shadow:
        0 7px 16px rgba(182, 75, 255, .22);

}


/* =========================================================
   View Profile Button
========================================================= */

.lg-member-button {

    width: 100%;

    min-height: 40px;

    margin-top: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 8px 10px;

    border-radius: 12px;

    border: 1.5px solid #081C3A;

    background: #ffffff;

    color: #081C3A;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.2;

    text-decoration: none;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


/* Active button */

a.lg-member-button:hover {

    background: #081C3A;

    border-color: #081C3A;

    color: #ffffff;

    transform: translateY(-2px);

}


/* =========================================================
   Disabled Biography Button
========================================================= */

.lg-member-button-disabled {

    cursor: default;

    opacity: .48;

    background: #F5F7FA;

    border-color: #9AA4B2;

    color: #687385;

}


/* =========================================================
   Section Header Spacing
========================================================= */

.lg-members .lg-section-heading {

    margin-bottom: 0;

}


/* =========================================================
   Desktop
   6 members in one centered row
========================================================= */

@media (min-width: 1200px) {

    .lg-members-grid {

        gap: 28px;

    }

}


/* =========================================================
   Tablet
   3 members per row
========================================================= */

@media (max-width: 1199px) {

    .lg-member-card {

        width: 210px;

        flex-basis: 210px;

    }

}


/* =========================================================
   Small Tablet
   2 members per row
========================================================= */

@media (max-width: 767px) {

    .lg-members {
    padding: 10px 0 45px;
}

    .lg-members-grid {

        gap: 22px;

        margin-top: 20px;

    }

    .lg-member-card {

        width: min(210px, calc(50vw - 28px));

        flex-basis: min(210px, calc(50vw - 28px));

    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 480px) {

    .lg-members-grid {

        gap: 18px;

    }

    .lg-member-card {

        width: min(165px, calc(50vw - 24px));

        flex-basis: min(165px, calc(50vw - 24px));

        padding:
            18px
            12px
            15px;

        border-radius: 20px;

    }

    .lg-member-photo-wrap,
    .lg-member-image {

        width: 120px;

        height: 120px;

    }

    .lg-member-name {

        font-size: 16px;

    }

    .lg-member-native {

        font-size: 12px;

    }

    .lg-member-position {

        font-size: 10px;

        padding:
            5px
            10px;

    }

    .lg-member-button {

        font-size: 11px;

        min-height: 38px;

    }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .lg-member-card,
    .lg-member-image img,
    .lg-member-button {

        transition: none;

    }

}