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

/* ========================================= */
/* Reviews Hero Section */
/* ========================================= */

.reviews-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); */
}

/* ========================================= */
/* All Reviews Section */
/* ========================================= */

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

.review-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 review cards */
.all-reviews-section .review-card:nth-child(1) { animation-delay: 0.1s; }
.all-reviews-section .review-card:nth-child(2) { animation-delay: 0.2s; }
.all-reviews-section .review-card:nth-child(3) { animation-delay: 0.3s; }
.all-reviews-section .review-card:nth-child(4) { animation-delay: 0.4s; }
.all-reviews-section .review-card:nth-child(5) { animation-delay: 0.5s; }
.all-reviews-section .review-card:nth-child(6) { animation-delay: 0.6s; }

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

.review-card img {
    /* Tailwind handles w-20, h-20, rounded-full, object-cover, mb-4, border-2, border-blue-300 */
}

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

.review-role {
    /* Tailwind handles text-sm, text-gray-500, mb-3 */
}

.star-rating {
    /* Tailwind handles text-yellow-400, mb-4 */
    font-size: 1.5rem; /* Make stars a bit larger */
    letter-spacing: 0.1em; /* Add some spacing between stars */
}

.review-quote {
    /* Tailwind handles text-gray-700, italic, leading-relaxed */
}

.review-date {
    /* Tailwind handles text-sm, text-gray-500, mt-4 */
}

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

.reviews-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); */
}

.reviews-cta-section .btn-submit-review {
    /* Tailwind handles inline-block, 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 */
}