/**
 * Homepage-blokken, overgenomen van vastgoedklik.be (hero/#va-page-image,
 * va-p-text-img, va-p-cta-review-banner, va-cta-banner-bottom).
 * px-waarden (de WordPress-site rekent met 62,5% root-fontsize).
 * Breakpoints: 1680 / 1260 / 984 / 744 / 576.
 */

/* Randloze banden: body mag niet horizontaal scrollen door 100vw */
body.vk-home { overflow-x: clip; }

/* Knoppen (.va-btn) */
.vk-home-btn {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 9px 18px;
  border: 1px solid #244d4e;
  border-radius: 0;
  background-color: #244d4e;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  color: #fff;
  transition: color 240ms ease-in-out, background-color 240ms ease-in-out;
}
.vk-home-btn:hover,
.vk-home-btn:focus { background-color: #fff; color: #244d4e; text-decoration: none; }
.vk-home-btn--white { border-color: #fff; background-color: #fff; color: #244d4e; }
.vk-home-btn--white:hover,
.vk-home-btn--white:focus { background-color: rgba(255, 255, 255, 0); color: #fff; }
.vk-home-btn--outline { border-color: #244d4e; background-color: #fff; color: #244d4e; }
.vk-home-btn--outline:hover,
.vk-home-btn--outline:focus { background-color: #244d4e; color: #fff; }

/* ---------------------------------------------------------------- Hero --- */
.vk-home-hero { position: relative; z-index: 1; width: 100%; margin: 0 0 96px; }
.vk-home-hero__grid { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; width: 100%; }
.vk-home-hero__baseline {
  position: relative;
  z-index: 2;
  width: 33.33%;
  max-width: 540px;
  margin: 60px -96px 0 0;
  padding: 28px 36px;
  background-color: #244d4e;
  color: #fff;
}
.vk-home-hero__baseline::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12px;
  left: -9px;
  width: 100%;
  height: 100%;
  border: 1px solid #244d4e;
}
.vk-home-hero__baseline h1,
.vk-home-hero__baseline h2 { margin: 0; color: #fff; }
.vk-home-hero__baseline h2 {
  margin-bottom: 18px;
  font-family: "Josefin Sans", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
}
.vk-home-hero__baseline h1 { font-size: 36px; line-height: 1.2; font-weight: 400; }
.vk-home-hero__baseline p { margin: 24px 0 0; font-weight: 400; line-height: 1.5; }
.vk-home-hero__baseline .vk-home-btn { margin-top: 18px; }

.vk-home-hero__slider { position: relative; z-index: 1; width: 66.66%; overflow: hidden; }
.vk-home-hero__slider::before { content: ""; display: block; padding-bottom: calc(425 / 756 * 100%); }
.vk-home-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.vk-home-hero__slide.is-active { opacity: 1; }
.vk-home-hero__dots {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: 50%;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(-50%);
}
.vk-home-hero__dots li { margin: 0 3px; padding: 0; }
.vk-home-hero__dots button {
  display: block;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: width 280ms ease-in-out, background-color 280ms ease-in-out;
}
.vk-home-hero__dots button.is-active { width: 32px; background-color: #fff; }
.vk-home-hero__dots button:hover { background-color: #fff; }

/* ------------------------------------------------------ Tekst + beeld ---- */
.vk-home-ti {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: #fafafa;
  color: #000;
}
.vk-home-ti--image-left { flex-direction: row-reverse; }
.vk-home-ti--green { background-color: #244d4e; color: #fff; }
.vk-home-ti__text,
.vk-home-ti__image { position: relative; z-index: 1; width: calc(50% - 24px); }
.vk-home-ti__text { display: flex; align-items: center; padding: 60px 96px; box-sizing: border-box; }
.vk-home-ti__text-item { position: relative; z-index: 1; width: 100%; }
.vk-home-ti__image {
  min-height: 50vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.vk-home-ti--full-height .vk-home-ti__image { min-height: 100vh; }
.vk-home-ti h2,
.vk-home-ti h3 { color: inherit; }
.vk-home-ti h2 { margin: 0 0 24px; font-size: 36px; line-height: 1.2; font-weight: 400; }
.vk-home-ti h3 { margin: 0 0 9px; font-size: 16px; line-height: 1.3; font-weight: 300; text-transform: uppercase; }
.vk-home-ti__body p { margin: 0 0 12px; }
.vk-home-ti__body a { color: inherit; font-weight: inherit; text-decoration: none; }
.vk-home-ti__body a:hover { text-decoration: underline; }
.vk-home-ti__body strong { font-weight: 700; }
.vk-home-ti .vk-home-btn { margin-top: 36px; }
.vk-home-ti--green .vk-home-btn { border-color: #fff; background-color: #fff; color: #244d4e; }
.vk-home-ti--green .vk-home-btn:hover { background-color: rgba(255, 255, 255, 0); color: #fff; }
.vk-home-ti__text-item > p { margin: 0; }

.vk-home-review {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  margin-top: 72px;
  padding: 36px 48px;
  box-sizing: border-box;
  color: #244d4e;
}
.vk-home-review::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; }
.vk-home-review::after { content: ""; position: absolute; z-index: -2; top: -12px; left: -9px; width: 100%; height: 100%; border: 1px solid #244d4e; box-sizing: border-box; }
.vk-home-review p { margin: 0 0 12px; font-family: "PT Serif", serif; font-size: 18px; font-weight: 400; line-height: 1.5; }
.vk-home-review__name { position: relative; display: block; padding-left: 18px; font-size: 16px; }
.vk-home-review__name::before { content: ""; position: absolute; top: 50%; left: 0; width: 12px; height: 1px; background-color: #244d4e; }

/* ---------------------------------------------------- Video-reviewbanner -- */
.vk-home-videos { position: relative; z-index: 1; width: 100vw; margin: 96px 0 144px calc(50% - 50vw); }
.vk-home-videos__inner {
  position: relative;
  z-index: 1;
  padding: 168px 96px 108px;
  background-color: #244d4e;
  color: #fff;
}
.vk-home-videos__inner::before,
.vk-home-videos__inner::after { content: ""; position: absolute; z-index: 1; display: block; border: 1px solid #fff; box-sizing: border-box; pointer-events: none; }
.vk-home-videos__inner::before { top: 48px; left: 12px; width: calc(100% - 48px); height: calc(100% - 108px); }
.vk-home-videos__inner::after { top: 78px; left: 36px; width: calc(100% - 48px); height: calc(100% - 108px); }
.vk-home-videos__content { position: relative; z-index: 2; width: 100%; max-width: 1080px; margin: 0 auto; text-align: center; }
.vk-home-videos__title { margin: 0 0 36px; font-family: "PT Serif", serif; font-size: 36px; line-height: 1.2; color: #fff; }
.vk-home-videos__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin: 0 -30px; width: calc(100% + 60px); padding: 0 12px; box-sizing: border-box; }
.vk-home-video {
  position: relative;
  width: calc(50% - 60px);
  margin: 0 30px 36px;
  aspect-ratio: 16 / 9;
  background-color: #244d4e;
  background-position: center center;
  background-size: cover;
}
.vk-home-video::before { content: ""; position: absolute; inset: 0; background-color: rgba(36, 77, 78, .4); transition: background-color 240ms ease-in-out; pointer-events: none; }
.vk-home-video:hover::before { background-color: rgba(36, 77, 78, 0); }
.vk-home-video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><path fill='white' d='M24 43.5L42 30 24 16.5v27zM30 0C13.44 0 0 13.44 0 30c0 16.56 13.44 30 30 30 16.56 0 30-13.44 30-30C60 13.44 46.56 0 30 0zm0 54C16.77 54 6 43.23 6 30S16.77 6 30 6s24 10.77 24 24-10.77 24-24 24z'/></svg>") center / 48px 48px no-repeat;
  cursor: pointer;
  opacity: 1;
  transition: opacity 240ms ease-in-out;
}
.vk-home-video__play:hover { opacity: .7; }
.vk-home-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------- CTA-band -- */
.vk-home-cta { position: relative; z-index: 1; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 96px 96px 78px; box-sizing: border-box; background-color: #fafafa; }
.vk-home-cta__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; max-width: 1260px; margin: 0 auto; }
.vk-home-cta__image,
.vk-home-cta__content { width: calc(50% - 48px); }
.vk-home-cta__image img { display: block; width: 100%; height: auto; }
.vk-home-cta__text { font-size: 18px; }
.vk-home-cta h4 { margin: 0 0 12px; font-family: "PT Serif", serif; font-size: 36px; line-height: 1.2; font-weight: 400; color: #000; }
.vk-home-cta p { margin: 0 0 12px; }
.vk-home-cta__buttons { display: flex; flex-wrap: wrap; gap: 0 18px; }
.vk-home-cta .vk-home-btn { margin-top: 36px; }

/* ----------------------------------------------------- Breakpoints -------- */
@media (max-width: 1680px) {
  .vk-home-hero__baseline h1 { font-size: 32px; }
  .vk-home-hero { margin-bottom: 72px; }
  .vk-home-hero__baseline { width: calc(33.33% + 48px); margin-right: -48px; padding: 18px 24px; }
  .vk-home-hero__baseline h2 { margin-bottom: 12px; }
  .vk-home-ti__text,
  .vk-home-ti__image { width: calc(50% - 18px); }
  .vk-home-ti__text { padding: 48px 72px; }
  .vk-home-ti .vk-home-btn { margin-top: 24px; }
  .vk-home-review { margin-top: 54px; padding: 28px 36px; }
  .vk-home-videos { margin: 72px 0 108px calc(50% - 50vw); }
  .vk-home-videos__inner { padding: 156px 72px 108px; }
  .vk-home-cta { padding: 72px 72px 54px; }
  .vk-home-cta__image,
  .vk-home-cta__content { width: calc(50% - 36px); }
}

@media (max-width: 1260px) {
  .vk-home-hero { margin-bottom: 48px; }
  .vk-home-hero__baseline { width: calc(33.33% + 48px); margin-right: -48px; padding: 18px 24px; }
  .vk-home-hero__baseline h1 { font-size: 32px; }
  .vk-home-hero__baseline h2 { margin-bottom: 9px; }
  .vk-home-ti__text,
  .vk-home-ti__image { width: calc(50% - 12px); }
  .vk-home-ti__text { padding: 36px 48px; }
  .vk-home-ti h2 { font-size: 32px; }
  .vk-home-ti h3 { font-size: 14px; }
  .vk-home-ti .vk-home-btn { margin-top: 12px; }
  .vk-home-review { margin-top: 36px; padding: 18px 24px; }
  .vk-home-videos { margin: 48px 0 72px calc(50% - 50vw); }
  .vk-home-videos__inner { padding: 144px 48px 108px; }
  .vk-home-videos__grid { margin: 0 -12px; width: calc(100% + 24px); }
  .vk-home-video { width: calc(50% - 24px); margin-left: 12px; margin-right: 12px; }
  .vk-home-videos__title { font-size: 34px; }
  .vk-home-cta { padding: 48px 48px 30px; }
  .vk-home-cta__image,
  .vk-home-cta__content { width: calc(50% - 24px); }
  .vk-home-cta__text { font-size: 16px; }
  .vk-home-cta h4 { font-size: 32px; }
  .vk-home-cta .vk-home-btn { margin-top: 24px; }
  .vk-home-cta__buttons { gap: 0 12px; }
}

/* Hero: onder 1260px komt de slideshow over de volle breedte en overlapt de
   tekstbox de onderrand, zodat er geen lege ruimte onder de foto ontstaat. */
@media (max-width: 1200px) {
  .vk-home-hero__grid { flex-direction: column; align-items: stretch; }
  .vk-home-hero__slider { order: 1; width: 100%; }
  .vk-home-hero__slider::before { padding-bottom: 50%; }
  .vk-home-hero__baseline {
    order: 2;
    width: calc(100% - 48px);
    max-width: none;
    margin: -80px 24px 0;
    padding: 24px 28px;
    box-sizing: border-box;
  }
  .vk-home-hero__baseline p { margin-top: 16px; font-size: 15px; max-width: 900px; }
}

/* 50/50-blokken blijven naast elkaar tot 768px */
@media (max-width: 984px) {
  .vk-home-ti__text { padding: 32px 28px; }
  .vk-home-ti h2 { font-size: 26px; margin-bottom: 16px; }
  .vk-home-ti h3 { font-size: 13px; }
  .vk-home-ti__body { font-size: 14px; }
  .vk-home-ti .vk-home-btn { margin-top: 12px; padding: 8px 14px; }
  .vk-home-ti--full-height .vk-home-ti__image { min-height: min(100vh, 640px); }
  .vk-home-ti__image { min-height: 320px; }
  .vk-home-review { margin-top: 28px; padding: 14px 18px; }
  .vk-home-review p { font-size: 16px; }
  .vk-home-videos__inner { padding: 120px 24px 72px; }
  .vk-home-videos__inner::before { top: 36px; left: 8px; width: calc(100% - 24px); height: calc(100% - 72px); }
  .vk-home-videos__inner::after { top: 56px; left: 20px; width: calc(100% - 24px); height: calc(100% - 72px); }
  .vk-home-videos__title { margin-bottom: 24px; font-size: 24px; }
  .vk-home-cta { padding: 36px 24px 18px; }
  .vk-home-cta h4 { font-size: 26px; }
}

@media (max-width: 768px) {
  .vk-home-hero__slider::before { padding-bottom: 62%; }
  .vk-home-hero__baseline { width: 100%; max-width: none; margin: 0; padding: 20px 20px 24px; }
  .vk-home-hero__baseline::before { display: none; }
  .vk-home-hero__baseline h2 { font-size: 15px; margin-bottom: 8px; }
  .vk-home-hero__baseline h1 { font-size: 26px; }
  .vk-home-ti,
  .vk-home-ti--image-left { flex-direction: column; }
  .vk-home-ti__image { order: 1; width: 100%; min-height: 0 !important; aspect-ratio: 16 / 9; }
  .vk-home-ti__text { order: 2; width: 100%; padding: 32px 24px; }
  .vk-home-ti h2 { font-size: 26px; }
  .vk-home-ti__body { font-size: 15px; }
}

@media (max-width: 744px) {
  .vk-home-videos__grid { margin-left: 0; margin-right: 0; width: 100%; padding: 0; }
  .vk-home-video { width: 100%; margin-left: 0; margin-right: 0; }
  .vk-home-cta__inner { justify-content: center; }
  .vk-home-cta__image { width: calc(100% - 96px); margin-bottom: 24px; }
  .vk-home-cta__content { width: 100%; }
}

@media (max-width: 576px) {
  .vk-home-hero__baseline h1 { font-size: 24px; }
  .vk-home-hero__baseline p { font-size: 14px; }
  .vk-home-ti h2 { font-size: 24px; }
  .vk-home-cta__image { width: 100%; }
  .vk-home-cta h4 { font-size: 26px; }
  .vk-home-review { padding: 18px 20px; }
}

/* Partnerlogo's en USP-balk op de homepage */
body.vk-home .vk-client-logos { margin-bottom: 96px; }
@media (max-width: 1680px) { body.vk-home .vk-client-logos { margin-bottom: 72px; } }
@media (max-width: 1260px) { body.vk-home .vk-client-logos { margin-bottom: 48px; } }