/* Team Interaction Styles - Glassmorphism Overlay */

/* Container Setup */
.team-intro {
    position: relative;
    padding-bottom: 64px;
}

/* Interactive Container */
.team-interactive-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    /* Matches the image max-width */
    margin: 0 auto;
    border-radius: var(--border-radius-3xl);
    overflow: hidden;
    /* Ensure overlay doesn't spill out */
}

/* Image Wrapper */
.team-image-wrapper {
    position: relative;
    width: 100%;
}

.team-image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-3xl);
}

/* Glassmorphism Overlay */
.team-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    /* Cover full area */
    background: rgba(0, 0, 0, 0.4);
    /* Darker overlay for better contrast */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;

    /* Animation Initial State */
    opacity: 0;
    pointer-events: none;
    /* Let clicks pass through when hidden */
    transition: opacity 0.2s ease;
}

/* When hover happens on parent, we handle opacity in JS mostly, 
   but having simple CSS transition helps if JS fails or for backup. 
   However, we will let GSAP handle the "active" state fully for staggering. */

.team-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 900px;
    padding: 32px;
}

/* Card Styling inside overlay */
.team-member-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    /* Center text */
    text-align: left;

    /* Initial state for stagger animation */
    /* We don't set opacity:0 here to let SEO/fallback work if no JS? 
       Actually for GSAP stagger from() to work cleanly, we can leave them visible 
       or hide them initially. Let's start opacity 0 for standard entry. */
    opacity: 0;
    transform: translateY(20px);
}

.team-member-card h3 {
    margin: 0 0 8px 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.team-member-card p {
    margin: 0 0 16px 0;
    font-size: 0.9rem;
    color: var(--color-text-slate);
    line-height: 1.4;
}

.team-member-card a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.team-member-card a:hover {
    color: var(--color-primary-dark);
}

.team-member-card a:hover span {
    text-decoration: underline;
}

/* Mobile Button */
.mobile-team-btn {
    display: none;
    /* Hidden on desktop */
    margin-top: 32px;
}

/* Team Modal (Mobile) - Reusing existing modal structure styles */
/* We need to ensure styles from previous task (about the modal list) persist or are updated */

.team-modal-content {
    background: white;
    padding: 0;
    width: 90%;
    max-width: 600px;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.team-modal-body {
    padding: 24px;
    overflow-y: auto;
}

.team-modal-list .team-member-entry {
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.team-modal-list .team-member-entry:last-child {
    border-bottom: none;
}

.team-modal-list h3 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.team-modal-list p {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: var(--color-text-slate);
}

.team-modal-list a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

/* Media Queries */
@media (max-width: 900px) {

    /* Hide overlay on mobile completely */
    .team-overlay {
        display: none !important;
    }

    .mobile-team-btn {
        display: inline-block;
    }

    .team-interactive-container {
        border-radius: var(--border-radius-lg);
    }

    .team-image-wrapper img {
        border-radius: var(--border-radius-lg);
    }
}