/*
Reviews — HZNG Base
Sectie met Google-blok + review-cards. Slider die naar rechts afloopt op elke
breedte. Cards op tekst-hoogte (niet opgerekt).
*/


/* ==========================================================================
   Sectie-basis
   ========================================================================== */

.reviews-container {
    /* Op mobiel breekt de track uit de container met negatieve margin
       zodat 'ie tot de viewport-randen kan scrollen */
    max-width: 100%;
    padding: 0;
}
.reviews .btn {
    margin-top: 0;
    margin-bottom: var(--gutter);
}

/* ==========================================================================
   .track — horizontale slider, loopt naar rechts af
   ========================================================================== */

.track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;          /* kaarten op eigen hoogte, niet oprekken */
    gap: var(--gutter);

    /* Horizontale scroll */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);

    /* Strekt buiten de container zodat de scroll tot viewport-rand loopt */
    margin-inline: calc(var(--gutter) * -1);
    padding: 10px var(--gutter) 20px;

    /* Scrollbar verbergen — UX schoner */
    scrollbar-width: none;
}

.track::-webkit-scrollbar {
    display: none;
}

/* Elke kaart in de track — peek op mobiel, vaste breedte daarboven */
.track > * {
    flex: 0 0 min(85%, 340px);
    max-width: 340px;
    scroll-snap-align: start;
}



/* ==========================================================================
   .review-google — blok met Google-rating
   ========================================================================== */

.review-google {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--color-secondary);
}

.review-google-score {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    font-size: 14px;
    text-align: left;
    margin: 0 auto;
}
    .hero .review-google-score {
        border: 0;
    }

.google-star-value {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 500;
}

.review-google-logo {
    display: inline-flex;
    width: 36px;
    height: 36px;
    background-image: url('../images/google.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.review-google-stars {
    color: #FBBC05;
    letter-spacing: 1px;
}

.review-google-value {
    color: var(--color-secondary);
    opacity: 0.7;
    margin-top: -5px;
}

/* ==========================================================================
   .review-card — donkere kaart, hoogte volgt de tekst
   ========================================================================== */

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px var(--card-padding);
    border-radius: var(--radius);
    background: var(--color-white);
    border: 1px solid var(--color-border);
}

.review-tekst {
    margin: 0 0 20px;
    line-height: 1.5;
}

/* Waardering als sterren (Google-stijl). Twee lagen: een grijze basis en een
   goudkleurige laag eroverheen die op rating/5 van de breedte wordt
   afgeknipt, zodat decimalen een gedeeltelijk gevulde ster geven. --rating
   (0 tot 5) komt als inline-style mee vanuit de card. */
.review-stars {
    --rating: 0;
    position: relative;
    align-self: flex-start;             /* krimp tot de breedte van de sterren */
    font-size: 18px;
    line-height: 1;
}

.review-stars::before {
    content: "\2605\2605\2605\2605\2605";
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.25);   /* lege sterren */
}

.review-stars::after {
    content: "\2605\2605\2605\2605\2605";
    letter-spacing: 3px;
    color: #FBBC05;              /* gevulde sterren (merkkleur) */
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--rating) / 5 * 100%);
    overflow: hidden;
    white-space: nowrap;
}


/* ==========================================================================
   Reviews als 3 kolommen (col-4) — gutter tussen de kaarten, ruimte boven
   ========================================================================== */

/* Padding-inline geeft de tussenruimte tussen de kolommen; de buitenste
   kaarten lijnen zo links/rechts uit met de introtekst (die ook gutter heeft).
   Margin-top zet de kaartenrij los van het intro en zorgt voor verticale
   ruimte als ze op mobiel onder elkaar staan. */

.review-card::before {
    content: "\201C";                                 /* het krullende “ */
    font-family: Georgia, "Times New Roman", serif;   /* serif = de klassieke krul */
    font-size: 6rem;
    line-height: 1;
    color: var(--color-cta);
    position: relative;
    margin-bottom: calc(var(--gutter) * -1.5);
    pointer-events: none;
}

.reviews .col-4 {
    padding-inline: var(--gutter);
    margin-top: calc(var(--gutter) * 2);
}

.reviews .reviews-all {
    margin-top: var(--gutter);
}
/* Naam + plaats onder de sterren op de review-card (lichte tekst op de
   donkere kaart) */

.review-persoon {
    margin: 16px 0 0;
    line-height: 1.3;
    display: flex;
}

.review-naam {
    display: block;
    font-weight: 600;
    font-size: var(--font-small);
    margin-right: calc(var(--gutter) / 2);
}

.review-plaats {
    display: block;
    font-size: 0.9em;
    opacity: 0.75;
    font-size: var(--font-small);
}
/* ==========================================================================
   Reviews op mobiel horizontaal scrollen i.p.v. stacken, net als de monteurs.
   De .col-4-kaarten worden iets smaller dan de viewport zodat de volgende
   kaart eruit piept; de scrollbar is verborgen en er is scroll-snap.
   ========================================================================== */
@media (max-width: 767px) {

    .reviews-cards {
        flex-wrap: nowrap;
        min-width: 0;                  /* flex-item mag krimpen; anders groeit 'ie mee met de kaarten en lekt de scroll naar de pagina */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .reviews-cards::-webkit-scrollbar {
        display: none;
    }

    .reviews-cards > [class*="col-"] {
        flex: 0 0 82%;
        max-width: 82%;
        scroll-snap-align: start;
    }
}