/* Catalog — aligned with inner marketing pages (News / Blog rhythm) */

.rjx-catalog-intro {
  margin-bottom: var(--rjx-section-intro-gap);
}

.rjx-catalog-intro__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rjx-space-sm);
  width: 100%;
}

/* Override .rjx-section__intro .rjx-section__title { width: 100% } so badge stays on the same row */
.rjx-catalog-intro__head .rjx-section__title {
  margin-bottom: var(--rjx-space-sm);
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 5.5rem);
}

.rjx-catalog-intro__head .rjx-badge {
  flex-shrink: 0;
  align-self: center;
  margin-top: 0.15rem;
}

.rjx-catalog-section__lead {
  margin-top: var(--rjx-space-sm);
  margin-bottom: var(--rjx-space-lg);
  font-size: 0.95rem;
}

.rjx-catalog-section__lead + .rjx-catalog-grid {
  margin-top: 0;
}

/* Slightly denser poster grid than default, same card language as site */
.rjx-catalog-grid {
  gap: var(--rjx-space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Single column on very small phones so cards/titles aren't cramped */
@media (max-width: 480px) {
  .rjx-catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .rjx-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .rjx-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rjx-catalog-section .rjx-card__media {
  aspect-ratio: 9 / 16;
}

@supports not (aspect-ratio: 1 / 1) {
  .rjx-catalog-section .rjx-card__media {
    position: relative;
    height: 0;
    padding-bottom: 177.78%;
  }

  .rjx-catalog-section .rjx-card__media img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}

.rjx-catalog-section .rjx-card__media img {
  object-fit: cover;
  object-position: center top;
}

/* Produced dramas — calmer hover so the glass play button reads clearly */
#block-own .rjx-card:has(.rjx-card__play-glyph):hover .rjx-card__media img,
#block-own .rjx-card:has(.rjx-card__play-glyph):focus-within .rjx-card__media img {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.02);
}

#block-own .rjx-card:has(.rjx-card__play-glyph):hover .rjx-card__media::before,
#block-own .rjx-card:has(.rjx-card__play-glyph):focus-within .rjx-card__media::before {
  opacity: 0.65;
}

#block-own .rjx-card__media .rjx-card__play-glyph {
  width: 56px;
  height: 56px;
}

@media (max-width: 767px) {
  #block-own .rjx-card__media .rjx-card__play-glyph {
    width: 50px;
    height: 50px;
  }

  /* Phones: swipe the Hero IP posters left/right instead of a stacked grid. */
  #block-own .rjx-catalog-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--rjx-space-md);
    padding-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  #block-own .rjx-catalog-grid::-webkit-scrollbar {
    display: none;
  }

  #block-own .rjx-catalog-grid > .rjx-card {
    flex: 0 0 auto;
    width: clamp(160px, 58vw, 240px);
    scroll-snap-align: start;
  }

  /* Surface the play button directly on touch (no hover) for video cards. */
  #block-own .rjx-card--playable .rjx-card__media .rjx-card__play-glyph {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  #block-own .rjx-card--playable .rjx-card__media::after {
    opacity: 1;
  }
}

.rjx-catalog-section .rjx-card:focus-within {
  box-shadow:
    var(--rjx-shadow-card),
    0 0 0 2px rgba(var(--rjx-brand-rgb), 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .rjx-catalog-section .rjx-card:hover {
    transform: none;
  }
}

/* ---- Produced drama video trigger ---- */

.rjx-card__play-trigger {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: inherit;
  font: inherit;
  color: inherit;
}

.rjx-card__play-trigger:focus-visible {
  outline: 2px solid rgba(var(--rjx-brand-rgb), 0.85);
  outline-offset: 3px;
}

.rjx-card__play-trigger img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- Catalog video preview modal ---- */

.rjx-catalog-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
}

.rjx-catalog-video-modal[hidden] {
  display: none;
}

.rjx-catalog-video-modal__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(4, 4, 6, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.rjx-catalog-video-modal__panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border-radius: var(--rjx-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, var(--rjx-bg-card) 48%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(var(--rjx-brand-rgb), 0.12);
}

.rjx-catalog-video-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rjx-space-sm);
  padding: 1.15rem 1.35rem 0.85rem;
}

.rjx-catalog-video-modal__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--rjx-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--rjx-text);
}

.rjx-catalog-video-modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--rjx-text-muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.rjx-catalog-video-modal__close:hover {
  color: var(--rjx-text);
  border-color: rgba(var(--rjx-brand-rgb), 0.35);
  background: rgba(var(--rjx-brand-rgb), 0.08);
}

.rjx-catalog-video-modal__close:focus-visible {
  outline: 2px solid rgba(var(--rjx-brand-rgb), 0.85);
  outline-offset: 2px;
}

.rjx-catalog-video-modal__body {
  padding: 0 1.35rem 1.35rem;
}

.rjx-catalog-video-modal__body video {
  display: block;
  width: 100%;
  max-height: min(72dvh, 640px);
  border-radius: var(--rjx-radius);
  background: #000;
}

/* ---- Licensed section: left text + right scrolling poster columns ---- */

.rjx-catalog-licensed {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rjx-space-2xl);
}

.rjx-catalog-licensed__text {
  flex: 1 1 22rem;
  min-width: 0;
}

.rjx-catalog-licensed__lead {
  margin-top: var(--rjx-space-md);
  margin-bottom: 0;
  max-width: 34rem;
}

.rjx-catalog-licensed__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
}

#block-acquired .rjx-catalog-intro__head .rjx-section__title {
  max-width: none;
}

.rjx-catalog-marquees {
  flex: 1 1 28rem;
  display: flex;
  gap: var(--rjx-space-md);
  justify-content: flex-end;
  height: 34rem;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.rjx-catalog-marquee {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 11rem;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rjx-poster-radius);
}

.rjx-catalog-marquee__track {
  position: absolute;
  left: 0;
  right: 0;
  inset-inline: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rjx-space-sm);
  animation: rjxMarqueeUp linear infinite;
  animation-duration: 50s;
  will-change: transform;
}

.rjx-catalog-marquee[data-dir="down"] .rjx-catalog-marquee__track {
  top: auto;
  bottom: 0;
  animation-name: rjxMarqueeDown;
  animation-duration: 46s;
}

.rjx-catalog-marquee[style*="--rjx-marquee-index: 2"] .rjx-catalog-marquee__track {
  animation-duration: 40s;
}

.rjx-catalog-marquee__item {
  width: 100%;
}

.rjx-catalog-marquee__item img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--rjx-poster-radius);
  background: var(--rjx-bg-card);
}

@supports not (aspect-ratio: 1 / 1) {
  .rjx-catalog-marquee__item {
    position: relative;
    height: 0;
    padding-bottom: 177.78%;
  }

  .rjx-catalog-marquee__item img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}

@keyframes rjxMarqueeUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@keyframes rjxMarqueeDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(50%);
  }
}

/* Mobile alternative: drop the animated marquees in favour of a static
   poster card grid that mirrors the "Hero IP" section layout. */
.rjx-catalog-licensed__mobile-grid {
  display: none;
}

@media (max-width: 900px) {
  .rjx-catalog-licensed {
    gap: var(--rjx-space-lg);
  }

  .rjx-catalog-licensed__text {
    flex-basis: 100%;
  }

  .rjx-catalog-marquees {
    flex-basis: 100%;
    justify-content: center;
    height: 28rem;
  }

  .rjx-catalog-marquee {
    max-width: 9.5rem;
  }
}

@media (max-width: 767px) {
  .rjx-catalog-licensed {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rjx-space-md);
  }

  /* Phones: keep the PC animated marquee (scaled down) rather than a static
     grid, with the left text stacked full-width like the Hero IP module.
     The column layout makes the flex main-axis vertical, so cancel the base
     `flex: 1 1 28rem` (which would resolve the *height* to a percentage and
     collapse the strip) and drive the height explicitly instead. */
  .rjx-catalog-marquees {
    display: flex;
    flex: none;
    width: 100%;
    order: 2;
    justify-content: center;
    height: 19rem;
  }

  .rjx-catalog-marquee {
    max-width: 7rem;
  }

  .rjx-catalog-licensed__mobile-grid {
    display: none;
  }

  .rjx-catalog-licensed__text {
    order: 0;
    margin-bottom: var(--rjx-space-sm);
  }

  .rjx-catalog-licensed__badge {
    order: 1;
    position: static;
    align-self: flex-start;
  }
}

@media (max-width: 560px) {
  /* Keep all three scrolling columns like the PC layout, just tighter. */
  .rjx-catalog-marquees {
    gap: var(--rjx-space-sm);
    height: 17rem;
  }

  .rjx-catalog-marquee {
    max-width: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rjx-catalog-marquee__track {
    animation: none;
  }
}