/* ============================================================
   Bconnect Twee oplossingen (.ts2-*) — homepage-sectie 2
   ------------------------------------------------------------
   1-op-1 uit de bron-export "Hoofdsite (standalone) (2).html"
   (30-07-2026 14:15) → <style>-blok "upgradeB-oplossing.css",
   deel "SECTIE 2 — TWEE OPLOSSINGEN (.ts2-*) — versie B".

   WP-AFWIJKINGEN, bewust:
   - De bron zet hier een eigen font-stack ("Roc Grotesk" met
     system-fallbacks); wij gebruiken de tokens var(--font-head) /
     var(--font-body), die naar exact dezelfde faces resolven.
   - Het beeldslot is in de bron een <image-slot> custom element;
     hier een gewone <img> met object-fit: cover (zelfde eindbeeld).
   - .ts2-inner houdt de bron-breedte 1280px (dus NIET --container
     1520px): deze sectie is in het ontwerp bewust smaller dan de
     secties eromheen.
   ============================================================ */

.ts2-scope {
	--navy: #141464;
	--brand-gradient: linear-gradient(90deg, #2301fb 0%, #a80290 100%);
	--body-grey: #5b5b7a;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	background: #f6f6fc;
	padding: 112px 56px;
	font-family: var(--font-body);
	color: var(--body-grey);
	-webkit-font-smoothing: antialiased;
}
.ts2-scope * { box-sizing: border-box; }
.ts2-inner { max-width: 1280px; margin: 0 auto; }

.ts2-head { max-width: 800px; margin: 0 auto 56px; text-align: center; }
.ts2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--navy);
}
.ts2-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--brand-gradient);
}
.ts2-h2 {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--navy);
	font-size: clamp(32px, 4.4vw, 50px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
	text-wrap: balance;
}
.ts2-grad {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ts2-sub { font-size: 18px; line-height: 1.65; margin: 0 auto; max-width: 700px; }

.ts2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
/* `position: relative` maakt de kaart het containing block voor de
   klikoverlay op .ts2-cta::after hieronder. */
.ts2-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	background: #fff;
	border-radius: 14px;
	padding: 32px;
	border: 1px solid rgba(20, 20, 100, 0.07);
	box-shadow: 0 1.5px 4px rgba(20, 20, 100, .06), 0 10px 30px rgba(20, 20, 100, .07);
	transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.ts2-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 6px rgba(20, 20, 100, .07), 0 18px 44px rgba(20, 20, 100, .12);
}
.ts2-card-h {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(26px, 2.3vw, 32px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--navy);
}
.ts2-claim {
	margin: 0;
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ts2-situation { margin: 0; font-size: 15.5px; line-height: 1.55; color: #7b8190; }
.ts2-body { margin: 0; font-size: 16.5px; line-height: 1.62; text-wrap: pretty; }
.ts2-media {
	margin-top: 4px;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	background: #f1eefc;
}
/* Het beeld zat sinds 14-08-2026 in een <picture> (AVIF met JPEG-vangnet, zie
   widgets/shared/bconnect-image.php). Een <picture> zonder eigen maat is een
   inline box die naar zijn inhoud groeit, dus de `height: 100%` hieronder zou
   zich tegen niets afrekenen en het beeld zou VERDWIJNEN — niet scheefstaan.
   Deze regel geeft de wrapper daarom exact de maat die de <img> had.

   21-08-2026 — DEZE REGEL IS NU INERT EN MOET BLIJVEN STAAN. De twee AVIF's
   hier zijn 1024x768 tegel-grids die Firefox niet tekent, dus
   bconnect_avif_is_grid() onderdrukt hun <source> en er komt een kale <img>
   met de JPEG uit. Er is dus geen <picture> meer om te selecteren.
   NIET OPRUIMEN: zodra die twee bestanden met een echte encoder herschreven
   zijn, komt de <picture> vanzelf terug en is deze regel weer nodig. Zonder
   hem is het beeld dan wég, niet scheef. De `.ts2-media img`-regel hieronder
   is een descendant-selector en werkt in beide gevallen; de hoogte komt van de
   `aspect-ratio: 4/3` op .ts2-media hierboven. */
.elementor-widget-bconnect_two_solutions .ts2-media picture,
.ts2-media picture {
	display: block;
	width: 100%;
	height: 100%;
}
/* Widget-wrapper in de selector zodat `.elementor img { border-radius: 0 }`
   en de gedeelde `.elementor-widget-container img`-regels niet in de weg
   zitten; het beeld vult het 4:3-slot precies zoals de <image-slot>. */
.elementor-widget-bconnect_two_solutions .ts2-media img,
.ts2-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}
.ts2-cta {
	margin-top: auto;
	padding-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--navy);
	text-decoration: none;
	transition: color .18s var(--ease-out);
}
/* ============================================================
   HELE KAART KLIKBAAR (12-08-2026)

   De <a> blijft om alléén de CTA-tekst staan en een pseudo-element
   daarvan wordt over de kaart gelegd. Daarmee is het hele vlak —
   kop, tekst én afbeelding — klikbaar, terwijl de toegankelijke naam
   van de link kort blijft ("Bekijk meer leads genereren"). De pijl is
   aria-hidden en telt niet mee.

   NIET de kaart in een <a> wikkelen. Dat is op de branchekaart al
   geprobeerd en teruggedraaid (zie het blok in branches.css en
   OPENSTAAND.md, 05-08-2026): de voorleesnaam werd een hele alinea en
   werd twee keer voorgelezen.

   WAAROM HET HIER WÉL MET EEN PSEUDO-ELEMENT KAN, en op .btn-arrow niet:
   - .ts2-cta is geen .btn, dus geen `overflow: hidden` die de overlay
     tot de knop clipt;
   - de pijl is een echte <span class="ts2-cta-arrow">, geen ::after,
     dus dit pseudo-element botst nergens mee.

   LET OP: geef .ts2-cta zelf géén `position`. Dan wordt de link zijn
   eigen containing block en dekt `inset: 0` alleen de link af in
   plaats van de kaart — precies de fout uit die eerdere poging.

   Bijvangst: omdat de overlay bij de link hoort, telt hoveren op de
   kaart als hoveren op de link. De CTA kleurt en de pijl schuift dus
   mee zodra je ergens op de kaart staat.
   ============================================================ */
.ts2-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Tekst selecteren blijft mogelijk: de overlay vangt de klik, maar met
   een muisknop ingedrukt slepen gaat door de kaart heen omdat er verder
   niets interactiefs in zit. */

.ts2-cta-arrow { display: inline-flex; font-size: 18px; line-height: 1; transition: transform .18s var(--ease-out); }
.ts2-cta:hover { color: #aa028e; }
.ts2-cta:hover .ts2-cta-arrow { transform: translateX(4px); }

@media (max-width: 900px) {
	.ts2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.ts2-scope { padding: 72px 16px; }
	.ts2-head { margin-bottom: 36px; }
	.ts2-card { padding: 24px; }
	.ts2-card-h { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.ts2-card { transition: box-shadow .2s ease; }
}