/*
 * home.css — de twee blokken die na het ontwerp op de voorpagina zijn gekomen.
 *
 * Wordt alleen op de voorpagina ingeladen (zie functions.php). De reviews en de
 * derde prijskolom stonden niet in het goedgekeurde ontwerp, dus staan ze hier
 * en niet in assets/site.css. Alles gebruikt de klassen en de kleuren van het
 * ontwerp; dit bestand zet alleen de roosters goed.
 */

/* ---------- reviews ----------
   .lid-grid is in het ontwerp een rij van twee kaarten, gecentreerd op 820px.
   Zes reviews staan daarin te smal, dus krijgt deze sectie de volle breedte. */
#reviews .lid-grid {
    max-width: none;
}

#reviews .lid-card {
    gap: .9rem;
}

/* Een review is een citaat, geen verkooptekst: iets kleiner en rustiger dan de
   kaarten erboven, zodat de lengte van de tekst niet gaat wegen. */
#reviews .lid-card p {
    font-size: 1rem;
    line-height: 1.65;
}

#reviews .lid-card .stars {
    font-size: .95rem;
}

/* De naam sluit de kaart af en is een label, geen kop. */
#reviews .lid-card h3 {
    font-family: 'Manrope', sans-serif;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sage-light);
}

/* ---------- prijsvergelijking ----------
   Het ontwerp heeft twee kolommen (Gym en Reformer Pilates); Personal Training
   is de derde. Op tabletbreedte blijven het er twee, anders wordt elke kolom
   te smal voor een prijsregel. */
@media (min-width: 1000px) {
    #lidmaatschap .vergelijk-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    #reviews .lid-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}