/* --------------------------------------------------------------------------
   Reviews — 2026 design
   --------------------------------------------------------------------------
   Home comp y 5512–6190: white band; heading left, lime rating badge right
   (289×73); three navy review cards; the sewer-monster illustration
   (1441×640 at x −95, y +81 in the comp) sits behind the cards and runs into
   the navy band below. More than three reviews scroll-snap as a row. */

.reviews {
    position: relative;
    background-color: var(--color-white);
    background-repeat: no-repeat;
    /* parent `section` forces cover/centre — set both explicitly */
    background-size: max(1441px, 112.6%) auto;
    /* anchored to the bottom, with extra room under the cards so more of the
       illustration shows (Volley QA) */
    background-position: calc(50% - 15px) 100%;
}

/* The illustration loads only once the section nears the viewport (reviews.php adds the class),
   so its 87 KB does not compete with the hero image on mobile. */
.reviews.reviews--art {
    background-image: url('../../../assets/img/reviews/reviews-art.webp');
    background-image: image-set(url('../../../assets/img/reviews/reviews-art.avif') type('image/avif'), url('../../../assets/img/reviews/reviews-art.webp') type('image/webp'));
}

.reviews__inner { position: relative; padding-top: 96px; padding-bottom: 290px; }

.reviews__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.reviews__kicker { margin-bottom: 14px; }

.reviews__subtitle {
    margin: 12px 0 0;
    font-size: 18px;
    line-height: 30px;
    color: var(--color-slate);
}

.reviews__badge {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
    min-width: 289px;
    min-height: 73px;
    margin-right: 1px;
    margin-bottom: 4px;
    padding: 10px 20px;
    border: 1px solid var(--color-lime-dark);
    border-radius: 9px;
    background-color: var(--color-lime-pale);
}

.reviews__badge-value {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-navy);
}

.reviews__badge-stars { color: var(--color-lime-dark); gap: 3px; }
.reviews__badge-stars .stars__star { width: 15px; height: 15px; }
.reviews__badge-text { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--color-navy); }

/* Track */
.reviews__slider { position: relative; margin-top: 24px; }
.reviews__viewport { overflow: hidden; }
.reviews--many .reviews__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reviews--many .reviews__viewport::-webkit-scrollbar { display: none; }

.reviews__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 34px) / 3);
    gap: 34px;
}

.reviews__card {
    display: flex;
    flex-direction: column;
    min-height: 330px;
    margin: 0;
    padding: 24px 28px 26px;
    border: 1px solid var(--color-navy-border);
    border-radius: var(--radius);
    background-color: var(--color-navy);
    scroll-snap-align: start;
}

.reviews__card-top { display: flex; justify-content: space-between; align-items: center; }
.reviews__card-stars { gap: 6px; }
.reviews__card-stars .stars__star { width: 16px; height: 16px; }
.reviews__google { flex: none; }

.reviews__card-text {
    flex: 1 1 auto;
    margin: 22px 0 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 25px;
    color: var(--color-white);
}

.reviews__card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 24px;
    border-top: 1px solid rgba(228, 232, 242, 0.6);
}

.reviews__avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--color-lime);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-navy);
}

.reviews__card-name {
    display: block;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-lime);
}

.reviews__card-detail {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-white);
}

/* Arrows + dots (only with more than three reviews) */
.reviews__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-navy-border);
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-navy);
    transform: translateY(-50%);
    cursor: pointer;
}

.reviews__arrow:hover { background-color: var(--color-lime); }
.reviews__arrow--prev { left: -22px; }
.reviews__arrow--prev .reviews__arrow-icon { transform: rotate(180deg); }
.reviews__arrow--next { right: -22px; }
.reviews__arrow-icon { width: 18px; height: 18px; }

.reviews__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.reviews__dots button {
    width: 28px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}
.reviews__dots button[aria-selected="true"],
.reviews__dots .is-active { background-color: var(--color-lime); }

.reviews__cta { margin-top: 14px; }

@media (max-width: 991.98px) {
    .reviews__inner { padding-top: var(--section-y); padding-bottom: 200px; }
    .reviews__head { flex-direction: column; align-items: flex-start; }
    .reviews__track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
    .reviews .reviews__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .reviews__arrow { display: none; }
    .reviews { background-size: 900px auto; background-position: center bottom; }
}

@media (max-width: 575.98px) {
    .reviews__track { grid-auto-columns: 86%; gap: 14px; }
    .reviews__badge { min-width: 0; width: 100%; }
}