/* ==========================================================================
   Testimonials Section
   ========================================================================== */

/* Section wrapper */
.testimonials-section {
    background-color: rgb(102, 22, 82);
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}

/* Responsive section padding */
@media (min-width: 768px) {
    .testimonials-section {
        padding-top: var(--spacing-6);
        padding-bottom: var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .testimonials-section {
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-8);
    }
}

/* Section container */
.testimonials-section__container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}

/* Section headline */
.testimonials-section__headline {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-white);
    text-align: center;
    margin-bottom: var(--spacing-8);
    line-height: 1.2;
}

/* Scroll container - Mobile horizontal scroll layout (base styles for <640px) */
.testimonials-section__scroll-container {
    display: flex;                              /* Flexbox for horizontal layout */
    flex-wrap: nowrap;                          /* Single row, no wrapping */
    gap: var(--spacing-4);                      /* 16px gap between cards */
    overflow-x: auto;                           /* Enable horizontal scrolling */
    overflow-y: hidden;                         /* Prevent vertical scrolling */
    scroll-snap-type: x mandatory;              /* Snap to card boundaries on scroll */
    -webkit-overflow-scrolling: touch;          /* Smooth iOS scrolling */
    padding-bottom: var(--spacing-4);           /* 16px space prevents scrollbar overlap */
}

/* Individual testimonial card */
.testimonials-section__card {
    background-color: var(--color-neutral-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-6);
    transition: box-shadow var(--transition-normal);
    /* Mobile: Fixed width for horizontal scroll, snap to card start */
    flex: 0 0 280px;                            /* Fixed 280px width, no grow/shrink */
    scroll-snap-align: start;                   /* Snap to start of each card */
    min-height: 100%;                           /* Ensure consistent height in flex */
}

/* Card hover state */
.testimonials-section__card:hover {
    box-shadow: var(--shadow-lg);
}

/* Star rating container */
.testimonials-section__rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-05);
    margin-bottom: var(--spacing-4);
}

/* Individual star icons */
.testimonials-section__rating-star {
    font-size: var(--font-size-lg);
}

/* Filled stars styling */
.testimonials-section__rating-star.bi-star-fill {
    color: var(--color-primary-500);
}

/* Empty stars styling */
.testimonials-section__rating-star.bi-star {
    color: var(--color-neutral-400);
}

/* Quote text */
.testimonials-section__quote {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    font-style: italic;
    color: var(--color-neutral-600);
    line-height: 1.6;
    margin-bottom: var(--spacing-3);
    margin-top: 0;
}

/* Customer name */
.testimonials-section__customer-name {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-900);
    margin-bottom: 0;
    margin-top: 0;
}

/* Responsive card width adjustments for larger screens */
@media (min-width: 640px) {
    .testimonials-section__card {
        flex: 0 0 320px;                        /* Wider cards on tablets */
    }
}

@media (min-width: 1024px) {
    .testimonials-section__card {
        flex: 0 0 360px;                        /* Even wider cards on desktop */
    }
}

/* ==========================================================================
   View All Reviews Link
   ========================================================================== */

/* View All Link Container */
.testimonials-section__view-all-container {
    display: flex;
    justify-content: flex-end;              /* Right-align link on desktop */
    margin-top: var(--spacing-8);           /* 32px top spacing from carousel */
    padding: 0 var(--spacing-4);            /* 16px horizontal padding */
}

/* View All Link Button Styles */
.testimonials-section__view-all-link {
    display: inline-block;
    padding: var(--spacing-3) var(--spacing-8);         /* 12px vertical, 32px horizontal */
    background-color: var(--color-primary-500);         /* Wine red background */
    color: var(--color-neutral-white);                  /* White text */
    font-family: var(--font-body);
    font-size: var(--font-size-base);                   /* 16px */
    font-weight: 600;                                   /* Semi-bold */
    text-decoration: none;                              /* Remove underline */
    text-transform: uppercase;                          /* All caps */
    border-radius: var(--radius-sm);                    /* Rounded corners */
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

/* Hover State - Darker Background and Shadow */
.testimonials-section__view-all-link:hover {
    background-color: var(--color-primary-600);         /* Darker wine red on hover */
    box-shadow: var(--shadow-sm);                       /* Subtle shadow on hover */
    text-decoration: none;                              /* Maintain no underline */
}

/* Focus State - Keyboard Navigation Outline */
.testimonials-section__view-all-link:focus {
    outline: 2px solid var(--color-primary-500);        /* 2px wine red outline */
    outline-offset: 2px;                                /* 2px spacing from link */
}

/* Responsive: Center on Mobile/Tablet */
@media (max-width: 767px) {
    .testimonials-section__view-all-container {
        justify-content: center;                        /* Center-align on mobile */
    }
}