/* =========================================
TEAM MEMBERS GRID
========================================= */

.team-members-grid {
    --team-navy: #0A103A;
    --team-navy-light: #182154;
    --team-gold: #DAA028;
    --team-white: #FFFFFF;
    --team-light: #F6F7FA;
    --team-text: #1A1F24;

    width: 100%;

    display: grid;
    gap: 26px;

    align-items: stretch;

    font-family: "Montserrat", sans-serif;
}

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

.team-members-grid--columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-members-grid--columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


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

.team-member-card {
    position: relative;
    isolation: isolate;

    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(10, 16, 58, 0.09);
    border-radius: 15px;

    background-color: var(--team-white);

/*     box-shadow:
        0 16px 38px rgba(10, 16, 58, 0.09),
        0 5px 14px rgba(10, 16, 58, 0.05); */

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


/* Gold bottom line */

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

    position: absolute;
    left: 11px;
    bottom: 0;
    z-index: 10;

    width: 85%;
    height: 4px;

    background-color: var(--team-gold);

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform 0.4s ease;
}


/* Small decorative corner */

.team-member-card::after {
    content: "";

    position: absolute;
    right: 17px;
    bottom: 16px;
    z-index: 0;

    width: 38px;
    height: 38px;

    border-right: 2px solid rgba(218, 160, 40, 0.32);
    border-bottom: 2px solid rgba(218, 160, 40, 0.32);

    pointer-events: none;

    transition:
        width 0.35s ease,
        height 0.35s ease;
}


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

    border-color: rgba(218, 160, 40, 0.46);

/*     box-shadow:
        0 27px 58px rgba(10, 16, 58, 0.16),
        0 8px 20px rgba(10, 16, 58, 0.07); */
}


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


.team-member-card:hover::after {
    width: 52px;
    height: 52px;
}


/* =========================================
MEMBER IMAGE AREA
========================================= */

.team-member-card__media {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 4;

    overflow: hidden;

    background-color: #E6E8EE;
}


/* Image overlay */

.team-member-card__media::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(10, 16, 58, 0.68) 100%
        );

    opacity: 0.64;

    pointer-events: none;

    transition: opacity 0.4s ease;
}


/* Actual member image */

.team-member-card__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s ease;
}


.team-member-card:hover
.team-member-card__image {
    transform: scale(1.055);

    filter:
        saturate(1.04)
        contrast(1.025);
}


.team-member-card:hover
.team-member-card__media::after {
    opacity: 0.83;
}


/* =========================================
IMAGE PLACEHOLDER
========================================= */

.team-member-card__placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--team-gold);

    background:
        linear-gradient(
            145deg,
            var(--team-navy) 0%,
            var(--team-navy-light) 100%
        );
}


.team-member-card__placeholder span {
    font-size: 70px;
    font-weight: 800;
    line-height: 1;
}


/* =========================================
SOCIAL ICONS
========================================= */

.team-member-card__socials {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 8;

    display: flex;
    align-items: center;
    gap: 8px;

    transform: translateY(12px);

    opacity: 0;

    transition:
        transform 0.38s ease,
        opacity 0.38s ease;
}


.team-member-card:hover
.team-member-card__socials,
.team-member-card:focus-within
.team-member-card__socials {
    transform: translateY(0);

    opacity: 1;
}


.team-member-card__social {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 9px;

    color: var(--team-navy);
    background-color: var(--team-gold);

    text-decoration: none;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-radius 0.3s ease,
        transform 0.3s ease;
}


.team-member-card__social:hover,
.team-member-card__social:focus {
    color: var(--team-gold);
    background-color: var(--team-navy);

    border-radius: 50%;

    transform:
        translateY(-4px)
        rotate(-5deg);
}


.team-member-card__social svg {
    width: 18px;
    height: 18px;

    fill: currentColor;
}


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

.team-member-card__content {
    position: relative;
    z-index: 4;

    min-height: 188px;

    padding: 24px 22px 25px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F7F8FB 100%
        );
}


/* Gold line above name */

.team-member-card__content::before {
    content: "";

    position: absolute;
    top: 0;
    left: 22px;

    width: 46px;
    height: 4px;

    border-radius: 0 0 4px 4px;

    background-color: var(--team-gold);

    transition: width 0.35s ease;
}


.team-member-card:hover
.team-member-card__content::before {
    width: 88px;
}


/* =========================================
MEMBER NAME
========================================= */

.team-member-card__name {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 52px;

    margin: 0 0 6px;

    color: var(--team-navy);

    font-family: "Montserrat", sans-serif;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.35em;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.team-member-card:hover
.team-member-card__name {
    color: #131C55;

    transform: translateX(3px);
}


/* =========================================
MEMBER ROLE
========================================= */

.team-member-card__role {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 31px;

    margin-bottom: 11px;

    color: var(--team-gold);

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =========================================
MEMBER DESCRIPTION
Fixed three-line area
========================================= */

.team-member-card__description {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 150px;
    max-height: 150px;

    margin-top: auto;

    overflow: hidden;

    color: var(--team-text);

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7em;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    line-clamp: 3;
}


.team-member-card__description p {
    margin: 0 !important;
}


/* Prevent lists/headings from breaking card height */

.team-member-card__description h1,
.team-member-card__description h2,
.team-member-card__description h3,
.team-member-card__description h4,
.team-member-card__description ul,
.team-member-card__description ol,
.team-member-card__description blockquote {
    margin: 0 !important;
    padding: 0 !important;

    font: inherit;
    color: inherit;
}


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

@media screen and (max-width: 850px) {

    .team-member-card__content {
        min-height: 182px;
    }
}


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

@media screen and (max-width: 560px) {

    .team-member-card__content {
        min-height: 176px;
    }

    .team-member-card__name {
        min-height: auto;
    }

    .team-member-card__role {
        min-height: auto;
    }

    .team-member-card__description {
        min-height: 63px;
        max-height: 63px;

        font-size: 12px;
    }
}
/* =========================================
EMPTY MESSAGE
========================================= */

.team-members-grid__empty {
    grid-column: 1 / -1;

    padding: 30px;

    border: 1px dashed rgba(10, 16, 58, 0.18);
    border-radius: 12px;

    color: var(--team-text);
    background-color: var(--team-light);

    text-align: center;
}


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

@media screen and (max-width: 1100px) {

    .team-members-grid--columns-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


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

@media screen and (max-width: 850px) {

    .team-members-grid,
    .team-members-grid--columns-3,
    .team-members-grid--columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


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

@media screen and (max-width: 560px) {

    .team-members-grid,
    .team-members-grid--columns-2,
    .team-members-grid--columns-3,
    .team-members-grid--columns-4 {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .team-member-card {
        max-width: 430px;

        margin-inline: auto;
    }

    .team-member-card__socials {
        transform: none;

        opacity: 1;
    }
}


/* =========================================
ACCESSIBILITY
========================================= */

.team-member-card__social:focus-visible {
    outline: 3px solid rgba(218, 160, 40, 0.45);
    outline-offset: 3px;
}


/* =========================================
REDUCED MOTION
========================================= */

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

    .team-member-card,
    .team-member-card::before,
    .team-member-card::after,
    .team-member-card__image,
    .team-member-card__media::after,
    .team-member-card__socials,
    .team-member-card__social,
    .team-member-card__content::before,
    .team-member-card__name {
        transition: none;
    }

    .team-member-card:hover,
    .team-member-card:hover
    .team-member-card__image,
    .team-member-card:hover
    .team-member-card__name,
    .team-member-card__social:hover {
        transform: none;
    }
}