/* Component — Testimonials "Our Customers Love and Trust Us" (components/testimonials/testimonials.php) */

.testimonials__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}
.testimonials__title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 48px;
    line-height: 1.15;
    color: var(--color-navy-mid);
    margin: 8px 0 0;
}

.testimonials__stage {
    position: relative;
}
/* Clips the peeking neighbours; padding-top leaves room for the quote overhang. */
.testimonials__viewport {
    overflow: hidden;
    padding-top: 28px;
}
.testimonials__track {
    display: flex;
    gap: 32px;
    transition: transform 0.5s ease;
}

/* FAF9F6 fill on the padding box + 1px gold gradient on the border box (Figma). */
.testimonial-card {
    position: relative;
    flex: 0 0 850px;
    max-width: 88vw;
    border: 1px solid transparent;
    border-radius: 16px;
    background:
        linear-gradient(var(--color-cream-card), var(--color-cream-card)) padding-box,
        var(--gradient-gold-border) border-box;
    padding: 48px 48px 36px;
    opacity: 0.4; /* neighbours fade; active card is full opacity */
    transition: opacity 0.5s ease;
}
.testimonial-card.is-active { opacity: 1; }

/* Quote icon overhangs the top-centre of the card. */
.testimonial-card__quote {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 0;
}
.testimonial-card__quote img { width: 56px; height: 56px; display: block; }

.testimonial-card__stars { display: flex; gap: 6px; margin-bottom: 20px; }
.testimonial-card__stars img { width: 24px; height: 23px; display: block; }

/* Text — Montserrat Regular 16, navy-darkest. */
.testimonial-card__text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-regular);
    line-height: 1.7;
    color: var(--color-navy-darkest);
    margin: 0 0 24px;
}
/* Author — Roboto, navy-darkest; name semibold, company regular; bottom-right. */
.testimonial-card__author {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 12px;
    text-align: right;
}
.testimonial-card__name {
    font-family: var(--font-roboto);
    font-weight: var(--weight-semibold);
    font-size: 16px;
    color: var(--color-navy-darkest);
}
.testimonial-card__company {
    font-family: var(--font-roboto);
    font-weight: var(--weight-regular);
    font-size: 16px;
    color: var(--color-navy-darkest);
}

/* Side arrows — 60×60, gold gradient border + light fill, navy chevron;
   positioned at the active card's edges. Hover = gradient fill + white icon. */
.testimonials__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(var(--color-page-bg), var(--color-page-bg)) padding-box,
        var(--gradient-gold-border) border-box;
    color: var(--color-navy-deep);
    cursor: pointer;
    transition: color 0.3s ease;
}
/* Sit just outside the centred card's left/right edges, without overlapping it
   (60px arrow + ~20px gap = 80px beyond the card's half-width). */
.testimonials__arrow--prev { left: calc(50% - min(425px, 44vw) - 80px); }
.testimonials__arrow--next { right: calc(50% - min(425px, 44vw) - 80px); }
.testimonials__arrow:hover,
.testimonials__arrow:focus-visible {
    background: var(--gradient-gold-border);
    border-color: transparent;
    color: var(--color-off-white);
}

.testimonials__dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.testimonials__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(16, 42, 67, 0.2);
    cursor: pointer;
    padding: 0;
}
.testimonials__dot.is-active { background: var(--color-gold); width: 24px; border-radius: 4px; }

@media (max-width: 768px) {
    .testimonials__title { font-size: 32px; }
    .testimonial-card { padding: 40px 24px 28px; }
    .testimonials__arrow { display: none; }
}