/* Bconnect Automotive Branche-cases — bron: ingekort-automotive.css + upgrade-automotive.css (aucf) */
.au-cases > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }
.au-cases { padding: var(--space-8) 0; background: #EEF1F8; }
.au-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.au-case-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-feature);
  box-shadow: var(--shadow-card); padding: var(--space-7) var(--space-6);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.au-case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.au-case-card .au-num { font-size: clamp(40px, 4.4vw, 54px); }
.au-case-cap { font-family: var(--font-body); font-size: 15.5px; line-height: 1.5; color: var(--c-navy); }
.au-case-brand {
  margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--c-border-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.au-case-brand-name { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-semibold); color: var(--c-navy); }
.au-case-label {
  align-self: flex-start;
  font-family: var(--font-head); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-soft);
  padding: 5px 12px; border-radius: var(--radius-pill); background: var(--c-bg-tint);
}
.au-cases-foot { margin-top: var(--space-7); text-align: center; }

@media (max-width: 900px) { .au-cases-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* =====================================================================
   AUCF — uitgelichte branche-cases (drie kaarten naast elkaar)
   ===================================================================== */
.au-cases .aucf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: var(--space-7);
}

/* TWEE KAARTEN VULLEN DE VOLLE BREEDTE (21-08-2026)
   Sinds het Kleyn-filter in class-au-cases-widget.php staan er twee kaarten in
   plaats van drie. Met repeat(3,1fr) hielden die hun 424px en bleef er rechts
   452px open (424 + de gap) — gemeten op 1440 breed via CDP: kaarten op x=56 en
   x=508, grid van 1328px dat doorliep tot x=1384. Het kolomaantal volgt daarom
   het werkelijke aantal kaarten: :has() kijkt of de tweede kaart tegelijk de
   laatste is.

   Waarom niet simpelweg repeat(2,1fr): dan valt een derde kaart die iemand
   later toevoegt op een tweede rij. Waarom niet repeat(auto-fit, minmax(...)):
   dat verandert ook het DRIEkaartsgeval, tussen 901 en ~1015px van drie smalle
   kolommen naar twee, en daar is niet om gevraagd.

   Zonder :has()-ondersteuning valt dit terug op repeat(3,1fr) hierboven, dus op
   precies de situatie van vóór deze regel.

   DE min-width-POORT IS NOODZAAK, GEEN NETHEID. :has() neemt de specificiteit
   van zijn zwaarste argument over, dus deze selector weegt (0,5,0) tegen de
   (0,2,0) van `.au-cases .aucf-grid` in de max-width:900px-query hieronder — en
   een media query voegt zelf niets aan specificiteit toe. Zonder poort won deze
   regel dus ook op mobiel: gemeten op 414px gaf dat twee kolommen van 283px en
   262px in een grid van 374px, met de tweede kaart 199px buiten de container.
   Met de poort is 900px en lager onaangeroerd: één kolom, zoals het was. */
@media (min-width: 901px) {
  .au-cases .aucf-grid:has(.aucf-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Reviews: optie voor een gestapelde merk-lockup als logo (schakelaar
   'Groter logo-formaat'); iets ruimer dan een platte wordmark ernaast. */
.au-review-logo img.au-review-logo-lg { max-height: 56px; max-width: 132px; }

/* Kanalen-tiles: sinds Google Business Messages eruit is, zijn het er 4 (niet 5).
   ingekort-automotive.css is bevroren op repeat(5,1fr) — hier op desktop naar 4
   zetten zodat de tegels de volle breedte vullen en onder de converge-lijnen staan. */
@media (min-width: 921px) {
  .au-ks-tiles { grid-template-columns: repeat(4, 1fr); }
}

.aucf-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-feature);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.aucf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-border-soft);
}

/* Uniform wit logo-vlakje: egaliseert de verschillende ingebakken
   logo-achtergronden (JLR transparant, Dubbelsteyn wit, Kleyn navy). */
.aucf-logobox {
  height: 92px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  display: grid;
  place-items: center;
  padding: 16px 24px;
}
.aucf-logo {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  display: block;
}

.aucf-head { display: flex; flex-direction: column; gap: 5px; }
.aucf-name {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-navy);
}
.aucf-label {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}

.aucf-story {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
}

.aucf-stats {
  display: flex;
  gap: 28px;
  margin-top: auto;
  padding-top: 4px;
}
.aucf-stat { display: flex; flex-direction: column; gap: 5px; }
.aucf-stat-num {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.aucf-stat-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--c-text-soft);
}

.aucf-link {
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: 14.5px;
  color: var(--c-navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .2s var(--ease), color .2s var(--ease);
}
.aucf-link .aucf-arrow {
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 700;
  transition: transform .18s var(--ease);
}
.aucf-link:hover { gap: 11px; }
.aucf-link:hover .aucf-arrow { transform: translateX(3px); }

@media (max-width: 900px) {
  .au-cases .aucf-grid { grid-template-columns: 1fr; }
}

.au-lead { color: var(--c-text-muted); margin: 0 auto; max-width: 48em; font-size: var(--fs-lead); line-height: 1.6; }
.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); }
.au-textlink:hover { color: var(--c-grad-magenta); gap: 11px; }
.elementor-widget-bconnect_au_cases { margin: 0 !important; }
.elementor-widget-bconnect_au_cases .accent, .elementor-widget-bconnect_au_cases .aucf-stat-num, .elementor-widget-bconnect_au_cases .aucf-arrow { 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; }