/* ============================================================
   Bconnect Meer rendement Modellen (SolModels) — widget-styling
   Bron: ingekort-solutions.css + au-meter uit ingekort-automotive.css.
   ============================================================ */

.sol-models { padding: var(--space-8) 0; background: var(--c-bg-soft); }
.sol-models > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }
.sol-models-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }

/* Precies twee modellen: twee gelijke kolommen i.p.v. een gat. */
.sol-models-grid.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px; margin-left: auto; margin-right: auto;
}

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

/* slot = uitgelicht-label (of lege reservering) + kaart */
.sol-model-slot { display: grid; grid-template-rows: 30px 1fr; gap: 12px; }
.sol-model-flag { display: flex; align-items: center; }
.sol-model-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-head); font-size: 11.5px; font-weight: var(--fw-bold);
  letter-spacing: 0.10em; text-transform: uppercase; color: #fff;
  background: var(--gradient-brand); padding: 6px 14px; border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgba(168,2,142,.28);
}
.sol-model {
  position: relative; overflow: hidden; height: 100%;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--radius-feature); box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.sol-model:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.sol-model > * { position: relative; z-index: 1; }
.sol-model-featured { background: var(--gradient-brand-rich); border-color: transparent; box-shadow: var(--shadow-feature); }
.sol-model-featured::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 72%);
}
.sol-model-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-feature); }
.sol-model-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-model-desc { font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: var(--c-text); margin: 0; }
.sol-model-when { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--c-border-soft); display: grid; gap: 7px; }
.sol-model-when-label {
  font-family: var(--font-head); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-soft);
}
.sol-model-when-text { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-text-muted); }

/* uitgelichte kaart: witte tekst op de gradient */
.sol-model-featured .sol-model-h { color: #fff; }
.sol-model-featured .sol-model-desc { color: rgba(255,255,255,.92); }
.sol-model-featured .sol-model-when { border-top-color: rgba(255,255,255,.28); }
.sol-model-featured .sol-model-when-label { color: rgba(255,255,255,.82); }
.sol-model-featured .sol-model-when-text { color: rgba(255,255,255,.86); }

/* ===== Mens/AI-meter ===== */
.au-meter { display: grid; gap: 9px; }
.au-meter-legend { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.au-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--c-navy); }
.au-tag b { font-weight: var(--fw-bold); }
.au-tag.is-muted { opacity: .5; }
.au-dot { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.au-dot-human { background: var(--c-navy); }
.au-dot-ai { background: var(--gradient-brand); }
.au-track-bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; background: var(--c-bg-light); overflow: hidden; }
.au-fill { height: 100%; border-radius: 999px; flex: 0 0 auto; transform-origin: left center; }
.au-fill-human { background: var(--c-navy); }
.au-fill-ai { background: var(--gradient-brand); }

/* meter leesbaar op de gradient-kaart */
.sol-model-featured .au-tag { color: #fff; }
.sol-model-featured .au-dot-human { background: #fff; }
.sol-model-featured .au-dot-ai { background: rgba(255,255,255,.5); }
.sol-model-featured .au-track-bar { background: rgba(255,255,255,.18); }
.sol-model-featured .au-fill-human { background: #fff; }
.sol-model-featured .au-fill-ai { background: rgba(255,255,255,.45); }

/* meter vult één keer in naar verhouding bij in-view (scaleX) */
@media (prefers-reduced-motion: no-preference) {
  .sol-models.au-sec .au-fill { transition: transform .8s var(--ease); transition-delay: calc(var(--i, 0) * .12s + .25s); }
  .sol-models.au-sec:not(.is-inview) .au-fill { transform: scaleX(0); }
  .sol-models.au-sec.is-settled .au-fill { transition: none; transform: scaleX(1); }
}

.sol-models-foot {
  margin-top: var(--space-7); text-align: center;
  font-family: var(--font-head); font-size: 16px; font-weight: var(--fw-medium);
  color: var(--c-navy); max-width: 40em; margin-left: auto; margin-right: auto;
}

@media (max-width: 900px) {
  .sol-models-grid, .sol-models-grid.is-two { grid-template-columns: 1fr; gap: 16px; max-width: 460px; margin-left: auto; margin-right: auto; }
  .sol-model-slot { grid-template-rows: auto 1fr; }
  .sol-model-slot .sol-model-flag:empty { display: none; }
}

/* ===== Elementor-context + HARDENING tegen theme-resets ===== */
.elementor-widget-bconnect_mr_models { margin: 0 !important; }
.elementor-widget-bconnect_mr_models .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_models .sol-model-pill {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_mr_models .au-dot-ai,
.elementor-widget-bconnect_mr_models .au-fill-ai {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
}
.elementor-widget-bconnect_mr_models .sol-model-featured .au-dot-ai,
.elementor-widget-bconnect_mr_models .sol-model-featured .au-fill-ai {
	background: rgba(255,255,255,.45) !important;
}

/* ============================================================
   NIEUWE OPZET 13-08-2026 — laag uit "Meer rendement (4).html"
   ------------------------------------------------------------
   1) AI staat nu vooraan in de legenda én in de balk (zie de
      widget-PHP). Op de UITGELICHTE gradient-kaart moet daardoor
      de AI-kant het volle wit krijgen en de mens-kant het doorzich-
      tige wit; hierboven staat het nog andersom. Zonder deze twee
      regels leest de balk op die kaart precies verkeerd om.
   2) Legenda iets groter (15px i.p.v. 12,5) en de bolletjes 10px.

   ALLES GESCOOPT ONDER .sol-models. Dat is geen stijlkeuze maar
   noodzaak: au-models.css definieert dezelfde `.au-tag`/`.au-dot`
   (0,1,0) en wordt op deze pagina NA dit bestand geladen. Met de
   sectie-prefix erbij (0,2,0) wint deze laag, ongeacht volgorde.
   ============================================================ */
.sol-models .sol-model-featured .au-fill-ai { background: #fff; }
.sol-models .sol-model-featured .au-fill-human { background: rgba(255,255,255,.45); }
.sol-models .sol-model-featured .au-dot-ai { background: #fff; }
.sol-models .sol-model-featured .au-dot-human { background: rgba(255,255,255,.5); }
.sol-models .au-tag { font-size: 15px; }
.sol-models .au-dot { width: 10px; height: 10px; }

/* ---- 13-08-2026: breder en minder hoog, op verzoek ------------
   De twee kaarten stonden in een blok van 760px midden op een
   sectie van 1408px. Daardoor wrapte de omschrijving over acht
   regels en werd de sectie onnodig lang, terwijl er links en
   rechts 300px leeg bleef. Nu 1120px: de tekst wrapt korter, de
   kaarten worden breder én lager, en er blijft nog genoeg marge
   over zodat het geen bandbreed blok wordt.
   De ruimte binnen de kaart gaat mee terug (32→28px padding,
   kleinere tussenruimtes), anders komt de gewonnen hoogte er via
   de witruimte weer bij. */
.sol-models .sol-models-grid.is-two { max-width: 1120px; }
.sol-models .sol-model { padding: 28px; gap: 18px; }
.sol-models .sol-model-when { padding-top: 18px; }

/* De hardening hierboven zet met !important een gradient op
   `.au-dot-ai`/`.au-fill-ai` binnen deze widget; op de uitgelichte
   kaart moet dat wit blijven. Daarom hier opnieuw, óók met
   !important, want anders wint de eerdere regel alsnog. */
.elementor-widget-bconnect_mr_models .sol-model-featured .au-dot-ai,
.elementor-widget-bconnect_mr_models .sol-model-featured .au-fill-ai {
	background: #fff !important;
}