/* ============================================================
   Bconnect Home & living Hoe Bconnect helpt (HowHelpsHL) — widget-styling
   Bron: upgrade-homeliving2.jsx (HowHelpsHL) + ingekort-automotive.css
   (au-help-blok). Tokens uit tokens.css.
   ============================================================ */

.au-help { padding: var(--space-8) 0; background: #FFFFFF; }
.au-help > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }
.au-help-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.au-help-card {
  display: flex; flex-direction: column; gap: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(168, 2, 144, 0.30) 0%, rgba(35, 1, 251, 0.24) 40%, rgba(20, 20, 100, 0) 70%),
    #141464;
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-feature);
  box-shadow: var(--shadow-card); padding: var(--space-7);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.au-help-card:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(20, 20, 100, 0.34); }
.au-help-tile {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168,2,142,.26); margin-bottom: 4px;
}
.au-help-tile svg { width: 26px; height: 26px; }
.au-help-card h3 {
  font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
  color: #fff; margin: 0;
}
.au-help-card p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); margin: 0; }
.au-help-link {
  margin-top: auto; padding-top: 8px;
  font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: #fff;
  display: inline-flex; align-items: center; gap: 8px; transition: color .2s var(--ease), gap .2s var(--ease);
}
.au-help-link span { transition: transform .18s var(--ease); }
.au-help-link:hover { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; gap: 11px; }
.au-help-link:hover span { transform: translateX(3px); }

.au-lead { color: var(--c-text-muted); margin: 0 auto; max-width: 48em; font-size: var(--fs-lead); line-height: 1.6; }

@media (max-width: 820px) { .au-help-cards { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .au-help-cards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* ===== Elementor-context + HARDENING tegen theme-resets ===== */
.elementor-widget-bconnect_hl_help { margin: 0 !important; }
.elementor-widget-bconnect_hl_help .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;
}

/* =====================================================================
   KAARTEN TERUG NAAR LICHT (30-07-2026) — bron: "Bconnect versie A"
   Zelfde correctie als in au-help.css: de navy card-behandeling zat in
   de export per ongeluk in de gedeelde CSS en wordt door een latere
   verfijningslaag teruggezet naar licht. Regels 1-op-1 overgenomen.
   ===================================================================== */
.au-help-card { background: var(--c-white); border-color: var(--c-border); box-shadow: var(--shadow-card); }
.au-help-card h3 { color: var(--c-navy); }
.au-help-card p { color: var(--c-text-muted); }
.au-help-link { color: var(--c-navy); }

/* ===== Kop NAAST het icoon (i.p.v. eronder) ====================
   Kaart is een raster: rij 1 = icoontegel + kop naast elkaar, de
   toelichting en de link staan eronder over de volle kaartbreedte.
   Middelste rij is 1fr zodat de link onderaan blijft plakken, zoals
   voorheen met margin-top:auto in de flex-kolom.
   ============================================================ */
.au-help-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 18px;
  row-gap: 14px;
  align-items: center;
}
.au-help-tile { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.au-help-card h3 { grid-column: 2; grid-row: 1; }
.au-help-card p { grid-column: 1 / -1; grid-row: 2; }
.au-help-link { grid-column: 1 / -1; grid-row: 3; }