/* --- TESTIMONIALS & GALLERY PAGE SPECIFIC STYLES --- */

/* --- TESTIMONIALS SECTION --- */
.testimonials-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: calc(var(--spacing-unit) * 4); 
    perspective: 1500px; 
}
.testimonial-card { 
    background-color: var(--color-bg-content); 
    border: 1px solid var(--color-border); 
    border-radius: var(--border-radius); 
    overflow: hidden; 
    text-decoration: none; 
    transform-style: preserve-3d; 
}
.testimonial-card img { 
    width: 100%; 
    height: 240px; 
    object-fit: cover; 
    filter: grayscale(40%) brightness(0.9); 
}
.testimonial-card-content { 
    padding: calc(var(--spacing-unit) * 4); 
    transform: translateZ(20px); 
}
.testimonial-card h3 { 
    margin-bottom: var(--spacing-unit); /* Adjusted margin for better spacing */
    font-size: 1.3rem; 
    color: var(--color-text-main); 
}
.testimonial-card h4 {
    color: var(--color-text-secondary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.testimonial-card p { 
    font-size: 0.95rem; 
    line-height: 1.7; 
    margin-top: var(--spacing-unit); 
}

/* --- GALLERY / CAROUSEL --- */
.carousel-container { 
    position: relative; 
    width: 100%; 
    margin: 0 auto; 
}
.carousel-viewport { 
    overflow: hidden; 
    border-radius: var(--border-radius); 
}
.carousel-track { 
    display: flex; 
    transition: transform 0.5s ease-in-out; 
}
.carousel-slide { 
    min-width: 100%; 
}
.carousel-slide img { 
    width: 100%; 
    display: block; 
    max-height: 70vh; 
    object-fit: contain; 
    border-radius: var(--border-radius); 
}
.carousel-button { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background-color: rgba(13, 27, 42, 0.7); 
    border: 1px solid var(--color-border); 
    color: var(--color-primary-accent); 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    cursor: pointer; 
    z-index: 10; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: background-color 0.3s ease, transform 0.3s ease; 
}
.carousel-button:hover { 
    background-color: var(--color-bg-content); 
    transform: translateY(-50%) scale(1.1); 
}
.carousel-button.prev { 
    left: 16px; 
}
.carousel-button.next { 
    right: 16px; 
}
.carousel-button svg { 
    width: 24px; 
    height: 24px; 
    fill: currentColor; 
}
.carousel-dots { 
    text-align: center; 
    padding-top: calc(var(--spacing-unit) * 3); 
}
.carousel-dot { 
    display: inline-block; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    background-color: var(--color-border); 
    margin: 0 6px; 
    cursor: pointer; 
    transition: background-color 0.3s ease, transform 0.3s ease; 
}
.carousel-dot.active { 
    background-color: var(--color-primary-accent); 
    transform: scale(1.2); 
}

/* --- RESPONSIVE DESIGN ADJUSTMENTS --- */
@media (max-width: 768px) {
    .carousel-button { 
        width: 40px; 
        height: 40px; 
    }
    .carousel-button.prev { 
        left: 8px; 
    }
    .carousel-button.next { 
        right: 8px; 
    }
}

/* --- DESKTOP HOVER EFFECTS & ACCESSIBILITY --- */
@media (hover: hover) and (pointer: fine) {
    .testimonial-card { 
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1); 
    }
    .testimonial-card:hover { 
        border-color: var(--color-primary-accent); 
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); 
    }
    .testimonial-card img { 
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), filter 0.6s ease; 
    }
    .testimonial-card-content { 
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); 
    }
    .testimonial-card:hover img { 
        filter: grayscale(0%) brightness(1); 
        transform: translateZ(40px) scale(1.1); 
    }
    .testimonial-card:hover .testimonial-card-content { 
        transform: translateZ(60px); 
    }
}