/* ============================================================
   Bconnect Meer rendement Probleem (SolLeak) — widget-styling
   Bron: ingekort-automotive.css (au-leak-blok). Tokens uit tokens.css.
   ============================================================ */

.au-leak { padding: var(--space-8) 0; background: #FFFFFF; }
.au-leak > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }
.au-leak-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 72px; align-items: center; }
.au-leak-intro { align-self: center; }
.au-leak-intro .eyebrow { margin-bottom: 16px; }
.au-leak-intro h2 { color: var(--c-navy); margin: 0 0 16px; text-wrap: pretty; }
.au-leak-intro p { color: var(--c-text-muted); font-size: 16px; line-height: 1.65; max-width: 30em; }

/* doorlopende gradient-lijn die met de scroll meegroeit */
.au-leak-track { position: relative; padding-left: 78px; }
.au-leak-rail {
  position: absolute; left: 31px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: var(--c-border);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 96px), transparent 100%);
}
.au-leak-rail-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%; border-radius: 3px;
  background: linear-gradient(180deg, var(--c-grad-blue), var(--c-grad-magenta));
  transition: height .15s linear;
}
.au-leak-node { position: relative; padding: 4px 0 var(--space-8); }
.au-leak-node:last-of-type { padding-bottom: 0; }
.au-leak-marker {
  position: absolute; left: -78px; top: 0; width: 64px; height: 64px; border-radius: 20px;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 20px;
  background: var(--c-white); color: var(--c-text-soft);
  border: 1.5px solid var(--c-border); box-shadow: var(--shadow-soft);
  transition: transform .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.au-leak-node.is-lit .au-leak-marker {
  background: var(--gradient-brand); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-feature); transform: scale(1.04);
}
.au-leak-node-h {
  font-family: var(--font-head); font-size: 21px; font-weight: var(--fw-semibold); line-height: 1.3;
  letter-spacing: -0.01em; color: var(--c-navy); margin: 6px 0 10px; text-wrap: pretty;
}
.au-leak-node-p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: var(--c-text-muted); margin: 0; max-width: 40em; }

.au-leak-close { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--c-border); text-align: center; }
.au-leak-close p {
  font-family: var(--font-head); font-size: 22px; font-weight: var(--fw-semibold); line-height: 1.4;
  letter-spacing: -0.01em; color: var(--c-navy); max-width: 28em; margin: 0 auto; text-wrap: pretty;
}
/* Het slotblok kan een tweede alinea hebben: de toelichting onder het
   statement. Die is bewust rustiger — bodytekst in plaats van de kop-stijl.
   Blokken met maar één alinea (o.a. /automotive/) veranderen hier niet van. */
.au-leak-close p + p {
  font-family: var(--font-body); font-size: 16px; font-weight: var(--fw-regular, 400); line-height: 1.65;
  letter-spacing: 0; color: var(--c-text-muted); max-width: 34em; margin: 14px auto 0;
}

@media (max-width: 920px) {
  .au-leak-grid { grid-template-columns: 1fr; gap: 36px; }
  .au-leak-intro { position: static; }
}
@media (max-width: 520px) {
  .au-leak-track { padding-left: 60px; }
  .au-leak-rail { left: 23px; }
  .au-leak-marker { left: -60px; width: 48px; height: 48px; border-radius: 15px; font-size: 16px; }
}

/* ===== Elementor-context + HARDENING tegen theme-resets ===== */
.elementor-widget-bconnect_mr_leak { margin: 0 !important; }
.elementor-widget-bconnect_mr_leak .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;
}
.elementor-widget-bconnect_mr_leak .au-leak-node.is-lit .au-leak-marker {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_mr_leak .au-leak-rail-fill {
	background: linear-gradient(180deg, #2301fb, #a80290) !important;
}

/* =====================================================================
   GELIJKTREKKEN MET DE AUTOMOTIVE-EXPORT (29-07-2026)
   In de export is deze sectie geen wit vlak maar een zacht paneel: #F4F5FA
   met twee kleurwashes, een gestippelde textuurlaag en een intro-kolom die
   blijft staan terwijl de nodes voorbij scrollen (verfijning 5).

   BEWUST GESCOPED OP PAGINA 117: deze widget (bconnect_mr_leak) staat ook
   op /meer-rendement/ (pagina 112), en die pagina is nog niet tegen zijn
   eigen export gelegd. Haal `body.bc-page-automotive` weg zodra dat wel zo is —
   de export-CSS zet deze regels ongescoped op `.au-leak`.
   ===================================================================== */
body.bc-page-automotive .au-leak {
	position: relative;
	background:
		radial-gradient(56% 70% at 100% 0%, rgba(168, 2, 144, .05) 0%, transparent 62%),
		radial-gradient(50% 66% at 0% 100%, rgba(35, 1, 251, .05) 0%, transparent 62%),
		#F4F5FA;
}
/* fijne stippentextuur, uitgemaskeerd naar linksboven */
body.bc-page-automotive .au-leak::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(20, 20, 100, .06) 1px, transparent 1.4px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(90% 90% at 18% 22%, #000 0%, transparent 68%);
	        mask-image: radial-gradient(90% 90% at 18% 22%, #000 0%, transparent 68%);
}
body.bc-page-automotive .au-leak > .container { position: relative; z-index: 1; }

/* intro blijft in beeld terwijl de nodes voorbij scrollen */
@media (min-width: 961px) {
	/* Ook op /meer-rendement/ (112): de introkolom stond daar verticaal
	   gecentreerd naast de vier nodes en zakte daardoor halverwege weg.
	   Nu bovenaan uitgelijnd en meelopend, net als op /automotive/ (117). */
	body.bc-page-automotive .au-leak-grid,
	body.bc-page-meer-rendement .au-leak-grid { align-items: start; }
	body.bc-page-automotive .au-leak-intro,
	body.bc-page-meer-rendement .au-leak-intro {
		position: sticky;
		/* Header (--bc-header-h, 108px in dit thema) + de sticky subnav-balk
		   (53px) + lucht. Stond op een harde 158px: dat is precies de
		   onderkant van die balk, waardoor de eyebrow "Waar omzet weglekt"
		   er tegenaan plakte en de bovenrand erachter verdween. */
		top: calc(var(--bc-header-h, 108px) + 76px);
		align-self: start;
	}
	/* Ingelogd duwt de WP-adminbalk alles 32px omlaag — zelfde correctie als
	   op de sticky subnav-container in subnav.css. */
	body.admin-bar.bc-page-automotive .au-leak-intro,
	body.admin-bar.bc-page-meer-rendement .au-leak-intro {
		top: calc(var(--bc-header-h, 108px) + 108px);
	}
}

/* markers half-transparant wit vóór ze oplichten */
body.bc-page-automotive .au-leak-marker { background: rgba(255, 255, 255, .92); }
body.bc-page-automotive .au-leak-node.is-lit .au-leak-marker {
	background: var(--gradient-brand);
	box-shadow:
		0 0 0 7px rgba(168, 2, 144, .07),
		0 18px 36px -12px rgba(35, 1, 251, .42),
		0 8px 18px rgba(20, 20, 100, .18);
}

/* slotzin: gradient-haarlijn i.p.v. kale border */
body.bc-page-automotive .au-leak-close {
	border-top: 0;
	position: relative;
	padding-top: var(--space-5);
}
body.bc-page-automotive .au-leak-close::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 220px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, rgba(35, 1, 251, .5), rgba(168, 2, 144, .5), transparent);
}