/* ============================================================
   ac-hybride.css — sectie 4 van /ai-chatbot/ ("Mens en AI").
   Bouwt op widgets/shared/bconnect-ac.css (handle `bconnect-ac`).
   Bron: upgrade-aichatbot.css, "SECTIE 4 — HYBRIDE".
   ============================================================ */

.ac-hyb-grid { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.ac-hyb-visual { display: block; width: 100%; min-width: 0; box-sizing: border-box; }

/* Gridkind zonder eigen regels in de bron; expliciet gemaakt. */
.ac-hyb-text { display: block; width: 100%; min-width: 0; box-sizing: border-box; }

.ac-hyb-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; width: 100%; box-sizing: border-box; flex-direction: column; gap: 14px; }
.ac-hyb-item { display: flex; box-sizing: border-box; gap: 14px; align-items: flex-start; 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); }
.ac-hyb-item h3 { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 16px; line-height: 1.25; color: var(--c-navy); margin: 0 0 5px; }
.ac-hyb-item p { font-size: 14px; line-height: 1.5; color: var(--c-text-muted); margin: 0; }

/* De pullquote staat buiten `.ac-hyb-grid`, dus over de volle breedte van
   de sectie, en centreert met `margin-inline: auto`. `max-width: 740px` is
   dezelfde maat als `.ac-head` in bconnect-ac.css, zodat dit blok net zo
   breed leest als de andere gecentreerde blokken van de familie. In de
   bron stond hier 840px; dat was breder dan alles eromheen.
   De marge zelf staat in het HARDENING-blok onderaan — een kale
   `.ac-pull` op (0,1,0) verliest van een Elementor-reset op (0,4,1). */
.ac-pull { display: block; box-sizing: border-box; max-width: 740px; text-align: center; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 20, 100, .06); padding: clamp(24px, 3vw, 32px); }
.ac-pull-quote { font-family: var(--font-head); font-weight: var(--fw-medium); font-size: clamp(17px, 1.8vw, 20px); line-height: 1.5; color: var(--c-navy); margin: 16px auto 0; text-wrap: pretty; }
.ac-pull-cite { display: block; margin-top: 16px; font-size: 14.5px; color: var(--c-text-muted); }
.ac-pull-cite b { color: var(--c-navy); font-weight: 600; }

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

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

   `.ac-hyb-visual img` staat in de bron op (0,1,1) — gelijk aan
   `.elementor img`, dat border-radius: 0 én height: auto zet. Gelijke
   specificiteit betekent dat de bronvolgorde beslist, en die is niet
   vast: hij schuift zodra er een stylesheet-handle bij komt. Onder
   `.elementor-widget-bconnect_ac_hybride` komt dit op (0,2,1) en staat
   de uitkomst vast. Meet de computed radius én height in de browser.

   Ook de box-shadow hoort hier: die zit in de bron op dezelfde regel als
   de radius, en zonder scope zou hij bij een verloren cascade samen met
   de radius wegvallen.
   ============================================================ */
.elementor-widget-bconnect_ac_hybride .ac-hyb-visual img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(20, 20, 100, .1);
}

/* Het gradient-aanhalingsteken is een inline SVG met een class, geen
   <img>; maat expliciet zodat de shared regel niet van Elementor's
   `svg{max-width:100%}` afhankelijk is. `margin-inline: auto` centreert
   hem: `text-align: center` op de kaart doet niets voor een blok-element. */
.elementor-widget-bconnect_ac_hybride .ac-quote-mark { display: block; box-sizing: border-box; width: 34px; height: 27px; margin-inline: auto; }

/* DE PULLQUOTE-MARGE MOET !important, EN DAT IS GEMETEN.
   `.ac-pull` is een <figure>, en Elementor zet daarop:

     .elementor .elementor-widget:not(.elementor-widget-text-editor)
       :not(.elementor-widget-theme-post-content) figure { margin: 0 }

   Dat is vier klassen plus een type, dus (0,4,1). De kale `.ac-pull` zit
   op (0,1,0) en zelfs de gebruikelijke widget-scope
   `.elementor-widget-bconnect_ac_hybride .ac-pull` komt maar op (0,2,0):
   allebei verliezen. Gemeten gevolg vóór deze regel: margin-left en
   margin-right waren 0px in plaats van auto, en margin-top 0px in plaats
   van de clamp — de kaart stond links onder de beeldkolom in plaats van
   gecentreerd onder de sectie.

   Eén niveau hoger scoren lukt hier niet met een selector die je wilt
   onderhouden: (0,4,1) evenaren geeft een gelijkspel dat op bronvolgorde
   beslist, en eroverheen komen vraagt vijf klassen plus een type, met
   `.ac-rise` erin — een reveal-klasse waar layout niet aan mag hangen.
   Daarom `!important`, gescoped op de widget, net zoals
   `widgets/subnav/subnav.css` het voor dezelfde Elementor-reset doet. */
.elementor-widget-bconnect_ac_hybride .ac-pull {
	display: block;
	box-sizing: border-box;
	margin-top: clamp(30px, 3.5vw, 44px) !important;
	margin-right: auto !important;
	margin-bottom: 0 !important;
	margin-left: auto !important;
	max-width: 740px;
}