/* Template css resource: Core 8 - Fluid - Module database items thumb reviews - Greve */
/* new-reviews - GEGENEREERDE bundel (css). Niet handmatig bewerken; draai build-bundle.ps1. */
/* ============ snippet-score.css ============ */
/* new-reviews · SNIPPET 1 — score (9,1) · self-contained, overal plakbaar */
.nr-score {
--nr-accent: #5cb800;   /* Greve merk-groen (helder) */
--nr-star: #f7b70a;
display: inline-flex;
align-items: center;
gap: 16px;
background: var(--nr-accent);
border: 1px solid #fff;
border-radius: 8px;
padding: 16px 28px;
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
font-family: "Source Sans Pro", system-ui, sans-serif;
margin-bottom: 16px;
}
.nr-score__num {
position: relative;
display: inline-block;
min-width: 2.6ch;
text-align: center;
font-variant-numeric: tabular-nums;   /* vaste breedte -> geen resize tijdens tellen */
font-family: "Oswald", sans-serif;
font-size: 3.6rem;
line-height: 1;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
/* puls: korte vergroting van het getal zodra een heel cijfer wordt gepasseerd (geen witte laag) */
.nr-score__num--blip { animation: nr-num-blip 0.5s ease; }
@keyframes nr-num-blip {
0%   { transform: scale(1); }
35%  { transform: scale(1.18); }
100% { transform: scale(1); }
}
.nr-score__meta { line-height: 1.35; }
.nr-score__label {
display: block;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.nr-score__stars { display: inline-flex; gap: 3px; font-size: 1.25rem; line-height: 1; }
.nr-score__stars .nr-star { position: relative; display: inline-block; }
.nr-score__stars .nr-star .e { color: rgba(255,255,255,0.45); }
.nr-score__stars .nr-star .f {
position: absolute; left: 0; top: 0;
width: 0; overflow: hidden; white-space: nowrap;
color: var(--nr-star);
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.nr-score__stars .nr-star--pop { animation: nr-score-pop 0.45s ease; }
@keyframes nr-score-pop {
0%   { transform: scale(1); }
45%  { transform: scale(1.45); }
100% { transform: scale(1); }
}
/* ============ snippet-statsbar.css ============ */
/* new-reviews · SNIPPET 2 — stats-balk · self-contained, volle breedte, overal plakbaar */
.nr-statsbar {
--nr-accent: #5cb800;   /* Greve merk-groen (helder) */
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
background: var(--nr-accent);
border: 1px solid #fff;
border-radius: 8px;
overflow: hidden;
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
font-family: "Source Sans Pro", system-ui, sans-serif;
margin-bottom: 24px;
}
.nr-statsbar__item {
text-align: center;
padding: 16px 10px;
border-left: 1px solid rgba(255,255,255,0.28);
}
.nr-statsbar__item:first-child { border-left: 0; }
.nr-statsbar__num {
display: inline-block;
font-variant-numeric: tabular-nums;
font-family: "Oswald", sans-serif;
font-weight: 700;
font-size: 1.6rem;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.nr-statsbar__plus { color: #f7b70a; }   /* zelfde geel als de sterren */
.nr-statsbar__num--blip { animation: nr-bar-blip 0.45s ease; }
@keyframes nr-bar-blip {
0%   { transform: scale(1); }
40%  { transform: scale(1.16); }
100% { transform: scale(1); }
}
.nr-statsbar__lbl {
display: block;
margin-top: 2px;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* ============ merge-tabs.css ============ */
/* new-reviews · MERGE OP LABELS — filter-tabs · self-contained, overal plakbaar */
.nr-filter {
--nr-accent: #5cb800;   /* Greve merk-groen (helder) */
--nr-accent-ink: #3a7000;
--nr-border: #e3e3e3;
--nr-muted: #706f6f;
display: flex;
flex-wrap: wrap;
gap: 4px;
border-bottom: 2px solid var(--nr-border);
margin-bottom: 28px;
font-family: "Source Sans Pro", system-ui, sans-serif;
}
.nr-filter__tab {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
font-family: "Source Sans Pro", system-ui, sans-serif;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
text-decoration: none;
background: none;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0 !important;   /* Core8 .button heeft border-radius:25px -> dat krult de groene onderlijn op */
box-shadow: none;
margin: 0 0 -2px;
padding: 10px 20px 14px;
line-height: 1.2;
cursor: pointer;
color: var(--nr-muted);
transition: color 0.15s ease, border-color 0.15s ease;
}
/* Core8 globale link/button-decoratie (opkrullend onderstreep-lijntje) hard uitschakelen:
pseudo's op de tab, z'n children én de container; plus background-image/text-decoration. */
.nr-filter::before, .nr-filter::after,
.nr-filter__tab::before, .nr-filter__tab::after,
.nr-filter__tab *::before, .nr-filter__tab *::after { content: none !important; display: none !important; }
.nr-filter__tab,
.nr-filter__tab:hover,
.nr-filter__tab.is-active { background-image: none !important; text-decoration: none !important; }
.nr-filter__tab:hover { color: #1a1d24; }
.nr-filter__tab.is-active { color: var(--nr-accent-ink); border-bottom-color: var(--nr-accent); }
.nr-filter__count {
display: inline-block;
font-size: 0.7rem;
background: var(--nr-border);
color: #555;
border-radius: 999px;
padding: 1px 8px;
margin-left: 6px;
}
.nr-filter__tab.is-active .nr-filter__count { background: var(--nr-accent); color: #fff; }
/* ============ module-reviews.css ============ */
/* new-reviews · MODULE — reviewkaarten (overzicht) · gebruikt Core8 .review/.reviews (style.css)
en voegt de panel-/featured-/badge-lagen toe. Plaats op de Core8-site (waar style.css aanwezig is). */
.nr-reviews {
--nr-accent: #5cb800;   /* Greve merk-groen (helder) */
--nr-accent-ink: #3a7000;
--nr-border: #e3e3e3;
--nr-muted: #706f6f;
--review-star-color: #f7b70a;        /* Core8-basis ster-vulling (oude host-style.css mist deze var) */
--review-star-empty-color: #7a7f84;
}
.nr-reviews__panel { display: none; }
.nr-reviews__panel.is-active { display: block; }
/* Self-contained grid (scoped op .nr-reviews): NIET leunen op de Core8 style.css .reviews-grid.
Oude/afgeslankte Core8-sites (bv. Greve, style.css v4) missen die basis-grid volledig, waardoor
de kaarten 1-koloms stapelen en de featured "1e 2 breed" (grid-column: span 2) niets heeft om
over te spannen. Zelfde 1->2->3 kolommen + gap als de Core8-basis, zodat het overal gelijk oogt. */
.nr-reviews .reviews {
display: grid;
grid-gap: 24px;
justify-items: stretch;
grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .nr-reviews .reviews { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .nr-reviews .reviews { grid-template-columns: repeat(3, 1fr); } }
/* Core8-basis kaart-indeling + sterren, SELF-CONTAINED (scoped op .nr-reviews). Niet op de host
style.css leunen: oude Core8-sites (bv. Greve v4) missen deze basis volledig -> zonder dit krijgt
de avatar geen afmeting (plaatje onzichtbaar) en de sterren geen vulling/kleur. 1:1 uit de Core8-basis. */
.nr-reviews .review {
display: inline-grid;
grid-template-columns: 48px 1fr;
grid-template-rows: min-content min-content;
grid-template-areas: "author header" "content content";
column-gap: 16px;
row-gap: 8px;
align-items: start;
}
.nr-reviews .review__header { grid-area: header; }
.nr-reviews .review__content { grid-area: content; line-height: 1.2; }
.nr-reviews .review__content p { margin: 0; }
.nr-reviews .review__subtitle { color: var(--nr-muted); font-size: 0.9rem; }
.nr-reviews .review__author-thumb { grid-area: author; width: 48px; height: 48px; min-height: 0; }
.nr-reviews .review__rating { display: flex; gap: 8px; align-items: center; }
.nr-reviews .review__stars { display: inline-block; line-height: 1; translate: 0 -2px; }
.nr-reviews .review__stars svg { width: 106px; height: 20px; }
.nr-reviews .review__star { fill: var(--review-star-empty-color); }
.nr-reviews .review__current--full ~ .review__star { fill: var(--review-star-color); }
.nr-reviews .review__current--half ~ .review__star { fill: var(--review-star-color); }
.nr-reviews .review__current--half + .review__star { fill: url(#review__half-star-fill); }
.nr-reviews .review__stars linearGradient stop:not([stop-color]) { stop-color: var(--review-star-empty-color); }
.nr-reviews .review {
max-width: none;
width: 100%;
height: 100%;          /* even hoog binnen de rij, ongeacht tekstlengte */
background: #fff;
border: 1px solid #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.nr-reviews .review:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
.nr-reviews .review__stars svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.nr-reviews .review__rating-value { font-weight: 700; }   /* score op de card bold */
.nr-reviews .review__badge {
display: inline-block;
margin-bottom: 6px;
font-family: "Oswald", sans-serif;
font-size: 0.66rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--nr-accent-ink);
border: 1px solid var(--nr-accent);
border-radius: 999px;
padding: 2px 9px;
}
.nr-reviews .review__company {
font-family: "Oswald", sans-serif;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--nr-accent-ink);
}
.nr-reviews .review__location { color: var(--nr-muted); }
.nr-reviews .review__author-thumb {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC0xNjA5MjBmZC1lMmMyLTQzMjgtYTgyNi00NjVjMzYyM2FkZTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDkwNCA5MDQiPgoJPGcgaWQ9InV1aWQtMWMxMDYwY2EtY2RmOC00NDM4LWI2ZWMtMDIzOWM3ZWVjOTY1Ij4KCQk8cGF0aCBkPSJNOTA0LDQ1MmMwLDE0My4yMy02Ni42MiwyNzAuOS0xNzAuNTcsMzUzLjcxLTc3LjIxLDYxLjUzLTE3NS4wMyw5OC4yOS0yODEuNDMsOTguMjlzLTIwNC4yMi0zNi43Ni0yODEuNDMtOTguMjlDNjYuNjIsNzIyLjksMCw1OTUuMjMsMCw0NTIsMCwyMDIuMzcsMjAyLjM3LDAsNDUyLDBzNDUyLDIwMi4zNyw0NTIsNDUyWiIgc3R5bGU9ImZpbGw6I2NlZDVkODsiLz4KCQk8Y2lyY2xlIGN4PSI0NTIiIGN5PSIzNTEiIHI9IjE5MCIgc3R5bGU9ImZpbGw6I2E2YWZiMjsiLz4KCQk8cGF0aCBkPSJNNzMzLjQzLDgwNS43MWMtNzcuMjEsNjEuNTMtMTc1LjAzLDk4LjI5LTI4MS40Myw5OC4yOXMtMjA0LjIyLTM2Ljc2LTI4MS40My05OC4yOWMzNi41NS0xMjAuNzgsMTQ4LjcyLTIwOC43MSwyODEuNDMtMjA4LjcxczI0NC44OCw4Ny45MywyODEuNDMsMjA4LjcxWiIgc3R5bGU9ImZpbGw6I2E2YWZiMjsiLz4KCTwvZz4KPC9zdmc+Cg==");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* featured: of via class (.review--featured, dev-preview) of via positie (1e + 2e kaart).
ALLEEN zichtbaar bij 'Alle reviews' (.nr-reviews--all, door merge-tabs.js gezet) — dus NIET
onder een label-filter. Positie bovendien alleen op .nr-reviews--page1 (overzicht-pagina 1),
zodat de 1e 2 niet opnieuw featuren als je rechtstreeks op een paginatie-pagina (?start=N) komt. */
.nr-reviews--all .review--featured,
.nr-reviews--all.nr-reviews--page1 .reviews > .review:nth-child(-n+2) {
grid-column: span 2;
background: #fff;
border-color: #fff;
box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
.nr-reviews--all .review--featured .review__content,
.nr-reviews--all.nr-reviews--page1 .reviews > .review:nth-child(-n+2) .review__content { font-size: 1.05rem; }
@media (max-width: 640px) {
.nr-reviews--all .review--featured,
.nr-reviews--all.nr-reviews--page1 .reviews > .review:nth-child(-n+2) { grid-column: span 1; }
}
/* Hover: zelfde "pop" als de 9,1-sterren, nu per card-ster in een cascade links→rechts.
transform-box:fill-box -> elke SVG-ster schaalt om z'n eigen midden. */
.nr-reviews .review__stars .review__star { transform-box: fill-box; transform-origin: center; }
.nr-reviews .review:hover .review__stars .review__star { animation: nr-card-star-pop 0.5s ease both; }
.nr-reviews .review:hover .review__stars .review__star:nth-of-type(5) { animation-delay: 0s; }
.nr-reviews .review:hover .review__stars .review__star:nth-of-type(4) { animation-delay: 0.06s; }
.nr-reviews .review:hover .review__stars .review__star:nth-of-type(3) { animation-delay: 0.12s; }
.nr-reviews .review:hover .review__stars .review__star:nth-of-type(2) { animation-delay: 0.18s; }
.nr-reviews .review:hover .review__stars .review__star:nth-of-type(1) { animation-delay: 0.24s; }
@keyframes nr-card-star-pop {
0%   { transform: scale(1); }
45%  { transform: scale(1.4); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.nr-reviews .review:hover .review__stars .review__star { animation: none; }
}