/* ---------------------------------------------------- */
/* 1. Base Styles & Typography */
/* ---------------------------------------------------- */


.team-cards-container {
    max-width: 1280px; /* Equivalent to max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding: 2%; /* Equivalent to p-6 */
    margin-top:5%;
    overflow:hidden;
}



.team-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 800; /* font-extrabold */
    color: #1f2937; /* text-gray-900 */
    margin-bottom: 0.5rem;
}

.team-subtitle {
    font-size: 1.25rem; /* text-xl */
    color: #6b7280; /* text-gray-500 */
    margin-bottom: 3rem; /* mb-12 */
}

/* ---------------------------------------------------- */
/* 2. CSS Grid Layout (Replacing Tailwind Grid) */
/* ---------------------------------------------------- */

.team-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 col on mobile */
    gap: 2rem; /* gap-8 */
}

/* Tablet breakpoint (md) */
@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cols on tablet */
    }
}

/* Desktop breakpoint (lg) */
@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 cols on desktop */
    }
}

/* ---------------------------------------------------- */
/* 3. Card Base Styling and Animation Logic */
/* ---------------------------------------------------- */

.team-card {
    /* Base style for all cards */
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
    contain: layout;
    background-color: #ffffff;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}
.team-card.primary-card::after {
    content:" ";
    width:500px;
    height:500px;
    border-radius:200px;
    position:absolute;
    background:#d8ecff;
    bottom:-75%;
    right:-55%;
    z-index:-1;
}

.card-content {
    padding: 1.5rem; /* p-6 */
    display: flex;
    align-items: center;
}
.card-content h3 {
	margin:0;
}

.content-primary {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.content-secondary .member-details {
    margin-left: 1rem; /* ml-4 */
}

.member-photo {
    object-fit: cover;
    border-radius: 9999px; /* rounded-full */
    margin-bottom: 1rem; /* mb-4 */
    border-style: solid;
    border-width: 4px; /* ring-4 */
    transition: transform 0.3s;
}

.member-photo:hover {
    transform: scale(1.05);
}

/* Primary/Founder Card Sizing */
.img-primary {
    width: 20rem; /* w-32 */
    height: 20rem; /* h-32 */
}
.ring-primary {
    border-color: #4f46e5; /* ring-indigo-500 */
}
.text-primary-name {
    color: #4338ca; /* text-indigo-700 */
    font-size: 3rem; /* text-xl */
    margin:0;
}
.text-primary-title {
    color: #7c3aed; /* text-purple-600 */
    font-size: 1.25rem; /* text-sm */

}

/* Secondary/Member Card Sizing */
.img-secondary {
    width: 70%; /* w-24 */
    height: 70%; /* h-24 */
}
.ring-secondary {
    border-color: #d1d5db; /* ring-gray-300 */
}
.text-secondary-name {
    color: #1f2937; /* text-gray-800 */
    font-size: 1.45rem;
}
.text-secondary-title {
    color: #6b7280; /* text-gray-500 */
    font-size: 1rem;
}

/* ---------------------------------------------------- */
/* 4. Profile Details (Sliding Overlay) */
/* ---------------------------------------------------- */

.profile-details {
    /* Initial state: Hidden below the card content */
    position: absolute;
    bottom: -100%; /* Start below the card */
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth sliding animation */
    z-index: 10;
    color: white;
    text-align: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
}

.member-bio {
    margin-bottom: 1rem;
    font-weight: 300; /* font-light */
    font-size: 1.25rem; /* text-sm */
}

.linkedin-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
    border-radius: 9999px; /* rounded-full */
    border: 1px solid white;
    font-size: 0.875rem;
    transition: background-color 0.3s, color 0.3s;
}

.linkedin-link:hover {
    background-color: white;
    color: #1f2937; /* text-gray-900 */
}

/* ---------------------------------------------------- */
/* 5. Hover Effects & Card Type Specifics */
/* ---------------------------------------------------- */

/* Hover effect for all cards (slide up details) */
.team-card:hover .profile-details {
    transform: translateY(-100%);
}

/* PRIMARY (Founder) Card Specific Styling */
.primary-card:hover {
    transform: scale(1.05) rotateZ(-0.5deg); /* Fancier tilt/scale on hover */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 4px #4f46e5;
}
.primary-card .profile-details {
    /* Founder details panel gets a gradient overlay for extra flair */
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.95) 0%, rgba(126, 34, 206, 0.95) 100%);
}

/* SECONDARY (Member) Card Specific Styling */
.secondary-card:hover {
    transform: translateY(-5px); /* Simple lift on hover */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}
.secondary-card .profile-details {
    /* Member details panel gets a simpler color overlay */
    background-color: rgba(31, 41, 55, 0.95);
}