/* ============================================================
   Bconnect Klantcase-detail (.cs-*)
   ------------------------------------------------------------
   1-op-1 uit de bron-export "Klantcases (standalone) (1).html"
   (30-07-2026) → <style>-blok "upgrade-case.css". Alle waarden
   komen uit tokens.css; er is niets aan de bron gewijzigd.

   Onderaan staat één extra blok: hardening tegen de Elementor-/
   Hello-resets die deze widget raken (img border-radius, marges
   op koppen/alinea's). Zie de commentaren daar.
   ============================================================ */

/* upgrade-case.css — klantcase-detailpagina's (.cs-*). Als laatste geladen.
   Herbruikbaar template: hero, feitenstrip, tekstsecties, quote-blokken, CTA. */

.cs-page { --cs-measure: 40em; }

/* ---- breadcrumb ---- */
.cs-crumbs { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: .01em; margin: 0 0 22px; }
.cs-crumbs a { color: var(--c-navy); opacity: .72; text-decoration: none; transition: opacity .18s var(--ease), color .18s var(--ease); }
.cs-crumbs a:hover { opacity: 1; color: var(--c-magenta, #aa028e); }
.cs-crumbs span { color: var(--c-text-muted); opacity: .55; }
.cs-crumbs strong { color: var(--c-navy); font-weight: var(--fw-semibold); }

/* ---- hero ---- */
.cs-hero { background: var(--c-lavender, #f5f4fb); padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 88px); position: relative; overflow: hidden; }
.cs-hero::after { content: ""; position: absolute; inset: auto -10% -40% auto; width: 46vw; height: 46vw; border-radius: 50%; background: radial-gradient(circle, rgba(35,1,251,.07), transparent 68%); pointer-events: none; }
.cs-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 4vw, 64px); align-items: center; position: relative; z-index: 1; }
.cs-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; font-family: var(--font-head); font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--c-navy); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-pill); padding: 7px 15px; box-shadow: var(--shadow-soft); }
.cs-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gradient-brand); }
.cs-hero h1 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.025em; color: var(--c-navy); margin: 0 0 20px; text-wrap: balance; }
.cs-hero-lead { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.66; color: var(--c-text-muted); margin: 0 0 30px; max-width: 34em; }
.cs-hero-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cs-logos { display: flex; align-items: center; gap: 12px; }
.cs-logo { display: inline-flex; align-items: center; justify-content: center; height: 62px; padding: 10px 18px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--shadow-soft); }
.cs-logo img { max-height: 40px; max-width: 150px; width: auto; height: auto; display: block; }
.cs-logo-cap { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--c-text-muted); }
.cs-logo-cap strong { color: var(--c-navy); font-family: var(--font-head); font-weight: var(--fw-semibold); }

.cs-hero-media { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 6px rgba(20,20,100,.06), 0 18px 44px rgba(20,20,100,.12); background: #eceef4; aspect-ratio: 4 / 3; }
.cs-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- feitenstrip ---- */
.cs-facts { background: var(--c-white); border-bottom: 1px solid var(--c-border); }
.cs-facts-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.cs-fact { padding: clamp(28px, 3.4vw, 44px) clamp(18px, 2.2vw, 34px); border-left: 1px solid var(--c-border); }
.cs-fact:first-child { border-left: 0; padding-left: 0; }
.cs-fact-num { display: block; font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(28px, 3.2vw, 40px); line-height: 1; letter-spacing: -0.02em; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-fact-label { display: block; margin-top: 12px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--c-text-muted); }

/* ---- tekstsecties ---- */
.cs-sec { padding: clamp(56px, 7vw, 96px) 0; }
.cs-sec.is-tint { background: #fafafb; }
.cs-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 4.5vw, 76px); align-items: start; }
.cs-split.is-reverse > .cs-body { order: 2; }
.cs-split.is-single { grid-template-columns: minmax(0, 62ch); }
.cs-h2 { font-family: var(--font-head); font-weight: var(--fw-semibold); color: var(--c-navy); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 18px; text-wrap: pretty; }
.cs-body p { font-family: var(--font-body); font-size: 16px; line-height: 1.72; color: var(--c-text-muted); margin: 0 0 18px; max-width: var(--cs-measure); }
.cs-body p:last-child { margin-bottom: 0; }
.cs-eyebrow { font-family: var(--font-head); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 999px; background: var(--gradient-brand); flex: 0 0 auto; }

/* checklist */
.cs-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; max-width: var(--cs-measure); }
.cs-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-family: var(--font-body); font-size: 15.5px; line-height: 1.6; color: var(--c-text-muted); }
.cs-list li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #39b54a, #2a9c3a); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>"), linear-gradient(135deg, #39b54a, #2a9c3a); background-size: 13px 13px, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; margin-top: 1px; }
.cs-list li strong { color: var(--c-navy); font-family: var(--font-head); font-weight: var(--fw-semibold); }

/* zij-illustratie */
.cs-illu { border-radius: 18px; background: linear-gradient(160deg, #f6f5fd, #eef1fb); border: 1px solid var(--c-border); padding: clamp(20px, 2.4vw, 34px); display: flex; align-items: center; justify-content: center; }
.cs-illu img { width: 100%; max-width: 320px; height: auto; display: block; }

/* zijkaart met feiten */
.cs-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 18px; padding: clamp(24px, 2.6vw, 34px); box-shadow: 0 1px 2px rgba(20,20,100,.04), 0 10px 30px rgba(20,20,100,.07); }
.cs-card h3 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: 17px; letter-spacing: -0.01em; color: var(--c-navy); margin: 0 0 20px; }
.cs-card dl { margin: 0; display: grid; gap: 16px; }
.cs-card dt { font-family: var(--font-head); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-soft, #7b8190); margin: 0 0 4px; }
.cs-card dd { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--c-navy); }

/* ---- landenblok (wereldkaart + vlaggen) ---- */
.cs-map { background: linear-gradient(160deg, #f6f5fd, #eef1fb); border: 1px solid var(--c-border); border-radius: 18px; padding: clamp(20px, 2.4vw, 30px); }
.cs-map-img { width: 100%; height: auto; display: block; opacity: .72; }
.cs-map-flags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.cs-flag { width: 34px; height: 24px; border-radius: 4px; overflow: hidden; background: var(--c-white); border: 1px solid var(--c-border); box-shadow: var(--shadow-soft); flex: 0 0 auto; }
.cs-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-flag-more { font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-semibold); color: var(--c-navy); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-pill); padding: 5px 12px; }
.cs-map-cap { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--c-text-muted); margin: 16px 0 0; }

/* ---- chat-mock (echt gespreksfragment uit de case) ---- */
.cs-chat { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 18px; box-shadow: 0 1px 2px rgba(20,20,100,.05), 0 14px 36px rgba(20,20,100,.09); overflow: hidden; }
.cs-chat-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: linear-gradient(135deg, #2301fb 0%, #a80290 100%); color: #fff; }
.cs-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #39b54a; box-shadow: 0 0 0 3px rgba(57,181,74,.28); flex: 0 0 auto; }
.cs-chat-who { font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: .01em; }
.cs-chat-body { padding: 20px 18px 22px; display: grid; gap: 12px; justify-items: start; }
.cs-bubble { margin: 0; max-width: 92%; padding: 13px 16px; border-radius: 16px 16px 16px 4px; background: #f4f5fa; border: 1px solid var(--c-border); font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--c-navy); }
.cs-bubble.is-visitor { justify-self: end; border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, #2301fb 0%, #a80290 100%); border-color: transparent; color: #fff; }

/* ---- quote ---- */
.cs-quote { margin: 0; padding: 0; border-left: 3px solid transparent; border-image: var(--gradient-brand) 1; padding-left: clamp(20px, 2.4vw, 30px); max-width: 32em; }
.cs-quote p { font-family: var(--font-head); font-weight: var(--fw-medium, 500); font-size: clamp(18px, 1.9vw, 23px); line-height: 1.42; letter-spacing: -0.012em; color: var(--c-navy); margin: 0 0 14px; text-wrap: pretty; }
.cs-quote cite { font-family: var(--font-body); font-style: normal; font-size: 14px; line-height: 1.5; color: var(--c-text-muted); display: block; }
.cs-quote-inline { margin: 30px 0 0; }

/* ---- gradient quote-blok ---- */
.cs-band { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: linear-gradient(135deg, #2301fb 0%, #a80290 100%); color: #fff; padding: clamp(60px, 7.5vw, 104px) 0; overflow: hidden; }
.cs-band::before { content: ""; position: absolute; inset: -30% auto auto -10%; width: 40vw; height: 40vw; border-radius: 50%; background: radial-gradient(circle, rgba(88,208,245,.28), transparent 66%); filter: blur(24px); pointer-events: none; }
.cs-band-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; text-align: center; }
.cs-band-mark { display: block; font-family: var(--font-head); font-size: 56px; line-height: .8; color: rgba(255,255,255,.4); margin: 0 0 10px; }
.cs-band blockquote { margin: 0; }
.cs-band blockquote p { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(24px, 3.2vw, 40px); line-height: 1.16; letter-spacing: -0.02em; color: #fff; margin: 0 0 22px; text-wrap: balance; }
.cs-band cite { font-family: var(--font-body); font-style: normal; font-size: 15px; color: rgba(255,255,255,.82); }

/* ---- resultaten-kaarten ---- */
.cs-res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0 0 34px; max-width: var(--cs-measure); }
.cs-res { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px; padding: 24px 24px 22px; box-shadow: var(--shadow-soft); }
.cs-res-num { display: block; font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(26px, 2.8vw, 34px); line-height: 1; letter-spacing: -0.02em; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-res-label { display: block; margin-top: 10px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--c-text-muted); }

/* ---- afsluiting ---- */
.cs-cta { background: var(--c-lavender, #f5f4fb); padding: clamp(56px, 7vw, 96px) 0; }
.cs-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.cs-cta h2 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: var(--c-navy); margin: 0 0 16px; text-wrap: balance; }
.cs-cta p { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: var(--c-text-muted); margin: 0 auto 30px; max-width: 40em; }
.cs-cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px 22px; flex-wrap: wrap; }
.cs-back { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); text-decoration: none; transition: color .18s var(--ease), gap .18s var(--ease); }
.cs-back:hover { color: var(--c-magenta, #aa028e); gap: 13px; }

/* ---- reveal ---- */
.cs-rise { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.is-inview .cs-rise, .cs-hero .cs-rise { opacity: 1; transform: none; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .cs-hero-grid { grid-template-columns: 1fr; }
  .cs-hero-media { aspect-ratio: 16 / 10; }
  .cs-split, .cs-split.is-single { grid-template-columns: 1fr; }
  .cs-split.is-reverse > .cs-body { order: 0; }
  .cs-facts-row { grid-template-columns: repeat(2, 1fr); }
  .cs-fact { border-left: 0; border-top: 1px solid var(--c-border); padding-left: 0; }
  .cs-fact:nth-child(-n+2) { border-top: 0; }
  .cs-fact:nth-child(2n) { padding-left: clamp(18px, 3vw, 34px); border-left: 1px solid var(--c-border); }
  .cs-illu { order: -1; }
}
@media (max-width: 620px) {
  .cs-facts-row { grid-template-columns: 1fr; }
  .cs-fact { padding-left: 0 !important; border-left: 0 !important; }
  .cs-fact:nth-child(2) { border-top: 1px solid var(--c-border); }
  .cs-res-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-rise { opacity: 1; transform: none; transition: none; }
}

/* ---- REDESIGN: geen lege halve kolommen meer ----
   1. Zijkolom verticaal gecentreerd t.o.v. de tekst (korte quote/chat/kaart hangt
      niet meer bovenaan met een gat eronder).
   2. Secties zonder zijkolom staan gecentreerd in de kolom i.p.v. links met een
      lege rechterhelft.
   3. Checklists zonder zijkolom worden een kaartenrij over de volle breedte.
   4. Illustratiepanelen: grotere visual, subtiele dot-grid textuur i.p.v. vlak vak. */
.cs-split{align-items:center}
.cs-side{align-self:center;min-width:0}
.cs-split.is-single{grid-template-columns:minmax(0,74ch);justify-content:center}
.cs-split.is-single .cs-body p,.cs-split.is-single .cs-list{max-width:none}
.cs-side-cap{font-family:var(--font-body);font-size:13.5px;line-height:1.55;color:var(--c-text-muted);margin:14px 2px 0;text-align:center}
.cs-list.is-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:none;margin:40px 0 0;list-style:none;padding:0}
.cs-list.is-cards li{display:block;background:var(--c-white);border:1px solid var(--c-border);border-radius:16px;padding:26px 24px 24px;box-shadow:0 1px 2px rgba(20,20,100,.04),0 10px 28px rgba(20,20,100,.06);font-size:15px;line-height:1.65;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.cs-list.is-cards li:hover{transform:translateY(-3px);box-shadow:0 2px 6px rgba(20,20,100,.07),0 18px 40px rgba(20,20,100,.11)}
.cs-list.is-cards li::before{content:"";display:block;width:34px;height:34px;border-radius:11px;margin:0 0 16px;background:var(--gradient-brand);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>"),var(--gradient-brand);background-size:17px 17px,cover;background-position:center,center;background-repeat:no-repeat,no-repeat}
.cs-list.is-cards li strong{display:block;margin-bottom:6px;font-size:16.5px}
.cs-illu{position:relative;overflow:hidden;padding:clamp(28px,3.4vw,48px)}
.cs-illu::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(20,20,100,.13) 1px,transparent 1px);background-size:16px 16px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 32%,transparent 76%);mask-image:radial-gradient(circle at 50% 50%,#000 32%,transparent 76%);pointer-events:none}
.cs-illu::after{content:"";position:absolute;inset:auto -18% -34% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(168,2,144,.10),transparent 68%);pointer-events:none}
.cs-illu img{position:relative;z-index:1;max-width:min(420px,100%)}
.cs-quote{max-width:34em}
@media (max-width:1000px){.cs-split{align-items:start}.cs-side{align-self:start}.cs-list.is-cards{margin-top:28px}}

/* ============================================================
   HARDENING — Elementor/Hello-resets die de bron niet kent.
   ============================================================ */
/* `.elementor img { border-radius: 0 }` (0,1,1) verslaat elke kale
   één-class-selector op een <img>; daarom hier met de widget-wrapper
   erbij. Zelfde valkuil als bij de hero-avatar en .au-seg-img. */
.cs-page .cs-hero-media img,
.cs-page .cs-illu img,
.cs-page .cs-map-img {
	border-radius: inherit;
}
.cs-page .cs-logo img,
.cs-page .cs-flag img {
	border-radius: 0;
	box-shadow: none;
}
/* De feitenstrip heeft in de bron GEEN eigen padding: die erft hij van de
   generieke regel `section { padding: var(--space-8) 0 }` uit het
   designsysteem. Dit thema heeft die globale regel niet (Hello/Elementor
   zetten hem ook niet), dus zonder deze regel is de strip 128px lager dan in
   de bron. Alle andere .cs-secties zetten hun padding wél zelf. */
.cs-facts { padding: var(--space-8, 64px) 0; }

/* Gedeelde hero-typografie uit upgrade-hero.css (in de bron sitewide via
   body[data-hero-scale="std"]): kop clamp(34,4.4vw,54) met max-width 22ch,
   lead met max-width 38em. Hier op de widget gescoped. */
.cs-hero h1 {
	font-size: clamp(34px, 4.4vw, 54px);
	max-width: 22ch;
}
.cs-hero-lead { max-width: 38em; }
@media (max-width: 640px) {
	.cs-hero h1 { font-size: clamp(30px, 8vw, 38px); max-width: none; }
}

/* De bron zet zelf margin/padding/list-style op .cs-list, .cs-card dl|dt|dd
   en .cs-quote, dus daar is geen extra reset nodig. Alleen het blockquote in
   de gradient-band leunt op de globale reset van de bron; hier in :where()
   zodat de specificiteit 0 blijft en de bron-regels blijven winnen. */
:where(.cs-band) :where(blockquote, p, cite) {
	margin: 0;
}

/* "Verder lezen" onder de slot-CTA van een casepagina — 05-08-2026.
   Eén oplossingslink plus de branche van die case; zie het `links`-veld per
   case in case-data.php. Het CTA-blok staat op de gradient, dus lichte tekst. */
.cs-cta-links {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	justify-content: center;
}
.cs-cta-links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	color: rgba(255, 255, 255, 0.92);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cs-cta-links a:hover { color: #fff; }
.cs-cta-links a span { text-decoration: none; transition: transform .18s var(--ease); }
.cs-cta-links a:hover span { transform: translateX(3px); }
@media (max-width: 600px) {
	.cs-cta-links { flex-direction: column; gap: 10px; align-items: center; }
}

/* ============================================================
   OPSPLITSING 13-08-2026

   De vijf regels hierboven die beelden binnen deze pagina hun radius en
   object-fit geven, hingen aan `.elementor-widget-bconnect_case` — de wrapper
   van de pagina-widget die de hele casepagina rendeerde. De pagina bestaat nu
   uit sectiewidgets (cs-hero, cs-facts, cs-section, cs-band, cs-cta) die elk de
   paginaschil `.cs-page` om hun eigen sectie renderen; de regels scopen daarom
   op die schil. Zelfde specificiteit (0,2,0), dus de cascade verschuift niet.
   Ze moeten gescoopt blijven: Elementor's frontend.min.css zet
   `.elementor img { border-radius: 0 }` (0,1,1), dus een kale `.cs-illu img`
   zou daarvan verliezen.

   Elke Bconnect-widget zet zijn eigen wrapper-marge op 0. Dat is hier met één
   widget per container strikt niet nodig — Elementor's
   `.elementor-widget:not(:last-child)` raakt een enig kind niet — maar het
   staat er zodat een tweede widget in dezelfde container geen onverwachte
   20px meebrengt.
   ============================================================ */
.elementor-widget-bconnect_case,
.elementor-widget-bconnect_cs_hero,
.elementor-widget-bconnect_cs_facts,
.elementor-widget-bconnect_cs_section,
.elementor-widget-bconnect_cs_band,
.elementor-widget-bconnect_cs_cta { margin: 0 !important; }