/* =========================================
   MFDCO MEMBERS
========================================= */


/* =========================================
   PAGE
========================================= */

.members-page {

    width:
        100%;

    min-height:
        100vh;

    background:
        #ffffff;

    color:
        #171717;

}


/* =========================================
   HERO
========================================= */

.members-hero {

    padding:
        90px 30px 70px;

    background:
        #f4f6f6;

    border-bottom:
        1px solid #e1e5e5;

}


.members-hero-inner {

    width:
        min(1180px, 100%);

    margin:
        0 auto;

}


.members-eyebrow {

    margin:
        0 0 15px;

    color:
        #164b4b;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

}


.members-hero h1 {

    margin:
        0;

    color:
        #111111;

    font-size:
        clamp(
            36px,
            6vw,
            66px
        );

    font-weight:
        700;

    letter-spacing:
        -0.04em;

    line-height:
        1.1;

}


.members-description {

    max-width:
        680px;

    margin:
        25px 0 0;

    color:
        #666666;

    font-size:
        14px;

    line-height:
        2;

}


/* =========================================
   MEMBERS SECTION
========================================= */

.members-section {

    padding:
        80px 30px 110px;

}


.members-inner {

    width:
        min(1180px, 100%);

    margin:
        0 auto;

}


/* =========================================
   HEADING
========================================= */

.members-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        30px;

}


.members-section-label {

    margin:
        0 0 9px;

    color:
        #164b4b;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

}


.members-heading h2 {

    margin:
        0;

    color:
        #151515;

    font-size:
        clamp(
            25px,
            4vw,
            38px
        );

    font-weight:
        700;

}


.members-count {

    margin:
        0;

    color:
        #8a8a8a;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        0.1em;

}


/* =========================================
   FILTER
========================================= */

.members-filter {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-bottom:
        35px;

}


.members-filter-button {

    min-height:
        42px;

    padding:
        0 21px;

    border:
        1px solid #d2d9d9;

    background:
        #ffffff;

    color:
        #555555;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;

}


.members-filter-button:hover {

    border-color:
        #164b4b;

    color:
        #164b4b;

}


.members-filter-button.active {

    border-color:
        #164b4b;

    background:
        #164b4b;

    color:
        #ffffff;

}


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

.members-grid {

    display:
        grid;

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

    gap:
        28px;

}


/* =========================================
   CARD
========================================= */

.member-card {

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #e0e4e4;

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

}


.member-card:hover {

    transform:
        translateY(-3px);

    border-color:
        #c4d0d0;

    box-shadow:
        0 12px 35px
        rgba(
            0,
            0,
            0,
            0.06
        );

}


/* =========================================
   CARD LINK
========================================= */

.member-card-link {

    display:
        block;

    color:
        inherit;

    text-decoration:
        none;

}


/* =========================================
   FLAG
========================================= */

.member-flag {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 7;

    overflow:
        hidden;

    background:
        #e9eded;

}


.member-flag img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.member-flag-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    color:
        #9aa5a5;

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        0.15em;

}


/* =========================================
   TYPE BADGE
========================================= */

.member-type {

    position:
        absolute;

    top:
        14px;

    left:
        14px;

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        29px;

    padding:
        0 12px;

    background:
        #ffffff;

    color:
        #164b4b;

    border:
        1px solid
        rgba(
            22,
            75,
            75,
            0.18
        );

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

}


.permanent-member .member-type {

    background:
        #164b4b;

    color:
        #ffffff;

    border-color:
        #164b4b;

}


/* =========================================
   BODY
========================================= */

.member-card-body {

    padding:
        24px;

}


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

.member-profile {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}


.member-icon {

    width:
        58px;

    height:
        58px;

    flex:
        0 0 58px;

    border-radius:
        50%;

    object-fit:
        cover;

    background:
        #eeeeee;

    border:
        1px solid #e0e0e0;

}


.member-profile-text {

    min-width:
        0;

}


.member-name {

    margin:
        0;

    overflow:
        hidden;

    color:
        #171717;

    font-size:
        17px;

    font-weight:
        700;

    line-height:
        1.4;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.member-country {

    margin:
        5px 0 0;

    overflow:
        hidden;

    color:
        #777777;

    font-size:
        12px;

    line-height:
        1.5;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* =========================================
   TAGS
========================================= */

.member-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        20px;

}


.member-tag {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        0 9px;

    background:
        #f1f4f4;

    color:
        #506161;

    font-size:
        9px;

    font-weight:
        600;

}


/* =========================================
   CARD FOOTER
========================================= */

.member-card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        25px;

    padding-top:
        18px;

    border-top:
        1px solid #eceeee;

}


.member-profile-link-text {

    color:
        #164b4b;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.13em;

}


.member-card-arrow {

    color:
        #164b4b;

    font-size:
        20px;

    transition:
        transform 0.2s ease;

}


.member-card-link:hover
.member-card-arrow {

    transform:
        translateX(4px);

}


/* =========================================
   ADMIN CONTROLS
========================================= */

.member-admin-controls {

    padding:
        18px 22px 20px;

    background:
        #f4f7f7;

    border-top:
        1px solid #dfe7e7;

}


.member-admin-title {

    margin-bottom:
        10px;

    color:
        #164b4b;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}


.member-admin-row {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.member-type-select {

    flex:
        1;

    min-width:
        0;

    height:
        40px;

    padding:
        0 10px;

    border:
        1px solid #cfd8d8;

    border-radius:
        0;

    outline:
        none;

    background:
        #ffffff;

    color:
        #222222;

    font-family:
        inherit;

    font-size:
        12px;

}


.member-type-select:focus {

    border-color:
        #164b4b;

}


.member-type-save {

    min-width:
        72px;

    height:
        40px;

    padding:
        0 15px;

    border:
        1px solid #164b4b;

    background:
        #164b4b;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        opacity 0.2s ease;

}


.member-type-save:hover {

    opacity:
        0.86;

}


.member-type-save:disabled,
.member-type-select:disabled {

    opacity:
        0.55;

    cursor:
        default;

}


/* =========================================
   LOADING / EMPTY / ERROR
========================================= */

.members-loading,
.members-empty {

    grid-column:
        1 / -1;

    padding:
        60px 20px;

    background:
        #f7f8f8;

    color:
        #777777;

    font-size:
        13px;

    text-align:
        center;

}


.members-error {

    margin-bottom:
        25px;

    padding:
        16px 18px;

    background:
        #fff3f3;

    border:
        1px solid #efd2d2;

    color:
        #9b3838;

    font-size:
        12px;

    line-height:
        1.7;

}


/* =========================================
   TABLET
========================================= */

@media (
    max-width: 900px
) {

    .members-grid {

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

    }

}


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

@media (
    max-width: 650px
) {

    .members-hero {

        padding:
            65px 20px 50px;

    }


    .members-section {

        padding:
            55px 20px 80px;

    }


    .members-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

    }


    .members-filter {

        width:
            100%;

    }


    .members-filter-button {

        flex:
            1;

        min-width:
            90px;

        padding:
            0 8px;

    }


    .members-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .member-card-body {

        padding:
            20px;

    }


    .member-admin-controls {

        padding:
            17px 20px 19px;

    }


    .member-admin-row {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .member-type-select,
    .member-type-save {

        width:
            100%;

    }

}