/**
 * Testimonials Swiper Component Styles
 * 
 * Styles for the dual carousel system (thumbnails gallery) in the testimonials section.
 * Uses Swiper.js with synchronized video and content carousels.
 * 
 * Requirements: 1.1, 4.1, 4.2, 7.1, 7.4
 */

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

/**
 * Base section styles
 */
/* .testimonials-section {
    position: relative;
    overflow: hidden;
}


/* ============================================
   Video Carousel (Thumbnails)
   ============================================ */

/**
 * Video carousel container - hidden on mobile
 * Requirement 4.1, 4.2: Responsive visibility
 */
/* .testimonials-video-carousel {
    position: relative;
    height: 100%;
    min-height: 500px;
}

.testimonials-thumbs {
    width: 100%;
    height: 100%;
} */

/**
 * Video slides - full height with cover fit
 * Requirement 1.1: Ensure videos/placeholders occupy full area
 */
.testimonials-thumbs .swiper-slide {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.testimonials-thumbs .swiper-slide iframe,
.testimonials-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   Content Carousel (Main)
   ============================================ */

/**
 * Content carousel container
 */
/* .testimonials-content-carousel {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
} */

.testimonials-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.testimonials-main .swiper-wrapper {
    flex: 1;
}

/**
 * Content slides
 */
/* .testimonials-main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
} */

/* ============================================
   Testimonial Content Styles
   ============================================ */

/**
 * Testimonial text and author layout
 */
.testimonial-content {
    width: 100%;
    /* max-width: 600px;
    margin: 0 auto; */
}

.testimonial-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--color-licorice);
    margin-bottom: 1rem;
    font-style: italic;
}

.testimonial-text p {
    margin: 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-name {
    font-size: 1rem;
    color: var(--color-licorice);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.author-name cite {
    font-style: normal;
}

/* ============================================
   Navigation Buttons
   ============================================ */

/**
 * Custom styling for navigation arrows
 * Requirement 7.1, 7.4: Navigation controls with proper styling
 */
.testimonials-main .swiper-button-prev,
.testimonials-main .swiper-button-next {
    color: var(--color-brown-sugar);
    background: rgba(255, 255, 255, 0);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: all 0.3s ease;
    /* box-shadow: 0 2px 8px rgba(25, 12, 1, 0.1); */
}

.testimonials-main .swiper-button-prev:hover,
.testimonials-main .swiper-button-next:hover {
    background: rgba(255, 255, 255, 0.3);
    color: var(--color-lion);
    transform: scale(1.1);
    /* box-shadow: 0 4px 12px rgba(25, 12, 1, 0.15); */
}

.testimonials-main .swiper-button-prev::after,
.testimonials-main .swiper-button-next::after {
    font-size: 20px;
    font-weight: bold;
}

/* Position adjustments */
.testimonials-main .swiper-button-prev {
    left: 10px;
}

.testimonials-main .swiper-button-next {
    right: 10px;
}

/* ============================================
   Pagination
   ============================================ */

/**
 * Custom styling for pagination bullets
 * Requirement 7.1, 7.4: Pagination with proper styling
 */
.testimonials-main .swiper-pagination {
    bottom: 20px;
    position: relative;
    margin-top: 2rem;
}

.testimonials-main .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--color-brown-sugar);
    opacity: 0.4;
    transition: all 0.3s ease;
    cursor: pointer;
}

.testimonials-main .swiper-pagination-bullet:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.testimonials-main .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-lion);
    transform: scale(1.3);
}

/* ============================================
   Section Title
   ============================================ */

/**
 * Title styling within the carousel section
 */
/* .testimonials-content-carousel .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
} */

/* ============================================
   Transitions and Animations
   ============================================ */

/**
 * Smooth transitions for slide changes
 */
.testimonials-thumbs .swiper-slide,
.testimonials-main .swiper-slide {
    transition: opacity 0.3s ease;
}

.testimonials-thumbs .swiper-slide-active,
.testimonials-main .swiper-slide-active {
    opacity: 1;
}

/* ============================================
   Responsive Adjustments - Tablet
   ============================================ */

/* ============================================
   Accessibility Enhancements
   ============================================ */

/**
 * Focus states for keyboard navigation
 */
.testimonials-main .swiper-button-prev:focus,
.testimonials-main .swiper-button-next:focus {
    outline: 3px solid var(--color-lion);
    outline-offset: 3px;
}

.testimonials-main .swiper-pagination-bullet:focus {
    outline: 2px solid var(--color-lion);
    outline-offset: 2px;
}

/**
 * Reduced motion support
 */
@media (prefers-reduced-motion: reduce) {
    .testimonials-thumbs .swiper-slide,
    .testimonials-main .swiper-slide,
    .testimonials-main .swiper-button-prev,
    .testimonials-main .swiper-button-next,
    .testimonials-main .swiper-pagination-bullet {
        transition: none;
    }
}

/* ============================================
   Loading State
   ============================================ */

/**
 * Styles for when carousels are initializing
 */
/* .testimonials-thumbs:not(.swiper-initialized) .swiper-slide:not(:first-child),
.testimonials-main:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
} */