/* ============================================================
   Bconnect Reviews-pagina — widget-styling
   Bron: upgrade-polish.css (rvp-blok) + au-hero-schil (contact),
   au-review-card (ingekort-automotive.css), kc-stats
   (ingekort-klantcases.css), au-cta (ingekort-automotive.css).
   Eindwaarden na cascade; tokens uit tokens.css.
   ============================================================ */

.rvp-hero > .container,
.rvp-grid-sec > .container,
.rvp-stats > .container,
.rvp-cta > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }

/* hero-entrance */
.hh-in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hh-in { transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .hh-in.is-in { opacity: 1; transform: none; }
  .au-hero.is-settled .hh-in { transition: none; opacity: 1; transform: none; }
}

.au-hero { display: flex; flex-direction: column; justify-content: center; position: relative; }
.au-hero > .container { position: relative; z-index: 1; }
.au-hero .hero-bg { position: absolute; inset: 0; background: #FFFFFF; pointer-events: none; }
.au-hero .lead { font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; color: var(--c-text-muted); }
.au-textlink { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: color .18s var(--ease), gap .18s var(--ease); }
.au-textlink:hover { color: var(--c-grad-magenta); gap: 11px; }

/* ---- hero (licht en gecentreerd, zelfde recept als contact) ---- */
.rvp-hero { min-height: auto; padding: 78px 0 60px; }
.rvp-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.rvp-hero-inner .lg-eyebrow { justify-content: center; margin-bottom: 16px; }
.rvp-hero-inner h1 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.025em; color: var(--c-navy); margin: 0 auto 18px; max-width: 15em; }
.rvp-hero-inner .lead { margin: 0 auto; max-width: 38em; }
.rvp-hero-actions { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }

/* ---- sectiekop boven het grid (10-08-2026) ----
   .au-head/.au-h2/.eyebrow komen uit bconnect-shared.css; hier alleen de
   maatvoering die deze sectie nodig heeft. De marge zit op de kop en niet
   op het grid, zodat het grid zonder kop (lege velden) niet inspringt. */
.rvp-grid-head { margin-bottom: var(--space-8, 56px); }
.rvp-grid-head .au-h2 { font-size: clamp(26px, 2.6vw, 34px); }
.rvp-grid-head .lead { margin: 0 auto; max-width: 46em; }
@media (max-width: 720px) {
  .rvp-grid-head { margin-bottom: var(--space-7, 40px); }
}

/* ---- quote-grid op zachte achtergrond ---- */
.rvp-grid-sec { padding: var(--space-9) 0; background: var(--c-bg-soft); }
.rvp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rvp-grid .au-review-card { background: #fff; }

.au-review-card {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--radius-feature);
  padding: 30px 30px 28px;
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.au-review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.au-review-mark {
  display: block;
  font-family: var(--font-head); font-weight: var(--fw-black);
  font-size: 56px; line-height: 0.7; height: 34px;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.au-review-quote {
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.62;
  color: var(--c-navy); margin: 0; flex: 1 1 auto;
}
.au-review-who {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 18px; border-top: 1px solid var(--c-border-soft);
}
.au-review-who.has-photo { flex-direction: row; align-items: center; gap: 14px; }
.au-review-avatar {
  width: 46px; height: 46px; border-radius: 999px; object-fit: cover;
  flex: 0 0 auto; box-shadow: var(--shadow-soft);
}
.au-review-meta { display: flex; flex-direction: column; gap: 4px; }
.au-review-logo {
  display: flex; align-items: center; min-height: 30px; margin-bottom: 8px;
}
.au-review-logo img {
  max-height: 30px; max-width: 150px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .78;
}
/* Vierkant beeldmerk met eigen kleurvlak (10-08-2026). De regel hierboven is
   gemaakt voor brede wordmarks op wit: grayscale + 78% dekking houdt acht
   huisstijlen rustig naast elkaar. Een gekleurd vierkantje wordt daarvan een
   grijs blokje dat als kapotte afbeelding leest, en 30px contain maakt de
   tekst erin onleesbaar. Daarom hier: iets groter, afgeronde hoek, volle
   kleur, geen filter. Aanzetten met de schakelaar `rv_logo_badge`. */
.au-review-logo.is-badge { min-height: 34px; }
.au-review-logo.is-badge img {
  max-height: 34px; max-width: 34px; width: 34px; height: 34px;
  border-radius: 8px;
  filter: none; opacity: 1;
  object-fit: contain;
}

.au-review-wordmark {
  font-family: var(--font-head); font-size: 16px; font-weight: var(--fw-semibold);
  color: var(--c-navy);
}
.au-review-name { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--c-navy); }
.au-review-company { font-family: var(--font-body); font-size: 13.5px; color: var(--c-text-muted); }
.au-case-label { align-self: flex-start; font-family: var(--font-head); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-soft); padding: 5px 12px; border-radius: var(--radius-pill); background: var(--c-bg-tint); }
.au-review-meta .au-case-label { margin-top: 6px; }
.au-review-who:not(.has-photo) .au-case-label { margin-top: 8px; }

/* uitgelichte score-tegel in het grid */
.au-review-card.rvp-score-card {
  background: var(--gradient-brand-rich);
  border: none;
  color: #fff;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-feature, 0 24px 60px -18px rgba(168, 2, 144, 0.45));
}
.rvp-score-num {
  font-family: var(--font-head);
  font-size: clamp(56px, 5vw, 72px);
  font-weight: var(--fw-bold, 700);
  line-height: 1;
  letter-spacing: -0.02em;
}
.rvp-score-label {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: var(--fw-semibold, 600);
  color: rgba(255, 255, 255, 0.94);
}
.rvp-score-sub {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.rvp-grid-foot {
  margin: var(--space-7, 40px) 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--c-text-muted);
}
.rvp-grid-foot .au-textlink { margin-left: 6px; }

@media (max-width: 1080px) {
  .rvp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .rvp-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .au-review-card { padding: 28px 26px 26px; }
}

/* ---- donkere stats-strip (kc-stats, ingekort-klantcases.css) ---- */
.rvp-stats {
  position: relative; overflow: hidden;
  padding: clamp(40px, 5vw, 64px) 0;
}
.rvp-stats .kc-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(135deg, #2301fb 0%, #a80290 100%);
  border-radius: 24px; overflow: hidden;
  padding: clamp(20px, 2.6vw, 36px) clamp(8px, 1.6vw, 24px);
}
.rvp-stats .kc-stat { padding: clamp(16px, 2.4vw, 28px) clamp(18px, 2vw, 28px); text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; }
.rvp-stats .kc-stat + .kc-stat::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(255,255,255,.28);
}
.rvp-stats .kc-stat .au-num { font-size: clamp(48px, 6vw, 80px); }
.rvp-stats .kc-stat-label { display: block; margin-top: 14px; font-family: var(--font-body); font-size: 15.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
@media (max-width: 680px) {
  .rvp-stats .kc-stats-row { grid-template-columns: repeat(2, 1fr); }
  .rvp-stats .kc-stat:nth-child(odd)::before { display: none; }
  .rvp-stats .kc-stat:nth-child(3), .rvp-stats .kc-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.28); }
}

/* ---- afsluitend CTA-blok (ingekort-automotive.css) ---- */
.rvp-cta { padding: var(--space-8) 0; background: var(--c-white); }
.au-cta-block {
  position: relative; overflow: hidden;
  background: var(--gradient-brand-rich); border-radius: 28px; box-shadow: var(--shadow-feature);
  padding: var(--space-9) var(--space-8); text-align: center; color: #fff;
}
.au-cta-block::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(130% 130% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(130% 130% at 50% 0%, #000 0%, transparent 72%);
}
.au-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.au-cta-over {
  font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.82);
}
.au-cta-block h2 {
  font-family: var(--font-head); font-weight: var(--fw-semibold);
  font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.02em;
  color: #fff; margin: 0; text-wrap: pretty;
}
.au-cta-block h2 .au-cta-accent {
  background: linear-gradient(90deg, #fff, #ffe6fb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.au-cta-body { font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.9); margin: 4px 0 8px; max-width: 40em; }
.au-cta-btn {
  background: #fff; color: var(--c-navy); padding: 14px 28px; font-size: 15.5px;
  box-shadow: 0 12px 28px rgba(11,10,61,.32);
}
.au-cta-btn:hover { background: #fff; color: var(--c-navy); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(11,10,61,.4); }
@media (max-width: 680px) {
  .au-cta-block { padding: var(--space-8) var(--space-5); }
}
@media (max-width: 760px) {
  .rvp-cta { padding-top: var(--space-7); padding-bottom: var(--space-7); }
}
@media (max-width: 520px) {
  .rvp-cta { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

/* ===== Elementor-context + HARDENING tegen theme-resets ===== */
/* De widget-wrappers van de drie rv-secties + de oude pagina-widget.
   Elke Bconnect-widget zet zijn eigen wrapper-marge op 0; dat kan niet
   generiek, want Elementor zet die marge per widgettype.

   OPSPLITSING 13-08-2026: de hardening-regels hieronder hingen aan
   `.elementor-widget-bconnect_reviews`, de wrapper van de pagina-widget die de
   hele pagina rendeerde. Ze scopen nu op `.rvp-sec` — een class die elke
   reviews-sectie zelf meekrijgt. Zelfde specificiteit (0,2,0). */
.elementor-widget-bconnect_reviews,
.elementor-widget-bconnect_rv_hero,
.elementor-widget-bconnect_rv_grid,
.elementor-widget-bconnect_rv_stats { margin: 0 !important; }
.rvp-sec .accent {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}
.rvp-sec .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.rvp-sec .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}
.rvp-sec .kc-stats-row {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
}
.rvp-sec .au-num-on-dark {
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: #fff !important;
	color: #fff !important;
}
.rvp-sec a { text-decoration: none; }

/* ============================================================
   Hero compacter en groter (11-08-2026).

   De hoogte kwam uit de vangnet-selector
   `.au-hero:not(.lg-hero):not(.sol-hero):not(.hl2-hero)` in lg-hero.css:
   min-height 704px (0,4,0), terwijl de inhoud maar 293px hoog is. Dat is
   ruim 200px leegte boven én onder, en op een pagina die verder vooral
   witruimte heeft viel dat op als "kaal".

   De selector hieronder telt vier classes plus body (0,4,1) en wint
   daarmee van die 0,4,0 zonder !important. De `.hero` moet er echt bij
   staan: met alleen body + .rvp-hero + .au-hero is het 0,3,1 en
   verliest hij, want vier classes verslaan er drie ongeacht het aantal
   elementen.

   De kop mocht groter: van clamp(30px, 3.2vw, 42px) naar
   clamp(34px, 4vw, 54px). max-width iets terug naar 14em zodat hij bij
   die grotere maat nog steeds over twee regels breekt en niet de volle
   houder vult, en text-wrap:balance houdt die twee regels ongeveer even
   lang in plaats van één lange en één korte.
   ============================================================ */
body.bc-page-reviews .hero.rvp-hero.au-hero { min-height: 0; padding: 60px 0 56px; }
body.bc-page-reviews .rvp-hero-inner h1 { font-size: clamp(34px, 4vw, 54px); max-width: 14em; margin-inline: auto; text-wrap: balance; }