/* ============================================================
   bconnect-cf.css — gedeelde basis van de cf-*-familie
   (/chatfunctie-op-je-website/).

   Veertien cf-widgets delen deze regels: het sectie-ritme met de twee
   achtergrondwassen, de reveal, de koppen en lopende tekst, de
   tekstlink met pijl, de tegels/kruisjes/vinkjes, de 3:2-beeldkolom en
   het `.cf-split`-raster dat cf-probleem, cf-aanpak, cf-koppelingen en
   cf-commerce alle vier gebruiken.

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

   Overgenomen uit de Claude Design-export
   "Chatfunctie op je website (standalone).html"
   (upgrade-chatfunctie.css, 03-09-2026), met twee correcties op de bron:

   1. DE REVEAL IS GESCOPED OP .cf-sec, NIET OP .au-sec.
      Zie het HARDENING-blok onderaan.

   2. TWEE DODE KLASSEN ZIJN ERUIT.
      `.cf-cols3` en `.cf-col` hebben regels in de bron — het raster voor
      de drie H3-kolommen die de kop van blok 8 belooft — maar die kolommen
      staan niet in de markup. Het commentaar in de bron loopt daar achter
      op de code. Ook `.cf-tbc` is eruit: dat was de "Te bevestigen"-badge
      bij de talenvraag, en die vraag is vervallen. Gemeten door elke
      klasse in de JSX te kruisen met elke selector in de bron-CSS.
   ============================================================ */

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

/* ---- sectie-ritme + achtergrondwassen ---------------------- */
.cf-sec { position: relative; display: block; width: 100%; box-sizing: border-box; padding: clamp(44px, 5vw, 72px) 0; overflow: hidden; }
.cf-sec.is-tight { padding: clamp(32px, 3.6vw, 52px) 0; }
.cf-bg-light { background: #fff; }
.cf-bg-lav { background: #EEF1F8; }
.cf-bg-light::before,
.cf-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%); }
.cf-sec > .container { position: relative; z-index: 1; }

/* ---- reveal -------------------------------------------------
   Gescoped op .cf-sec; zie het HARDENING-blok onderaan. 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.
   .cf-in is de aparte hero-variant: die sectie revealt bij mount en
   niet bij scroll, dus hij hangt niet aan .cf-sec. */
@media (prefers-reduced-motion: no-preference) {
	.cf-sec .cf-rise { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
	.cf-sec:not(.is-inview) .cf-rise { opacity: 0; transform: translateY(16px); }
	.cf-sec.is-settled .cf-rise { transition: none; opacity: 1; transform: none; }
	.cf-in { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
	.cf-in.is-in { opacity: 1; transform: none; }
}

/* De donkere track-sectie draagt `.cf-track` en niet `.cf-sec` — hij heeft
   een eigen ritme en eigen achtergrond. De reveal-regels hierboven zouden
   hem daarom overslaan, dus hij staat er expliciet naast. */
@media (prefers-reduced-motion: no-preference) {
	.cf-track .cf-rise { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
	.cf-track:not(.is-inview) .cf-rise { opacity: 0; transform: translateY(16px); }
	.cf-track.is-settled .cf-rise { transition: none; opacity: 1; transform: none; }
}

/* ---- koppen en lopende tekst ------------------------------- */
.cf-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(--cf-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin-bottom: 16px; }
.cf-h1 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -.025em; color: var(--c-navy); margin: 0; text-wrap: balance; }
.cf-h2 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.02em; color: var(--c-navy); margin: 0; text-wrap: balance; }
.cf-h3 { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 20px; line-height: 1.25; letter-spacing: -.015em; color: var(--c-navy); margin: 0; }
.cf-intro { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-text-muted); margin: 18px 0 0; max-width: 60ch; text-wrap: pretty; }
.cf-body { font-size: 16px; line-height: 1.65; color: var(--c-text-muted); margin: 16px 0 0; max-width: 62ch; text-wrap: pretty; }
.cf-head { display: block; width: 100%; box-sizing: border-box; max-width: 820px; }
.cf-head.is-center { margin: 0 auto; text-align: center; }
.cf-head.is-center .cf-intro { margin-left: auto; margin-right: auto; }
.cf-closing { text-align: center; margin: clamp(30px, 3.4vw, 42px) auto 0; max-width: 60ch; font-family: var(--font-head); font-weight: var(--fw-medium); font-size: clamp(17px, 1.9vw, 21px); line-height: 1.45; color: var(--c-navy); text-wrap: pretty; }
.cf-linkline { font-size: 15.5px; line-height: 1.65; color: var(--c-text-muted); margin: 26px 0 0; max-width: 70ch; text-wrap: pretty; }
.cf-linkline.is-center { text-align: center; margin-left: auto; margin-right: auto; }
.cf-linkline a,
.cf-faq-a-inner a { color: var(--c-navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(20, 20, 100, .28); text-underline-offset: 3px; }
.cf-linkline a:hover,
.cf-faq-a-inner a:hover { color: var(--c-magenta); text-decoration-color: var(--c-magenta); }

/* ---- CTA-rij ------------------------------------------------
   Anders dan .ac-cta-row draagt deze rij soms twee kinderen: de knop én
   een tekstlink ernaast (cf-cases). Vandaar gap en flex-wrap. */
.cf-ctarow { display: flex; width: 100%; box-sizing: border-box; justify-content: center; gap: 22px; flex-wrap: wrap; align-items: center; margin-top: clamp(26px, 3vw, 36px); }
.cf-ctarow.is-left { justify-content: flex-start; }

/* De knop in .cf-ctarow 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. */
.cf-ctarow .bc-sec-cta { display: flex; width: auto; box-sizing: border-box; margin-top: 0; justify-content: center; }
.cf-ctarow.is-left .bc-sec-cta { justify-content: flex-start; }

/* ---- tekstlink met pijl ------------------------------------ */
.cf-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); }
.cf-textlink:hover { color: var(--c-magenta); gap: 11px; }
.cf-textlink .arr { transition: transform .18s var(--ease); }
.cf-textlink:hover .arr { transform: translateX(3px); }

/* ---- tegels, kruisjes en vinkjes --------------------------- */
.cf-tile { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; background: var(--cf-gradient); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px rgba(168, 2, 142, .24); }
.cf-tile svg { width: 22px; height: 22px; }
.cf-cross { width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; background: #F1F3F9; color: var(--c-text-soft); }
.cf-cross svg { width: 12px; height: 12px; }
.cf-check { width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; background: var(--cf-gradient); color: #fff; }
.cf-check svg { width: 13px; height: 13px; }

/* ============================================================
   .cf-split — tekst naast beeld, en de 3:2-beeldkolom erin.
   Gedeeld door cf-probleem, cf-aanpak, cf-koppelingen en cf-commerce.
   Daarom hier en niet in één van de vier widget-stylesheets: dan zou
   de rest hem missen zodra die alleen op de pagina staat.
   ============================================================ */
.cf-split { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; margin-top: clamp(28px, 3.4vw, 44px); }
.cf-split.is-center { align-items: center; }
.cf-figure-col { display: block; width: 100%; min-width: 0; box-sizing: border-box; }

/* De beeldkolom is 3:2 via een padding-hack en niet via aspect-ratio.
   Dat is dezelfde keuze als bij ac-hero (commit 4bf557c): aspect-ratio
   klipte daar het beeld zodra de kolom smaller werd dan de verhouding. */
.cf-figure { position: relative; width: 100%; box-sizing: border-box; border-radius: 16px; overflow: hidden; background: #F4F5FA; border: 1px solid rgba(20, 20, 100, .08); box-shadow: 0 16px 40px rgba(20, 20, 100, .09); }
.cf-figure::before { content: ""; display: block; padding-top: 66.667%; }
.cf-figure > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

@media (max-width: 1024px) {
	.cf-split { grid-template-columns: 1fr; gap: 30px; }
	.cf-split .cf-figure-col { order: -1; }
}

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

   1. DE REVEAL IS GESCOPED OP .cf-sec, NIET OP .au-sec.

      In de bron staat `.au-sec:not(.is-inview) .cf-rise` terwijl de
      secties alleen `.cf-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
      `.cf-sec`.

      Dit is de TWEEDE keer dat een Claude Design-export een vreemde
      sectie-class meebracht. Bij de ac-familie (02-09-2026) kwam
      `.au-sec` uit dezelfde hoek; zie punt 1 in de kop van
      bconnect-ac.css. De oorzaak is nu ook gemeten en genoteerd: in de
      export komt `useReveal()` uit automotive.jsx, en de `cls()` daarin
      plakt onvoorwaardelijk " au-sec" achter elke sectieklasse
      (automotive.jsx:130). Elke pagina die die hook leent, erft de
      class. Wie een volgende export overzet, controleert dus eerst
      welke sectieklasse `cls()` zet vóórdat hij de reveal-selectors
      overneemt.

      Meet het in de browser, lees het niet uit deze bron: een reveal die
      niet matcht laat de sectie gewoon op opacity 1 staan en geeft geen
      enkel signaal af.

   2. Dit bestand heeft zelf geen <img>-regels behalve die in
      `.cf-figure` — de rest staat per widget, in het HARDENING-blok van
      dat stylesheet, gescoped onder .elementor-widget-bconnect_cf_<naam>.
      Zie cf-logos.css voor het scherpste geval.

   3. `.container` binnen een cf-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.
   ============================================================ */
.cf-sec > .container,
.cf-track > .container { display: block; width: 100%; box-sizing: border-box; }