/* ============================================================
   Bconnect Hero — VARIANT A ("split") + logobalk
   ------------------------------------------------------------
   1-op-1 overgenomen uit de bron-export
   "Bconnect versie A (standalone).html" → laatste <style>-blok
   ("HOMEPAGE-HERO VARIANTEN (A = split, B = tabs)"), plus de
   eindstaat van de logobalk-lagen uit die zelfde export
   (gemeten via computed styles, niet uit één losse bron-regel:
   de export stapelt ~16 verfijningslagen over elkaar).

   Wordt NA hero.css geladen (handle bconnect-hero-split hangt aan
   bconnect-hero) zodat deze regels de oude hero-cascade verslaan.

   WP-AFWIJKINGEN, bewust en op één plek gebundeld:
   - Header: de bron heeft een 77px sticky header, dit thema een
     vaste 108px header-card. Overal waar de bron met 76px rekent
     gebruiken we --hhx-header (108px), zodat de afstand tussen
     onderkant header en eyebrow gelijk is aan de bron (~46px).
   - De homepage heeft GEEN header-spacer (front-page =
     header-on-dark), dus geen margin-top:-76px maar 0.
   - --container/--gutter blijven 1520px/56px (expliciete keuze van
     de gebruiker); de bron gebruikt 1600px/40px.
   ============================================================ */

.hhx-hero,
.elementor-widget-bconnect_hero .hh-logobar-section--dark {
	/* De bron rekent met een basis van 15px/1.6 en tekstkleur #1F2124 op
	   <body>; dit thema erft 16px/1.5 en #333 van Hello Elementor. Alles
	   wat in de bron van die basis erft (o.a. de regelhoogte van eyebrow
	   en kaarttitels) zetten we hier binnen de hero-scope gelijk, zonder
	   de sitewide body-waarden aan te raken. */
	font-size: 15px;
	line-height: 1.6;
	color: var(--c-text, #1F2124);
}

.hhx-hero {
	--hhx-header: 108px;
	position: relative;
	background: #f5f4fb;
	margin-top: 0;
	overflow: hidden;
}
.hhx-hero::before,
.hhx-hero::after { display: none !important; }
.hhx-hero .container { position: relative; z-index: 1; }
.hhx-hero h1 {
	margin: 0;
	font-family: var(--font-head);
	font-weight: var(--fw-extrabold, 800);
	letter-spacing: -.02em;
	color: #141464;
	text-wrap: pretty;
}
.hhx-hero .accent {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hhx-lead {
	margin: 0;
	font-family: var(--font-body);
	color: var(--c-text-muted, #5A6068);
}
.hhx-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin-top: 8px;
}
.hhx-actions .btn { white-space: nowrap; }
.hhx-jump {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-head);
	font-size: 14.5px;
	font-weight: 600;
	color: #141464;
	text-decoration: none;
	cursor: pointer;
}
.hhx-jump:hover { color: #141464; }
.hhx-arrow {
	display: inline-block;
	transition: transform .18s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.hhx-jump:hover .hhx-arrow { transform: translateX(5px); }
.hhx-hero a:hover { color: #AA028E; }
.hhx-hero a.btn-primary,
.hhx-hero a.btn-primary:hover { color: #fff; }

/* ---------- Variant A — split-hero met merkvorm rechts ---------- */
.hhx-split {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* bron: calc(100vh - 186px) — hero + logobalk (179,6px) vullen
	   samen exact één viewport, zodat de onderkant van de logobalk
	   op de fold landt. */
	min-height: calc(100vh - 186px);
	/* In dit regime bepaalt justify-content:center de plaatsing en werkt de
	   padding als bodem; de padding schuift het midden mee (de helft van elke
	   toegevoegde px). Met de bron-waarde (76px = bron-headerhoogte) landt de
	   content op exact dezelfde y als in de export, ook al is de header hier
	   108px. De ondergrens blijft 122px > 108px, dus nooit achter de header. */
	padding: calc(76px + clamp(26px, 3.2vw, 74px)) 0 clamp(40px, 4vw, 60px);
}
/* Lage vensters: dan bepaalt de padding wél de plaatsing, dus hier
   header-bewust rekenen zodat de eyebrow ruim onder de 108px-header blijft. */
@media (min-width: 821px) and (max-height: 800px) {
	.hhx-split { padding-top: calc(var(--hhx-header) + 24px); }
}
.hhx-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
	gap: 48px;
	align-items: center;
}
.hhx-copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}
.hhx-eyebrow {
	margin: 0;
	font-family: var(--font-head);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #141464;
	opacity: .66;
}
.hhx-split h1 {
	font-size: clamp(36px, 4.2vw, 60px);
	line-height: 1.04;
	max-width: 19ch;
}
.hhx-split .hhx-lead {
	font-size: 18.5px;
	line-height: 1.62;
	max-width: 600px;
}
.hhx-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
	padding: 20px 0;
}
.hhx-glow {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(96%, 470px);
	height: min(96%, 470px);
	border-radius: 999px;
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%);
	opacity: .12;
	filter: blur(6px);
}
.hhx-ring {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(70%, 340px);
	height: min(70%, 340px);
	border-radius: 999px;
	border: 1px solid rgba(20, 20, 100, .10);
}
.hhx-card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 21px 25px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--c-border-soft, #ECEEF4);
	box-shadow: 0 2px 5px rgba(20, 20, 100, .06), 0 16px 40px rgba(20, 20, 100, .14);
}
.hhx-card--a { align-self: flex-start; max-width: 78%; }
.hhx-card--b { align-self: flex-end; max-width: 82%; }
.hhx-card-row { display: flex; align-items: center; gap: 10px; }
.hhx-card-ic {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--c-bg-tint, #F4F5FA);
	border: 1px solid var(--c-border-soft, #ECEEF4);
	color: #141464;
}
.hhx-card-ic svg { width: 16px; height: 16px; display: block; }
.hhx-card-title {
	font-family: var(--font-head);
	font-size: 18.5px;
	font-weight: 600;
	letter-spacing: -.012em;
	color: #141464;
}
.hhx-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(57, 181, 74, .12);
	font-family: var(--font-head);
	font-size: 12.5px;
	font-weight: 700;
	color: #141464;
}
.hhx-pill svg { width: 13px; height: 13px; display: block; }
.hhx-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--c-text-muted, #5A6068);
	font-family: var(--font-body);
}
.hhx-meta-ic { color: #141464; display: inline-flex; }
.hhx-meta-ic svg { width: 15px; height: 15px; display: block; }
.hhx-conn {
	position: relative;
	z-index: 1;
	height: 58px;
	margin: 0 34px;
}
.hhx-conn i:nth-child(1) {
	position: absolute; left: 0; top: 0; width: 1.5px; height: 50%;
	background: linear-gradient(180deg, #2301fb 0%, #4a01e0 100%);
}
.hhx-conn i:nth-child(2) {
	position: absolute; left: 0; right: 0; top: calc(50% - 1.5px); height: 1.5px;
	background: linear-gradient(90deg, #4a01e0 0%, #8a02a4 100%);
}
.hhx-conn i:nth-child(3) {
	position: absolute; right: 0; top: 50%; bottom: 0; width: 1.5px;
	background: linear-gradient(180deg, #8a02a4 0%, #a80290 100%);
}
@media (max-width: 1040px) {
	.hhx-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.hhx-copy { max-width: 660px; }
}
@media (max-width: 820px) {
	.hhx-split {
		min-height: 0;
		padding: calc(var(--hhx-header) + 24px) 0 56px;
	}
}
@media (max-width: 560px) {
	.hhx-split .hhx-actions { flex-direction: column; align-items: stretch; }
	.hhx-split .hhx-actions .btn { justify-content: center; }
	.hhx-split .hhx-jump { justify-content: center; }
}

/* ============================================================
   LOGOBALK-SECTIE onder de hero — eindstaat uit de bron:
   sectie 179,6px hoog op elke breedte (intro 41,6 + 20 marge +
   band 4 + 114), lavendel-wash, band full-bleed in de merk-
   gradient met witte logo's van 45px.
   Deze regels staan NA hero.css en zetten daarmee de oudere
   lagen recht (o.a. intro 18,5px i.p.v. 26px, min-height 200px,
   de zoom-hack van de oude hero en de dunnere mobiele band).
   ============================================================ */
.elementor-widget-bconnect_hero .hh-logobar-section--dark {
	background: #f5f4fb;
	position: relative;
	z-index: 1;
	min-height: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}
.elementor-widget-bconnect_hero .hh-logobar-section--dark::before,
.elementor-widget-bconnect_hero .hh-logobar-section--dark::after { display: none; }
.elementor-widget-bconnect_hero .hh-logobar-section--dark .container,
.elementor-widget-bconnect_hero .hh-logobar-section--dark .hh-logobar {
	position: relative;
	z-index: 1;
}
.elementor-widget-bconnect_hero .hh-logobar-section--dark .hh-logobar {
	margin-top: 4px;
	padding-top: 0;
	border-top: none;
}
.elementor-widget-bconnect_hero .hh-logobar-section--dark .hh-logobar-intro {
	/* de bron centreert deze tekst doordat de flex-container krimpt naar
	   contentbreedte; hier expliciet gecentreerd (zelfde eindbeeld). */
	text-align: center;
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: var(--fw-semibold, 600);
	line-height: 1.6;
	letter-spacing: -0.01em;
	color: var(--c-navy);
	margin: 0 0 20px;
}
.elementor-widget-bconnect_hero .hh-logobar-section--dark .au-logobar-marquee {
	margin-top: 4px;
	padding-top: 26px;
	padding-bottom: 26px;
	background:
		radial-gradient(70% 150% at 10% -20%, rgba(88, 208, 245, .15) 0%, transparent 55%),
		radial-gradient(60% 130% at 94% 120%, rgba(255, 255, 255, .09) 0%, transparent 58%),
		linear-gradient(135deg, #2301fb 0%, #a80290 100%);
}
.elementor-widget-bconnect_hero .hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item {
	/* bron: item 125px breed (40px padding links/rechts + logo), geen marge.
	   hero.css zet hier width:132px + margin:0 16px voor de oude balk; die
	   maakte de tussenruimte 164px i.p.v. 125px. */
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	min-width: auto;
	min-height: 62px;
	height: auto;
	margin: 0;
	padding: 0 40px;
}
.elementor-widget-bconnect_hero .hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item img {
	height: 45px;
	max-height: 45px;
	width: auto;
	max-width: 101px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .82;
	mix-blend-mode: normal;
}
.elementor-widget-bconnect_hero .hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item img:hover {
	filter: brightness(0) invert(1);
	opacity: 1;
}

/* Het accentwoord in "Werkt voor elk merk" heeft in de bron een 135deg-verloop
   (`.hh-logobar-intro .accent`), terwijl de H1-accent 90deg is. De hardening in
   hero.css forceert 90deg met !important, dus hier met dezelfde kracht terug. */
.elementor-widget-bconnect_hero .hh-logobar-intro .accent {
	background: linear-gradient(135deg, #2301fb, #a80290) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}
