/* ============================================
   Kaartenraster met icoon, titel en tekst (component kaart-slider).
   Eén widget in het origineel, per pagina anders ingesteld (prob-grid, gads-prob-grid, feat-grid, wat-grid,
   pijn-grid, opl-grid, opl-grid-lg, pc-grid, prob-grid2, ontz-grid). De varianten verschillen alleen in maten en
   kleuren; die staan als custom properties per variant. De widgets gebruiken 768px als mobiele grens.
   Navigatie: components/slider-nav.css (vóór dit bestand laden).
   ============================================ */
.kaart-slider { width: 100%; min-width: 0; font-family: var(--font-ui); }
.kaart-slider__rij {
  display: grid; grid-template-columns: repeat(var(--kolommen, 3), 1fr); gap: var(--raster-gap, 14px);
}
.kaart-slider__kaart {
  display: var(--kaart-display, flex); flex-direction: column; gap: var(--kaart-gap, 14px); min-width: 0;
  padding: var(--kaart-pad, 32px 28px);
  border: var(--kaart-rand, 1px solid rgba(0, 0, 0, 0.06)); border-radius: var(--kaart-radius, 12px);
  background: var(--kaart-bg, var(--color-white));
}
.kaart-slider__icoon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--icoon-box, 48px); height: var(--icoon-box, 48px); margin-bottom: var(--icoon-mb, 0);
  border-radius: var(--icoon-radius, 10px);
  background: var(--icoon-bg, rgba(0, 0, 0, 0.04)); color: var(--icoon-kleur, var(--color-primary));
  font-size: var(--icoon-maat, 20px);
}
.kaart-slider__titel {
  margin: 0 0 var(--titel-mb, 0);
  font-family: var(--titel-font, var(--font-heading)); font-size: var(--titel-maat, 18px); font-weight: 700;
  line-height: var(--titel-lh, 1.5); color: var(--titel-kleur, var(--color-primary));
}
.kaart-slider__tekst {
  margin: 0;
  font-family: var(--font-ui); font-size: var(--tekst-maat, 16px); font-weight: 500; line-height: var(--tekst-lh, 1.7);
  color: var(--tekst-kleur, #888);
}
/* Label "Pijler n" boven de titel (opl-grid-lg) */
.kaart-slider__tag {
  display: inline-block;
  margin-bottom: 14px; padding: 4px 10px; border-radius: 100px;
  background: rgba(238, 131, 49, 0.1); color: var(--color-accent);
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
}
.kaart-slider__voetnoot { margin-top: 20px; font-family: var(--font-ui); font-size: 13px; font-style: italic; color: #999; }

/* ---------- Varianten ---------- */
/* prob: standaardwaarden (website laten maken "Problemen", kapsalon "Herkenbaar?") */

/* prob-seo: lokale SEO "De realiteit" */
.kaart-slider--prob-seo {
  --raster-gap: 20px; --kaart-radius: 14px; --kaart-pad: 28px; --kaart-rand: 0 none;
  --icoon-box: 40px; --icoon-bg: transparent; --icoon-radius: 0; --icoon-maat: 28px;
  --titel-font: var(--font-ui); --titel-maat: 16px; --titel-lh: 1.3;
  --tekst-maat: 15px; --tekst-kleur: #666; --tekst-lh: 1.65;
}
/* prob-ads: Google Ads "Herkenbaar?" */
.kaart-slider--prob-ads {
  --raster-gap: 20px; --kaart-radius: 14px;
  --icoon-box: 40px; --icoon-bg: transparent; --icoon-radius: 0; --icoon-maat: 28px;
  --tekst-lh: 1.65;
}
/* feat: website laten maken "De oplossing" (op mobiel een veegrij) */
.kaart-slider--feat { --kolommen: 2; --kaart-bg: var(--color-cream); --kaart-pad: 36px 32px; --icoon-bg: rgba(0, 0, 0, 0.05); }
/* feat-oranje: Salonhub "Wat we doen" */
.kaart-slider--feat-oranje {
  --kolommen: 4; --kaart-bg: var(--color-cream);
  --icoon-bg: rgba(238, 131, 49, 0.12); --icoon-kleur: var(--color-accent);
}
/* donker: Salonhub "Totale ontzorging" */
.kaart-slider--donker {
  --kolommen: 2; --kaart-bg: rgba(255, 255, 255, 0.05); --kaart-rand: 1px solid rgba(255, 255, 255, 0.07);
  --icoon-bg: rgba(238, 131, 49, 0.12); --icoon-kleur: var(--color-accent);
  --titel-kleur: var(--color-white); --tekst-kleur: rgba(255, 255, 255, 0.5);
}
/* wat: lokale SEO / Google Ads "Wat we doen" */
.kaart-slider--wat {
  --kolommen: 2; --raster-gap: 20px;
  --kaart-bg: var(--color-cream); --kaart-radius: 14px; --kaart-pad: 32px; --kaart-rand: 0 none; --kaart-gap: 16px;
  --icoon-box: 40px; --icoon-bg: transparent; --icoon-radius: 0; --icoon-maat: 26px; --icoon-kleur: var(--color-accent);
  --titel-maat: 17px; --titel-lh: 1.3; --tekst-lh: 1.65;
}
/* pijn / opl: branchepagina vakman "Herkenbaar?" en "De oplossing" */
.kaart-slider--pijn,
.kaart-slider--opl {
  --raster-gap: 24px; --kaart-gap: 16px;
  --icoon-box: 44px; --icoon-bg: var(--color-cream);
  --titel-maat: 17px; --titel-lh: 1.3;
  --tekst-maat: 14px; --tekst-kleur: #666; --tekst-lh: 1.65;
}
.kaart-slider--opl { --kolommen: 2; --kaart-bg: var(--color-cream); --icoon-bg: var(--color-white); }
/* prob2: kapsalon "Wat wij anders doen" */
.kaart-slider--prob2 { --kolommen: 4; --kaart-bg: var(--color-cream); --icoon-bg: var(--color-white); }
/* opl-accent: review management "Alles wat je nodig hebt" (oranje icoonvak) */
.kaart-slider--opl-accent {
  --kolommen: 2; --raster-gap: 20px; --kaart-gap: 16px; --kaart-bg: var(--color-cream);
  --icoon-box: 44px; --icoon-bg: var(--color-accent); --icoon-kleur: var(--color-white);
  --titel-lh: 1.3; --tekst-maat: 14px; --tekst-kleur: #555; --tekst-lh: 1.6;
}
/* Kaarten zonder flex (icoon en titel met marge eronder): pc-grid, pijn-grid en opl-grid-lg van leadgeneratie */
.kaart-slider--pc,
.kaart-slider--pijn-lg,
.kaart-slider--pijler {
  --kaart-display: block; --kaart-rand: 1px solid rgba(0, 0, 0, 0.05);
  --icoon-mb: 18px; --icoon-bg: var(--color-cream); --icoon-kleur: var(--color-accent);
  --titel-mb: 10px; --titel-maat: 17px; --titel-lh: 1.3;
  --tekst-maat: 15px; --tekst-kleur: #666; --tekst-lh: 1.65;
}
/* pc: review management / vakmanpagina's "Herkenbaar?" */
.kaart-slider--pc { --raster-gap: 24px; --kaart-pad: 28px 24px; }
/* pijn-lg: leadgeneratie "Herkenbaar?" */
.kaart-slider--pijn-lg {
  font-family: inherit;
  --kolommen: 2; --raster-gap: 20px; --kaart-pad: 28px 24px;
  --icoon-box: 44px; --icoon-mb: 16px; --icoon-maat: 18px; --titel-mb: 8px;
}
/* pijler: leadgeneratie "Onze aanpak" en vakmanpagina's "De oplossing" */
.kaart-slider--pijler { font-family: inherit; --kolommen: 2; --raster-gap: 24px; --kaart-bg: var(--color-cream); --icoon-bg: var(--color-white); }

/* ---------- Hover: kaart tilt op ---------- */
.kaart-slider--hover-rand .kaart-slider__kaart { cursor: default; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.kaart-slider--hover-rand .kaart-slider__icoon { transition: background 0.25s, color 0.25s; }
.kaart-slider--hover-til .kaart-slider__kaart,
.kaart-slider--hover-licht .kaart-slider__kaart { transition: transform 0.25s, box-shadow 0.25s; }
.kaart-slider--hover-til .kaart-slider__icoon { transition: background 0.25s; }
.kaart-slider--hover-donker .kaart-slider__kaart { cursor: default; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
.kaart-slider--hover-donker .kaart-slider__icoon { transition: background 0.2s; }
@media (hover: hover) {
  .kaart-slider--hover-rand .kaart-slider__kaart:hover { transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.1) 0 16px 40px; border-color: var(--color-accent); }
  .kaart-slider--hover-til .kaart-slider__kaart:hover { transform: translateY(-5px); box-shadow: rgba(0, 0, 0, 0.08) 0 12px 32px; }
  .kaart-slider--hover-licht .kaart-slider__kaart:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.07) 0 10px 28px; }
  .kaart-slider--hover-donker .kaart-slider__kaart:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.08); box-shadow: rgba(0, 0, 0, 0.3) 0 12px 32px; }
  .kaart-slider--hover-rand .kaart-slider__kaart:hover .kaart-slider__icoon,
  .kaart-slider--hover-til .kaart-slider__kaart:hover .kaart-slider__icoon { background: var(--color-accent); color: var(--color-white); }
  .kaart-slider--hover-donker .kaart-slider__kaart:hover .kaart-slider__icoon { background: rgba(238, 131, 49, 0.22); }
}

/* ---------- Mobiel ---------- */
.slider-nav.kaart-slider__nav { display: none; }

@media (max-width: 1024px) {
  .kaart-slider--prob2 { --kolommen: 2; }
}

@media (max-width: 768px) {
  .kaart-slider__rij { grid-template-columns: 1fr; }
  .kaart-slider--opl-accent .kaart-slider__rij { grid-template-columns: repeat(2, 1fr); } /* deze widget: pas ≤767px */
  .kaart-slider[data-kaart-slider] .kaart-slider__nav { display: flex; }

  /* enkel: één kaart tegelijk */
  .kaart-slider[data-kaart-slider="enkel"] .kaart-slider__rij { display: block; }
  .kaart-slider[data-kaart-slider="enkel"] .kaart-slider__kaart { display: none; }
  .kaart-slider[data-kaart-slider="enkel"] .kaart-slider__kaart.is-actief { display: var(--kaart-display, flex); }

  /* scroll: veegrij, kaarten 82vw breed, vastklikken per kaart */
  .kaart-slider[data-kaart-slider="scroll"] .kaart-slider__rij {
    display: flex; gap: 12px; padding-bottom: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .kaart-slider[data-kaart-slider="scroll"] .kaart-slider__rij::-webkit-scrollbar { display: none; }
  .kaart-slider[data-kaart-slider="scroll"] .kaart-slider__kaart { flex: 0 0 82vw; scroll-snap-align: start; }

  /* schuif: rij schuift per kaart (--i door kaart-slider.js) */
  .kaart-slider[data-kaart-slider="schuif"] .kaart-slider__venster { overflow: hidden; width: 100%; }
  .kaart-slider[data-kaart-slider="schuif"] .kaart-slider__rij {
    display: flex; gap: var(--rij-gap, 0px); width: 100%;
    transform: translateX(calc(var(--i, 0) * -1 * (100% + var(--rij-gap, 0px))));
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }
  .kaart-slider[data-kaart-slider="schuif"] .kaart-slider__kaart { flex: 0 0 100%; transform: none; }

  .kaart-slider--pijn { --rij-gap: 12px; }
  .kaart-slider--pijn .kaart-slider__rij { padding: 4px 0 8px; }
  .kaart-slider--pijn .kaart-slider__nav { margin-top: 8px; padding-bottom: 0; }
  .kaart-slider--pijn .slider-nav__dots { gap: 6px; }
  .kaart-slider--prob2 .kaart-slider__rij,
  .kaart-slider--feat-oranje .kaart-slider__rij { align-items: flex-start; }
  .kaart-slider--feat-oranje .kaart-slider__nav { padding-bottom: 0; }
}
@media (max-width: 767px) {
  .kaart-slider--opl-accent .kaart-slider__rij { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kaart-slider[data-kaart-slider="schuif"] .kaart-slider__rij { transition: none; }
}