/* ============================================================
   ac-modellen.css — sectie 6 van /ai-chatbot/.
   Bouwt op widgets/shared/bconnect-ac.css (handle `bconnect-ac`).
   Bron: upgrade-aichatbot.css, "SECTIE 6 — TWEE MODELLEN" (de kop in de
   bron is achterhaald: het zijn drie modellen).

   `.ac-model-btn` uit de bron staat hier NIET: die kaarten hebben geen
   eigen knop meer, de sectie heeft er één onderaan.
   ============================================================ */

.ac-models { 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; }
.ac-model { display: flex; box-sizing: border-box; flex-direction: column; padding: 28px 26px 26px; background: #fff; border: 1px solid rgba(20, 20, 100, .09); border-radius: 18px; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ac-model:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 20, 100, .1); }
.ac-model.is-featured { border-color: rgba(35, 1, 251, .22); box-shadow: 0 14px 40px rgba(35, 1, 251, .1); }
.ac-model-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 30px; }
.ac-model-tag { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 19.5px; line-height: 1.25; letter-spacing: -.015em; color: var(--c-navy); }
.ac-model-badge { font-family: var(--font-head); font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--brand-gradient); border-radius: 999px; padding: 5px 11px; }
.ac-model-line { font-size: 15.5px; line-height: 1.55; color: var(--c-text-muted); margin: 14px 0 0; }
.ac-model-feats { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(20, 20, 100, .08); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.ac-model-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--c-navy); }

/* ---- verhoudingsmeter -------------------------------------- */
.ac-meter { display: flex; width: 100%; box-sizing: border-box; margin-top: 18px; flex-direction: column; gap: 9px; }
.ac-meter-labels { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--c-navy); }
.ac-meter-tag { display: inline-flex; align-items: center; gap: 6px; }
.ac-meter-sep { color: rgba(20, 20, 100, .32); }
.ac-meter-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.ac-meter-dot.is-human { background: var(--c-navy); }
.ac-meter-dot.is-ai { background: linear-gradient(90deg, #2301fb, #a80290); }
.ac-meter-track { display: flex; width: 100%; box-sizing: border-box; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(20, 20, 100, .08); }
.ac-meter-fill { display: block; height: 100%; transform-origin: left center; }
.ac-meter-fill.is-human { background: var(--c-navy); }
.ac-meter-fill.is-ai { background: linear-gradient(90deg, #2301fb, #a80290); }

/* De vulling schuift open zodra de sectie in beeld komt. Gescoped op
   .ac-sec, net als de rest van de reveal; de bron had dit hier al goed. */
@media (prefers-reduced-motion: no-preference) {
	.ac-meter-fill { transition: transform .8s var(--ease, cubic-bezier(.2, .7, .2, 1)) .25s; }
	.ac-sec:not(.is-inview) .ac-meter-fill { transform: scaleX(0); }
	.ac-sec.is-settled .ac-meter-fill { transition: none; transform: scaleX(1); }
}

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

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

   Deze widget heeft geen <img>: de meter is opgebouwde markup en het
   vinkje is een inline SVG. Wel expliciet het vinkje op display:block,
   zodat de grid-centrering in .ac-check niet van een geërfde
   inline-baseline afhangt.
   ============================================================ */
.elementor-widget-bconnect_ac_modellen .ac-check svg { display: block; box-sizing: border-box; width: 13px; height: 13px; }