/* ============================================================
   bconnect-ac.css — gedeelde basis van de ac-*-familie (/ai-chatbot/).

   Twaalf ac-widgets delen deze regels: het sectie-ritme met de twee
   achtergrondwassen, de reveal, de koppen, de tekstlink met pijl, de
   icoontegels/marks/vinkjes en het `.ac-duo`-raster dat ac-resultaat en
   ac-branches beide gebruiken.

   Bewust NIET sitewide geënqueued en bewust geen kopie per widget: elke
   ac-widget noemt `bconnect-ac` in get_style_depends(), dus het laadt
   alleen waar een ac-widget staat en kan niet stil wegvallen.

   Overgenomen uit de Claude Design-export "AI chatbot (standalone) (1).html"
   (upgrade-aichatbot.css, 02-09-2026), met twee correcties op de bron:

   1. DE REVEAL IS GESCOPED OP .ac-sec, NIET OP .au-sec.
      In de bron staat `.au-sec:not(.is-inview) .ac-rise` terwijl de secties
      alleen `.ac-sec` dragen. Die selector matchte dus nooit en de reveal
      was dood. De dk-familie loste dat op door `au-sec` óók op de sectie te
      zetten; dat maakt een afhankelijkheid tussen twee widgetfamilies die
      niets met elkaar te maken hebben. Hier staat `.ac-sec`.

   2. ACHT DODE KLASSEN ZIJN ERUIT.
      .ac-chat-mock (elf regels die de canonieke .chat-mock uit de schil
      kleiner schalen), .ac-chat-done, .ac-chat-done-ic, .ac-hero-float,
      .ac-hf-ic, .ac-hf-txt, .ac-model-btn en .ac-review-co hadden regels
      maar komen in de markup niet voor — restanten van een revisie waarin
      de hero het dk-hero-beeld gebruikte. Gemeten door elke klasse in de
      JSX te kruisen met elke selector in de bron-CSS.
   ============================================================ */

:root { --brand-gradient: var( --gradient-brand, linear-gradient( 90deg, #2301fb 0%, #a80290 100% ) ); }

/* ---- sectie-ritme + achtergrondwassen ---------------------- */
.ac-sec { position: relative; display: block; width: 100%; box-sizing: border-box; padding: clamp(40px, 5vw, 64px) 0; overflow: hidden; }
.ac-sec.is-tight { padding: clamp(32px, 3.6vw, 48px) 0; }
.ac-bg-light { background: #fff; }
.ac-bg-lav { background: #EEF1F8; }
.ac-bg-light::before,
.ac-bg-lav::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(620px 340px at 88% 8%, rgba(35, 1, 251, .045), transparent 60%), radial-gradient(520px 300px at 2% 92%, rgba(168, 2, 144, .035), transparent 58%); }
.ac-sec > .container { position: relative; z-index: 1; }

/* ---- reveal -------------------------------------------------
   Gescoped op .ac-sec; zie punt 1 in de kop van dit bestand. De klasse
   is-inview komt van window.Bconnect.reveal() uit bconnect-shared.js,
   is-settled zet de transitie daarna uit zodat er niets blijft hangen. */
@media (prefers-reduced-motion: no-preference) {
	.ac-sec .ac-rise { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
	.ac-sec:not(.is-inview) .ac-rise { opacity: 0; transform: translateY(16px); }
	.ac-sec.is-settled .ac-rise { transition: none; opacity: 1; transform: none; }
	.ac-in { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
	.ac-in.is-in { opacity: 1; transform: none; }
}

/* ---- koppen ------------------------------------------------ */
.ac-eyebrow { display: inline-block; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin-bottom: 16px; }
.ac-h1 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(36px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -.025em; color: var(--c-navy); margin: 0; text-wrap: balance; }
.ac-h2 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: var(--c-navy); margin: 0; text-wrap: balance; }
.ac-intro { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-text-muted); margin: 18px 0 0; max-width: 56ch; text-wrap: pretty; }
.ac-head { display: block; width: 100%; box-sizing: border-box; max-width: 740px; }
.ac-head.is-center { margin: 0 auto; text-align: center; }
.ac-head.is-center .ac-intro { margin-left: auto; margin-right: auto; }
.ac-bridge { text-align: center; margin: clamp(34px, 4vw, 46px) auto 0; max-width: 660px; font-family: var(--font-head); font-weight: var(--fw-medium); font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: var(--c-navy); text-wrap: pretty; }
.ac-note { font-size: 15px; line-height: 1.6; color: var(--c-text-muted); margin: 22px 0 0; max-width: 60ch; }
.ac-note a { color: var(--c-navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(20, 20, 100, .28); text-underline-offset: 3px; }
.ac-note a:hover { color: var(--c-magenta); text-decoration-color: var(--c-magenta); }
.ac-note.is-center { text-align: center; margin-left: auto; margin-right: auto; }
.ac-cta-row { display: flex; width: 100%; box-sizing: border-box; justify-content: center; margin-top: clamp(26px, 3vw, 36px); }
.ac-cta-row.is-left { justify-content: flex-start; }

/* De knop in .ac-cta-row komt uit bconnect_section_cta(), en die rendert
   zijn eigen `.bc-sec-cta` met display:flex, justify-content:center en een
   eigen margin-top. Twee bovenmarges op elkaar en twee keer centreren is
   niet de bedoeling: de rij bepaalt de plaatsing, het blok binnenin niet.
   `.bc-sec-cta` staat op (0,1,0) in bconnect-shared.css, dus (0,2,0) en
   (0,3,0) hieronder winnen daar zonder van laadorde af te hangen. */
.ac-cta-row .bc-sec-cta { display: flex; width: 100%; box-sizing: border-box; margin-top: 0; justify-content: center; }
.ac-cta-row.is-left .bc-sec-cta { justify-content: flex-start; }

/* ---- tekstlink met pijl ------------------------------------ */
.ac-textlink { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 7px; transition: color .18s var(--ease), gap .18s var(--ease); }
.ac-textlink:hover { color: var(--c-magenta); gap: 11px; }
.ac-textlink .arr { transition: transform .18s var(--ease); }
.ac-textlink:hover .arr { transform: translateX(3px); }

/* ---- tegels, marks en vinkjes ------------------------------ */
.ac-tile { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; background: var(--brand-gradient); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px rgba(168, 2, 142, .24); }
.ac-tile svg { width: 22px; height: 22px; }
.ac-mark { width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; background: var(--c-bg-tint, #F1F3F9); color: var(--c-text-soft); }
.ac-mark svg { width: 13px; height: 13px; }
.ac-check { width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; background: var(--brand-gradient); color: #fff; }
.ac-check svg { width: 13px; height: 13px; }
.ac-check-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ac-check-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--c-navy); }

/* ---- gradient-aanhalingsteken (ac-hybride + ac-reviews) ---- */
.ac-quote-mark { width: 34px; height: 27px; display: block; }

/* ============================================================
   .ac-duo — twee gelijke kaarten naast elkaar.
   Gedeeld door ac-resultaat (icoon + kop + tekst + vinklijst) en
   ac-branches (beeld + kop + tekst). Daarom hier en niet in één van
   de twee widget-stylesheets: dan zou de andere hem missen zodra hij
   alleen op de pagina staat.
   ============================================================ */
.ac-duo { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(30px, 3.6vw, 44px); align-items: stretch; }
.ac-duo-card { display: flex; box-sizing: border-box; flex-direction: column; padding: 26px 26px 24px; background: #fff; border: 1px solid rgba(20, 20, 100, .09); border-radius: 12px; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.ac-duo-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 20, 100, .1); }
.ac-duo-top { display: flex; align-items: center; gap: 14px; }
.ac-duo-top .ac-duo-h { margin: 0; }
.ac-duo-h { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 21px; letter-spacing: -.015em; line-height: 1.2; color: var(--c-navy); margin: 16px 0 0; }
.ac-duo-p { font-size: 15.5px; line-height: 1.6; color: var(--c-text-muted); margin: 10px 0 0; }
.ac-duo-feats { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(20, 20, 100, .08); display: flex; flex-direction: column; gap: 12px; }
.ac-duo-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--c-navy); }
.ac-duo-link { margin-top: auto; padding-top: 22px; }
.ac-duo-feats + .ac-duo-link { padding-top: 20px; }

@media (max-width: 860px) {
	.ac-duo { grid-template-columns: 1fr; gap: 16px; }
}

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

   Dit bestand heeft zelf geen <img>-regels — die staan per widget, in
   het HARDENING-blok van dat stylesheet, gescoped onder
   .elementor-widget-bconnect_ac_<naam>. Zie ac-bouwen.css.

   Wat hier wél moet: `.container` binnen een ac-sectie. Elementor zet op
   zijn eigen containers box-sizing en display, en een sectie die als
   widget in een Elementor-kolom staat erft daar een width van. Expliciet
   dus, op (0,2,0) zodat het boven een kale `.container` uitkomt.
   ============================================================ */
.ac-sec > .container { display: block; width: 100%; box-sizing: border-box; }