/* ============================================================
   Bconnect Home & living Probleem (ProblemHL) — widget-styling
   Bron: upgrade-homeliving2.jsx (ProblemHL) + 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;
}
/* Tweede alinea in het slotblok: rustiger dan het statement erboven.
   Blokken met één alinea 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;
}

/* Introkolom bovenaan uitgelijnd en meelopend met de scroll, net als op
   /automotive/ en /meer-rendement/ (zie mr-leak.css). Stond hier verticaal
   gecentreerd, waardoor hij halverwege de nodes wegzakte. Deze stylesheet
   laadt alleen op /home-en-living/, dus een pagina-scope is niet nodig.
   Onder 921px zet het bestaande blok .au-leak-intro alweer op static. */
@media (min-width: 961px) {
  .au-leak-grid { align-items: start; }
  .au-leak-intro {
    position: sticky;
    /* header (--bc-header-h) + sticky subnav-balk + lucht */
    top: calc(var(--bc-header-h, 108px) + 76px);
    align-self: start;
  }
  body.admin-bar .au-leak-intro { top: calc(var(--bc-header-h, 108px) + 108px); }
}


@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_hl_problem { margin: 0 !important; }
.elementor-widget-bconnect_hl_problem .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_hl_problem .au-leak-node.is-lit .au-leak-marker {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_hl_problem .au-leak-rail-fill {
	background: linear-gradient(180deg, #2301fb, #a80290) !important;
}