/* =========================================================
   TESTIMONIALS BLOCK — BEM
   White header (centered) + full-width bg-image slider
   Frosted card overlaid LEFT | arrows inside card footer
   ========================================================= */

.smartfix-testimonials {
    background: var(--sf-bg-white);
    padding: var(--sf-padding-section) 80px 80px;
}

/* =========================================================
   CENTERED HEADER
   ========================================================= */

.smartfix-testimonials__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 48px;
}

.smartfix-testimonials__tag {
    font-size: 13px;
    letter-spacing: 0.12em;
}

.smartfix-testimonials__headline {
    font-family: var(--sf-font-heading);
    font-weight: 700;
    font-size: var(--sf-fs-h2);
    line-height: 1.1;
    color: var(--sf-text-dark);
    margin: 0;
    max-width: 720px;
}

.smartfix-testimonials__headline .sf-highlight {
    color: var(--sf-color-primary);
}

.smartfix-testimonials__sub {
    font-family: var(--sf-font-body);
    font-size: var(--sf-fs-body);
    line-height: var(--sf-lh-body);
    color: var(--sf-text-muted);
    max-width: 680px;
    margin: 0;
}

.smartfix-testimonials__sub p {
    margin: 0;
}

/* =========================================================
   FULL-WIDTH SLIDER
   --sf-test-per-view controls visible cards: 3 / 2 / 1 by
   breakpoint (keep in sync with testimonialsPerView() in
   assets/js/main.js).
   ========================================================= */

.smartfix-testimonials {
    --sf-test-per-view: 3;
    --sf-test-gap: 24px;
    --sf-test-inset: 40px;
}

.smartfix-testimonials__slider {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

/* Background image — fixed behind the card strip */
.smartfix-testimonials__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}

/* Scrollable strip — N cards visible at once */
.smartfix-testimonials__strip {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--sf-test-gap);
    width: 100%;
    padding: var(--sf-test-inset);
    overflow-x: auto;
    /* Without a matching scroll-padding, `mandatory` snapping aligns the
       first slide's start edge to the scrollport's edge the moment the
       strip renders — scrolling the left inset away and leaving card 1
       flush against the slider border while top/bottom keep theirs. */
    scroll-padding-inline: var(--sf-test-inset);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.smartfix-testimonials__strip::-webkit-scrollbar {
    display: none;
}

/* Each slide: fixed fraction of the strip so N cards are visible */
.smartfix-testimonials__slide {
    flex: 0 0 calc((100% - var(--sf-test-gap) * (var(--sf-test-per-view) - 1)) / var(--sf-test-per-view));
    scroll-snap-align: start;
    display: flex;
}

/* =========================================================
   FROSTED CARD — fills its slide
   ========================================================= */

.smartfix-testimonials__card {
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Rating row: score + stars left | quote mark right ── */
.smartfix-testimonials__rating-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.smartfix-testimonials__rating-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.smartfix-testimonials__score {
    font-family: var(--sf-font-heading);
    font-weight: 700;
    font-size: 22px;
    color: var(--sf-text-dark);
    line-height: 1;
}

.smartfix-testimonials__stars {
    display: flex;
    gap: 3px;
}

.smartfix-testimonials__star {
    color: rgba(0, 0, 0, 0.15);
    display: flex;
}

.smartfix-testimonials__star--filled {
    color: #F59E0B;
}

.smartfix-testimonials__score-label {
    font-family: var(--sf-font-body);
    font-size: 13px;
    color: var(--sf-text-muted);
}

/* Large decorative quote mark */
.smartfix-testimonials__quote-mark {
    font-family: Georgia, serif;
    font-size: 64px;
    line-height: 0.6;
    color: rgba(0, 0, 0, 0.12);
    user-select: none;
    margin-top: 4px;
}

/* Divider */
.smartfix-testimonials__divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 0;
}

/* Review text */
.smartfix-testimonials__quote {
    margin: 0;
    font-family: var(--sf-font-body);
    font-size: var(--sf-fs-body);
    line-height: var(--sf-lh-body);
    color: var(--sf-text-dark);
    overflow-wrap: break-word;
    word-break: break-word;
}

.smartfix-testimonials__quote p {
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── Read more / less — tablet and below only (see the ≤1024px block
   in RESPONSIVE, where the quote is clamped). Reviews vary wildly in
   length and every card stretches to the tallest one, so on narrow
   screens the full text made even short reviews render as very tall
   cards. ── */
.smartfix-testimonials__more {
    display: none;
    align-self: flex-start;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--sf-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--sf-color-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Footer: reviewer info ── */
.smartfix-testimonials__footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
}

.smartfix-testimonials__reviewer {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.smartfix-testimonials__name {
    font-family: var(--sf-font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--sf-text-dark);
    font-style: normal;
    letter-spacing: 0.05em;
}

.smartfix-testimonials__role {
    font-family: var(--sf-font-body);
    font-size: 13px;
    color: var(--sf-text-muted);
}

/* =========================================================
   CAROUSEL CONTROLS — reuses .smartfix-gallery__nav/__dots, but
   sits over the section's white background here (not a dark
   full-bleed section), so the dark/light color scheme flips.
   ========================================================= */

.smartfix-testimonials__controls {
    margin-top: 28px;
}

.smartfix-testimonials__controls .smartfix-gallery__nav {
    border-color: rgba(0, 0, 0, 0.18);
    color: var(--sf-text-dark);
}

.smartfix-testimonials__controls .smartfix-gallery__nav:hover,
.smartfix-testimonials__controls .smartfix-gallery__nav:focus-visible {
    background: var(--sf-text-dark);
    border-color: var(--sf-text-dark);
    color: var(--sf-text-white);
}

.smartfix-testimonials__controls .smartfix-gallery__dot {
    background: rgba(0, 0, 0, 0.18);
}

.smartfix-testimonials__controls .smartfix-gallery__dot--active {
    background: var(--sf-color-primary);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
    .smartfix-testimonials {
        padding-left: 48px;
        padding-right: 48px;
    }

    .smartfix-testimonials__slider {
        margin-left: 8px;
        margin-right: 8px;
    }

    .smartfix-testimonials__headline {
        font-size: clamp(30px, 4vw, var(--sf-fs-h2));
    }
}

@media (max-width: 1024px) {
    /* Collapse the review behind a Read more toggle so card height is
       driven by the chrome (rating, name) rather than the longest
       review in the feed. initTestimonialReadMore() in main.js only
       unhides the button on cards whose text actually overflows. */
    .smartfix-testimonials__quote {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        overflow: hidden;
        /* GeneratePress gives blockquote vertical padding, and overflow
           clips at the PADDING edge — so the clamped-away 5th line was
           still rendering inside that bottom padding, past the ellipsis.
           The card's own flex gap already provides the spacing. */
        padding-top: 0;
        padding-bottom: 0;
    }

    /* line-clamp counts the box's own line boxes — a block-level <p>
       child counts as ONE, so the clamp lands after the wrapped
       paragraph instead of after 4 lines and text leaks past the
       ellipsis. Inlining the single paragraph puts the text back in the
       blockquote's own line flow, where the clamp works. */
    .smartfix-testimonials__quote > p:only-child {
        display: inline;
    }

    .smartfix-testimonials__card.is-expanded .smartfix-testimonials__quote {
        display: block;
        overflow: visible;
    }

    .smartfix-testimonials__card.is-expanded .smartfix-testimonials__quote > p:only-child {
        display: block;
    }

    .smartfix-testimonials__more {
        display: inline-block;
    }

    .smartfix-testimonials__more[hidden] {
        display: none;
    }

    /* Cards are much shorter now — don't hold the slider open to the
       old full-text height. */
    .smartfix-testimonials__slider {
        min-height: 0;
    }
}

@media (max-width: 1023px) {
    .smartfix-testimonials {
        --sf-test-per-view: 2;
    }
}

@media (max-width: 767px) {
    .smartfix-testimonials {
        --sf-test-per-view: 1;
    }
}

@media (max-width: 834px) {
    .smartfix-testimonials {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .smartfix-testimonials__slider {
        margin-left: 0;
        margin-right: 0;
    }

    .smartfix-testimonials {
        --sf-test-inset: 20px;
    }

    .smartfix-testimonials__strip {
        padding: 24px var(--sf-test-inset);
    }

    .smartfix-testimonials__card {
        padding: 24px 20px;
    }

    .smartfix-testimonials__headline {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .smartfix-testimonials {
        padding-left: 16px;
        padding-right: 16px;
    }

    .smartfix-testimonials__card {
        padding: 20px 16px;
    }
}

/* Primary + WhatsApp CTA row — centered under header */
.smartfix-testimonials__cta-group {
    justify-content: center;
}