/* ============================================================
   cf-read.css — blok 14b van /chatfunctie-op-je-website/.
   Bouwt op widgets/shared/bconnect-cf.css (handle `bconnect-cf`).
   Bron: upgrade-chatfunctie.css, "14 — VERDER LEZEN".

   De sectie draagt `is-tight`: minder verticale ruimte dan de rest,
   omdat hij direct op de CTA-band volgt.
   ============================================================ */

.cf-read { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.cf-read-item { display: flex; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 14px; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 16px; color: var(--c-navy); box-shadow: 0 4px 14px rgba(20, 20, 100, .04); transition: transform .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease); }
.cf-read-item:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(20, 20, 100, .09); color: var(--c-magenta); }
.cf-read-item .arr { transition: transform .18s var(--ease); }
.cf-read-item:hover .arr { transform: translateX(4px); }

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