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

   Het chatvenster is HTML en geen beeld: .cf-hw en alles eronder.
   Eén zwevend label (.cf-hlabel.is-bottom), geen tweede.
   ============================================================ */

.cf-hero { padding: clamp(48px, 6vw, 92px) 0 clamp(40px, 5vw, 68px); }
.cf-hero-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(720px 400px at 86% 14%, rgba(35, 1, 251, .065), transparent 60%), radial-gradient(560px 320px at 0% 62%, rgba(168, 2, 144, .045), transparent 55%), #fff; }
.cf-hero-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(20, 20, 100, .14) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(58% 55% at 80% 40%, #000 0%, transparent 72%); mask-image: radial-gradient(58% 55% at 80% 40%, #000 0%, transparent 72%); opacity: .55; }
.cf-hero > .container { position: relative; z-index: 1; }
.cf-hero-grid { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: 45fr 55fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.cf-hero-copy { min-width: 0; }
.cf-hero-visual { min-width: 0; }
.cf-hero-sub { font-size: var(--fs-lead); line-height: 1.62; color: var(--c-text-muted); margin: 20px 0 0; max-width: 36em; text-wrap: pretty; }
.cf-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.cf-hero-proof { list-style: none; margin: 34px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(20, 20, 100, .1); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cf-hero-proof li { display: flex; flex-direction: column; gap: 6px; }
.cf-proof-num { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: clamp(19px, 2vw, 25px); line-height: 1; letter-spacing: -.02em; background: var(--cf-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cf-proof-label { font-size: 13.5px; line-height: 1.4; color: var(--c-text-soft); }

/* ---- het chatvenster --------------------------------------- */
.cf-herofig { position: relative; width: 100%; box-sizing: border-box; display: flex; justify-content: center; padding: 34px 0 44px; }
.cf-herofig-blob { position: absolute; width: 74%; aspect-ratio: 1; left: 50%; top: 4%; transform: translateX(-50%); border-radius: 56% 44% 48% 52% / 52% 48% 52% 48%; background: radial-gradient(circle at 50% 50%, #e8e5f8 0%, #e8e5f8 56%, rgba(232, 229, 248, 0) 78%); filter: blur(8px); pointer-events: none; }
.cf-hw { position: relative; z-index: 2; flex: 1 1 0; min-width: 280px; max-width: 430px; background: #fff; border-radius: 14px; box-shadow: 0 18px 46px rgba(20, 20, 100, .16); }
.cf-hw-head { background: #141464; border-radius: 14px 14px 0 0; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.cf-hw-av { width: 40px; height: 40px; flex: none; border-radius: 999px; overflow: hidden; background: #ECEDFB; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.cf-hw-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cf-hw-name { font-family: var(--font-head); font-size: 16px; font-weight: 500; color: #fff; line-height: 1.1; }
.cf-hw-status { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #fff; line-height: 1.1; }
.cf-hw-status i { width: 8px; height: 8px; flex: none; border-radius: 999px; background: #39B54A; display: block; }
.cf-hw-body { background: #fff; padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 14px; min-height: 250px; }
.cf-hw-row { display: flex; align-items: flex-start; gap: 10px; }
.cf-hw-row.is-user { justify-content: flex-end; }
.cf-hw-bub { position: relative; max-width: 82%; font-size: 15px; line-height: 1.5; padding: 11px 14px 22px; border-radius: 14px; }
.cf-hw-bub.is-op { background: #ECEDFB; color: var(--c-navy); }
.cf-hw-bub.is-user { background: #141464; color: #fff; }
.cf-hw-time { position: absolute; right: 12px; bottom: 6px; font-size: 11px; font-style: normal; letter-spacing: .01em; opacity: .62; }
.cf-hw-typing { display: inline-flex; align-items: center; gap: 5px; padding: 12px 15px; border-radius: 14px; background: #ECEDFB; }
.cf-hw-typing i { width: 6px; height: 6px; border-radius: 999px; background: #8f93c4; animation: cf-hw-dot 1.3s var(--ease) infinite; }
.cf-hw-typing i:nth-child(2) { animation-delay: .18s; }
.cf-hw-typing i:nth-child(3) { animation-delay: .36s; }

@keyframes cf-hw-dot {
	0%, 60%, 100% { opacity: .35; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
	.cf-hw-typing i { animation: none; }
}

.cf-hw-foot { padding: 0 16px 16px; }
.cf-hw-input { border: 1px solid #E2E4EC; border-radius: 999px; padding: 10px 16px; font-size: 13px; color: #9A9AAE; background: #fff; }

/* ---- het zwevende label ------------------------------------ */
.cf-hlabel { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .9); border-radius: 12px; box-shadow: 0 12px 30px rgba(20, 20, 100, .13); }
.cf-hlabel.is-bottom { bottom: 10px; right: 12%; }
.cf-hlabel-ic { width: 28px; height: 28px; flex: none; border-radius: 999px; background: var(--cf-gradient); color: #fff; display: grid; place-items: center; }
.cf-hlabel-ic svg { width: 15px; height: 15px; }
.cf-hlabel-txt { display: flex; flex-direction: column; gap: 2px; }
.cf-hlabel-txt strong { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--c-navy); line-height: 1.15; }
.cf-hlabel-txt span { font-size: 12px; color: #6b6f96; line-height: 1.2; }

/* Stapelgrens op 1300px en niet op 1024px: het chatvenster heeft
   min-width 280px en de tekstkolom is 45fr, dus daaronder wordt de
   linkerkolom te smal voordat de rechter dat is. */
@media (max-width: 1300px) {
	.cf-hero-grid { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
	.cf-hero-copy { max-width: 760px; }
	.cf-herofig { padding: 28px 0 40px; }
	.cf-hw { max-width: 460px; }
}

@media (max-width: 768px) {
	.cf-hlabel.is-bottom { right: 2%; }
	.cf-hero-proof { grid-template-columns: 1fr; gap: 14px; }
}

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

   `.cf-hw-av img` staat in de bron op (0,1,1) — één klasse plus één
   type. Precies zoveel als `.elementor img`, dat zowel `border-radius: 0`
   als `height: auto` zet. Bij gelijke specificiteit beslist de
   bronvolgorde, en dat is te fragiel: die verandert zodra er een handle
   bij komt of een dependency verschuift.

   Onder `.elementor-widget-bconnect_cf_hero` komt het op (0,2,1) en staat
   de uitkomst vast. `height: 100%` is hier wat we willen — de avatar vult
   de ronde 40px-koker en wordt gecropt door object-fit, niet uitgerekt —
   en juist die 100% zou `.elementor img { height: auto }` overschrijven.
   Meet de computed waarden in de browser, lees ze niet uit deze bron.
   ============================================================ */
.elementor-widget-bconnect_cf_hero .cf-hw-av img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}