/* ============================================================
   cf-stappen.css — blok 6 van /chatfunctie-op-je-website/.
   Bouwt op widgets/shared/bconnect-cf.css (handle `bconnect-cf`).
   Bron: upgrade-chatfunctie.css, "6 — HOE HET WERKT".

   NIEUW WERK. Zie de kop van class-cf-stappen-widget.php voor de drie
   punten waarop dit afwijkt van km-steps en hl-zowerkt.
   ============================================================ */

.cf-steps { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(30px, 3.6vw, 46px); align-items: stretch; }
.cf-step { display: flex; box-sizing: border-box; flex-direction: column; padding: 20px 20px 24px; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 16px; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.cf-step:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 20, 100, .1); }

/* Vierkant via een padding-hack en NIET via aspect-ratio; zie punt 1 in de
   kop van de class. */
.cf-step-fig { position: relative; display: block; width: 100%; box-sizing: border-box; border-radius: 12px; overflow: hidden; background: #F4F5FA; }
.cf-step-fig::before { content: ""; display: block; padding-top: 100%; }

.cf-step-num { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: .08em; background: var(--cf-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin: 18px 0 6px; }

/* Op elementniveau binnen .cf-step, zoals de bron. Zie punt 2 in de kop
   van de class: dit is de plek waar een globale h3-regel doorheen kan
   komen. */
.cf-step h3 { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 17px; line-height: 1.25; color: var(--c-navy); margin: 0 0 8px; }
.cf-step p { font-size: 14.5px; line-height: 1.55; color: var(--c-text-muted); margin: 0; }

/* ---- het lichte cijferblok --------------------------------- */
.cf-stats { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; margin: clamp(30px, 3.6vw, 44px) auto 0; background: #fff; border: 1px solid rgba(20, 20, 100, .09); border-radius: 16px; box-shadow: 0 8px 24px rgba(20, 20, 100, .06); overflow: hidden; }
.cf-stat { display: flex; box-sizing: border-box; flex-direction: column; align-items: center; gap: 6px; padding: 24px 18px; text-align: center; }
.cf-stat + .cf-stat { border-left: 1px solid rgba(20, 20, 100, .08); }
.cf-stat-num { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: clamp(26px, 3vw, 34px); 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-stat-label { font-size: 13.5px; line-height: 1.4; color: var(--c-text-soft); }

/* De bron zet de stappen op 1180px naar twee kolommen en laat het daarbij:
   op een telefoon staan er dus twee naast elkaar. Overgenomen zoals hij is;
   meet het op een echt toestel voordat je er één kolom van maakt. */
@media (max-width: 1180px) {
	.cf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.cf-stats { grid-template-columns: 1fr; }
	.cf-stat + .cf-stat { border-left: 0; border-top: 1px solid rgba(20, 20, 100, .08); }
}

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

   `.cf-step-fig > img` staat in de bron op (0,1,1), gelijk aan
   `.elementor img`, dat `height: auto` zet. Hier moet het beeld juist
   `height: 100%` krijgen: het vult het vierkante vlak dat `::before`
   openhoudt, en wordt door object-fit gecropt in plaats van uitgerekt.
   Wint `height: auto`, dan zakt het beeld uit het vlak en staat de
   stapkaart scheef.

   Onder `.elementor-widget-bconnect_cf_stappen` komt het op (0,2,1) en
   staat de uitkomst vast. Meet de computed waarden in de browser.

   De bron noemt hier ook `> image-slot`; dat is het webcomponent uit de
   Claude Design-export en bestaat in WordPress niet. Alleen `> img`.
   ============================================================ */
.elementor-widget-bconnect_cf_stappen .cf-step-fig > img {
	position: absolute;
	inset: 0;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}