/* WD‑VOD Slide Frontend
   Classes are inspired by the provided case study styles, adapted & prefixed.
   Handles and prefixes use 'vodw' as requested. */

/* Container sizing & CSS vars */
.vodw-slider{
  --vodw-aspect: 56.25%;--vodw-hover-scale: 1.0;--vodw-overlay-opacity: .35;
  --vodw-speed: 500ms;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

/* Keep height in check */
.vodw-carousel{
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
}

/* Slides */
.vodw-list{
  position: relative;
  width: 100%;
  height: 100%;
}
.vodw-item{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1);
  transition: opacity var(--vodw-speed) ease, transform var(--vodw-speed) ease;
}
.vodw-item.vodw-active{
  opacity: 1;
  z-index: 2;
}
.vodw-item img, .vodw-item video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vodw-item:hover{
  transform: scale(var(--vodw-hover-scale));
}

/* Overlay */
.vodw-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,var(--vodw-overlay-opacity)) 80%);
  mix-blend-mode: normal;
  background-color: color-mix(in oklab, var(--vodw-overlay-color, transparent) var(--vodw-overlay-opacity*100%), transparent);
  pointer-events: none;
}

/* Content */
.vodw-content{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8%;
  width: min(1140px, 86%);
  color: #fff;
  text-shadow: 0 5px 10px rgba(0,0,0,.25);
}
.vodw-headline{
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 12px 0;
}
.vodw-btn{
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background var(--vodw-speed) ease, color var(--vodw-speed) ease;
}
.vodw-btn:hover{ background:#fff; color:#000; }

/* Thumbnails */
.vodw-thumbnail{
  position: absolute;
  display: flex;
  gap: 12px;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  max-width: 90%;
  overflow: auto hidden;
  padding-bottom: 2px;
}
.vodw-thumb{
  flex: 0 0 auto;
  width: 140px;
  height: 200px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  outline: 2px solid transparent;
  transition: outline-color var(--vodw-speed) ease;
}
.vodw-thumb img{
  width: 100%; height: 100%; object-fit: cover;
}
.vodw-thumb-meta{
  position: absolute; inset: auto 8px 8px 8px; color:#fff; font-size: 12px;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.vodw-thumb.vodw-active{ outline-color: #00A651; }

/* Arrows */
.vodw-arrows{
  position: absolute;
  top: 50%;
  right: 4%;
  display: flex;
  gap: 8px;
  z-index: 6;
  transform: translateY(-50%);
}
.vodw-arrows button{
  width: 40px; height: 40px; border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.25);
  color: #fff; font-weight: 700;
  cursor: pointer;
  transition: background var(--vodw-speed) ease, color var(--vodw-speed) ease;
}
.vodw-arrows button:hover{ background:#fff; color:#000; }

/* Time bar */
.vodw-time{
  position: absolute;
  top: 0; left: 0; height: 3px; width: 0;
  background: #f1683a;
  z-index: 7;
  transition: none;
}
.vodw-time.vodw-anim{
  animation: vodwTime linear forwards;
}
@keyframes vodwTime{
  from{ width: 100%; } to{ width: 0; }
}

/* Responsive tweaks */
@media (max-width: 678px){
  .vodw-headline{ font-size: 25px; }
  .vodw-thumb{ width: 110px; height: 160px; }
}

/* === WD Custom: UI tweaks per request === */
/* Push small cards (thumbnails) to the right */
.vodw-thumbnail{ justify-content: flex-end; }

/* Active small card background should be black */
.vodw-thumb.vodw-active{ background:#000; outline-color: #00A651; }

/* Remove arrow buttons */
.vodw-arrows{ display: none !important; }

/* Ensure big image reads horizontal nicely and has a soft radius */
.vodw-item{overflow: hidden; }
.vodw-item img{ width:100%; height:100%; object-fit: cover; }

/* Headline responsive sizing on mobile */
@media (max-width: 678px){
  .vodw-headline{ font-size: 20px; line-height: 1.15; }
}

/* Primary CTA button styling */
.vodw-btn{
  background: #0A943B !important;
  color: #000 !important;
  border-radius: 10px !important;
  border: none;
}
.vodw-btn:hover{ filter: brightness(0.95); }

/* Small card: keep same radius on desktop, circle on mobile */
@media (max-width: 678px){
  .vodw-thumb{ width: 60px; height: 60px; border-radius: 9999px; }
  .vodw-thumb img{ border-radius: 9999px; }
}

/* Hide small-card title strip entirely if present */
.vodw-thumb .vodw-thumb-meta{ display: none !important; }



/* === WD‑VOD Slide: Defaults adjusted per user spec === */

/* Desktop (≥1024px): move thumbnail rail to the right side */
@media (min-width: 1024px){
  .vodw-thumbnail{
    left: auto;
    right: 8%;
    transform: none;
    justify-content: flex-end;
  }
}

/* Mobile (≤678px): ensure content sits above the thumbnail rail neatly */
@media (max-width: 678px){
  /* Keep thumbnails centered (default), bump content above */
  .vodw-content{
    bottom: calc(8% + 100px); /* create space for centered thumbnails */
  }
}

/* Active thumb outline: brand/schema green */
.vodw-thumb.vodw-active{ outline-color: #00A651 !important; }