/* DOEE /reviews/ refine (REFINE-3 D1/D2/D3) — Werkspot + Google blocks, glass cards,
   progressive disclosure, placeholder profile links. Loaded AFTER css/site.css, this
   page only — kept in its own file so it never collides with concurrent site.css edits. */

/* ---------- soft wash behind each source block (the "glass has something to blur" ground) ---------- */
.rv-block{position:relative;overflow:hidden}
.rv-block::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(58% 55% at 12% 6%,rgba(255,132,0,.10),transparent 60%),
  radial-gradient(48% 48% at 94% 92%,rgba(255,132,0,.08),transparent 65%)}
.rv-block--google::before{background:
  radial-gradient(58% 55% at 90% 4%,rgba(17,17,18,.05),transparent 60%),
  radial-gradient(50% 48% at 6% 94%,rgba(255,132,0,.07),transparent 65%)}
.rv-block .container{position:relative;z-index:1}

/* ---------- block header: heading left, source proof (badge + logo) right ---------- */
.rv-source-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 28px;margin-bottom:38px}
.rv-source-head .section-head{margin-bottom:0;flex:1 1 320px}
.rv-source-proof{display:flex;flex-wrap:wrap;align-items:center;gap:14px;flex:0 0 auto}

/* ---------- glass utility: frosted card, ALWAYS with a solid fallback ---------- */
.rv-glass{background:rgba(255,255,255,.94);border:1px solid rgba(17,17,18,.08);box-shadow:0 16px 42px rgba(11,11,12,.10)}
@supports ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  .rv-glass{background:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
}
.section--cream .rv-glass{background:rgba(255,255,255,.96)}
@supports ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  .section--cream .rv-glass{background:rgba(255,255,255,.7)}
}

/* review-summary score chip: keep site.css's internal layout, just float it as a glass pill */
.rv-source-proof .review-summary{margin:0;border-radius:18px;padding:16px 22px}

/* source logo chip (Werkspot image / Google inline SVG) */
.rv-source-logo{display:inline-flex;align-items:center;gap:10px;border-radius:16px;padding:12px 18px;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.rv-source-logo img{height:26px;width:auto;margin:0}
.rv-google-mark{display:block;color:var(--ink)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .rv-source-logo:not([aria-disabled="true"]):hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(11,11,12,.16)}
}

/* ---------- D3: placeholder links (profile URLs not supplied yet) — visually inert, not a confusing dead focus stop ---------- */
.rv-link--placeholder{cursor:not-allowed;opacity:.66;filter:saturate(.75)}
.rv-link--placeholder:hover{text-decoration:none}
.rv-soon{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--muted);border-radius:999px;padding:3px 9px;line-height:1.5;white-space:nowrap}

/* ---------- review grid + progressive disclosure (mirrors the .svc-grid/.svc-more mechanic) ---------- */
/* base HTML shows all 10 cards per block (no-JS = fully visible, verbatim, all 20 in DOM).
   JS wraps the block in .is-progressive, collapses .rv-more (cards 4-9) and permanently hides
   the 10th "extra" card — the interactive cap is 9; the 10th stays reachable only via the
   external "Bekijk alle" link, same as it would on the real Werkspot/Google profile. */
.rv-more{margin-top:22px}
.rv-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;overflow:hidden;min-height:0}
/* item 5: once clamped, cards in the same grid row no longer share one wildly-varying height —
   let each row size to content per card (align-items:start) instead of stretching every card in
   the row to match whichever one a visitor happens to expand */
.review-grid,.rv-more-grid{align-items:start}
.is-progressive .rv-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1),opacity .4s ease}
.is-progressive .rv-more.is-open{grid-template-rows:1fr;opacity:1}
.is-progressive [data-rv-extra]{display:none}
@media (prefers-reduced-motion:reduce){
  .is-progressive .rv-more{transition:none}
}

/* the [hidden] HTML attribute's UA display:none is lower-priority than the author .btn{display:
   inline-flex} rule in site.css, so it's silently overridden — restate it here for our toggle. */
.rv-toggle[hidden]{display:none}

/* ---------- actions row: "Toon meer beoordelingen" + the always-available external link ---------- */
.rv-actions{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.rv-toggle:disabled{opacity:.55;cursor:default;pointer-events:none}
.rv-external{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--ink)}
.rv-external:hover{text-decoration:none;color:var(--accent-onsurface)}
.rv-external .rv-soon{margin-left:2px}

/* ---------- responsive (mirrors site.css's .review-grid breakpoints) ---------- */
@media (max-width:900px){
  .rv-more-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .rv-more-grid{grid-template-columns:1fr}
  .rv-source-head{align-items:flex-start}
  .rv-source-proof{width:100%}
  .rv-source-proof .review-summary{width:100%;justify-content:space-between;padding:16px 18px}
  /* site.css's .review-summary__score is a single no-wrap flex row (the 3rem "4.9" digit +
     the "Uitstekend" meta block) sized for the summary sitting at full container width; inside
     our narrower glass chip it overruns the card at small phone widths, so let it wrap here. */
  .review-summary__score{flex-wrap:wrap;row-gap:6px}
}