/* 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: var(--ds-fs-body, 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: var(--ds-space-5);
}

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

.cro-testimonials .testimonial-card:hover {
transform: translateY(-4px); /* T9: gentler lift */
box-shadow: var(--ds-shadow-lg);
border-color: var(--ds-cta, #e36218); /* T9: token swap */
}

.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: var(--ds-radius-lg);
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(--ds-cta, #e36218); /* T9: token swap from primary blue */
opacity: 0.18;
font-family: Georgia, serif;
line-height: 1;
}

.cro-testimonials .testimonial-badge {
position: absolute;
top: -14px;
right: 20px;
background: var(--ds-trust, #4d5e3a); /* T9: token swap */
color: white;
padding: 0.5rem 1rem;
border-radius: 50px;
font-weight: 700;
font-size: var(--ds-fs-fineprint, 0.875rem); /* T9: 0.75 -> 14px AAA-large floor */
line-height: 1.3;
box-shadow: var(--ds-shadow-md);
border: 2px solid white;
}

.cro-testimonials .testimonial-stars {
color: var(--ds-cta, #e36218); /* T9: token swap from --warning */
font-size: var(--ds-fs-h3, 1.5rem); /* T9: larger glyphs for senior readability */
line-height: 1;
margin-bottom: 1.25rem;
letter-spacing: 4px;
}

.cro-testimonials .testimonial-quote {
color: var(--ds-ink, #0e0f0c); /* T9: was gray-700; AAA on white */
font-size: 1.25rem; /* T9: 16 -> 20px (1.25rem brief floor for testimonial quote) */
line-height: 1.6;
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: 64px; /* T9: 60 -> 64 (≥56px brief floor) */
height: 64px;
background: linear-gradient(135deg, var(--ds-ink, #0e0f0c) 0%, var(--ds-ink-soft, #4a4842) 100%); /* T9: token swap */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 800;
font-size: 1.375rem;
flex-shrink: 0;
border: 3px solid var(--ds-paper, #fbf7ef);
box-shadow: var(--ds-shadow-md);
}

.cro-testimonials .testimonial-author-info h4 {
color: var(--ds-ink, #0e0f0c);
font-family: var(--ds-font-body); /* T9: humanist sans, sentence-case */
text-transform: none;
letter-spacing: 0;
font-weight: 700;
margin-bottom: 0.25rem;
font-size: var(--ds-fs-body, 1.125rem); /* T9: 16 -> 18px (≥1rem floor with cushion) */
line-height: 1.3;
}

.cro-testimonials .testimonial-author-info .role {
color: var(--ds-ink-soft, #4a4842);
font-size: var(--ds-fs-body-sm, 1rem); /* T9: 0.85 -> 16px AAA */
line-height: 1.5;
margin-bottom: 0.25rem;
font-weight: 600;
}

.cro-testimonials .testimonial-author-info .company {
color: var(--ds-cta-dk, #bb4d0d); /* T9: token swap from primary blue */
font-size: var(--ds-fs-body-sm, 1rem); /* T9: 0.8 -> 16px */
line-height: 1.5;
font-weight: 700;
}

.cro-testimonials .testimonial-metrics {
margin-top: 1.5rem;
padding: 1.25rem;
background: color-mix(in srgb, var(--ds-trust, #4d5e3a) 10%, #fff); /* T9: token swap */
border-radius: 14px;
border-left: 5px solid var(--ds-trust, #4d5e3a);
}

.cro-testimonials .testimonial-metrics-title {
font-size: var(--ds-fs-fineprint, 0.875rem); /* T9: 0.75rem (12) -> 14px AAA-large floor for caption */
line-height: 1.3;
color: var(--ds-trust-dk, #3a482b); /* T9: token + AAA contrast */
font-weight: 700;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.75px;
}

.cro-testimonials .testimonial-metrics ul {
list-style: none;
font-size: var(--ds-fs-body-sm, 1rem); /* T9: 0.85 -> 16px AAA */
line-height: 1.5;
color: var(--ds-ink, #0e0f0c);
margin: 0;
padding: 0;
}

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

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

/* T9 BUG-FIX: own the checkmark glyph here so we don't depend on theme.min.css
   #features ul li::before leak. Same visual, but scoped + intentional. */
.cro-testimonials .testimonial-metrics li::before {
content: '\2713'; /* check mark */
color: var(--ds-cta, #e36218);
font-weight: 800;
flex-shrink: 0;
font-size: var(--ds-fs-body-sm);
line-height: 1;
margin-right: 0.125rem;
}

/* Pagination Dots — T9 senior-UX: 48px hit area, visible 14px pip */
.cro-testimonials .testimonials-pagination {
gap: var(--ds-touch-spacing, 8px);
}

.cro-testimonials .testimonial-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ds-touch-target, 48px); /* T9: explicit 48px hit area */
height: var(--ds-touch-target, 48px);
/* T9 BUG-FIX: parent flex collapsed dot width to 36px — lock with min-width + flex:none */
min-width: var(--ds-touch-target, 48px);
flex: 0 0 auto;
border-radius: 50%;
background: transparent;
border: 0; /* T9: button reset */
padding: 0;
font: inherit;
color: inherit;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: background 0.3s ease;
}

.cro-testimonials .testimonial-dot::before {
content: '';
width: 14px; /* T9: 10 -> 14px visible pip */
height: 14px;
border-radius: 50%;
background: var(--ds-ink-soft, #4a4842);
opacity: 0.5;
transition: width 0.3s ease, background 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
}

.cro-testimonials .testimonial-dot.active::before {
width: 32px;
border-radius: var(--ds-radius-sm);
background: var(--ds-cta, #e36218); /* T9: token swap */
opacity: 1;
}

.cro-testimonials .testimonial-dot:not(.active):hover::before {
opacity: 0.85;
}

.cro-testimonials .testimonial-dot:focus-visible {
outline: none;
box-shadow: var(--ds-focus-ring);
}

/* T9 senior-UX: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .cro-testimonials *,
    .cro-testimonials *::before,
    .cro-testimonials *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
    .cro-testimonials .testimonial-card {
        transform: none !important;
    }
}

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