:root {
    --primary: #0B2D5B;
    --secondary: #D4A017;
    --white: #ffffff;
    --light: #f7f8fa;
    --dark: #222;
    --gray: #777;

    --radius: 10px;
    --transition: .35s ease;
}


/*=========================================================
                        GLOBAL
=========================================================*/

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--light);
    color: var(--dark);
    font-family: "Instrument Sans", sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}


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

.committee-hero {
    background:
        linear-gradient(
            135deg,
            rgba(11, 45, 91, .98),
            rgba(11, 45, 91, .92)
        );

    color: var(--white);

    padding: 75px 20px 85px;

    text-align: center;

    position: relative;
    overflow: hidden;
}


/* Decorative circle */

.committee-hero::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .12);

    top: -180px;
    right: -80px;
}


/* Decorative circle */

.committee-hero::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    border: 1px solid rgba(212, 160, 23, .25);

    bottom: -150px;
    left: -70px;
}


.hero-inner {
    max-width: 900px;

    margin: 0 auto;

    position: relative;

    z-index: 2;
}


/* Small heading */

.hero-eyebrow {
    display: inline-block;

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--secondary);

    margin-bottom: 14px;
}


/* Main heading */

.committee-hero h1 {
    font-family: "Fraunces", serif;

    font-size: clamp(
        2.2rem,
        5vw,
        4rem
    );

    line-height: 1.05;

    margin: 0 0 18px;

    font-weight: 600;

    color: var(--white);
}


/* Description */

.committee-hero p {
    max-width: 680px;

    margin: 0 auto;

    color: rgba(255, 255, 255, .82);

    font-size: 1rem;

    line-height: 1.7;
}


/*=========================================================
                    MAIN CONTENT
=========================================================*/

.committee-container {
    max-width: 1180px;

    margin: 0 auto;

    padding: 65px 20px 90px;
}


/*=========================================================
                    POSITION SECTION
=========================================================*/

.position-section {
    margin-bottom: 60px;
}


/* Position heading */

.position-heading {
    text-align: center;

    margin-bottom: 30px;
}


/* Small title */

.position-heading .small-title {
    color: var(--secondary);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

    margin-bottom: 7px;
}


/* Position name */

.position-heading h2 {
    font-family: "Fraunces", serif;

    font-size: clamp(
        1.7rem,
        3vw,
        2.3rem
    );

    margin: 0;

    color: var(--primary);

    font-weight: 600;
}


/* Gold underline */

.position-line {
    width: 45px;

    height: 3px;

    background: var(--secondary);

    margin: 13px auto 0;

    border-radius: var(--radius);
}


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

.members-grid {
    display: grid;

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

    gap: 22px;
}


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

.member-card {
    background: var(--white);

    border: 1px solid rgba(11, 45, 91, .10);

    border-radius: var(--radius);

    padding: 28px 22px;

    text-align: center;

    transition: var(--transition);

    position: relative;

    overflow: hidden;
}


/* Gold top border on hover */

.member-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--secondary);

    transform: scaleX(0);

    transform-origin: center;

    transition: var(--transition);
}


.member-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 16px 40px
        rgba(11, 45, 91, .12);

    border-color:
        rgba(212, 160, 23, .45);
}


.member-card:hover::before {
    transform: scaleX(1);
}


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

.member-photo {
    width: 125px;
    height: 125px;

    margin: 0 auto 20px;

    border-radius: 50%;

    overflow: hidden;

    background:
        rgba(11, 45, 91, .08);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: "Fraunces", serif;

    font-size: 2.4rem;

    font-weight: 600;

    border:
        5px solid
        rgba(212, 160, 23, .16);

    box-shadow:
        0 4px 15px
        rgba(11, 45, 91, .08);

    transition: var(--transition);
}


.member-card:hover .member-photo {
    border-color: var(--secondary);

    transform: scale(1.03);
}


.member-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/*=========================================================
                    MEMBER INFORMATION
=========================================================*/

.member-name {
    font-family: "Fraunces", serif;

    color: var(--primary);

    font-size: 1.35rem;

    font-weight: 600;

    margin: 0 0 8px;

    line-height: 1.3;
}


/* Position badge */

.member-position {
    display: inline-block;

    background:
        rgba(212, 160, 23, .12);

    color: var(--primary);

    border:
        1px solid
        rgba(212, 160, 23, .25);

    font-size: .78rem;

    font-weight: 700;

    padding: 6px 12px;

    border-radius: 50px;

    margin-bottom: 13px;
}


/*=========================================================
                    MEMBER DETAILS
=========================================================*/

.member-details {
    margin-top: 10px;
}


.member-detail {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    color: var(--gray);

    font-size: .82rem;

    margin-top: 7px;
}


.member-detail i {
    color: var(--secondary);

    font-size: .9rem;
}


/*=========================================================
                    EMPTY STATE
=========================================================*/

.empty-committee {
    background: var(--white);

    border:
        1px solid
        rgba(11, 45, 91, .10);

    border-radius: var(--radius);

    padding: 70px 20px;

    text-align: center;

    box-shadow:
        0 8px 25px
        rgba(11, 45, 91, .05);
}


.empty-committee i {
    font-size: 3rem;

    color: var(--secondary);
}


.empty-committee h2 {
    font-family: "Fraunces", serif;

    color: var(--primary);

    margin: 18px 0 8px;
}


.empty-committee p {
    color: var(--gray);

    margin: 0;
}


/*=========================================================
                    RESPONSIVE
=========================================================*/

@media (max-width: 900px) {

    .members-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


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

@media (max-width: 600px) {

    .committee-hero {
        padding:
            55px
            18px
            65px;
    }


    .committee-hero h1 {
        font-size: 2.4rem;
    }


    .committee-hero p {
        font-size: .92rem;
    }


    .committee-container {
        padding:
            45px
            15px
            65px;
    }


    .members-grid {
        grid-template-columns: 1fr;

        max-width: 390px;

        margin: 0 auto;
    }


    .position-section {
        margin-bottom: 45px;
    }


    .position-heading {
        margin-bottom: 25px;
    }


    .position-heading h2 {
        font-size: 1.8rem;
    }


    .member-card {
        padding:
            25px
            20px;
    }


    .member-photo {
        width: 115px;
        height: 115px;
    }

}


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

@media (max-width: 380px) {

    .committee-hero {
        padding:
            45px
            15px
            55px;
    }


    .committee-hero h1 {
        font-size: 2.1rem;
    }


    .committee-container {
        padding:
            35px
            12px
            50px;
    }


    .member-card {
        padding:
            22px
            16px;
    }

}