/*
 * coaches.css
 * Styles specific to the coaches.html page.
 * This file should be linked after global.css in your coaches.html.
 */

/* ========================================= */
/* Coaches Hero Section */
/* ========================================= */

.coaches-hero-section {
    /* Tailwind already handles bg-blue-700, text-white, py-16, text-center, rounded-b-xl, shadow-lg */
    /* You can add a subtle background pattern or a more complex gradient here if desired */
    /* background: linear-gradient(to right, #1d4ed8, #2563eb); */
}

/* ========================================= */
/* Coaches Grid Section */
/* ========================================= */

.coaches-grid-section {
    /* Tailwind handles bg-white, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
}

.coach-card {
    /* Tailwind handles bg-gray-50, p-6, rounded-lg, shadow-md, hover:shadow-xl, transition, duration-300, transform, hover:scale-105, flex, flex-col, items-center, text-center */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border for definition */
    /* Add animation for cards appearing on load */
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* Stagger animation for coach cards */
.coaches-grid-section .coach-card:nth-child(1) { animation-delay: 0.1s; }
.coaches-grid-section .coach-card:nth-child(2) { animation-delay: 0.2s; }
.coaches-grid-section .coach-card:nth-child(3) { animation-delay: 0.3s; }
.coaches-grid-section .coach-card:nth-child(4) { animation-delay: 0.4s; }
.coaches-grid-section .coach-card:nth-child(5) { animation-delay: 0.5s; }
.coaches-grid-section .coach-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.coach-photo {
    /* Tailwind handles w-44, h-44, rounded-full, object-cover, mb-4, border-4, border-blue-300 */
    /* You can add a more pronounced shadow or glow effect here */
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.2); /* Subtle blue glow */
}

.coach-name {
    /* Tailwind handles text-2xl, font-semibold, text-gray-900, mb-2 */
}

.coach-specialty {
    /* Tailwind handles text-blue-600, font-medium, mb-3 */
}

.coach-bio {
    /* Tailwind handles text-gray-700, text-base, leading-relaxed, mb-4 */
}

.coach-expertise {
    /* Tailwind handles text-left, text-gray-600, text-sm, w-full, space-y-1 */
    list-style: none; /* Remove default bullet points */
    padding: 0;
}

.coach-expertise li {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.coach-expertise li svg {
    min-width: 1rem; /* Ensure icon doesn't shrink */
    min-height: 1rem; /* Ensure icon doesn't shrink */
}

/* ========================================= */
/* Call to Action Section (coaches-cta-section) */
/* ========================================= */

.coaches-cta-section {
    /* Tailwind handles bg-blue-600, text-white, text-center, rounded-xl, shadow-lg, mx-auto, max-w-6xl, mt-8, p-8 */
    /* You can add a subtle background pattern or a more complex gradient here if desired */
    /* background: linear-gradient(to right, #2563eb, #1d4ed8); */
}

.coaches-cta-section .btn-contact-coach {
    /* Tailwind handles px-8, py-4, bg-white, text-blue-700, text-xl, font-bold, rounded-full, shadow-lg, hover:bg-gray-200, transform, hover:scale-105, transition, duration-300, ease-in-out */
    /* No custom styles needed unless overriding Tailwind */
}