.lg-tile { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; background: var(--brand-gradient); display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(168,2,144,.26); }
.lg-tile svg { width: 23px; height: 23px; }
.lg-chan-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.lg-chan-text { max-width: none; }
.lg-chan-intro { max-width: 46ch; margin-top: 18px; }
.lg-chan-list { list-style: none; margin: clamp(28px, 3vw, 36px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lg-chan-item { display: flex; gap: 16px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-card); border: 1px solid var(--c-border-soft); background: #fff; box-shadow: var(--shadow-soft); }
.lg-chan-item .lg-tile { width: 40px; height: 40px; border-radius: 11px; }
.lg-chan-item .lg-tile svg { width: 20px; height: 20px; }
.lg-chan-name { display: block; font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: 15.5px; color: var(--c-navy); margin-bottom: 3px; }
.lg-chan-line { display: block; font-size: 14px; line-height: 1.45; color: var(--c-text-muted); }
.lg-chan-visual { position: relative; display: flex; justify-content: center; }
.lg-chan-visual .lg-ph { width: 100%; max-width: 520px; min-height: 500px; }
.lg-chan-img { display: block; width: 85%; max-width: 520px; height: auto; margin: 0 auto; object-fit: contain; border-radius: var(--radius-feature); box-shadow: var(--shadow-card); }

@media (max-width: 900px) {
  .lg-chan-grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .lg-chan-visual { order: 2; }
  .lg-chan-text { order: 1; }
  .lg-chan-visual .lg-ph { min-height: 300px; }
}

/* ===== HARDENING — gradient/kleur tegen theme-resets ===== */
.elementor-widget-bconnect_lg_channels .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_lg_channels .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_lg_channels .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}

/* ============================================================
   KANAALKAARTEN (3.3.27) — het ontwerp van om-kanalen
   ------------------------------------------------------------
   Kop en intro gecentreerd, daaronder vier kaarten: kanaalbeeld van
   48px, kanaalnaam en een korte regel. De waarden zijn die van
   om-kanalen.css, op 30-09-2026 overgenomen onder eigen namen; er staat
   geen class uit om- in deze familie en de beelden staan in de eigen
   assets-map. Twee kolommen, onder 769px één.
   ============================================================ */
.lg-chcards { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(30px, 3.6vw, 46px); }
.lg-chcard { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; box-sizing: border-box; padding: 26px 24px; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 16px; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.lg-chcard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 20, 100, .1); }
.lg-chcard > div { min-width: 0; }
.lg-chcard-logo { width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.lg-chcard-h { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 19px; line-height: 1.25; letter-spacing: -.015em; color: var(--c-navy); margin: 0; }
.lg-chcard p { font-size: 15px; line-height: 1.58; color: var(--c-text-muted); margin: 8px 0 0; text-wrap: pretty; }

@media (max-width: 768px) {
	.lg-chcards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.lg-chcard { transition: none; }
}

/* HARDENING — kanaalkaarten.
   1. Het beeld vult een vaste tegel van 48px. `.elementor img` (0,1,1)
      zet `height: auto`; wint dat, dan bepaalt de beeldverhouding de
      hoogte en staat het Messenger-SVG (zonder intrinsieke maat) op nul
      of op zijn volle viewBox. Onder de widgetnaam op (0,2,1).
   2. De kanaalnaam is een h3; de koppenreset van de familie mag hem niet
      overschrijven. Onder de widgetnaam op (0,2,0).
   3. Hover na de reveal: `.au-sec.is-settled .au-rise` zet transform en
      transition op none, en de kaart draagt zelf `au-rise`. Daarom hier
      op (0,4,0) en (0,5,0), zoals in om-kanalen. */
.elementor-widget-bconnect_lg_channels .lg-chcard-logo img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; border-radius: 0; }
.elementor-widget-bconnect_lg_channels .lg-chcard-h { font-size: 19px; line-height: 1.25; margin: 0; color: var(--c-navy); }
.au-sec.is-settled .lg-chcard.au-rise { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.au-sec.is-settled .lg-chcard.au-rise:hover { transform: translateY(-4px); }

/* De kop sinds 3.3.27 gecentreerd over 720px: "Leads via je website" is het
   accent en de rest van de kop begint met een komma. Met het accent op
   inline-block (hierboven) breekt de kop als één blok af en begint de tweede
   regel met ", WhatsApp". Inline breekt het accent mee in de regelval en
   blijft de komma aan "website" vast; de gradient loopt over de
   regelfragmenten door (box-decoration-break slice, de standaard). Zelfde
   oplossing als .ob-grad op /over-bconnect/. Op (0,3,0). */
.elementor-widget-bconnect_lg_channels .lg-h2 .accent { display: inline; }
