/* ============================================================
   Meer rendement — "Integraties" (.mri)
   ------------------------------------------------------------
   Bron: Claude Design-export "Meer rendement (4).html", CSS-blok
   "Integraties (mri)". De export heeft daar een lege `<image-slot>`
   staan (`aspect-ratio: 4/3`); die vaste verhouding is hier weg,
   want in die kolom staat nu de integratie-hub uit de hero van
   /integraties/, en die is zelf al vierkant. Zie de kop van de
   widget-PHP.

   BAND: wit — de plek in de wit/blauw-afwisseling van deze pagina.
   Dat is ook wat de bron doet.
   ============================================================ */

.mri { padding: var(--space-8) 0; background: var(--c-white); }
.mri > .container { width: 100%; max-width: var(--container, 1520px); margin: 0 auto; padding: 0 var(--gutter, 56px); }

.mri-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 4vw, 64px); align-items: center; }

.mri-copy .eyebrow { margin-bottom: 14px; }
.mri-copy .au-h2 { margin: 0 0 16px; text-align: left; }
.mri-copy > p {
  margin: 0 0 20px; max-width: 34em;
  font-family: var(--font-body); font-size: 16.5px; line-height: 1.7; color: var(--c-text-muted);
}
.mri-copy .checklist { margin: 0; }

.mri-visual { min-width: 0; }
.mri-img { display: block; width: 100%; height: auto; border-radius: 24px; }

/* ---- de integratie-hub in deze kolom --------------------------
   De hub zelf staat in integraties.css (`.ig-hub*`) en wordt door
   `bconnect_ig_hub()` gerenderd; hier alleen de inpassing. De stage
   is daar 460px breed; in deze kolom mag hij iets ruimer, want er
   staat geen hero-copy naast maar een halve sectiebreedte. */
.mri-visual .ig-hub-stage { max-width: 480px; }

@media (max-width: 1024px) {
  .mri-grid { grid-template-columns: 1fr; gap: 36px; }
  /* tekst eerst, beeld eronder — zoals de bron het gestapeld doet */
  .mri-visual { order: 2; max-width: 640px; margin: 0 auto; width: 100%; }
  .mri-copy { order: 1; }
}

/* ============================================================
   Elementor-context + HARDENING tegen theme-resets.
   ============================================================ */
.elementor-widget-bconnect_mr_int { margin: 0 !important; }
.elementor-widget-bconnect_mr_int .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;
}
/* Het gradient-hart van de hub; zonder !important valt hij op deze pagina
   terug op zwart, net als elk ander gradient-vlak in dit thema. */
.elementor-widget-bconnect_mr_int .ig-hub-core {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
/* Elementor-core zet `.elementor img { border-radius: 0 }` (0,1,1). */
.elementor-widget-container .mri-img { border-radius: 24px; }