/* Team Cards Accordion */
.team-cards-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    height: 450px;
    width: 90%;
    max-width: 1400px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}

.team-card {
    display: flex;
    justify-content: center;
    position: relative;
    flex: 1.5;
    border-radius: 50px;
    overflow: hidden;
    background-color: #111;
    cursor: pointer;
    transition: flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.6s ease-out;
    filter: grayscale(100%);
    transform: translateZ(0);
    will-change: flex, filter;
}

.team-card-active {
    flex: 5;
    filter: none;
}

.team-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text overlay container */
.team-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
}



/* Name text — always visible */
.team-card-info h3 {
    transition: font-size 0.4s ease-in-out;
    font-size: 0.75rem;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 0, 0, 0.9), 0 0 60px rgba(0, 0, 0, 0.7);
}

.team-card-active .team-card-info h3 {
    font-size: 1.5rem;
}

/* Role text — fades in only when active */
.team-card-info p.large {
    opacity: 0;
    font-size: 0;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 0, 0, 0.9), 0 0 60px rgba(0, 0, 0, 0.7);
    transition: font-size 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.team-card-active .team-card-info p.large {
    opacity: 0.8;
    font-size: 1.25rem;
    margin-top: 4px;
}

/* Role row — role text + linkedin link side by side */
.team-card-role-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* LinkedIn link — only visible on active card */
.team-card-linkedin {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.team-card-active .team-card-linkedin {
    opacity: 0.8;
}

.team-card-active .team-card-linkedin:hover {
    opacity: 1;
}

.team-card-linkedin-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.team-card-arrow-icon {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}