/* ============================================================
   ac-bouwen.css — sectie 2 van /ai-chatbot/ ("Onze aanpak").
   Bouwt op widgets/shared/bconnect-ac.css (handle `bconnect-ac`).
   Bron: upgrade-aichatbot.css, "SECTIE 2 — CHATBOT LATEN MAKEN".
   ============================================================ */

.ac-build-grid { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; margin-top: 0; }
.ac-build-visual { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
.ac-build-text { display: flex; width: 100%; min-width: 0; box-sizing: border-box; flex-direction: column; }
.ac-build-text .ac-head { max-width: none; }
.ac-build-blocks { display: flex; width: 100%; box-sizing: border-box; flex-direction: column; gap: 16px; margin-top: 26px; }
.ac-build-card { display: flex; box-sizing: border-box; gap: 14px; align-items: flex-start; padding: 20px 22px; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 16px; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ac-build-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 20, 100, .1); }
.ac-build-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 6px; }
.ac-build-card p { font-size: 14px; line-height: 1.5; color: var(--c-text-muted); margin: 0; }

@media (max-width: 1080px) {
	.ac-build-grid { grid-template-columns: 1fr; }
	.ac-build-visual { order: -1; }
}

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

   `.ac-build-visual img` staat in de bron op (0,1,1) — één klasse plus
   één type. Precies zoveel als `.elementor img`, dat zowel
   `border-radius: 0` als `height: auto` zet. Bij gelijke specificiteit
   beslist de bronvolgorde, en dat is te fragiel: het hangt af van de
   volgorde waarin WordPress de stylesheets uitprint, en die verandert
   zodra er een handle bij komt of een dependency verschuift.

   Onder `.elementor-widget-bconnect_ac_bouwen` komt het op (0,2,1) en
   staat de uitkomst vast. Meet de computed waarden in de browser, lees
   ze niet uit deze bron: dat is de enige manier om te zien wie er
   werkelijk wint.

   height: auto is hier wat we willen (het beeld is 1024×1024 en moet
   met de kolom meeschalen), maar het staat er expliciet zodat het niet
   per ongeluk van `.elementor img` komt.
   ============================================================ */
.elementor-widget-bconnect_ac_bouwen .ac-build-visual img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	border-radius: 18px;
}

/* Géén `.bc-ic-img`-regel hier. icon_tile() krijgt in deze familie nooit
   een MEDIA-waarde mee — de bron heeft geen icoon-beelden en er is dus
   ook geen control voor — dus die klasse kan in de markup niet voorkomen.
   Een regel ervoor zou dode CSS zijn, en die halen we hier juist weg. */