/* Asbestverwijdering.be — de reviewspagina (/reviews/, /avis/).
   Aanvulling op /site/site.css en /site/paginas.css. De markup staat in
   resources/views/site/reviews.blade.php.

   Zelfde taal als de reviewkaart op de home (site.css, .reviewkaart): witte
   kaart met een zachte schaduw op een grijs vlak, gele sterren. Hier staat
   de tekst voluit en dus links uitgelijnd; op de home is het een ingekort,
   gecentreerd stukje. */

/* De banner: zelfde foto als de projectpagina's. */
.kop-reviews { background-image: url(/wp-content/uploads/2024/07/dta-asbest-3e0143e1.webp); background-position: center top 46%; }

/* Het grijze vlak begint onder de banner; de pfa-handtekeninglijn van
   .paginakop::after hangt eroverheen, dus bovenaan wat extra lucht. */
.reviewlijst { background: var(--grijs); padding: min(4vw, 54px) 0; }

.reviewlijst-intro,
.reviewlijst-leeg {
    max-width: 720px; margin: 0;
    font-size: 18px; line-height: 27px; font-weight: 400;
}
.reviewlijst-intro + .reviewlijst-leeg { margin-top: 16px; }

/* Twee kolommen, elke kaart zo hoog als haar tekst. Een raster en geen
   CSS-kolommen: de volgorde (recentste eerst) loopt dan per rij van links
   naar rechts, zoals je leest. */
.reviewlijst-items {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px; align-items: start;
}
.reviewlijst-intro + .reviewlijst-items { margin-top: 30px; }

.reviewitem {
    background: var(--wit); box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    padding: 24px;
    /* een anker (#review-12) niet strak tegen de bovenrand zetten */
    scroll-margin-top: 20px;
}
.reviewitem .sterren { color: var(--geel); font-size: 26px; line-height: 26px; margin-bottom: 14px; }
.reviewitem h2 { font-size: 20px; line-height: 24px; font-weight: 700; text-transform: uppercase; margin: 0 0 10px; }

/* Een enkele regelovergang in de review blijft staan (pre-line); een lang
   woord of adres mag de kaart niet uit het raster duwen. */
.reviewitem-tekst p {
    margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 400;
    white-space: pre-line; overflow-wrap: anywhere;
}
.reviewitem-tekst p:last-child { margin-bottom: 0; }

/* Naam, datum en bron op één regel; breekt vanzelf af op een smal scherm.
   Het grijs is donkerder dan de #999 van de home-kaart: 14px tekst op wit
   heeft dat contrast nodig (5,3:1). */
.reviewitem-voet {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
    margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--grijs);
    font-size: 14px; line-height: 20px; font-weight: 400; color: #6b6b6b;
}
.reviewitem-voet .naam { font-weight: 700; color: var(--inkt); }
.reviewitem-voet a { color: inherit; text-decoration: underline; }
.reviewitem-voet a:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .reviewitem-voet a:hover { color: var(--inkt); }
}

@media (max-width: 980px) {
    .reviewlijst { padding: 50px 0; }
    .reviewlijst-items { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .reviewlijst { padding: 30px 0; }
    .reviewlijst-intro, .reviewlijst-leeg { font-size: 16px; line-height: 24px; }
    .reviewitem { padding: 20px; }
}