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

   `.ac-review-co` uit de bron staat hier NIET: die tweede regel onder de
   bedrijfsnaam (een functietitel) bestaat in de markup niet.
   ============================================================ */

.ac-reviews { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(32px, 4vw, 48px); }
.ac-review { 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); }
.ac-review .ac-quote-mark { margin-bottom: 16px; }
.ac-review-quote { font-size: 15.5px; line-height: 1.62; color: var(--c-navy); margin: 0 0 22px; flex: 1; text-wrap: pretty; }
.ac-review-cite { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(20, 20, 100, .08); }
.ac-review-logo { width: 108px; height: 56px; flex: none; box-sizing: border-box; display: grid; place-items: center; background: #fff; border: 1px solid rgba(20, 20, 100, .1); border-radius: 10px; padding: 8px; overflow: hidden; }
.ac-review-who { display: flex; flex-direction: column; gap: 3px; }
.ac-review-name { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 15px; color: var(--c-navy); line-height: 1.2; }
.ac-reviews-foot { display: flex; width: 100%; box-sizing: border-box; justify-content: center; margin-top: clamp(28px, 3vw, 38px); }

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

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

   `.ac-review-logo img` staat in de bron op (0,1,1) — gelijk aan
   `.elementor img`, dat border-radius: 0 én height: auto zet. Bij gelijke
   specificiteit beslist de bronvolgorde en dat is te fragiel.

   Hier hangt er meer aan dan de radius: het logo moet binnen een tegel
   van 108×56px blijven, en dat doen max-width/max-height sámen met
   `height: auto`. Verliest deze regel, dan komt height alsnog op auto
   (dat valt dus niet op) maar verdwijnt max-height, en dan drukt het
   liggende Hedin-logo van 515×272 de kaart uit elkaar.

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

/* Het 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. */
.elementor-widget-bconnect_ac_reviews .ac-quote-mark { display: block; box-sizing: border-box; width: 34px; height: 27px; }