/* =========================================================
   V50 — FLOATING MEDIA COVERFLOW STANDARD
   Selected Event Edits now use the same visual language as
   Artist Feature: active media forward, visible blurred
   neighbours behind, lime glow, card itself is the selector.
   ========================================================= */

.video-deck-piece,
.video-coverflow,
.video-coverflow-stage {
  overflow: visible !important;
}

.video-coverflow {
  --deck-card-width: clamp(300px, 34vw, 390px);
  max-width: 1040px !important;
  padding-inline: clamp(18px, 4vw, 54px);
  isolation: isolate;
}

.video-coverflow-stage {
  min-height: 760px;
  perspective: 1500px;
  isolation: isolate;
}

.video-coverflow-card {
  left: 50% !important;
  top: 10px !important;
  width: var(--deck-card-width) !important;
  transform:
    translateX(-50%)
    translateX(var(--event-float-x, 0px))
    translateY(var(--event-float-y, 0px))
    scale(var(--event-float-scale, .86))
    rotateY(var(--event-float-rotate, 0deg)) !important;
  opacity: var(--event-float-opacity, .48) !important;
  filter:
    blur(var(--event-float-blur, 2px))
    brightness(var(--event-float-brightness, .62))
    saturate(var(--event-float-saturation, .74)) !important;
  z-index: var(--event-float-z, 20) !important;
  transition:
    transform .54s cubic-bezier(.18,.78,.2,1),
    opacity .36s ease,
    filter .36s ease !important;
  transform-origin: 50% 48%;
}

.video-coverflow-card .social-phone {
  transition:
    border-color .28s ease,
    box-shadow .36s ease,
    transform .32s ease !important;
}

.video-coverflow-card.is-active {
  --event-float-x: 0px;
  --event-float-y: 0px;
  --event-float-scale: 1;
  --event-float-rotate: 0deg;
  --event-float-opacity: 1;
  --event-float-blur: 0px;
  --event-float-brightness: 1;
  --event-float-saturation: 1;
  --event-float-z: 60;
}

.video-coverflow-card.is-active .social-phone {
  border-color: rgba(214,255,75,.46) !important;
  box-shadow:
    0 38px 110px rgba(0,0,0,.82),
    0 0 0 1px rgba(214,255,75,.16),
    0 0 42px rgba(214,255,75,.09) !important;
}

.video-coverflow-card:not(.is-active) {
  cursor: pointer !important;
}

.video-coverflow-card:not(.is-active) .social-phone {
  box-shadow:
    0 24px 70px rgba(0,0,0,.68),
    0 0 0 1px rgba(241,239,233,.035) !important;
}

@media (hover:hover) and (pointer:fine) {
  .video-coverflow-card:not(.is-active):hover {
    opacity: .92 !important;
    filter: brightness(.92) blur(.3px) saturate(.92) !important;
    transform:
      translateX(-50%)
      translateX(var(--event-float-x, 0px))
      translateY(calc(var(--event-float-y, 0px) - 10px))
      scale(calc(var(--event-float-scale, .86) + .035))
      rotateY(var(--event-float-rotate, 0deg)) !important;
    z-index: 55 !important;
  }

  .video-coverflow-card:not(.is-active):hover .social-phone {
    border-color: rgba(214,255,75,.34) !important;
    box-shadow:
      0 30px 86px rgba(0,0,0,.78),
      0 0 30px rgba(214,255,75,.07) !important;
  }
}

/* External arrows are not the primary navigation anymore. Cards themselves are. */
.video-coverflow .video-coverflow-nav {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tablet: keep both neighbouring edits visible without squeezing the card. */
@media (max-width: 1180px) {
  .video-coverflow {
    --deck-card-width: clamp(290px, 42vw, 365px);
    max-width: 900px !important;
  }
  .video-coverflow-stage { min-height: 735px; }
}

/* iPad / compact modal layout. */
@media (max-width: 900px) {
  .video-coverflow {
    --deck-card-width: clamp(280px, 58vw, 350px);
    width: 100%;
    padding-inline: 18px;
  }
  .video-coverflow-stage { min-height: 720px; }
}

/* Mobile standard: active card stays compact, blurred neighbours remain tappable. */
@media (max-width: 760px) {
  .video-coverflow {
    --deck-card-width: min(72vw, 292px) !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }
  .video-coverflow-stage {
    min-height: 620px !important;
    width: 100%;
  }
  .video-coverflow-card {
    top: 0 !important;
  }
  .video-coverflow-card:not(.is-active) {
    pointer-events: auto !important;
  }
  .video-coverflow-card.is-active .social-phone {
    box-shadow:
      0 30px 84px rgba(0,0,0,.8),
      0 0 0 1px rgba(214,255,75,.16),
      0 0 30px rgba(214,255,75,.075) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-coverflow-card,
  .video-coverflow-card .social-phone {
    transition: none !important;
  }
}