/* Rainbow Love 2.0.74 — responsive safety layer.
 * This file intentionally loads last. It keeps the established desktop design
 * intact and only strengthens small-screen touch behaviour and very-wide/TV
 * scaling. No content, card markup or desktop homepage layout is replaced. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Media should never force horizontal page scrolling. */
img,
picture,
video,
iframe,
embed,
object,
svg {
  max-width: 100%;
}

/* Keyboard / TV remote focus: make the selected control/card unmistakable. */
.TPost a:focus-visible,
.MovieList a:focus-visible,
.rl-series-episode-card:focus-visible,
.rl-source-button:focus-visible,
.rl-original-source-button:focus-visible,
.rl-blog-home a:focus-visible,
.rl-home-quick-links a:focus-visible,
.rl-home-row-nav:focus-visible {
  outline: 3px solid var(--rl-accent, #de1212);
  outline-offset: 4px;
}

/* Avoid accidental clipping when translated titles, usernames or metadata are long. */
.rl-title-copy,
.rl-title-description,
.rl-series-episode-copy,
.rl-blog-home,
.rl-blog-home * {
  min-width: 0;
}

/* Phones and small tablets ------------------------------------------------- */
@media (max-width: 767px) {
  /* Comfortable touch targets without changing the visual language. */
  .Button,
  .rl-engagement-button,
  .rl-title-engagement button,
  .rl-source-button,
  .rl-original-source-button,
  .rl-episode-navigation .Button,
  .rl-blog-search button,
  .rl-blog-jump-links a,
  .rl-home-quick-links-track a,
  .rl-home-row-nav {
    min-height: 44px;
  }

  .rl-rating-control button {
    width: 40px !important;
    min-width: 40px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .rl-home-row-nav {
    width: 40px;
    height: 44px;
  }

  /* Player and episode controls must never overflow narrow phones. */
  .rl-original-source-buttons,
  .rl-mobile-source-controls .rl-source-buttons,
  .rl-download-grid,
  .rl-engagement-actions,
  .rl-rating-box {
    max-width: 100%;
  }

  .rl-original-source-button,
  .rl-source-button {
    overflow-wrap: anywhere;
  }

  /* Long post/book content should fit the viewport even with legacy blocks. */
  .entry-content,
  .entry-content > *,
  .tr-story,
  .description {
    max-width: 100% !important;
  }

  .entry-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Very small phones -------------------------------------------------------- */
@media (max-width: 380px) {
  .Container {
    width: calc(100% - 20px) !important;
  }

  .rl-title-copy h1 {
    overflow-wrap: anywhere;
  }

  .rl-blog-search {
    min-width: 0;
  }

  .rl-blog-search input {
    min-width: 0;
  }
}

/* Large desktop / 1080p TV ------------------------------------------------ */
@media (min-width: 1920px) {
  :root {
    --rl-content-max: 1840px;
  }

  .Container {
    max-width: var(--rl-content-max) !important;
  }

  /* Slightly larger interaction targets are easier from couch distance. */
  .Button,
  .rl-engagement-button,
  .rl-source-button,
  .rl-original-source-button,
  .rl-episode-navigation .Button,
  .rl-home-quick-links-track a {
    min-height: 48px;
  }

  .rl-title-copy {
    max-width: 1240px;
  }

  .rl-card-grid.MovieList {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .rl-watch-layout {
    grid-template-columns: minmax(0, 1fr) 440px;
  }

  .rl-blog-shell {
    width: min(1760px, calc(100% - 64px));
  }

  .home .MovieListSldCn {
    height: clamp(650px, 61svh, 820px) !important;
    min-height: 650px;
  }

  .rainbow-slider-picture,
  .MovieListSld .TPost.A .Image figure.rainbow-slider-backdrop .rainbow-slider-picture {
    width: min(92vw, 2100px);
  }

  .MovieListSldCn .rl-slider-copy {
    max-width: min(680px, 42vw);
    transform: translateY(clamp(8rem, 12svh, 10rem));
  }

  .MovieListSldCn .TPost.A .Title {
    font-size: clamp(1.5rem, 1.35vw, 1.9rem);
  }

  .MovieListSldCn .rl-slider-description {
    font-size: .94rem;
  }
}

/* 1440p / 4K / very large Smart TV --------------------------------------- */
@media (min-width: 2560px) {
  :root {
    --rl-content-max: 2360px;
  }

  body {
    font-size: 19px;
  }

  .Container {
    width: min(calc(100% - 80px), var(--rl-content-max));
  }

  .rl-card-grid.MovieList {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .rl-title-copy h1 {
    font-size: clamp(3rem, 2.4vw, 4.5rem);
  }

  .rl-title-description {
    font-size: 1.08rem;
  }

  .rl-title-details--simple .rl-detail-row,
  .rl-title-details--simple .rl-detail-row strong {
    font-size: 1.16rem;
  }

  .rl-watch-layout {
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: 2rem;
  }

  .rl-player-frame,
  .rl-episode-panel,
  .rl-movie-source-panel {
    max-height: 980px;
  }

  .rl-blog-shell {
    width: min(2200px, calc(100% - 96px));
  }

  .rl-blog-grid--books {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .rl-blog-grid--music {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .home .MovieListSldCn {
    height: clamp(780px, 57svh, 1040px) !important;
    min-height: 780px;
  }

  .rainbow-slider-picture,
  .MovieListSld .TPost.A .Image figure.rainbow-slider-backdrop .rainbow-slider-picture {
    width: min(94vw, 3000px);
  }

  .MovieListSldCn .rl-slider-copy {
    max-width: min(820px, 38vw);
  }

  .MovieListSldCn .TPost.A .Title {
    font-size: clamp(1.8rem, 1.2vw, 2.25rem);
  }

  .MovieListSldCn .rl-slider-description {
    font-size: 1.02rem;
    line-height: 1.55;
  }

  .MovieListSldCn .rl-slider-genres {
    font-size: .9rem;
  }

  .MovieListSldCn .rl-slider-actions .Button.TPlay {
    min-height: 42px;
    padding: .6rem .95rem;
    font-size: .86rem;
    text-transform: none;
  }

  .rl-home-row-nav {
    width: 48px;
    height: 58px;
  }
}


/* Native 4K-width browser viewports (some TVs report the full 3840 CSS px). */
@media (min-width: 3200px) {
  :root {
    --rl-content-max: 3000px;
  }

  body {
    font-size: 20px;
  }

  .Container {
    width: min(calc(100% - 128px), var(--rl-content-max));
    max-width: var(--rl-content-max) !important;
  }

  .rl-card-grid.MovieList {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .rl-watch-layout {
    grid-template-columns: minmax(0, 1fr) 560px;
    gap: 2.25rem;
  }

  .rl-player-frame,
  .rl-episode-panel,
  .rl-movie-source-panel {
    max-height: 1150px;
  }

  .rl-blog-shell {
    width: min(2800px, calc(100% - 140px));
  }

  .rl-blog-grid--books {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .rl-blog-grid--music {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home .MovieListSldCn {
    height: clamp(900px, 52svh, 1180px) !important;
    min-height: 900px;
  }

  .rainbow-slider-picture,
  .MovieListSld .TPost.A .Image figure.rainbow-slider-backdrop .rainbow-slider-picture {
    width: min(94vw, 3600px);
  }

  .MovieListSldCn .rl-slider-copy {
    max-width: min(920px, 32vw);
  }

  .MovieListSldCn .TPost.A .Title {
    font-size: clamp(2.25rem, 1.2vw, 2.9rem);
  }

  .MovieListSldCn .rl-slider-description {
    font-size: 1.08rem;
  }
}

/* Remote-style navigation benefits from a stronger focus state on large TVs. */
@media (min-width: 1600px) and (hover: none) {
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline-width: 4px;
    outline-offset: 5px;
  }

  .TPost a:focus-visible .Image,
  .rl-blog-home a:focus-visible img {
    transform: scale(1.025);
  }
}

/* Keep motion modest on devices/users that request it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}