/* Cro Testimonials Module
 * Block 10
 * ------------------------------------------------------------------------------------------------------------------ */

 /* Block-specific CSS Variables */
.cro-testimonials {
/* Card Stack Variables (Mobile) - Enhanced for 2025 */
--card-perspective: 1400px;
--card-z-offset: 25px;
--card-y-offset: 8px;
--card-scale-step: 0.04;
--card-swap-duration: 400ms;
--swipe-x: 0px;
--swipe-rotate: 0deg;
--swipe-scale: 1;
}

/* Section Styles */
.cro-testimonials.testimonials {
padding: 3rem 1.5rem;
background: var(--gray-200);
}

.cro-testimonials .section-container {
max-width: 1400px;
margin: 0 auto;
}

/* .cro-testimonials .section-header {
text-align: center;
margin-bottom: 3rem;
} */

/* .cro-testimonials .section-tag {
display: inline-block;
color: var(--success);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.75px;
font-size: 0.85rem;
margin-bottom: 1.25rem;
padding: 0.625rem 1.25rem;
background: rgba(16, 185, 129, 0.08);
border-radius: 50px;
border: 2px solid rgba(16, 185, 129, 0.2);
} */

/* .cro-testimonials .section-title {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-secondary-normal-bg);
margin-bottom: 1rem;
line-height: 1.2;
}

.cro-testimonials .section-subtitle {
font-size: 1.125rem;
color: var(--gray-700);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
} */

/* DESKTOP: Grid Layout (≥768px) */
@media (min-width: 768px) {
.cro-testimonials .testimonials-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}

.cro-testimonials .testimonial-card {
position: relative;
background: white;
padding: 2rem 1.5rem;
border-radius: 20px;
box-shadow: var(--shadow-md);
border: 2px solid var(--gray-200);
transition: all 0.3s ease;
}

.cro-testimonials .testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 36px rgba(0, 31, 63, 0.15);
border-color: var(--color-primary-normal-bg);
}

.cro-testimonials .testimonials-pagination {
display: none;
}
}

/* MOBILE: Card Stack (<768px) */
@media (max-width: 767px) {
.cro-testimonials .testimonials-container {
position: relative;
width: 100%;
max-width: 400px;
height: 650px;
margin: 0 auto;
display: grid;
place-content: center;
user-select: none;
touch-action: none;
transform-style: preserve-3d;
}

.cro-testimonials .testimonial-card {
cursor: grab;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: white;
padding: 2rem 1.5rem;
border-radius: 20px;
box-shadow: var(--shadow-md);
border: 2px solid var(--gray-200);
z-index: calc(100 - var(--i, 0));
opacity: calc(1 - (var(--i, 0) * 0.15));
transform: perspective(var(--card-perspective))
    translateZ(calc(-1 * var(--card-z-offset) * var(--i, 0)))
    translateY(calc(var(--card-y-offset) * var(--i, 0)))
    scale(calc(1 - (var(--card-scale-step) * var(--i, 0))))
    rotate(var(--card-rotation, 0deg))
    translateX(var(--swipe-x, 0px))
    rotateY(var(--swipe-rotate, 0deg))
    scale(var(--swipe-scale, 1));
transition: transform var(--card-swap-duration) ease, opacity var(--card-swap-duration) ease, box-shadow var(--card-swap-duration) ease;
will-change: transform, opacity;
backface-visibility: hidden;
}

.cro-testimonials .testimonial-card.active-card {
box-shadow: var(--shadow-lg);
}

.cro-testimonials .testimonial-card:active {
cursor: grabbing;
}

.cro-testimonials .testimonials-pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 0.75rem;
}
}

/* Card Content */
.cro-testimonials .testimonial-card::before {
content: '"';
position: absolute;
top: -20px;
left: 28px;
font-size: 5rem;
color: var(--color-primary-normal-bg);
opacity: 0.15;
font-family: Georgia, serif;
line-height: 1;
}

.cro-testimonials .testimonial-badge {
position: absolute;
top: -12px;
right: 20px;
background: var(--color-primary-normal-bg);
color: white;
padding: 0.5rem 1rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.75rem;
box-shadow: var(--shadow-primary);
border: 2px solid white;
}

.cro-testimonials .testimonial-stars {
color: var(--warning);
font-size: 1.25rem;
margin-bottom: 1.25rem;
letter-spacing: 2px;
}

.cro-testimonials .testimonial-quote {
color: var(--gray-700);
font-size: 1rem;
line-height: 1.7;
margin-bottom: 2rem;
font-style: italic;
}

.cro-testimonials .testimonial-author-section {
display: flex;
align-items: center;
gap: 1.25rem;
padding-top: 1.5rem;
border-top: 2px solid var(--gray-200);
}

.cro-testimonials .testimonial-avatar {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--color-secondary-normal-bg) 0%, var(--color-secondary-hover-bg) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.25rem;
flex-shrink: 0;
border: 3px solid var(--gray-200);
box-shadow: var(--shadow-md);
}

.cro-testimonials .testimonial-author-info h4 {
color: var(--color-secondary-normal-bg);
font-weight: 700;
margin-bottom: 0.25rem;
font-size: 1rem;
}

.cro-testimonials .testimonial-author-info .role {
color: var(--gray-600);
font-size: 0.85rem;
margin-bottom: 0.25rem;
font-weight: 600;
}

.cro-testimonials .testimonial-author-info .company {
color: var(--color-primary-normal-bg);
font-size: 0.8rem;
font-weight: 600;
}

.cro-testimonials .testimonial-metrics {
margin-top: 1.5rem;
padding: 1.25rem;
background: var(--success-light);
border-radius: 14px;
border-left: 5px solid var(--success);
}

.cro-testimonials .testimonial-metrics-title {
font-size: 0.75rem;
color: var(--success);
font-weight: 700;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.75px;
}

.cro-testimonials .testimonial-metrics ul {
list-style: none;
font-size: 0.85rem;
color: var(--gray-700);
}

.cro-testimonials .testimonial-metrics li {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
}

.cro-testimonials .testimonial-metrics li:last-child {
margin-bottom: 0;
}

/* Pagination Dots */
.cro-testimonials .testimonial-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gray-600);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.4;
}

.cro-testimonials .testimonial-dot.active {
width: 28px;
border-radius: 5px;
background: var(--color-primary-normal-bg);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-normal-bg) 80%, transparent);
opacity: 1;
}

.cro-testimonials .testimonial-dot:not(.active):hover {
opacity: 0.7;
transform: scale(1.2);
}

/* ------------------------------------------------------------------------------------------------------------------ *