/* ============================================================
   cf-branches.css — blok 10 van /chatfunctie-op-je-website/.
   Bouwt op widgets/shared/bconnect-cf.css (handle `bconnect-cf`).
   Bron: upgrade-chatfunctie.css, "10 — BRANCHES".

   `.cf-duo` staat hier en niet in de gedeelde stylesheet: anders dan
   `.ac-duo`, dat door ac-resultaat én ac-branches wordt gebruikt, is dit
   in de cf-familie de enige widget met dit raster.
   ============================================================ */

.cf-duo { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(30px, 3.6vw, 44px); align-items: stretch; }
.cf-duo-card { display: flex; box-sizing: border-box; flex-direction: column; padding: 28px 28px 26px; background: #fff; border: 1px solid rgba(20, 20, 100, .09); border-radius: 16px; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.cf-duo-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 20, 100, .1); }
.cf-duo-top { display: flex; align-items: center; gap: 14px; }
.cf-duo-p { font-size: 15.5px; line-height: 1.6; color: var(--c-text-muted); margin: 14px 0 0; }
.cf-duo-link { margin-top: auto; padding-top: 22px; }

@media (max-width: 1024px) {
	.cf-duo { grid-template-columns: 1fr; }
}

/* Géén `.bc-ic-img`-regel: icon_tile() krijgt in deze widget nooit een
   MEDIA-waarde mee — er is geen control voor — dus die klasse kan in de
   markup niet voorkomen. Zelfde afweging als in ac-bouwen.css. */