/* ============================================================
   ac-probleem.css — sectie 1 van /ai-chatbot/.
   Bouwt op widgets/shared/bconnect-ac.css (handle `bconnect-ac`).
   Bron: upgrade-aichatbot.css, "SECTIE 1 — PROBLEEM".
   ============================================================ */

.ac-prob-grid { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.ac-prob-list { list-style: none; margin: 0; padding: 0; display: flex; width: 100%; box-sizing: border-box; flex-direction: column; gap: 16px; }
.ac-prob-list li { display: flex; box-sizing: border-box; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.55; color: var(--c-navy); padding: 16px 18px; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 14px; box-shadow: 0 4px 14px rgba(20, 20, 100, .04); }

@media (max-width: 980px) {
	.ac-prob-grid { grid-template-columns: 1fr; gap: 32px; }
}

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

   Deze widget heeft geen <img> — de mark is een inline SVG, en daar
   raakt `.elementor img` niet aan. Wat wél nodig is: de SVG in
   `.ac-mark` moet zijn maat uit de shared regel houden. Elementor's
   reset zet `svg{max-width:100%}` op (0,0,1), dus de shared regel
   `.ac-mark svg` (0,1,1) wint daar al van; hier alleen expliciet
   `display` zodat de grid-centrering in .ac-mark niet van een geërfde
   inline-baseline afhankelijk is.
   ============================================================ */
.elementor-widget-bconnect_ac_probleem .ac-mark svg { display: block; box-sizing: border-box; width: 13px; height: 13px; }