/*
 * File: css/components/hero-slideshow.css
 * Logic: Shared hero slideshow structure — all variants (image / video / rotator).
 * JS hooks preserved: .wsdt-slideshow-wrapper, .wsdt-slide, .is-active, nav buttons.
 */

/* --------------------------------------------------------------------------
   Wrapper dimensions (CLS baseline)
   -------------------------------------------------------------------------- */
.wsdt-slideshow-wrapper {
  height: var(--slideshow-height-mobile);
  aspect-ratio: 4 / 5;
}

@media (min-width: 1024px) {
  .wsdt-slideshow-wrapper {
    height: 100vh;
    aspect-ratio: 16 / 9;
  }
}

.wsdt-slideshow-wrapper > .wsdt-slide {
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   Shared hero title typography (caption variants)
   -------------------------------------------------------------------------- */
.wsdt-slide-caption h1,
.wsdt-video-caption h1,
.wsdt-rotator-caption h1 {
  font-size: clamp(var(--font-size-2xl), 6vw, var(--font-size-3xl));
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   Caption centering (image / video / rotator)
   -------------------------------------------------------------------------- */
.wsdt-slide-caption,
.wsdt-video-caption,
.wsdt-rotator-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-slide-caption);
  pointer-events: none;
}

.wsdt-slide-caption *,
.wsdt-video-caption *,
.wsdt-rotator-caption * {
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Text rotation stack (video + rotator — JS toggles .is-active on li)
   -------------------------------------------------------------------------- */
.wsdt-video-caption ul,
.wsdt-rotator-caption ul {
  display: grid;
  grid-template-areas: "stack";
  place-items: center start;
}

.wsdt-video-caption li,
.wsdt-rotator-caption li {
  grid-area: stack;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-normal);
  pointer-events: none;
  transition: opacity var(--transition-smooth),
    visibility 0s linear var(--transition-smooth);
}

.wsdt-video-caption li.is-active,
.wsdt-rotator-caption li.is-active {
  opacity: 1;
  visibility: visible;
  z-index: var(--z-slide-overlay);
  pointer-events: auto;
  transition: opacity var(--transition-smooth), visibility 0s linear;
}

.wsdt-video-caption ul:not(:has(.is-active)) li:first-child,
.wsdt-rotator-caption ul:not(:has(.is-active)) li:first-child {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.wsdt-video-caption li.is-active h1,
.wsdt-video-caption li.is-active p,
.wsdt-rotator-caption li.is-active h1,
.wsdt-rotator-caption li.is-active p {
  opacity: 0;
  animation: fadeInUp var(--duration-hero-caption) ease-out forwards;
}

.wsdt-video-caption li.is-active h1,
.wsdt-rotator-caption li.is-active h1 {
  animation-delay: var(--delay-md);
}

.wsdt-video-caption li.is-active p,
.wsdt-rotator-caption li.is-active p {
  animation-delay: var(--delay-lg);
}

/* --------------------------------------------------------------------------
   Media overlay (::after on content containers)
   -------------------------------------------------------------------------- */
.wsdt-hero-media-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--overlay-hero);
  z-index: 2;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Image slideshow variant (front-slideshow — LCP critical, loaded in global-lcp)
   JS: .wsdt-slide.is-active, .wsdt-slide-prev/next
   -------------------------------------------------------------------------- */
.wsdt-slide-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.wsdt-slide-content picture,
.wsdt-slide-content img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 4 / 5;
}

@media (min-width: 1024px) {
  .wsdt-slide-content picture,
  .wsdt-slide-content img {
    aspect-ratio: 16 / 9;
  }
}

.wsdt-slideshow-wrapper:not(.wsdt-video-slideshow-wrapper):not(.wsdt-rotator-slideshow-wrapper) .wsdt-slide {
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-normal);
  transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}

.wsdt-slideshow-wrapper:not(.wsdt-video-slideshow-wrapper):not(.wsdt-rotator-slideshow-wrapper):not(:has(.wsdt-slide.is-active)) .wsdt-slide:first-child {
  opacity: 1;
  visibility: visible;
}

.wsdt-slideshow-wrapper:not(.wsdt-video-slideshow-wrapper):not(.wsdt-rotator-slideshow-wrapper) .wsdt-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity 1s ease-in-out 0.5s, visibility 0s linear 0.5s;
  will-change: opacity;
}

.wsdt-slideshow-wrapper:not(.wsdt-video-slideshow-wrapper):not(.wsdt-rotator-slideshow-wrapper) .wsdt-slide-content img {
  transform: scale(1);
  transition: transform var(--duration-ken-burns) ease-out;
}

.wsdt-slideshow-wrapper:not(.wsdt-video-slideshow-wrapper):not(.wsdt-rotator-slideshow-wrapper) .wsdt-slide.is-active .wsdt-slide-content img {
  transform: scale(var(--scale-ken-burns));
  will-change: transform;
}

.wsdt-slide.is-active .wsdt-slide-title,
.wsdt-slide.is-active .wsdt-slide-text,
.wsdt-slide.is-active .wsdt-slide-link {
  opacity: 0;
  animation: fadeInUp var(--duration-hero-caption) ease-out forwards;
}

.wsdt-slide.is-active .wsdt-slide-title { animation-delay: var(--delay-md); }
.wsdt-slide.is-active .wsdt-slide-text { animation-delay: var(--delay-lg); }
.wsdt-slide.is-active .wsdt-slide-link { animation-delay: var(--delay-xl); }

.wsdt-slide-prev,
.wsdt-slide-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--unit-base) * 10);
  height: calc(var(--unit-base) * 10);
  background-color: var(--surface-white-t-20);
  border: var(--border-width-sm) solid var(--surface-white-t-20);
  color: var(--text-on-hero);
  border-radius: 50%;
  cursor: pointer;
  z-index: calc(var(--z-slide-caption) + 1);
  transition: var(--transition-interactive);
  padding: 0;
}

.wsdt-slide-prev:focus-visible,
.wsdt-slide-next:focus-visible {
  outline: 3px solid var(--color-accent-500);
  outline-offset: var(--radius-sm);
}

.wsdt-slide-prev svg,
.wsdt-slide-next svg {
  width: calc(var(--unit-base) * 6.4);
  height: calc(var(--unit-base) * 6.4);
  display: block;
}

.wsdt-slide-prev { left: var(--space-lg); }
.wsdt-slide-next { right: var(--space-lg); }

.wsdt-slide-prev:hover,
.wsdt-slide-next:hover {
  background-color: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: var(--text-on-hero);
  transform: translateY(-50%) scale(1.1);
}