/* ============================================================
   cf-aanpak.css — blok 5 van /chatfunctie-op-je-website/.
   Bouwt op widgets/shared/bconnect-cf.css (handle `bconnect-cf`).
   Bron: upgrade-chatfunctie.css, "5 — WAT WE LEVEREN".

   `.cf-split`, `.cf-figure-col`, `.cf-figure` en `.cf-tile` staan in de
   gedeelde stylesheet. Hier alleen het 2x2-raster en de kaart erin.
   ============================================================ */

/* margin-top 0: de kaarten staan als eerste in hun kolom, waar de bron
   dat als inline style zette. */
.cf-cards2 { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 0; }
.cf-card { display: flex; box-sizing: border-box; flex-direction: column; gap: 14px; padding: 22px 22px 24px; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 14px; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.cf-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 20, 100, .1); }
.cf-card h3 { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 16.5px; line-height: 1.25; color: var(--c-navy); margin: 0 0 7px; }
.cf-card p { font-size: 14.5px; line-height: 1.55; color: var(--c-text-muted); margin: 0; }

@media (max-width: 768px) {
	.cf-cards2 { 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. */