/* ============================================================
   Bconnect Meer rendement Wat we leveren (SolPillars + beeldstrip)
   Bron: ingekort-solutions.css. Tokens uit tokens.css.
   ============================================================ */

.au-help { padding: var(--space-8) 0; background: #FFFFFF; }
.au-help > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }

.au-lead { color: var(--c-text-muted); margin: 0 auto; max-width: 48em; font-size: var(--fs-lead); line-height: 1.6; }

.sol-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.sol-pillar {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--radius-feature); box-shadow: var(--shadow-card);
  padding: var(--space-7);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.sol-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.sol-pillar-head { display: flex; flex-direction: column; gap: 16px; }
.sol-pillar-tile {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168,2,142,.26);
}
.sol-pillar-tile svg { width: 26px; height: 26px; }
.sol-pillar-h {
  font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
  color: var(--c-navy); margin: 0;
}
.sol-pillar-p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: var(--c-text-muted); margin: 0; }
.sol-pillar-list { list-style: none; margin: auto 0 0; padding: var(--space-4) 0 0; display: grid; gap: 11px; border-top: 1px solid var(--c-border-soft); }
.sol-pillar-list li {
  position: relative; padding-left: 26px;
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--c-navy);
}
.sol-pillar-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 999px;
  background: var(--gradient-brand) no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

@media (max-width: 900px) { .sol-pillars { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* ===== Workflow-visual IN de pijlerkaart =====================
   Elke pijler rendert zijn eigen workflow-visual mee, maar op
   desktop blijft de losse beeldstrip onder de kaarten staan
   (.sol-ph-strip-sec) en is deze figure uit. Onder 767px wisselt
   bconnect-mobile.css dat om: strip uit, figure in de kaart aan.
   Standaard dus UIT — desktop verandert niets.
   ============================================================ */
.sol-pillar-fig { display: none; }

/* ===== Beeldstrip: drie workflow-visuals onder de pijlers ===== */
.sol-ph-strip-sec { padding: 0 0 var(--space-9); background: var(--c-white); }
.sol-ph-strip-sec > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }
.sol-ph-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mr-workflow-img {
  display: block; width: 100%; height: auto; aspect-ratio: 1983 / 793;
  object-fit: contain; border-radius: var(--radius-card); align-self: start;
}
@media (max-width: 900px) {
  .sol-ph-strip { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ===== Elementor-context + HARDENING tegen theme-resets ===== */
.elementor-widget-bconnect_mr_pillars { margin: 0 !important; }
.elementor-widget-bconnect_mr_pillars .accent {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}
.elementor-widget-bconnect_mr_pillars .sol-pillar-tile {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_mr_pillars .sol-pillar-tile svg { color: #fff !important; stroke: #fff !important; }
.elementor-widget-bconnect_mr_pillars .sol-pillar-list li::before {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
}