/* ============================================================
   Klantgegevens en historiek — feature-pagina.
   Bovenop tokens.css + site.css (globaal inline in _Layout).
   Gebruikt bewust de Sarrai.Site-fonts (Poppins / Bricolage Grotesque
   / JetBrains Mono via de tokens), NIET de Inter uit het designbundel.
   Nav + footer komen van _Layout, dus de dropdown-CSS uit het design
   is hier niet overgenomen.
   ============================================================ */

/* ---- Sectieritme ----------------------------------------- */
.kg-sec { padding-block: clamp(56px, 6vw, 96px); }
.kg-sec--alt { background: var(--bg-surface-2); border-block: 1px solid var(--border-subtle); }
.kg-sec h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.375rem);
  font-weight: 800; letter-spacing: -0.025em; color: var(--brand-navy-800);
  max-width: 20ch; margin-bottom: 18px;
}
.kg-sec p { color: var(--fg-3); font-size: 1.0625rem; line-height: 1.65; max-width: 54ch; }
.kg-sec p:last-child { margin-bottom: 0; }

.kg-center { text-align: center; }
.kg-center h2, .kg-center p { margin-left: auto; margin-right: auto; }
.kg-center h2 { max-width: 22ch; }
.kg-center p { max-width: 62ch; }

.kg-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.kg-split--flip { grid-template-columns: 7fr 5fr; }
.kg-split--flip .kg-split__text { order: 2; }
.kg-split--flip .kg-split__media { order: 1; }
.kg-stack { display: grid; gap: 20px; }
.kg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 56px); }

.kg-inline-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600; color: var(--brand-navy); margin-top: 22px;
  border-bottom: 0;
}
.kg-inline-link:hover { border-bottom: 0; }
.kg-inline-link:hover svg { transform: translateX(3px); }
.kg-inline-link svg { transition: transform var(--dur-fast) var(--ease-out); }

/* ---- Hero ------------------------------------------------- */
.kg-hero {
  background: var(--bg-app);
  padding-block: clamp(44px, 4.5vw, 76px) clamp(40px, 4vw, 64px);
}
.kg-hero h1 {
  font-size: clamp(2.125rem, 1.1rem + 3.3vw, 3.5rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  color: var(--brand-navy-800); max-width: 15ch; margin-bottom: 22px;
}
.kg-hero__lede {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  color: var(--fg-3); line-height: 1.6; max-width: 56ch; margin-bottom: 30px;
}
.kg-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.kg-hero__shot { margin-top: clamp(36px, 4vw, 56px); }

/* ---- Screenshots -------------------------------------------- */
.kg-shot {
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  line-height: 0;
}
.kg-shot__img { display: block; width: 100%; height: auto; }

/* .kg-shot--sm: te klein native beeld (bv. een uitsnede) niet uitrekken over
   de volle mediakolom. */
.kg-shot--sm { max-width: 360px; margin-inline: auto; }

/* .kg-shot--crop: portretbeeld met een vervaagde achtergrond links van het
   eigenlijke onderwerp. Die rand wegsnijden i.p.v. de volle hoogte tonen, én
   een eigen max-breedte i.p.v. de volle (brede) mediakolom opvullen — anders
   torent een portretbeeld torenhoog boven het tekstblok ernaast uit. */
.kg-shot--crop { aspect-ratio: 3 / 4; max-width: 380px; margin-left: auto; }
.kg-shot--crop .kg-shot__img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }

/* ---- Historiek: het grote beeld --------------------------- */
.kg-big { margin-top: clamp(32px, 3.5vw, 52px); }
.kg-facts { margin-top: clamp(32px, 3.5vw, 52px); }
.kg-facts p { font-size: 1.0625rem; max-width: 46ch; }

/* ---- Afsluiter -------------------------------------------- */
.kg-final { padding-block: clamp(56px, 6vw, 92px); text-align: center; background: var(--brand-orange-50); border-top: 1px solid color-mix(in oklch, var(--brand-orange) 20%, transparent); }
.kg-final h2 {
  max-width: 20ch; margin: 0 auto 16px;
  font-size: clamp(1.75rem, 1rem + 2.6vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.025em; color: var(--brand-navy-800);
}
.kg-final p { color: var(--fg-3); max-width: 54ch; margin: 0 auto 28px; font-size: 1.0625rem; }
.kg-final__micro { margin-top: 16px; font-size: 13.5px; color: var(--fg-3); }

/* ---- Responsief ------------------------------------------- */
@media (max-width: 991.98px) {
  .kg-split, .kg-split--flip { grid-template-columns: 1fr; gap: 28px; }
  .kg-split--flip .kg-split__text { order: 1; }
  .kg-split--flip .kg-split__media { order: 2; }
  .kg-cols { grid-template-columns: 1fr; gap: 20px; }
  .kg-shot--crop { margin-inline: auto; }
}
@media (max-width: 575.98px) {
  .kg-hero h1 { max-width: 18ch; }
  .kg-hero__cta .btn { flex: 1 1 100%; justify-content: center; }
}