/**
 * MiniCAD -- Testimonials Component Styles
 *
 * Testimonials slider, review cards, dots, CTA bar, midcta.
 * Loaded on page-home.php AND page-testimonials.php.
 *
 * @package MiniCAD
 */

/* -- Testimonials section --------------------------------------- */

.mc-testimonials { position: relative; background: var(--mc-tint); content-visibility: auto; contain-intrinsic-size: auto 700px; }
.mc-testimonials__header { margin-bottom: calc(20px * var(--mc-scale)); }
.mc-testimonials__subtext { font-size: var(--mc-fs-md); color: var(--mc-gray); margin-top: calc(6px * var(--mc-scale)); }

/* -- Slider layout ---------------------------------------------- */

.mc-testimonials__slider { display: flex; flex-wrap: wrap; align-items: center; gap: calc(20px * var(--mc-scale)); position: relative; }
.mc-testimonials__viewport {
    flex: 1 1 100%; overflow: hidden; min-width: 0; position: relative;
    padding-top: calc(8px * var(--mc-scale)); padding-bottom: calc(16px * var(--mc-scale)); margin-top: calc(-8px * var(--mc-scale)); margin-bottom: calc(-16px * var(--mc-scale));
    padding-left: calc(32px * var(--mc-scale)); padding-right: calc(32px * var(--mc-scale)); margin-left: calc(-32px * var(--mc-scale)); margin-right: calc(-32px * var(--mc-scale));
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.mc-testimonials__track { display: flex; width: 100%; transition: transform 0.5s var(--mc-ease); will-change: transform; }
.mc-testimonials__slide { min-width: 100%; width: 100%; flex-shrink: 0; box-sizing: border-box; padding: 0 calc(6px * var(--mc-scale)); }
.mc-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16px * var(--mc-scale)); }

/* -- Review card ------------------------------------------------ */

.mc-review-card {
    padding: calc(22px * var(--mc-scale)) calc(20px * var(--mc-scale)) calc(18px * var(--mc-scale));
    display: flex; flex-direction: column;
    cursor: default;
}

/* Card top */
.mc-review-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(10px * var(--mc-scale)); }
.mc-review-card__stars { color: var(--mc-amber); font-size: var(--mc-fs-2xl); letter-spacing: 0; line-height: 1; }
.mc-review-card__verified {
    font-family: var(--mc-font-head); font-size: var(--mc-fs-2xs); font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--mc-keppel); background: rgba(var(--mc-keppel-rgb),0.08);
    border: 1px solid rgba(var(--mc-keppel-rgb),0.2); border-radius: var(--mc-radius-pill);
    padding: 3px calc(8px * var(--mc-scale)) 3px calc(6px * var(--mc-scale)); transition: background 0.2s, border-color 0.2s;
    display: inline-flex; align-items: center; gap: calc(4px * var(--mc-scale));
}
@media (hover: hover) {
    .mc-review-card:hover .mc-review-card__verified {
        background: rgba(var(--mc-keppel-rgb),0.14);
        border-color: rgba(var(--mc-keppel-rgb),0.35);
    }
}

/* Quote */
.mc-review-card__quote {
    font-size: var(--mc-fs-body); line-height: 1.72; color: var(--mc-gray);
    font-style: normal; flex: 1; margin: 0 0 calc(14px * var(--mc-scale)); quotes: none;
    transition: color 0.2s;
}
.mc-review-card__quote::before {
    content: '\201C'; font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--mc-fs-2xl); line-height: 1; color: var(--mc-keppel); opacity: 0.75;
    font-style: normal; margin-right: 1px; vertical-align: -1px;
}
.mc-review-card__quote::after {
    content: '\201D'; font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--mc-fs-2xl); line-height: 1; color: var(--mc-keppel); opacity: 0.65;
    font-style: normal; vertical-align: -1px; margin-left: 1px;
}
@media (hover: hover) {
    .mc-review-card:hover .mc-review-card__quote { color: var(--mc-calypso); }
    .mc-review-card:hover .mc-review-card__quote::before,
    .mc-review-card:hover .mc-review-card__quote::after { opacity: 0.75; }
}

/* Footer / Author */
.mc-review-card__footer { display: flex; align-items: center; justify-content: flex-start; gap: calc(10px * var(--mc-scale)); margin-top: auto; }
.mc-review-card__avatar { width: calc(42px * var(--mc-scale)); height: calc(42px * var(--mc-scale)); border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(var(--mc-keppel-rgb),0.25); display: block; }
.mc-review-card__avatar--fallback {
    width: calc(42px * var(--mc-scale)); height: calc(42px * var(--mc-scale)); border-radius: 50%;
    background: rgba(var(--mc-keppel-rgb),0.15); border: 2px solid rgba(var(--mc-keppel-rgb),0.25);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mc-font-head); font-size: calc(var(--mc-fs) * 0.929); font-weight: 700;
    color: var(--mc-keppel); flex-shrink: 0;
}
.mc-review-card__author { display: flex; flex-direction: column; gap: 1px; }
.mc-review-card__name { font-family: var(--mc-font-head); font-size: var(--mc-fs-sm); font-weight: 700; color: var(--mc-keppel); line-height: 1.2; letter-spacing: 0.2px; }
.mc-review-card__country { font-size: calc(var(--mc-fs) * 0.75); color: var(--mc-gray); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.3px; }

/* -- Dots with progress animation ------------------------------- */

.mc-testimonials__dots { flex: 0 0 100%; display: flex; gap: calc(8px * var(--mc-scale)); justify-content: center; padding: calc(4px * var(--mc-scale)) 0 0; }
.mc-testimonials__dot {
    width: calc(16px * var(--mc-scale));
        height: calc(8px * var(--mc-scale));
        border-radius: calc(3px * var(--mc-scale));
        border: none;
    background-color: rgba(var(--mc-keppel-rgb),0.22); cursor: pointer;
    transition: background-color 0.3s, width 0.3s, border-radius 0.3s;
    position: relative; overflow: hidden;
}
.mc-testimonials__dot:hover { background-color: rgba(var(--mc-keppel-rgb),0.45); }
.mc-testimonials__dot.is-active { background-color: rgba(var(--mc-keppel-rgb),0.18); width: calc(60px * var(--mc-scale)); }
.mc-testimonials__dot.is-active.is-loading::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit;
    background: var(--mc-keppel);
    transform-origin: left center;
    animation: mc-dot-progress 5s linear forwards;
}
@keyframes mc-dot-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mc-testimonials__dots.is-paused .mc-testimonials__dot::after { animation-play-state: paused; }

/* -- Fraction counter (mobile only) ----------------------------- */

.mc-testimonials__counter {
    display: none; flex: 0 0 100%; text-align: center;
    font-family: var(--mc-font-head); font-size: calc(var(--mc-fs) * 0.857);
    font-weight: 600; color: var(--mc-gray); opacity: 0.55;
    letter-spacing: 0.5px; padding-top: calc(4px * var(--mc-scale));
}

/* -- CTA bar ---------------------------------------------------- */

.mc-testimonials__cta {
    display: flex; align-items: center; justify-content: center;
    gap: calc(20px * var(--mc-scale)); flex-wrap: wrap; padding: calc(16px * var(--mc-scale)) calc(24px * var(--mc-scale)); margin-top: calc(20px * var(--mc-scale));
    background: var(--mc-white); border: 1px solid rgba(var(--mc-keppel-rgb),0.12);
    border-radius: var(--mc-radius); box-shadow: 0 2px 12px rgba(var(--mc-dark-rgb),0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mc-testimonials__cta:hover { border-color: rgba(var(--mc-keppel-rgb),0.25); box-shadow: 0 4px 20px rgba(var(--mc-dark-rgb),0.07); }
.mc-testimonials__cta-text { font-size: var(--mc-fs); color: var(--mc-gray); margin: 0; }
.mc-testimonials__cta-text strong { color: var(--mc-dark); }
.mc-testimonials__cta-link {
    font-family: var(--mc-font-head); font-size: calc(var(--mc-fs) * 0.929); font-weight: 700;
    color: var(--mc-keppel-text); text-decoration: underline;
    text-underline-offset: 3px; transition: color 0.2s, text-underline-offset 0.2s; white-space: nowrap;
}
.mc-testimonials__cta-link:hover { color: var(--mc-calypso); text-underline-offset: 5px; }

/* -- Mid-page CTA bar (testimonials) ---------------------------- */

.mc-testimonials__midcta {
    display: flex; align-items: center; justify-content: space-between;
    gap: calc(20px * var(--mc-scale)); flex-wrap: wrap;
    margin-top: calc(32px * var(--mc-scale)); padding: calc(24px * var(--mc-scale)) calc(28px * var(--mc-scale));
    background: rgba(var(--mc-dark-rgb), 1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: var(--mc-radius);
    border: 1px solid rgba(var(--mc-keppel-rgb),0.2);
    background-image: linear-gradient(rgba(var(--mc-keppel-rgb),.05) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(var(--mc-keppel-rgb),.05) 1px,transparent 1px);
    background-size: 40px 40px;
}
.mc-testimonials__midcta-text {
    font-family: var(--mc-font-head); font-size: var(--mc-fs-xl); font-weight: 700;
    color: var(--mc-light); margin: 0; line-height: 1.3;
}

/* Standalone-only overrides (scoped via hero sibling) */
.mc-page-hero--testimonials ~ .mc-testimonials .mc-testimonials__header { display: none; }
.mc-page-hero--testimonials ~ .mc-testimonials { padding-top: calc(var(--mc-section-y) - 8px); }

/* -- Reduced Motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mc-review-card { opacity: 1; transform: none; }
}

/* -- Responsive ------------------------------------------------- */

@media (max-width: 1024px) {
    .mc-testimonials__grid { grid-template-columns: repeat(2, 1fr); gap: calc(14px * var(--mc-scale)); }
}

@media (max-width: 768px) {
    .mc-testimonials__slider { flex-wrap: wrap; justify-content: center; gap: calc(14px * var(--mc-scale)); }
    .mc-testimonials__viewport {
        flex: 0 0 100%; order: -1; overflow: hidden;
        padding: calc(4px * var(--mc-scale)) calc(24px * var(--mc-scale)); margin: calc(-4px * var(--mc-scale)) calc(-24px * var(--mc-scale));
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24px, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }
    .mc-testimonials__track { flex-wrap: nowrap; }
    .mc-testimonials__grid { grid-template-columns: 1fr; }
    .mc-testimonials__grid > :nth-child(n+3) { display: none; }
    .mc-testimonials__dots { flex-wrap: wrap; gap: calc(6px * var(--mc-scale)); max-width: 80%; }
    .mc-review-card { padding: calc(18px * var(--mc-scale)) calc(16px * var(--mc-scale)) calc(14px * var(--mc-scale)); }
    .mc-testimonials__counter { display: none; }
    .mc-testimonials__header { margin-bottom: calc(16px * var(--mc-scale)); }
    .mc-testimonials__cta { flex-direction: column; text-align: center; gap: calc(10px * var(--mc-scale)); padding: calc(14px * var(--mc-scale)) calc(16px * var(--mc-scale)); margin-top: calc(16px * var(--mc-scale)); }
    .mc-testimonials__midcta { margin-top: calc(20px * var(--mc-scale)); padding: calc(20px * var(--mc-scale)); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .mc-testimonials__midcta-text { font-size: var(--mc-fs-lg); padding-right: 0; }
}

@media (max-width: 480px) {
    .mc-testimonials__midcta {
            flex-direction: column;
            text-align: center;
            padding: calc(20px * var(--mc-scale)) calc(16px * var(--mc-scale));
        }
    
        .mc-testimonials__midcta-text {
            font-size: var(--mc-fs-md);
        }
    .mc-review-card { padding: calc(14px * var(--mc-scale)) calc(12px * var(--mc-scale)) calc(12px * var(--mc-scale)); }
        .mc-review-card__quote {
            font-size: var(--mc-fs-sm);
            line-height: 1.65;
        }
    
        .mc-review-card__stars {
            font-size: var(--mc-fs-xl);
        }
    
        .mc-review-card__verified {
            font-size: calc(var(--mc-fs) * 0.607);
            padding: 2px calc(6px * var(--mc-scale));
        }
    
        .mc-review-card__avatar,
        .mc-review-card__avatar--fallback {
            width: calc(36px * var(--mc-scale));
            height: calc(36px * var(--mc-scale));
        }
    
        .mc-review-card__name {
            font-size: calc(var(--mc-fs) * 0.786);
        }
    
        .mc-review-card__country {
            font-size: calc(var(--mc-fs) * 0.679);
        }
    .mc-testimonials__dots { gap: calc(6px * var(--mc-scale)); }
        .mc-testimonials__dot.is-active {
            width: calc(48px * var(--mc-scale));
        }
    .mc-testimonials__cta { padding: calc(12px * var(--mc-scale)) calc(14px * var(--mc-scale)); }
        .mc-testimonials__cta-text {
            font-size: calc(var(--mc-fs) * 0.929);
        }
        }
    
        @media (max-width: 320px) {
            .mc-review-card {
                padding: calc(12px * var(--mc-scale)) calc(10px * var(--mc-scale)) calc(10px * var(--mc-scale));
            }
    
            .mc-review-card__quote {
                font-size: calc(var(--mc-fs) * 0.786);
            }
    
            .mc-review-card__footer {
                gap: calc(8px * var(--mc-scale));
            }
    
            .mc-testimonials__midcta {
                padding: calc(16px * var(--mc-scale)) calc(12px * var(--mc-scale));
            }
}