/* ============================================================
   ac-read.css — de afsluitende "Verder lezen"-zone van /ai-chatbot/.
   Bouwt op widgets/shared/bconnect-ac.css (handle `bconnect-ac`).
   Bron: upgrade-aichatbot.css, "VERDER LEZEN".
   ============================================================ */

.ac-read { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.ac-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); }
.ac-read-item:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(20, 20, 100, .09); color: var(--c-magenta); }
.ac-read-item .arr { transition: transform .18s var(--ease); }
.ac-read-item:hover .arr { transform: translateX(4px); }

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

/* ============================================================
   HARDENING

   Deze widget heeft geen <img> en geen SVG; de pijl is het teken →.
   Wat wél moet: `.ac-read-item` is een <a>, en Elementor's reset zet op
   links een eigen `text-decoration` en kleur. Een kale klassenselector
   is (0,1,0) en verliest van `.elementor a` op (0,1,1). Daarom expliciet
   onder de widgetklasse, op (0,2,0).
   ============================================================ */
.elementor-widget-bconnect_ac_read .ac-read-item {
	display: flex;
	box-sizing: border-box;
	text-decoration: none;
	color: var(--c-navy);
}
.elementor-widget-bconnect_ac_read .ac-read-item:hover { text-decoration: none; color: var(--c-magenta); }