/* --- Grid Container for Team Members --- */
.team-members-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Default to 1 column on small screens */
    gap: 1.5rem; /* Equivalent to gap-6 (6 * 0.25rem = 1.5rem) */
    /* If this grid is nested inside a container with max-width and mx-auto,
     it will be centered automatically. */
}

@media (min-width: 768px) { /* md breakpoint (assuming common breakpoint) */
    .team-members-grid {
        grid-template-columns: repeat(2, 1fr); /* Example: 2 columns on medium screens */
    }
}

@media (min-width: 1024px) { /* lg breakpoint (assuming common breakpoint) */
    .team-members-grid {
        grid-template-columns: repeat(3, 1fr); /* Example: 3 columns on large screens */
    }
}

/* --- Individual Team Member Card (outer Card styles) --- */
.team-member-card {
    background-color: #fff; /* Common card background */
    text-align: center; /* Equivalent to text-center */
    padding: 1.5rem; /* Equivalent to p-6 */
    border-radius: 0.5rem; /* Common card border-radius */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Common card shadow */
    transition: box-shadow 0.3s ease-in-out; /* Equivalent to transition-shadow */
}

.team-member-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Equivalent to hover:shadow-lg */
}

/* --- Team Member Card Content (inner CardContent styles) ---
   These styles are directly from your previous request's CardContent conversion.
*/
.team-member-card-content {
    padding: 0; /* Equivalent to p-0 */
    /* text-align: center is on the parent .team-member-card */
}

.member-image {
    width: 6rem; /* Equivalent to w-24 (24 * 0.25rem = 6rem) */
    height: 6rem; /* Equivalent to h-24 */
    border-radius: 9999px; /* Equivalent to rounded-full */
    margin-left: auto; /* Equivalent to mx-auto */
    margin-right: auto; /* Equivalent to mx-auto */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
    object-fit: cover; /* Equivalent to object-cover */
    border: 1px solid var(--gray-300);
    padding: 1rem;
}

.member-name {
    font-size: 1.25rem; /* Equivalent to text-xl */
    font-weight: 600; /* Equivalent to font-semibold */
    margin-bottom: 0.5rem; /* Equivalent to mb-2 */
    color: #1f2937; /* Equivalent to text-gray-800 */
}

.member-title {
    color: var(--daikin-blue); /* A representative value for daikin-blue */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
}

.member-contact-info-list {
    /* Mimics space-y-2 */
}

    .member-contact-info-list > *:not(:last-child) {
        margin-bottom: 0.5rem; /* Equivalent to space-y-2 (2 * 0.25rem = 0.5rem) */
    }

.contact-item {
    display: flex;
    align-items: center;
    justify-content: center; /* Equivalent to justify-center */
    font-size: 0.875rem; /* Equivalent to text-sm */
    color: #4b5563; /* Equivalent to text-gray-600 */
}

.contact-icon {
    height: 1rem; /* Equivalent to h-4 */
    width: 1rem; /* Equivalent to w-4 */
    margin-right: 0.5rem; /* Equivalent to mr-2 */
    stroke: var(--gray-600); /* Ensures the icon color matches the text color */
}

.contact-link {
    color: var(--gray-600); /* Inherit color from parent (.contact-item) */
    text-decoration: none; /* Remove underline for links */
    transition: color 0.2s ease-in-out; /* Smooth transition for hover */
}

.contact-link:hover {
    color: var(--daikin-blue); /* Equivalent to hover:text-daikin-blue */
}