/* ============================================================
   Bconnect Integraties-pagina — widget-styling
   ------------------------------------------------------------
   Bron: upgrade-integraties.jsx + upgrade-pages.css (ig-*),
   hero-schil uit ingekort-automotive.css, SolHero-visual-variant
   en sol-pillars uit ingekort-solutions.css, hero-proof uit
   ingekort-leadgen2.css, au-cta uit ingekort-automotive.css.
   Zelfstandig bestand volgens het stramien; tokens uit tokens.css.
   ============================================================ */

/* ===== Container (width:100% i.v.m. flex-secties) ===== */
.ig-page .container {
  width: 100%;
  max-width: var(--container, 1280px);
  margin: 0 auto;
  padding: 0 var(--gutter, 56px);
}

/* ===== Hero-entrance (hh-in, zichtbare eindstaat = basis) ===== */
.ig-page .hh-in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ig-page .hh-in { transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .ig-page .hh-in.is-in { opacity: 1; transform: none; }
  .ig-page .au-hero.is-settled .hh-in { transition: none; opacity: 1; transform: none; }
}

/* ===== ZONE 1 — hero-schil (au-hero + sol-hero--visual) ===== */
.ig-page .au-hero { padding: 64px 0; min-height: clamp(640px, 72vh, 700px); display: flex; flex-direction: column; justify-content: center; position: relative; }
.ig-page .au-hero > .container { width: 100%; position: relative; z-index: 1; }
.ig-page .au-hero .hero-bg { position: absolute; inset: 0; background: #FFFFFF; pointer-events: none; }
.ig-page .au-hero .hero-bg::after { display: none; }
.ig-page .au-hero-stack { display: grid; grid-template-columns: 40% 60%; gap: 48px; align-items: center; }
.ig-page .au-hero-copy { width: 100%; text-align: left; }
.ig-page .au-hero h1 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.025em; color: var(--c-navy); margin: 14px 0 16px; max-width: 13em; }
.ig-page .au-hero .lead { font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; color: var(--c-text-muted); max-width: 30em; margin: 0 0 26px; }
.ig-page .au-hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ig-page .au-textlink { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: color .18s var(--ease), gap .18s var(--ease); }
.ig-page .au-textlink:hover { color: var(--c-magenta); gap: 11px; }
.ig-page .au-hero.sol-hero { min-height: 704px; }
.ig-page .sol-hero--visual .hero-bg::before { display: none; }
.ig-page .sol-hero--visual .au-hero-stack { grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 3vw, 48px); }
@media (max-width: 1024px) {
  .ig-page .au-hero-stack, .ig-page .sol-hero--visual .au-hero-stack { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .ig-page .au-hero.sol-hero { min-height: 0; }
}

/* ===== Hero — proof-cijfers (compacte cijferstrip onder de CTA's) ===== */
.ig-page .lg-hero-proof { list-style: none; margin: 36px 0 0; padding: 26px 0 0; border-top: 1px solid var(--c-border); display: flex; flex-wrap: wrap; gap: 14px 40px; }
.ig-page .lg-hero-proof li { display: flex; flex-direction: column; gap: 3px; }
.ig-page .lg-hero-proof-num { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(22px, 2vw, 27px); line-height: 1; letter-spacing: -0.02em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ig-page .lg-hero-proof-label { font-family: var(--font-body); font-size: 13px; line-height: 1.35; color: var(--c-text-soft); max-width: 16ch; }
@media (max-width: 520px) {
  .ig-page .lg-hero-proof { gap: 14px 26px; }
}

/* ===== Hero — integratie-hub =================================================
   Was een 3x3-raster met de Bconnect-bubble als middelste tegel: negen losse
   vierkantjes zonder onderling verband. Nu een ring van systemen om één hart,
   met verbindingslijnen en een stroom die naar het midden loopt.

   De chips staan op left/top in procenten die de widget-PHP uitrekent uit
   dezelfde hoek en straal als de SVG-lijnen, dus lijn en chip vallen altijd
   samen — ook als je het aantal koppelingen in het paneel wijzigt.
   ========================================================================== */
.ig-hub { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }
.ig-hub-stage {
  position: relative;
  width: 100%; max-width: 460px; aspect-ratio: 1 / 1;
  margin: 0 auto;
}
/* zachte gloed achter het geheel, zodat de ring op de lichte hero "ligt" */
.ig-hub-stage::before {
  content: ""; position: absolute; inset: 6%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(103,92,230,.16), rgba(103,92,230,.06) 55%, transparent 76%);
  filter: blur(26px);
}

.ig-hub-web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ig-hub-ring {
  fill: none; stroke: rgba(20,20,100,.10); stroke-width: .4;
  stroke-dasharray: 1.6 2.4;
}
.ig-hub-ring--in { stroke: rgba(20,20,100,.08); }
.ig-hub-wire { stroke: rgba(20,20,100,.14); stroke-width: .55; stroke-linecap: round; }
/* de gradient-streep die naar het hart toe beweegt */
/* Eén rond puntje dat van de chip naar het hart reist. De gap is precies de
   lijnlengte (27.5 - 15 = 12.5), zodat er altijd maar één puntje onderweg is. */
.ig-hub-flow {
  stroke-width: 1.7; stroke-linecap: round;
  stroke-dasharray: 0.1 14.1; stroke-dashoffset: 14.2;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) { .ig-hub-flow { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .ig-hub-flow { animation: igFlow 2.6s linear infinite; animation-delay: var(--d, 0s); }
}
@keyframes igFlow { to { stroke-dashoffset: 0.1; } }

/* ---- het hart ---- */
.ig-hub-core {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 27%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center; color: #fff;
  border-radius: 26%;
  background: var(--gradient-brand-rich);
  box-shadow: 0 18px 40px -12px rgba(168,2,142,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.ig-hub-core > svg { width: 42%; height: auto; position: relative; z-index: 1; }
.ig-hub-core-ping {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1.5px solid rgba(168,2,142,.5);
}
@media (prefers-reduced-motion: no-preference) {
  .ig-hub-core-ping { animation: igPing 2.6s var(--ease, cubic-bezier(.2,.7,.2,1)) infinite; }
}
@keyframes igPing {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}

/* ---- de systemen in de ring ---- */
.ig-hub-node {
  position: absolute; z-index: 2;
  width: 20.5%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--c-border-soft); border-radius: 22%;
  box-shadow: 0 1px 2px rgba(20,20,100,.05), 0 10px 22px -8px rgba(20,20,100,.16);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.ig-hub-node:hover {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 2px 4px rgba(20,20,100,.06), 0 16px 30px -10px rgba(20,20,100,.26);
}
/* De bron-SVG's zijn allemaal genormaliseerd op 16px hoog. `max-height` legde
   daar alleen een plafond op en schaalde niets óp, waardoor elk logo op zijn
   eigen 16px bleef staan. Nu een gezette hoogte, met een breedteplafond voor
   de brede woordmerken (pipedrive, zapier, HubSpot). */
.ig-hub-node img {
  height: 30%; width: auto; max-width: 74%; max-height: 46%;
  object-fit: contain; display: block;
}

.ig-hub-cap {
  font-family: var(--font-head); font-size: 13.5px; font-weight: var(--fw-semibold);
  color: var(--c-text-soft); letter-spacing: -0.01em; text-align: center;
}

@media (max-width: 1024px) { .ig-hub-stage { margin: 0 auto; } }
/* Op smalle schermen zijn 8 chips in een ring te krap: de ring wordt iets
   ruimer en de chips iets groter t.o.v. de stage. */
@media (max-width: 480px) {
  .ig-hub-node { width: 23%; }
  .ig-hub-node img { height: 28%; max-width: 72%; }
  .ig-hub-core { width: 29%; }
}

/* ===== Sectiekop (au-head/au-lead binnen deze pagina) ===== */
.ig-page .au-lead { color: var(--c-text-muted); margin: 0 auto; max-width: 48em; font-size: var(--fs-lead); line-height: 1.6; }

/* ===== ZONE 2 — veelgebruikte koppelingen (logo-raster) ===== */
.ig-popular { padding: var(--space-9) 0; background: var(--c-bg-soft); }
.ig-logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ig-logo-card {
  display: grid; place-items: center; min-height: 104px; padding: 20px 26px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ig-logo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
/* Gelijke optische grootte. De bronbestanden lopen sterk uiteen: de woordmerken
   zijn SVG's van 16px hoog, de emblemen (Calendar, WhatsApp, Messenger) zijn
   256x256. Met alleen max-width/max-height werd niets opgeschaald, dus stond
   een woordmerk van 16px naast een embleem van 58px. Nu een gezette hoogte per
   logo via --ig-logo-h (de widget vult die per item in), met een breedte-
   plafond voor de brede woordmerken. */
.ig-logo-card img {
  height: var(--ig-logo-h, 32px); width: auto;
  max-width: 100%; max-height: none;
  object-fit: contain; display: block;
}
.ig-popular-foot {
  margin: var(--space-7) 0 0; text-align: center;
  font-family: var(--font-body); font-size: 15px; color: var(--c-text-muted);
}
.ig-page .au-faq-footlink { font-family: var(--font-head); font-weight: var(--fw-semibold); color: var(--c-navy); text-decoration: none; }
.ig-page .au-faq-footlink:hover { color: var(--c-magenta); }
@media (max-width: 900px) { .ig-logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ig-logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== ZONE 3 — categorieën (4x2, Zapier-vangnettegel featured) ===== */
.ig-cats { padding: var(--space-9) 0; background: #fff; }
.ig-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ig-cat {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card);
  padding: 24px 22px;
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.ig-cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.ig-cat-tile {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168,2,142,.26);
}
.ig-cat-tile svg { width: 24px; height: 24px; }
.ig-cat-h {
  font-family: var(--font-head); font-size: 18px; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--c-navy); margin: 2px 0 0;
}
.ig-cat-p { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--c-text-muted); margin: 0; }
.ig-cat-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 6px; }
.ig-cat-tag {
  font-family: var(--font-head); font-size: 12px; font-weight: var(--fw-medium); letter-spacing: -0.005em;
  color: var(--c-navy); background: var(--c-bg-soft); border: 1px solid var(--c-border-soft);
  padding: 4px 10px; border-radius: 999px;
}
/* Zapier-vangnettegel: gradient-rich, witte tekst */
.ig-cat.is-featured {
  background: var(--gradient-brand-rich); border-color: transparent; color: #fff;
  box-shadow: var(--shadow-feature);
}
.ig-cat.is-featured .ig-cat-tile { background: rgba(255,255,255,0.16); box-shadow: none; }
.ig-cat.is-featured .ig-cat-h { color: #fff; }
.ig-cat.is-featured .ig-cat-p { color: rgba(255,255,255,0.86); }
.ig-cat.is-featured .ig-cat-tag {
  color: #fff; background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28);
}
@media (max-width: 1080px) { .ig-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ig-cat-grid { grid-template-columns: 1fr; } }

/* ===== ZONE 4 — Zo werkt het (au-help + sol-pillars) ===== */
.ig-page .au-help { padding: var(--space-8) 0; background: #FFFFFF; }
/* op deze pagina in de zachte tint voor ritme (bron: #ig-how.au-help) */
.ig-page .au-help.ig-how { background: var(--c-bg-soft); }

.ig-page .sol-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.ig-page .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);
}
.ig-page .sol-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.ig-page .sol-pillar-head { display: flex; flex-direction: column; gap: 16px; }
.ig-page .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);
}
.ig-page .sol-pillar-tile svg { width: 26px; height: 26px; }
.ig-page .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;
}
.ig-page .sol-pillar-p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: var(--c-text-muted); margin: 0; }
.ig-page .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); }
.ig-page .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);
}
.ig-page .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) { .ig-page .sol-pillars { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* ===== ZONE 5 — afsluitend CTA-blok (signatuur gradient) ===== */
.ig-page .au-cta { padding: var(--space-8) 0; background: var(--c-white); }
.ig-page .au-cta-block {
  position: relative; overflow: hidden;
  background: var(--gradient-brand-rich); border-radius: 28px; box-shadow: var(--shadow-feature);
  padding: var(--space-9) var(--space-8); text-align: center; color: #fff;
}
.ig-page .au-cta-block::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(130% 130% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(130% 130% at 50% 0%, #000 0%, transparent 72%);
}
.ig-page .au-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ig-page .au-cta-over {
  font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.82);
}
.ig-page .au-cta-block h2 {
  font-family: var(--font-head); font-weight: var(--fw-semibold);
  font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.02em;
  color: #fff; margin: 0; text-wrap: pretty;
}
.ig-page .au-cta-block h2 .au-cta-accent {
  background: linear-gradient(90deg, #fff, #ffe6fb); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ig-page .au-cta-body { font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.9); margin: 4px 0 8px; max-width: 40em; }
.ig-page .au-cta-btn {
  background: #fff; color: var(--c-navy); padding: 14px 28px; font-size: 15.5px;
  box-shadow: 0 12px 28px rgba(11,10,61,.32);
}
.ig-page .au-cta-btn:hover { background: #fff; color: var(--c-navy); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(11,10,61,.4); }
@media (max-width: 680px) {
  .ig-page .au-cta-block { padding: var(--space-8) var(--space-5); }
}

/* ===== Responsieve sectie-ademruimte (bron: ingekort-automotive.css) ===== */
@media (max-width: 768px) {
  .ig-popular, .ig-cats, .ig-page .au-help, .ig-page .au-cta {
    padding-top: var(--space-7); padding-bottom: var(--space-7);
  }
}
@media (max-width: 520px) {
  .ig-popular, .ig-cats, .ig-page .au-help, .ig-page .au-cta {
    padding-top: var(--space-6); padding-bottom: var(--space-6);
  }
}

/* ============================================================
   Elementor-context + HARDENING — gradient/kleur afdwingen
   tegen theme-resets, geankerd op de widgetwrapper.
   ============================================================ */
/* De widget-wrappers van de vier ig-secties + de oude pagina-widget.
   Elke Bconnect-widget zet zijn eigen wrapper-marge op 0; dat kan niet
   generiek, want Elementor zet die marge per widgettype. */
.elementor-widget-bconnect_integraties,
.elementor-widget-bconnect_ig_hero,
.elementor-widget-bconnect_ig_popular,
.elementor-widget-bconnect_ig_cats,
.elementor-widget-bconnect_ig_how { margin: 0 !important; }

/* ---------- OPSPLITSING 13-08-2026 ----------
   De hardening-regels hieronder hingen aan
   `.elementor-widget-bconnect_integraties`, de wrapper van de pagina-widget
   die de hele pagina rendeerde. Nu elke sectie een eigen widget is, bestaat
   die wrapper niet meer. Ze scopen daarom op `.ig-page` — de paginaschil die
   elke ig-widget zelf om zijn sectie rendert, en waar de rest van dit bestand
   ook al aan hangt. Zelfde specificiteit (0,2,0), dus de cascade verschuift
   niet.
   -------------------------------------------- */

/* Een eigen afbeelding in plaats van een lijnicoon in de gradient-tegel.
   De tegelmaat blijft gelijk; het beeld vult hem met behoud van verhouding.
   Geen gradient-achtergrond meer, want die zou door een PNG met transparante
   randen heen schijnen. Moet `.ig-page`-specifiek zijn om de
   !important-hardening van .ig-cat-tile en .sol-pillar-tile te verslaan. */
.ig-page .bc-ic-img {
	background: none !important;
	padding: 0;
	overflow: hidden;
}
.ig-page .bc-ic-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.ig-page .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;
}
.ig-page .lg-hero-proof-num,
.ig-page .lg-eyebrow {
	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;
}
.ig-page .au-cta-block h2 .au-cta-accent {
	background: linear-gradient(90deg, #fff, #ffe6fb) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}
.ig-page .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.ig-page .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}
.ig-page .ig-cat-tile,
.ig-page .sol-pillar-tile {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.ig-page .ig-cat.is-featured .ig-cat-tile {
	background: rgba(255,255,255,0.16) !important;
}
.ig-page .ig-cat-tile svg,
.ig-page .sol-pillar-tile svg { color: #fff !important; stroke: #fff !important; }
.ig-page .sol-pillar-list li::before {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
}