/* ===============================
   Config & helpers
=================================*/
:root {
  --radius: 16px;
  --video-ratio: 16/9;
  --video-max: 1280px;
  --video-overlap: 50%;
}

/* Optioneel: zet letterlijke waarden per module via inline styles of module fields */

/* ===============================
   Basis
=================================*/
.countdown {
  position: relative;
  overflow: visible;          /* buitenste wrapper mag overlappen */
  z-index: 1;
}

.countdown-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.countdown-counter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.countdown-item * {
  display: block;
}

.countdown-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.countdown-first-btn,
.countdown-second-btn {
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

.countdown-first-btn:hover,
.countdown-second-btn:hover {
  transform: scale(1.05);
}

.full-height {
  height: 100vh;
}

.full-height-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 767px) {
  .countdown-counter { gap: 20px; }
  .full-height { height: auto; }
}

/* ===============================
   Clip-wrapper (knipt alle lagen)
   — plaats ALLE absolute lagen hierin —
=================================*/
.countdown-clip {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;           /* cruciaal: zorgt voor echte afgeronde hoeken */
  isolation: isolate;         /* voorkomt bleed bij filters/z-index */
  background: transparent;    /* of kleur naar wens */
}

/* Safari/WebKit fallback voor consistente clip rendering */
@supports (-webkit-hyphens: none) {
  .countdown-clip {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}

/* ===============================
   Lagen binnen de clip
=================================*/
.countdown-bg,
.countdown-video,
.countdown-img-overlay,
.countdown-video-overlay,
.countdown-solid-color,
.countdown-solid-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;     /* erft de clip-afronding */
}

/* Alleen toepassen als je klik-interactie NIET nodig hebt op overlays/video.
   Wil je video controls/pauses op klik? Haal .countdown-video hier weg. */
.countdown-solid-color,
.countdown-solid-gradient,
.countdown-bg,
.countdown-video-overlay,
.countdown-img-overlay {
  pointer-events: none;
}

/* Backgrounds / media */
.countdown-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.countdown-video {
  object-fit: cover;
  object-position: center;
}

/* ===============================
   Overlays
=================================*/
.countdown-img-overlay,
.countdown-video-overlay,
.countdown-solid-color,
.countdown-solid-gradient {
  /* Voeg hier mix-blend-mode, opacity, gradients, etc. toe indien nodig */
}

/* ===============================
   Variant: volledige sectie-achtergrond
   (wanneer de video als sectie-bg fungeert)
=================================*/
.countdown.has-bg .countdown-clip {
  height: 100%;
  min-height: 320px; /* optioneel */
}

/* ===============================
   Bottom overlap video (hero die over onderrand valt)
=================================*/
.bottom-overlap-video-wrapper {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, var(--video-overlap));
  width: min(90vw, var(--video-max));
  z-index: 5;
}

.bottom-overlap-video-inner {
  position: relative;
  width: 100%;
  aspect-ratio: var(--video-ratio);
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;           /* cruciaal voor afgeronde hoeken */
  isolation: isolate;
}

/* Safari/WebKit fallback op de inner container */
@supports (-webkit-hyphens: none) {
  .bottom-overlap-video-inner {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}

.bottom-overlap-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Als je een overlay over de overlap-video gebruikt, laat die ook erven */
.bottom-overlap-video-inner > .video-overlay,
.bottom-overlap-video-inner > .image-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Duw de volgende module omlaag op basis van overlap-hoogte */
.countdown + * {
  /* Houdt rekening met de geprojecteerde hoogte van de overlap */
  padding-top: calc(
    min(90vw, var(--video-max)) / (var(--video-ratio)) * (var(--video-overlap))
  );
}

/* ===============================
   Utility
=================================*/
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}