/* TK Hero (Latest3) – SINGLE slide hero met vaste hoogte en breedte begrensd door pijltjes. */

/* Variabelen: pijl-grootte en marge bepalen de frame-breedte tussen de pijlen */
.tkha-stage {
  --arrow-size: 36px;
  --arrow-gap:  10px;
  --side-pad: calc(var(--arrow-size) + var(--arrow-gap) + 4px);

  position: relative;
  width: 100%;
  height: 420px;            /* vaste hoogte desktop */
  overflow: hidden;
  background: #fff;         /* wit canvas (letterboxing indien nodig) */
}
@media (max-width: 1024px) { .tkha-stage { height: 360px; } }
@media (max-width: 768px)  { .tkha-stage { height: 280px; } }
@media (max-width: 520px)  { .tkha-stage { height: 220px; } }

/* Slides container */
.tkha-slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .6s ease;
  will-change: transform;
}

/* 1 slide per viewport */
.tkha-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
}

/* FRAME: beperkt de zichtbare beeldbreedte precies tussen de pijlen */
.tkha-frame {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--side-pad);
  right: var(--side-pad);
  display: block;
}

/* Afbeelding volledig zichtbaar: contain (niet bijsnijden) */
.tkha-bg {
  position: absolute;
  inset: 0;
  background-size: contain;     /* NIET croppen */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;       /* witte balken indien andere ratio */
}

/* Prev/Next: pijlen staan net buiten de frame-breedte */
.tkha-prev, .tkha-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  appearance: none; border: 1px solid #e5e7eb; background: rgba(255,255,255,.95);
  border-radius: 999px; width: var(--arrow-size); height: var(--arrow-size);
  font-size: 22px; line-height: calc(var(--arrow-size) - 2px); text-align:center;
  cursor: pointer;
}
.tkha-prev { left: var(--arrow-gap); }
.tkha-next { right: var(--arrow-gap); }
.tkha-prev[disabled], .tkha-next[disabled]{ opacity:.5; cursor:default; }

/* Dots */
.tkha-dots {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; gap: 6px; justify-content: center; z-index: 6;
}
.tkha-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(0,0,0,.25);
}
.tkha-dot.is-active { background: rgba(0,0,0,.6); }

/* Knoppen onder hero (komen uit template) */
.section-hero .hero-buttons { margin-top: 16px; display:flex; gap:12px; justify-content:center; }

/* Fallback melding */
.tkha-empty { padding:12px; border:1px solid #eee; background:#fff; color:#334155; border-radius:6px; }