/* Figma 2050:3872: 30px gutter, 29/27px card inset, 349px minimum card.
   The minimum scales with body type; long quotes can grow every slider card.
   2050:3938: 15px navigation dots with 5px gaps; centered per user request. */
.reviews {
    --review_gap: 3rem;
    overflow: clip;
}

.reviews .reviews_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--review_gap);
}

.reviews .reviews_grid.tns-slider {
    display: flex;
    gap: 0;
    -webkit-user-select: none;
    user-select: none;
}

.reviews .review_item {
    display: flex;
    min-width: 0;
}

.reviews .tns-slider > .review_item {
    display: flex;
    flex-shrink: 0;
}

.reviews .review_kaart {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--review_gap);
    width: 100%;
    min-height: calc(var(--body-font-size) * 21.8125);
    margin: 0;
    padding: calc(var(--review_gap) * 0.9) calc(var(--review_gap) * 29 / 30);
    border: 0.1rem solid var(--stone);
    background: #fff;
    color: var(--espresso);
}

/* Fixed intrinsic icon proportions from Figma, scaled with body text. */
.reviews .review_quote {
    width: calc(var(--body-font-size) * 55.6877 / 16);
    height: calc(var(--body-font-size) * 41.6776 / 16);
    transform: rotate(180deg);
}

.reviews .review_tekst {
    font-style: italic;
}

.reviews blockquote {
    margin: 0;
}

.reviews figcaption {
    margin-top: var(--default-margin-bottom);
}

.reviews figcaption > * {
    display: block;
}

.reviews .review_score_kaart {
    background: #cbad8d; /* Champagne score card, Figma 2050:3888. */
}

.reviews .review_score_regel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--default-margin-bottom);
}

.reviews .review_score {
    font-family: var(--heading-font);
    font-size: var(--h1-font-size);
    line-height: var(--heading-line-height);
}

.reviews .review_sterren {
    display: flex;
    gap: calc(var(--review_gap) / 6);
}

.reviews .review_score_content .button {
    margin-top: var(--jumbotron-margin-sm);
}

/* Exact Figma logo fragments on their shared 291 x 52 coordinate canvas.
   Percentages preserve the supplied vectors and scale within narrower cards. */
.reviews .review_tpw_logo {
    position: relative;
    width: 83%;
    aspect-ratio: 291 / 52;
}

.reviews .review_tpw_logo img {
    position: absolute;
    object-fit: contain;
}

.reviews .review_tpw_name { left: 26.09%; top: 54.13%; width: 66.97%; height: 45.77%; }
.reviews .review_tpw_mark { left: 0; top: 2.13%; width: 26.47%; height: 89.96%; }
.reviews .review_tpw_heart_one { left: 16.37%; top: 0; width: 2.64%; height: 24.85%; }
.reviews .review_tpw_heart_two { left: 18.05%; top: 3.67%; width: 3.26%; height: 21.18%; }
.reviews .review_tpw_heart_three { left: 15.55%; top: 1.27%; width: 2.85%; height: 23.59%; }
.reviews .review_tpw_heart_four { left: 17.72%; top: 1.27%; width: 2.86%; height: 23.59%; mix-blend-mode: multiply; }
.reviews .review_tpw_nl { left: 94.56%; top: 57.08%; width: 5.44%; height: 31.96%; }

.reviews .tns-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(var(--review_gap) / 6);
    margin-top: var(--jumbotron-margin-sm);
}

.reviews .tns-nav button {
    /* Fixed controls match Figma; card/content sizing remains fluid. */
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0.1rem solid var(--espresso);
    border-radius: 50%;
    background: transparent;
}

.reviews .tns-nav .tns-nav-active,
.reviews .tns-nav button:hover {
    background: var(--espresso);
}

.reviews .tns-nav button:focus-visible,
.reviews .tns-outer a:focus-visible {
    /* Override the theme's .tns-outer * outline:none !important. */
    outline: 0.2rem solid var(--espresso) !important;
    outline-offset: 0.2rem;
}

.reviews_buiten_kader .tns-ovh {
    overflow: visible;
}

@media (max-width:767px) {
    .reviews .reviews_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width:768px) and (max-width:991px) {
    .reviews .reviews_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
