/* ============================================================
   lg-outsource — "Leadgeneratie uitbesteden" (2x2 kaarten)
   ------------------------------------------------------------
   Kop, eyebrow en intro komen volledig uit bconnect-shared.css
   (.lg-head.is-center, .lg-eyebrow, .lg-h2, .lg-intro). Hier
   staat alleen het raster, de kaart en de afsluitende regel.

   De kaart is een kopie van .lg-chan-item/.lg-tile uit
   lg-channels.css, onder eigen namen. Die stylesheet laadt
   alleen als de lg-channels-widget op de pagina staat, dus
   hergebruik zou deze sectie ongestyled laten op elke pagina
   zonder dat widget.

   Alle basisregels staan er expliciet bij (display, width,
   box-sizing). team.css overschreef ooit alleen
   grid-template-columns zonder display:grid, waarna de hele
   sectie stil in een smalle kolom stapelde. Erf hier niets.
   Geen :has() in dit bestand: die neemt de specificiteit van
   zijn zwaarste argument over en verslaat dan de mobiele regel.
   ============================================================ */

.lg-out-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  width: 100%;
  box-sizing: border-box;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.lg-out-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--c-border-soft);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.lg-out-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(168,2,144,.26);
}
.lg-out-tile svg { display: block; width: 22px; height: 22px; }

.lg-out-body { min-width: 0; }

.lg-out-h {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-navy);
  margin: 0 0 4px;
}

.lg-out-p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0;
}

/* 900px is het breekpunt van lg-deliver en lg-channels; hier
   hetzelfde, zodat de pagina op één moment omklapt. */
@media (max-width: 900px) {
  .lg-out-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
}

/* Onder 360px is 20px zijpadding in de kaart plus een tegel van
   44px te veel naast de tekst; beide een maat kleiner. */
@media (max-width: 360px) {
  .lg-out-card { padding: 14px 16px; gap: 13px; }
  .lg-out-tile { width: 40px; height: 40px; border-radius: 11px; }
  .lg-out-tile svg { width: 20px; height: 20px; }
}

/* ===== HARDENING — gradient/kleur tegen theme-resets ===== */
.elementor-widget-bconnect_lg_outsource .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_lg_outsource .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_lg_outsource .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}