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

.ac-int-grid { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 46px); }
.ac-int { display: flex; box-sizing: border-box; flex-direction: column; padding: 24px 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-int:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 20, 100, .1); }
.ac-int-top { display: flex; align-items: center; gap: 14px; }
.ac-int h3 { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 18px; line-height: 1.2; color: var(--c-navy); margin: 0; }
.ac-int p { font-size: 14.5px; line-height: 1.55; color: var(--c-text-muted); margin: 14px 0 0; }

.ac-int-logos { display: flex; width: 100%; box-sizing: border-box; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(26px, 3vw, 36px); padding-top: clamp(22px, 2.5vw, 30px); border-top: 1px solid rgba(20, 20, 100, .08); }
.ac-int-logo { width: 104px; height: 52px; box-sizing: border-box; display: grid; place-items: center; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 12px; padding: 9px; }
.ac-int-foot { display: flex; width: 100%; box-sizing: border-box; justify-content: center; margin-top: 26px; }

@media (max-width: 1180px) {
	.ac-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.ac-int-grid { grid-template-columns: 1fr; }
}

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

   `.ac-int-logo img` staat in de bron op (0,1,1) — precies zoveel als
   `.elementor img`, dat border-radius: 0 én height: auto zet. En hier is
   de height géén detail: het logo moet binnen een tegel van 104×52px
   blijven, en dat regelen max-width/max-height sámen met
   `height: auto`. Verliest deze regel de cascade, dan komt height van
   `.elementor img` — óók auto, dus dat valt niet op — maar max-height
   verdwijnt en een liggend logo van 240px breed schiet de tegel uit.

   Onder `.elementor-widget-bconnect_ac_integraties` komt dit op (0,2,1)
   en staat de uitkomst vast. Meet de computed radius én height in de
   browser, op 1280 en op 390.
   ============================================================ */
.elementor-widget-bconnect_ac_integraties .ac-int-logo img {
	display: block;
	box-sizing: border-box;
	width: auto;
	height: auto;
	max-width: 80px;
	max-height: 30px;
	border-radius: 0;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .8;
}

.elementor-widget-bconnect_ac_integraties .ac-tile svg { display: block; box-sizing: border-box; width: 22px; height: 22px; }