/* ============================================================
   lu-kanalen.css — sectie 8 van /live-chat-uitbesteden/.
   Bouwt op widgets/shared/bconnect-lu.css (handle `bconnect-lu`).
   Bron: upgrade-uitbesteden.css, "7 KANALEN".

   `.lu-card`, het kaart-binnenraster en `.lu-ico` staan in de gedeelde
   stylesheet. Hier alleen de rij van vier, die in drie stappen afbouwt:
   4 kolommen, onder 1100px 2 kolommen, onder 560px 1 kolom.
   ============================================================ */

.lu-row4 { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 3.6vw, 44px); }
.lu-row4 .lu-card { padding: 26px 22px 28px; }

@media (max-width: 1100px) {
	.lu-row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.lu-row4 { grid-template-columns: 1fr; }
}

/* ============================================================
   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.
   ============================================================ */
.lu-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); }
.lu-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); }
.lu-chcard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 20, 100, .1); }
.lu-chcard > div { min-width: 0; }
.lu-chcard-logo { width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.lu-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; }
.lu-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) {
	.lu-chcards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.lu-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: `.lu-sec.is-settled .lu-rise` zet transform en
      transition op none, en de kaart draagt zelf `lu-rise`. Daarom hier
      op (0,4,0) en (0,5,0), zoals in om-kanalen. */
.elementor-widget-bconnect_lu_kanalen .lu-chcard-logo img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; border-radius: 0; }
.elementor-widget-bconnect_lu_kanalen .lu-chcard-h { font-size: 19px; line-height: 1.25; margin: 0; color: var(--c-navy); }
.lu-sec.is-settled .lu-chcard.lu-rise { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.lu-sec.is-settled .lu-chcard.lu-rise:hover { transform: translateY(-4px); }