/* ============================================================
   cf-cases.css — blok 11 van /chatfunctie-op-je-website/.
   Bouwt op widgets/shared/bconnect-cf.css (handle `bconnect-cf`).
   Bron: upgrade-chatfunctie.css, "11 — CASES".

   Zelfde stramien als ac-reviews.css; de klassen heten hier cf-quote-*
   in plaats van ac-review-*.
   ============================================================ */

.cf-quotes { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(32px, 4vw, 48px); align-items: stretch; }
.cf-quote { display: flex; box-sizing: border-box; flex-direction: column; padding: 28px 26px; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 18px; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); }
.cf-quote-mark { width: 34px; height: 27px; display: block; margin-bottom: 16px; }
.cf-quote-text { font-size: 15.5px; line-height: 1.62; color: var(--c-navy); margin: 0 0 22px; flex: 1; text-wrap: pretty; }
.cf-quote-cite { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(20, 20, 100, .08); }
.cf-quote-logo { width: 108px; height: 56px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid rgba(20, 20, 100, .1); border-radius: 10px; padding: 8px; overflow: hidden; box-sizing: border-box; }
.cf-quote-name { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 15px; color: var(--c-navy); line-height: 1.2; }

@media (max-width: 1024px) {
	.cf-quotes { grid-template-columns: 1fr; }
}

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

   `.cf-quote-logo img` staat in de bron op (0,1,1) — één klasse plus één
   type, precies zoveel als `.elementor img`, dat `border-radius: 0`,
   `height: auto` én `max-width: 100%` zet. Bij gelijke specificiteit
   beslist de bronvolgorde, en die verandert zodra er een handle bij komt.

   Hier is dat geen theorie: het logo moet binnen 92×40 blijven en met
   `width: auto; height: auto` zijn eigen verhouding houden. Zou
   `.elementor img { max-width: 100% }` winnen, dan schaalt een breed
   logo naar de volle 108px-koker en valt het over de padding heen.
   Onder `.elementor-widget-bconnect_cf_cases` komt het op (0,2,1) en
   staat de uitkomst vast. Meet de computed waarden in de browser.
   ============================================================ */
.elementor-widget-bconnect_cf_cases .cf-quote-logo img {
	display: block;
	box-sizing: border-box;
	max-width: 92px;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0;
	filter: grayscale(1);
	opacity: .85;
}