/* =========================================
   TEAM PAGE STYLES
   Inherits variables from homet.css / portfolio.css
========================================= */

/* --- Hero Section overrides --- */
.hero-section {
    padding-bottom: 60px; /* Reduced bottom padding for Team page specifically */
}

.hero-desc {
    margin-top: 32px; /* adjust to taste: 16�32px works well */
}

/* --- Team Grid Layout --- */
.team-section {
    
    max-width: 1200px; /* match your site content width */
    margin: 0 auto;
    padding: 0 20px;
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

/* The Row Container: 
   Wraps 4 items, adds bottom border, handles spacing */
.team-grid-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: clamp(20px, 2vw, 40px);
    
    /* Spacing between rows */
    padding-bottom: 60px;
    margin-bottom: 60px;
    border-bottom: 1px solid var(--border);
}

/* Remove border from the last row */
.team-grid-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* --- Team Card Component --- */
.team-card {
    display: flex;
    flex-direction: column;
    width: clamp(260px, 22vw, 320px);
    /* No border or background on the card itself, clean look like design */
}

/* Image Wrapper */
.team-image-wrapper {
    width: 100%;
    /* Square aspect ratio as per design image */
    aspect-ratio: 1 / 1; 
    border-radius: var(--radius-lg); /* Matches portfolio card radius */
    overflow: hidden;
    background: var(--panel);
    margin-bottom: 24px;
    position: relative;
}

/* The actual background image div */
.team-bg-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Hover Effect */
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

.team-card:hover .team-bg-img {
    transform: scale(1.06);
}

/* Info Block */
.team-info {
    display: flex;
    flex-direction: column;
}

.member-name {
    font-size: 20px; /* Specific size for team names */
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.member-role {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

.member-bio {
    font-size: 14px;
    line-height: 1.6;
    color: white;
    margin: 0 0 24px 0;
    opacity: 1;
    max-width: 90%; /* Keeps text slightly contained */
}

/* --- LinkedIn Link --- */
.linkedin-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    
    text-decoration: none;
    transition: color 0.3s ease;
    margin-top: auto; /* Pushes link to bottom if aligned */
}

.linkedin-link .arrow-icon {
    width: 10px;
    height: 10px;
    opacity: 0.6;
    transform: rotate(-90deg); /* Re-using your portfolio arrow logic */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.linkedin-link:hover {
    color: var(--text-primary);
}

.linkedin-link:hover .arrow-icon {
    opacity: 1;
    transform: rotate(-45deg); /* Points diagonal on hover */
}


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

/* Tablet (2 columns) */
@media (max-width: 1024px) {
    .team-grid-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .team-image-wrapper {
        border-radius: var(--radius-md);
    }
}
@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }
}

/* Mobile (1 column) */
@media (max-width: 600px) {
    .team-grid-row {
        grid-template-columns: 1fr;
        gap: 50px;
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    @media (max-width: 600px) {
        .team-grid {
            grid-template-columns: 1fr;
            justify-content: center;
        }
    }
    .member-bio {
        font-size: 15px; /* Slightly larger for readability on phone */
    }
}