/* Afsluitende banner van de homepage (#kennismaken): een kaartvlak met de
   kernboodschap, de twee knoppen en de slapende Pilo. De adem-, rustring- en
   Z-animaties van de Pilo komen uit vp/pilo.css via de SVG-klassen. */

.vp-km-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 250px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(40px, 5.5vw, 72px) clamp(32px, 5vw, 80px);
  border: 1px solid var(--vp-lijn);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 40%, color-mix(in srgb, var(--vp-gloed) 6%, transparent), transparent 38%),
    var(--vp-kaart);
  box-shadow: 0 40px 80px -60px rgba(30, 58, 95, .45), inset 0 1px 0 #FFFFFF;
  overflow: hidden;
}

.vp-km-banner-copy { position: relative; z-index: 2; max-width: 620px; }
.vp-km-banner-copy h2 { margin: 0 0 14px; }
.vp-km-banner-copy .large-paragraph.gray-text { margin: 0; }
.vp-km-banner-copy .button-div { margin-top: 30px; }

.vp-km-banner-beeld {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.vp-km-gloed {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vp-gloed) 15%, transparent), color-mix(in srgb, var(--vp-gloed) 5%, transparent) 52%, transparent 74%);
  filter: blur(18px);
}

.vp-km-pilo {
  position: relative;
  z-index: 2;
  width: 78%;
  aspect-ratio: 1;
  filter: drop-shadow(-12px 20px 22px color-mix(in srgb, var(--vp-donker-top) 38%, transparent));
}
.vp-km-pilo .vp-pilo-kiezel { display: block; width: 100%; height: 100%; overflow: visible; }

@media (max-width: 767px) {
  .vp-km-banner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 38px 26px;
    text-align: center;
  }
  .vp-km-banner-copy { max-width: none; }
  .vp-km-banner-copy .button-div { justify-content: center; }
  .vp-km-banner-beeld { width: min(52%, 210px); margin: 0 auto; }
}

@media (max-width: 479px) {
  .vp-km-banner-copy .app-button { width: 100%; }
}