/* ============================================================
   dk-kanalen.css — zone 3 van /digitale-klantenservice/.
   1-op-1 uit de Claude Design-export van 01-09-2026
   (upgrade-klantenservice.css, blok "ZONE 3 — KANALEN").
   Gedeelde dk-basis: widgets/shared/bconnect-dk.css.

   De blokken zijn een kopie van .lg-chan-item/.lg-tile uit
   lg-channels.css onder eigen namen; zie de kop van de class.
   ============================================================ */

.dk-chan-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.dk-chan-visual { display: flex; justify-content: center; min-width: 0; }
/* 18px, gelijk aan de andere drie sectiebeelden. De export had twee tiers
   (hero + kanalen 14px, mens + dashboard 18px) zonder aanwijsbare reden;
   op 01-09-2026 gelijkgetrokken. De selector is `.dk-chan-visual img`
   (0,1,1) en verslaat daarmee `.elementor img { border-radius: 0 }` — zie
   de val in tools/beeld-conversie.md. */
.dk-chan-visual img { width: 100%; max-width: 600px; height: auto; display: block; border-radius: 18px; }
.dk-chan-text { display: block; min-width: 0; }
.dk-chan-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dk-chan-list li { display: flex; gap: 14px; align-items: flex-start; }
.dk-chan-name { display: block; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 16px; color: var(--c-navy); line-height: 1.2; margin-bottom: 5px; }
.dk-chan-line { display: block; font-size: 14.5px; line-height: 1.5; color: var(--c-text-muted); }

/* ---- responsive --------------------------------------------- */
@media (max-width: 980px) {
	.dk-chan-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
	.dk-chan-visual { order: -1; }
}
@media (max-width: 700px) {
	.dk-chan-list { display: grid; grid-template-columns: 1fr; }
}

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