/* WatchVIM layout refinements — Phase 3
   Keeps the existing application, subscription, authentication, entitlement,
   checkout and playback logic unchanged. */

/* =========================================================
   PUBLIC LANDING PAGE — keep the promo video beside the copy
   ========================================================= */
@media (min-width: 901px) {
  body.wv-route-landing .wv-landing {
    overflow: visible;
  }

  body.wv-route-landing .wv-landing-grid {
    min-height: 100vh;
    display: grid !important;
    grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.08fr);
    gap: clamp(42px, 6vw, 104px);
    align-items: center;
    padding: 126px clamp(28px, 6vw, 104px) 70px !important;
  }

  body.wv-route-landing .wv-landing-copy {
    width: 100%;
    max-width: 720px;
  }

  body.wv-route-landing .wv-landing-copy h1 {
    max-width: 720px;
    font-size: clamp(46px, 5.3vw, 82px) !important;
    line-height: .91 !important;
  }

  body.wv-route-landing .wv-landing-media {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: min(100%, 840px);
    height: auto !important;
    justify-self: end;
    align-self: center;
  }

  body.wv-route-landing .wv-landing-player {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 24px !important;
    background: #000;
    box-shadow: 0 30px 90px rgba(0,0,0,.62) !important;
  }

  body.wv-route-landing .wv-landing-player mux-player,
  body.wv-route-landing .wv-landing-player video {
    width: 100%;
    height: 100%;
    opacity: 1;
    object-fit: cover;
    --media-object-fit: cover;
  }

  body.wv-route-landing .wv-landing::before {
    background:
      radial-gradient(circle at 80% 38%, rgba(236,10,88,.14), transparent 30rem),
      linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.74) 42%, rgba(0,0,0,.28) 100%);
  }
}

/* =========================================================
   CATALOG HOME — poster rows begin after the hero
   ========================================================= */
body.wv-route-home .wv-home-hero + div,
body.wv-route-home .wv-home-hero ~ div.py-6 {
  margin-top: 0 !important;
  padding-top: clamp(24px, 3vw, 44px) !important;
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, var(--wv-bg) 0%, #050505 100%);
}

body.wv-route-home .wv-poster-section {
  z-index: 2;
}

body.wv-route-home .wv-featured-section {
  padding-top: 0 !important;
}

/* Keep trailer/video layers above the static artwork. */
body.wv-route-home .wv-home-hero-slide [data-hero-stage="1"] {
  overflow: hidden;
}

body.wv-route-home .wv-home-hero-slide .wv-hero-img {
  z-index: 1 !important;
  transition: opacity .24s ease, visibility .24s ease;
}

body.wv-route-home .wv-home-hero-slide .wv-hero-img.wv-hide {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.wv-route-home .wv-home-hero-slide .wv-hero-preview {
  z-index: 3 !important;
  background: #000;
}

/* =========================================================
   TABLET / MOBILE — separate preview area from hero copy
   ========================================================= */
@media (max-width: 900px) {
  body.wv-route-landing .wv-landing {
    min-height: auto !important;
    overflow: visible;
  }

  body.wv-route-landing .wv-landing-grid {
    min-height: auto;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    padding: 106px 18px 48px !important;
  }

  body.wv-route-landing .wv-landing-copy {
    order: 1;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
  }

  body.wv-route-landing .wv-landing-copy h1 {
    font-size: clamp(42px, 13vw, 68px) !important;
  }

  body.wv-route-landing .wv-landing-media {
    order: 2;
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: min(100%, 720px);
    height: auto !important;
    margin: 0 auto;
  }

  body.wv-route-landing .wv-landing-player {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 18px !important;
    background: #000;
    box-shadow: 0 22px 60px rgba(0,0,0,.52) !important;
  }

  body.wv-route-landing .wv-landing-player mux-player,
  body.wv-route-landing .wv-landing-player video {
    width: 100%;
    height: 100%;
    opacity: 1;
    object-fit: cover;
    --media-object-fit: cover;
  }

  body.wv-route-landing .wv-landing::before {
    background:
      radial-gradient(circle at 50% 18%, rgba(236,10,88,.14), transparent 24rem),
      linear-gradient(180deg, rgba(0,0,0,.9), #020203 70%);
  }

  body.wv-route-home .wv-home-hero-card > div {
    height: 690px !important;
    min-height: 690px !important;
  }

  body.wv-route-home .wv-home-hero-slide [data-hero-stage="1"] {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100%;
    height: 54% !important;
    min-height: 0 !important;
    overflow: hidden;
    background: #000;
  }

  body.wv-route-home .wv-home-hero-slide [data-hero-hover] {
    inset: 0 0 auto 0 !important;
    width: 100%;
    height: 54% !important;
  }

  body.wv-route-home .wv-home-hero-slide .wv-hero-preview {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    --media-object-fit: contain !important;
    --media-object-position: center !important;
    background: #000;
  }

  body.wv-route-home .wv-home-hero-slide::after {
    background:
      linear-gradient(180deg, transparent 0%, transparent 42%, rgba(3,3,3,.5) 53%, var(--wv-bg) 68%, var(--wv-bg) 100%) !important;
  }

  body.wv-route-home .wv-home-hero-content {
    top: 54% !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 28px 20px 30px !important;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(3,3,3,.96), var(--wv-bg));
  }

  body.wv-route-home .wv-home-hero-content > div {
    width: 100%;
  }

  body.wv-route-home .wv-home-hero-content h1 {
    font-size: clamp(34px, 10.5vw, 56px) !important;
  }

  body.wv-route-home .wv-home-hero-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  body.wv-route-home .wv-home-hero + div,
  body.wv-route-home .wv-home-hero ~ div.py-6 {
    margin-top: 0 !important;
    padding-top: 24px !important;
  }
}

@media (max-width: 520px) {
  body.wv-route-home .wv-home-hero-card > div {
    height: 650px !important;
    min-height: 650px !important;
  }

  body.wv-route-home .wv-home-hero-slide [data-hero-stage="1"],
  body.wv-route-home .wv-home-hero-slide [data-hero-hover] {
    height: 50% !important;
  }

  body.wv-route-home .wv-home-hero-content {
    top: 50% !important;
    padding: 24px 18px 24px !important;
  }

  body.wv-route-home .wv-home-hero-actions button {
    min-height: 44px;
    padding: 0 16px !important;
  }
}