.wpr-wrap { margin: 2rem 0; }
.wpr-carousel-shell { position: relative; }
.wpr-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 188px);
  gap: 14px;
  overflow-x: auto;
  padding: 0 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wpr-carousel::-webkit-scrollbar { display: none; }
.wpr-card {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}
.wpr-thumb {
  display: block;
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 24px;
  background: #111;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}
.wpr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wpr-thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0,0,0,.48), rgba(0,0,0,0));
}
.wpr-thumb-placeholder {
  color: #fff;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.wpr-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.wpr-play svg { width: 20px; height: 20px; margin-left: 2px; }
.wpr-meta { display: block; padding: 10px 4px 2px; }
.wpr-meta strong {
  display: block;
  color: #111;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}
.wpr-viewer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.96);
}
.wpr-viewer[hidden] { display: none !important; }
.wpr-close {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px) + 8px);
  right: 14px;
  z-index: 100001;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.wpr-viewer-track {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wpr-viewer-track::-webkit-scrollbar { display: none; }
.wpr-slide {
  position: relative;
  min-height: 100dvh;
  scroll-snap-align: start;
  background: #000;
}
.wpr-media {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}
.wpr-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.wpr-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 18px calc(28px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.46) 34%, rgba(0,0,0,0) 100%);
}
.wpr-title {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 700;
  max-width: 88%;
  letter-spacing: -.02em;
}
.wpr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: transform .2s ease, opacity .2s ease;
}
.wpr-cta:hover { transform: translateY(-1px); opacity: .96; }
body.wpr-no-scroll, html.wpr-no-scroll { overflow: hidden !important; }

@media (max-width: 767px) {
  .wpr-carousel { grid-auto-columns: minmax(136px, 160px); gap: 12px; }
  .wpr-thumb { border-radius: 18px; }
  .wpr-title { font-size: 20px; max-width: 92%; }
}

@media (min-width: 768px) {
  .wpr-carousel { grid-auto-columns: minmax(172px, 208px); }
  .wpr-overlay { padding: 28px 22px 30px; gap: 14px; }
  .wpr-title { font-size: 26px; max-width: 90%; }
  .wpr-cta { min-height: 50px; padding: 0 22px; font-size: 15px; }
}

@media (min-width: 1024px) {
  .wpr-viewer {
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, rgba(42,67,255,.16), transparent 28%),
                radial-gradient(circle at bottom, rgba(175,50,255,.16), transparent 28%),
                rgba(0,0,0,.96);
  }
  .wpr-close { top: 28px; right: 28px; }
  .wpr-viewer-track {
    width: min(430px, 100%);
    height: min(92dvh, 920px);
    border-radius: 34px;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,.48);
    border: 1px solid rgba(255,255,255,.08);
  }
  .wpr-slide, .wpr-media { min-height: min(92dvh, 920px); height: min(92dvh, 920px); }
}