/*!
 * Epic Slider - engine + element styles
 * Version: 0.5.0
 * A YOOzeCase Company
 *
 * Purpose: prefix-veilige styling. Alle selectors onder .yc-slider.
 */

.yc-slider { position: relative; overflow: hidden; width: 100%; }
.yc-slider > [data-yc-slide] { display: none; }

.yc-slider__stage { position: absolute; inset: 0; }

.yc-slider__base {
  position: absolute; inset: 0;
  background-color: #000; background-repeat: no-repeat;
  will-change: background-position;
}

.yc-slider__overlay {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; transform-style: preserve-3d;
}

.yc-slider__tile {
  position: absolute; background-repeat: no-repeat;
  backface-visibility: hidden; will-change: transform, opacity;
  outline: 0.5px solid transparent;
}

/* Hoogte / verhouding */
.yc-slider--ratio-16-9 { aspect-ratio: 16 / 9; }
.yc-slider--ratio-21-9 { aspect-ratio: 21 / 9; }
.yc-slider--vh { height: 100vh; height: 100svh; }
.yc-slider--md { min-height: 520px; }
.yc-slider--lg { min-height: 700px; }

/* Full width: uitbreken uit de container tot de volle vensterbreedte (extra optie) */
.yc-slider--full-bleed {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.uk-section:has(.yc-slider--full-bleed) {
  padding-top: 0 !important; padding-bottom: 0 !important;
}

/* Onder de header schuiven (extra optie; werkt het mooist met een transparante header) */
.yc-slider--behind-header { position: relative; z-index: 0; }
.yc-slider--behind-header .yc-slider__caption--tl,
.yc-slider--behind-header .yc-slider__caption--tc,
.yc-slider--behind-header .yc-slider__caption--tr {
  padding-top: calc(6% + var(--yc-header-h, 0px));
}

/* Op pagina's met een behind-header slider wordt de YOOtheme-header transparant,
   zodat het beeld achter logo en menu doorloopt. Alleen waar de optie aan staat. */
body:has(.yc-slider--behind-header) .tm-header,
body:has(.yc-slider--behind-header) .tm-header-mobile {
  background: transparent !important;
  box-shadow: none !important;
}


/* Navigatie: sleep-cursor */
.yc-slider--grabbing { cursor: grabbing; }

/* Pijltjes links/rechts */
.yc-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.yc-slider__arrow:hover { background: rgba(0, 0, 0, 0.7); }
.yc-slider__arrow--prev { left: 16px; }
.yc-slider__arrow--next { right: 16px; }
.yc-slider__arrow::before {
  content: ''; width: 12px; height: 12px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}
.yc-slider__arrow--prev::before { transform: rotate(-135deg); margin-left: 4px; }
.yc-slider__arrow--next::before { transform: rotate(45deg); margin-right: 4px; }

/* Dot-navigatie */
.yc-slider__dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4;
  display: flex; justify-content: center; gap: 10px;
  padding: 8px; pointer-events: none;
}
.yc-slider__dot {
  pointer-events: auto; width: 44px; height: 44px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.yc-slider__dot::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, background 0.2s ease;
}
.yc-slider__dot:hover::before { background: rgba(255, 255, 255, 0.85); }
.yc-slider__dot.is-active::before { background: #fff; transform: scale(1.5); }

/* Thumbnail-navigatie */
.yc-slider__thumbs {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4;
  display: flex; justify-content: center; gap: 8px;
  padding: 8px 12px; overflow-x: auto;
}
.yc-slider__thumb {
  flex: 0 0 auto; width: 72px; height: 48px; padding: 0; border: 2px solid transparent;
  border-radius: 4px; cursor: pointer; background-size: cover; background-position: center;
  opacity: 0.6; transition: opacity 0.2s ease, border-color 0.2s ease;
}
.yc-slider__thumb:hover { opacity: 0.9; }
.yc-slider__thumb.is-active { opacity: 1; border-color: #fff; }

/* Toetsenbord-focus zichtbaar (WCAG) */
.yc-slider__arrow:focus-visible,
.yc-slider__dot:focus-visible,
.yc-slider__thumb:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}


/* Caption / tekstanimaties (Fase 3) */
.yc-slider__caption {
  position: absolute; inset: 0; z-index: 3;
  display: flex; padding: 6% 7%;
  pointer-events: none; opacity: 1; transition: opacity 0.3s ease;
}
.yc-slider__cap-inner { max-width: 640px; color: #fff; }
.yc-slider__cap-inner:not(.yc-slider__cap-inner--panel) { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.yc-slider__cap-inner--panel {
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 24px 28px; border-radius: 8px;
}
.yc-slider__cap-title { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; line-height: 1.12; }
.yc-slider__cap-sub { margin: 0.6em 0 0; font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.4; opacity: 0.95; }
.yc-slider__cap-btn {
  display: inline-block; margin-top: 1.1em; padding: 0.7em 1.6em;
  background: #F89A1D; color: #fff; border-radius: 4px; font-weight: 600;
  text-decoration: none; pointer-events: auto; cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.yc-slider__cap-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.yc-slider__cap-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.yc-slider__ch { display: inline-block; white-space: pre; will-change: transform, opacity, filter; }

/* Caption-posities */
.yc-slider__caption--tl { justify-content: flex-start; align-items: flex-start; }
.yc-slider__caption--tc { justify-content: center; align-items: flex-start; text-align: center; }
.yc-slider__caption--tr { justify-content: flex-end; align-items: flex-start; text-align: right; }
.yc-slider__caption--cl { justify-content: flex-start; align-items: center; }
.yc-slider__caption--center { justify-content: center; align-items: center; text-align: center; }
.yc-slider__caption--cr { justify-content: flex-end; align-items: center; text-align: right; }
.yc-slider__caption--bl { justify-content: flex-start; align-items: flex-end; }
.yc-slider__caption--bc { justify-content: center; align-items: flex-end; text-align: center; }
.yc-slider__caption--br { justify-content: flex-end; align-items: flex-end; text-align: right; }

/* Ken Burns: transform meenemen in will-change */
.yc-slider--kenburns .yc-slider__base { will-change: background-position, transform; }

@media (prefers-reduced-motion: reduce) {
  .yc-slider__tile { will-change: opacity; }
  .yc-slider__dot::before, .yc-slider__thumb, .yc-slider__arrow { transition: none; }
  .yc-slider__ch { opacity: 1 !important; transform: none !important; filter: none !important; }
  .yc-slider__caption { opacity: 1 !important; }
}