/* ============================================================
   ac-hero.css — hero van /ai-chatbot/.
   Bouwt op widgets/shared/bconnect-ac.css (handle `bconnect-ac`).
   Bron: upgrade-aichatbot.css uit "AI chatbot (standalone) (1).html".

   Zes dode klassen uit de bron staan hier NIET: .ac-chat-mock (elf
   regels), .ac-chat-done, .ac-chat-done-ic, .ac-hero-float, .ac-hf-ic en
   .ac-hf-txt. Ze hoorden bij een revisie waarin de hero het dk-hero-beeld
   plus een zwevende kaart gebruikte; die markup bestaat niet meer.
   ============================================================ */

.ac-hero { padding: clamp(48px, 6vw, 92px) 0 clamp(40px, 5vw, 72px); }
.ac-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; }
.ac-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(60% 55% at 78% 40%, #000 0%, transparent 72%); mask-image: radial-gradient(60% 55% at 78% 40%, #000 0%, transparent 72%); opacity: .6; }
.ac-hero > .container { position: relative; z-index: 1; }
.ac-hero-grid { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }

/* Gridkind zonder eigen regels in de bron; expliciet gemaakt zodat het
   niet van een Elementor-kolom een display of width erft. */
.ac-hero-copy { display: block; width: 100%; min-width: 0; box-sizing: border-box; }

.ac-hero-sub { font-size: var(--fs-lead); line-height: 1.62; color: var(--c-text-muted); margin: 20px 0 0; max-width: 34em; text-wrap: pretty; }
.ac-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.ac-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; }
.ac-hero-proof li { display: flex; flex-direction: column; gap: 6px; }
.ac-proof-num { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: clamp(20px, 2.1vw, 26px); line-height: 1; letter-spacing: -.02em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ac-proof-label { font-size: 13.5px; line-height: 1.4; color: var(--c-text-soft); }
.ac-hero-visual { position: relative; display: flex; width: 100%; min-width: 0; box-sizing: border-box; justify-content: center; }

/* ---- het opgebouwde beeld ---------------------------------- */
/* GEEN aspect-ratio. De bron zette hier `aspect-ratio: 4/3`, en dat is
   met `overflow: hidden` erbij een plafond in plaats van een verhouding:
   zodra de inhoud hoger wordt dan de ratio toelaat, wordt de rest
   weggesneden zonder dat je het aan de layout ziet. In de rij-opstelling
   was dat overal het geval — clientHeight tegen scrollHeight:

     1301px vw → doos 409, inhoud 536, 127px weg, badge 103px eronder
     1320px vw → doos 415, inhoud 539, 124px weg, badge 100px eronder
     1400px vw → doos 443, inhoud 495,  52px weg, badge  27px eronder
     1440px vw → doos 457, inhoud 502,  45px weg, badge  20px eronder
     1520px vw → doos 486, inhoud 504,  18px weg
     1600px vw → doos 492, inhoud 496,   4px weg

   WAAROM ERUIT EN NIET OPGEREKT. De ratio vórmde de doos nergens; hij
   klipte alleen. 0,75 × beeldbreedte tegen de inhoudshoogte:

     1301px vw → 408.6 tegen 536      1520px vw → 485.6 tegen 504
     1400px vw → 443.4 tegen 495      1600px vw → 491.7 tegen 496

   Op elke breedte is de inhoud hoger, en boven 1520 wordt het beeld niet
   meer breder omdat `--container` daar klemt — de figuur stopt op 655.6px
   en de ratio-hoogte op 491.7px, tegen 496px inhoud. De verhouding kan
   dus nooit de maatgevende zijde worden. Een ondergrens eromheen bouwen
   heeft daarmee geen effect: `min-height: min-content` erbij zetten
   veranderde geen enkele gemeten waarde.

   Zonder ratio is de doos inhoudsgestuurd, precies zoals hij onder 1300
   al was. De rij-opstelling blijft ongemoeid: dit raakt alleen de hoogte
   van de omhullende doos, niet de richting en niet de breedtes. */
.ac-herofig { position: relative; width: 100%; box-sizing: border-box; background: #f5f4fb; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 24px 34px 24px 24px; }
.ac-herofig-blob { position: absolute; width: 66%; aspect-ratio: 1; right: 6%; top: 12%; border-radius: 56% 44% 48% 52%/52% 48% 52% 48%; background: radial-gradient(circle at 50% 50%, #e6e3f7 0%, #e6e3f7 58%, rgba(230, 227, 247, 0) 78%); filter: blur(6px); pointer-events: none; }
.ac-herofig-in { position: relative; z-index: 1; display: flex; align-items: center; width: 100%; min-width: 0; box-sizing: border-box; }

/* chatvenster — eigen naamgeving, geen hergebruik van .chat-mock */
/* Lokale token voor de avatar. De bron las `var(--chat-avatar, #ECEDFB)`,
   en die property bestaat in dit thema nergens — gemeten in de browser:
   `background-image: none`, `background-color: rgb(236, 237, 251)`. De
   widget zet nu `--ac-chat-avatar` als style-attribuut op dit element,
   met de URL van het meegeleverde bestand of van de MEDIA-control. Blijft
   die leeg, dan valt de avatar terug op de egale kleur hieronder, dus er
   ontstaat geen gat. Zelfde opzet als `--dk-chat-avatar` in dk-ai. */
.ac-hw { --ac-chat-avatar: #ECEDFB; position: relative; flex: 1 1 auto; min-width: 0; box-sizing: border-box; background: #fff; border-radius: 12px; box-shadow: 0 14px 38px rgba(20, 20, 100, .14); }
.ac-hw-head { background: #141464; border-radius: 12px 12px 0 0; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.ac-hw-av { width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--ac-chat-avatar, #ECEDFB); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.ac-hw-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-hw-name { font-family: var(--font-head); font-size: 16px; font-weight: 500; color: #fff; line-height: 1.1; }
.ac-hw-status { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #fff; line-height: 1.1; }
.ac-hw-status i { width: 8px; height: 8px; flex: none; border-radius: 999px; background: #39B54A; display: block; }
.ac-hw-body { background: #fff; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.ac-hw-row { display: flex; align-items: flex-start; gap: 10px; }
.ac-hw-row.is-user { justify-content: flex-end; }
.ac-hw-row .ac-hw-av { width: 28px; height: 28px; box-shadow: none; margin-top: 2px; }
.ac-hw-bub { max-width: 78%; font-size: 15px; line-height: 1.5; padding: 10px 14px; border-radius: 14px; }
.ac-hw-bub.is-bot { background: #ECEDFB; color: var(--c-navy, #141464); }
.ac-hw-bub.is-user { background: #141464; color: #fff; }
.ac-hw-foot { padding: 0 16px 16px; }
.ac-hw-input { border: 1px solid #E2E4EC; border-radius: 999px; padding: 10px 16px; font-size: 13px; color: #9A9AAE; background: #fff; }

/* stippellijn-pijl */
.ac-herofig-arrow { position: relative; z-index: 4; flex: 0 0 auto; width: clamp(40px, 4vw, 52px); display: grid; place-items: center; }
.ac-herofig-arrow svg { width: 100%; height: 14px; display: block; overflow: visible; }

/* afhandelingskaart */
.ac-hcard { position: relative; z-index: 3; flex: 0 0 280px; max-width: 280px; box-sizing: border-box; margin-left: -16px; background: #fff; border: .5px solid #ded9f2; border-radius: 12px; box-shadow: 0 16px 40px rgba(20, 20, 100, .12); padding: 18px; }
.ac-hcard-top { display: flex; align-items: center; gap: 10px; }
.ac-hcard-ic { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--brand-gradient); color: #fff; display: grid; place-items: center; }
.ac-hcard-ic svg { width: 14px; height: 14px; }
.ac-hcard-title { font-family: var(--font-head); font-size: 15px; font-weight: 500; color: var(--c-navy); line-height: 1.1; }
.ac-hcard-rows { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 0; }
.ac-hcard-row { display: flex; align-items: flex-start; gap: 11px; }
.ac-hcard-rowic { width: 26px; height: 26px; flex: none; border-radius: 999px; background: #F0EEFB; color: var(--c-navy); display: grid; place-items: center; }
.ac-hcard-rowic svg { width: 14px; height: 14px; }
.ac-hcard-label { display: block; font-size: 12px; font-weight: 700; color: var(--c-navy); line-height: 1.2; }
.ac-hcard-val { display: block; font-size: 14px; color: var(--c-navy); line-height: 1.3; margin-top: 3px; }
.ac-hcard-pills { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 18px; }
.ac-hcard-pill { font-size: 11px; line-height: 1; padding: 6px 7px; border-radius: 999px; background: #fff; border: 1px solid #ded9f2; color: var(--c-navy); white-space: nowrap; }
.ac-hcard-pill.is-on { background: var(--brand-gradient); border-color: transparent; color: #fff; }
.ac-hcard-strip { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: #EAF7EC; font-size: 13px; color: #1F7A2E; }
.ac-hcard-check { width: 18px; height: 18px; flex: none; border-radius: 999px; background: #39B54A; color: #fff; display: grid; place-items: center; }
.ac-hcard-check svg { width: 11px; height: 11px; }

/* tijdstipbadge, onder het venster */
.ac-hbadge { position: relative; z-index: 2; align-self: flex-start; display: flex; box-sizing: border-box; align-items: center; gap: 11px; padding: 10px 14px; background: #fff; border-radius: 12px; box-shadow: 0 12px 28px rgba(20, 20, 100, .12); }
.ac-hbadge-ic { width: 30px; height: 30px; flex: none; border-radius: 999px; background: var(--brand-gradient); color: #fff; display: grid; place-items: center; }
.ac-hbadge-ic svg { width: 16px; height: 16px; }
.ac-hbadge-txt { display: flex; flex-direction: column; gap: 2px; }
.ac-hbadge-txt strong { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--c-navy); line-height: 1.15; }
.ac-hbadge-txt span { font-size: 12px; color: #6b6f96; line-height: 1.2; }

/* ---- responsive -------------------------------------------- */
@media (max-width: 980px) {
	.ac-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* ---- stapelgrens van het herobeeld: 1300px ------------------
   Stond in de bron op 820px en dat was te laat. `.ac-hcard` is
   `flex: 0 0 280px` en `.ac-hw` staat op `flex: 1 1 auto; min-width: 0`,
   dus het chatvenster slikt het hele tekort zodra het beeld smaller
   wordt. Gemeten breedte van `.ac-hw`, met de breedste bubbel erbij:

     1600px vw → 281.6px venster, bubbel 194.7px, 2 regels
     1440px vw → 236.0px venster, bubbel 159.1px, 3 regels
     1280px vw → 161.8px venster, bubbel 101.3px, 4 regels
     1120px vw →  93.3px venster, bubbel  47.8px, 7 regels — tekst kapt af
     1000px vw →  73.1px venster, bubbel  32.1px, 7 regels

   Onder 981px sprong het terug naar 550px omdat het hero-grid daar naar
   één kolom gaat; de band 981–1300px was dus de kapotte strook. Vanaf
   1300px staan venster en kaart naast elkaar zoals de bron bedoelt,
   daaronder staat de kaart eronder over de volle breedte van het beeld.

   De `aspect-ratio: auto` die hier stond is niet meer nodig: de ratio is
   uit de basisregel verdwenen omdat hij de doos nergens vormde en alleen
   klipte. Zie de kop van `.ac-herofig`. Wat hier blijft staan is de
   symmetrische padding, die bij de gestapelde opstelling hoort: de 34px
   rechts in de basisregel maakt ruimte voor de kaart die daar met een
   negatieve marge uitsteekt, en die kaart staat hieronder niet meer
   rechts maar eronder.
   ------------------------------------------------------------ */
@media (max-width: 1300px) {
	.ac-herofig { padding: 24px; }
	.ac-herofig-in { flex-direction: column; align-items: stretch; }
	.ac-herofig-arrow { width: 100%; height: 38px; transform: rotate(90deg); }
	.ac-hw,
	.ac-hcard { flex: 0 0 auto; max-width: none; margin-left: 0; }
}
@media (max-width: 700px) {
	.ac-hero-proof { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   LOGOBALK — eigen kopie, gescoped op deze widget
   ------------------------------------------------------------
   WAAROM DIT HIER STAAT
   `.hh-logobar` heeft in bconnect-shared.css maar één regel
   (.hh-logobar-intro); de rest van de marquee staat in hero.css,
   lg-hero.css en mr-hero.css. Op /ai-chatbot/ staat geen van die drie
   widgets, dus de balk zou daar volledig zonder opmaak hebben gestaan —
   precies het gat dat dk-hero op /digitale-klantenservice/ tegenkwam.
   Zie de kop van widgets/dk-hero/dk-hero.css.

   Dit is de EFFECTIEVE eindstaat van die cascade, niet de cascade zelf.
   Gemeten tegen de bron: `.hh-logobar-section` uit upgrade.css (200px
   hoog, wit, inhoud vanaf 32px) plus de gradient-logobalk uit
   upgrade-effects.css (26px bandpadding, item 62px hoog met 40px
   binnenmarge, logo 45×101px wit uitgesneden op .82 dekking, intro 26px).

   Alles gescoped op .elementor-widget-bconnect_ac_hero, zodat deze kopie
   de logobalk van hero, lg-hero, mr-hero of dk-hero niet kan raken als
   er ooit twee hero's op één pagina staan.

   De logobestanden zélf komen uit widgets/hero/assets/ — één sitewide
   merkenset, geen widget-eigen asset.
   ============================================================ */

.elementor-widget-bconnect_ac_hero .hh-logobar-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 200px;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
.elementor-widget-bconnect_ac_hero .hh-logobar-section > .container { display: block; width: 100%; box-sizing: border-box; }
.elementor-widget-bconnect_ac_hero .hh-logobar { display: block; width: 100%; box-sizing: border-box; margin-top: 0; padding-top: 32px; border-top: 0; }

.elementor-widget-bconnect_ac_hero .hh-logobar-intro {
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: var(--fw-semibold);
	letter-spacing: -.01em;
	color: var(--c-navy);
	text-align: center;
	margin: 0 0 20px;
}
.elementor-widget-bconnect_ac_hero .hh-logobar-intro .accent {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}

/* Volle breedte binnen een container die dat niet is: 100vw plus een
   negatieve marge van de halve overhang aan beide kanten. */
.elementor-widget-bconnect_ac_hero .au-logobar-marquee {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-top: 26px;
	padding-bottom: 26px;
	background:
		radial-gradient(70% 150% at 10% -20%, rgba(88, 208, 245, .15) 0%, transparent 55%),
		radial-gradient(60% 130% at 94% 120%, rgba(255, 255, 255, .09) 0%, transparent 58%),
		linear-gradient(135deg, #2301fb 0%, #a80290 100%);
}
/* GEEN width hier. Dit is HETZELFDE element als .au-logobar-marquee
   hierboven (class="logo-marquee au-logobar-marquee"), en die zet
   `width: 100vw` voor de volle-breedte band. Een `width: 100%` in dit
   blok staat op dezelfde specificiteit (0,2,0) maar verderop in het
   bestand, en won daardoor: gemeten 1148px in plaats van 1280px, dus
   geen volle breedte. Gevonden door de computed width in de browser te
   meten, niet door de bron te lezen. */
.elementor-widget-bconnect_ac_hero .logo-marquee {
	display: block;
	box-sizing: border-box;
	overflow: hidden !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}
.elementor-widget-bconnect_ac_hero .logo-marquee-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	width: max-content !important;
	gap: 0;
	animation: acLogoMarquee var(--mq-duration, 80s) linear infinite;
	will-change: transform;
}
.elementor-widget-bconnect_ac_hero .logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.elementor-widget-bconnect_ac_hero .logo-marquee-item {
	flex: 0 0 auto !important;
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 62px;
	padding: 0 40px;
	margin: 0;
	background: transparent;
}

/* Eigen keyframe-naam: `logo-marquee` bestaat al in hero.css en
   lg-hero.css, en een tweede definitie onder dezelfde naam wint of
   verliest afhankelijk van de laadvolgorde. */
@keyframes acLogoMarquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.elementor-widget-bconnect_ac_hero .logo-marquee-track { animation: none; }
}

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

   Deze widget heeft één <img>-groep: de merklogo's in de marquee.
   `.elementor img` zet border-radius: 0 én height: auto, beide op
   (0,1,1). Een kale `.logo-marquee-item img` zit óók op (0,1,1) en zou
   dus alleen op bronvolgorde winnen — en de bron waar deze regel vandaan
   komt (lg-hero.css) laadt op deze pagina niet eens. Via de widgetklasse
   komt dit op (0,2,1) en is de uitkomst niet van laadorde afhankelijk.

   height wordt hier expliciet 45px en NIET auto: de logo's staan op een
   gradientband van vaste hoogte en moeten daar allemaal even hoog in.
   brightness(0) invert(1) maakt elk logo wit, ongeacht de bronkleur.
   ============================================================ */
.elementor-widget-bconnect_ac_hero .logo-marquee-item img {
	display: block;
	box-sizing: border-box;
	height: 45px;
	max-height: 45px;
	width: auto;
	max-width: 101px;
	border-radius: 0;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .82;
	background: transparent;
	transition: opacity .25s var(--ease);
}
.elementor-widget-bconnect_ac_hero .logo-marquee-item img:hover { opacity: 1; }