/* ============================================================
   Bconnect Meer rendement Afhandeling (SolHybrid) — widget-styling
   Bron: ingekort-solutions.css. Tokens uit tokens.css.
   ============================================================ */

.sol-hybrid { padding: var(--space-8) 0; background: var(--c-white); }
.sol-hybrid > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }
.sol-hybrid-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.sol-hybrid-text h2 { color: var(--c-navy); margin: 0 0 16px; text-wrap: pretty; }
.sol-hybrid-text .eyebrow { margin-bottom: 16px; }
.sol-hybrid-text p { font-family: var(--font-body); font-size: 16.5px; line-height: 1.7; color: var(--c-text-muted); margin: 0; max-width: 34em; }

/* uitgewerkte routing-visual */
.sol-hybrid-img {
  display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941;
  object-fit: contain; border-radius: var(--radius-feature); min-width: 0;
}

/* fallback: schematische handoff-illustratie in grijs vlak */
.sol-hybrid-visual {
  position: relative; min-height: 340px; border-radius: var(--radius-feature);
  border: 1.5px dashed #C9D0E0;
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 13px, rgba(201,208,224,.16) 13px, rgba(201,208,224,.16) 26px),
    #F4F5FA;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  padding: var(--space-7);
}
.sol-handoff { display: flex; align-items: center; gap: 18px; }
.sol-handoff-node { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 116px; text-align: center; }
.sol-handoff-bubble {
  width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; color: #fff;
  background: var(--gradient-brand); box-shadow: 0 10px 22px rgba(168,2,142,.26);
}
.sol-handoff-bubble.is-human { background: var(--c-navy); box-shadow: 0 10px 22px rgba(20,20,100,.24); }
.sol-handoff-bubble svg { width: 28px; height: 28px; }
.sol-handoff-label { font-family: var(--font-head); font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--c-navy); line-height: 1.3; }
.sol-handoff-arrow { display: grid; gap: 5px; color: #B4BBCB; }
.sol-handoff-arrow span { width: 9px; height: 9px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.sol-handoff-arrow span:nth-child(2) { opacity: .6; }
.sol-handoff-arrow span:nth-child(3) { opacity: .3; }

@media (prefers-reduced-motion: no-preference) {
  .sol-handoff-arrow span { animation: solArrowPulse 1.8s var(--ease) infinite; }
  .sol-handoff-arrow span:nth-child(2) { animation-delay: .18s; }
  .sol-handoff-arrow span:nth-child(3) { animation-delay: .36s; }
}
@keyframes solArrowPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

@media (max-width: 920px) {
  .sol-hybrid-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ===== Elementor-context + HARDENING tegen theme-resets ===== */
.elementor-widget-bconnect_mr_hybrid { margin: 0 !important; }
.elementor-widget-bconnect_mr_hybrid .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_hybrid .sol-handoff-bubble {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_mr_hybrid .sol-handoff-bubble.is-human {
	background: #141464 !important;
}

/* ============================================================
   NIEUWE OPZET 13-08-2026 — laag uit "Meer rendement (4).html"
   ------------------------------------------------------------
   In de nieuwe pagina staat de routing-visual LINKS en de tekst
   rechts, andersom dan hiervoor. De sectie erboven ("Onze aanpak")
   heeft zijn beeld rechts, dus zo wisselen de twee secties elkaar
   af in plaats van twee beelden op dezelfde kant.
   Alleen vanaf 921px: daaronder staat alles onder elkaar en bepaalt
   de DOM-volgorde (tekst eerst) de leesvolgorde — dat blijft zo.
   ============================================================ */
@media (min-width: 921px) {
  .sol-hybrid-grid { grid-template-columns: 1.05fr 1fr; }
  .sol-hybrid-img  { order: 1; }
  .sol-hybrid-text { order: 2; }
}

/* De routing-visual had op DESKTOP vierkante hoeken: `.sol-hybrid-img` zet
   `border-radius: var(--radius-feature)` maar Elementor-core zet
   `.elementor img { border-radius: 0 }` (0,1,1) en dat verslaat een kale
   class (0,1,0). Op mobiel was dit al gecorrigeerd in bconnect-mobile.css;
   deze regel doet hetzelfde voor alle breedtes. */
.elementor-widget-container .sol-hybrid-img { border-radius: var(--radius-feature); }